Kureev / Kureev/react-native-navbar

The way component should evolve

Open
#109 9 comments 3 reactions 0 assignees View on GitHub
discussion
Dominant language
JavaScript
Stars
1.9k
Forks
318
PR merge metrics
No merged PRs in 30d

Description

Dear community,

Finally, I had a chance to look deeper into guidelines about navigation bars from [Apple](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html#//apple_ref/doc/uid/TP40006556-CH12-SW3) and [Google](https://www.google.com/design/spec/layout/structure.html#structure-app-bar). So, I came to some conclusions and ideas I wish to share with you.
## Android

Well, as far as I know, Android tries to implement a Material Design concept in their applications. Let's help them! As you can see from the Google's guideline, MD navigation bar looks slightly different from the iOS guideline, so it requires a different approach for building this interface element:
- Navbar - Container for the navbar
- NavIcon - Left icon (before the title), as it is specified in the spec
- Title - Well, guess what it is :wink:
- ActionIcons - Container docked to right side for action icons
- MenuIcon - Standard icon for the menu as it is specified in the spec

``` jsx


Some title


{}} />
{}} />

{}}/>

```

Should give you this interface:

![image](https://cloud.githubusercontent.com/assets/2273613/11172394/33b9e116-8c07-11e5-87e4-ff55cc8d2317.png)
## iOS

For iOS we have a different approach. In the Apple spec they don't specify anything about how the navbar should looks like. The only thing I've figured out is that it can contain whatever you want + amount of visible elements may vary depends by the orientation. Well, the best way (IMO) to implement it is to allow developer to decide what he wants there. So I propose to have a few pre-defined components developers can use:
- Navbar - same as for the Android
- Title - same as for the Android
- NavbarButton - Super-simple wrapper over [TouchableOpacity component](https://facebook.github.io/react-native/docs/touchableopacity.html) with default styling.
- PortraitMode / LandscapeMode - containers for LM/PM. I think it's intuitive how they should work.

``` jsx

Some magic







```
## Other

Besides this, I'd like to include icons to all iOS and Android versions. For this purpose I'd like to use [react-native-icons](https://github.com/corymsmith/react-native-icons), which is an awesome component with _a lot of icons_ inside. In iOS you'll be able to use them for left-right arrows in standard buttons, in Android version you'll have them as a `` and ``.

cc @brentvatne @grabbou

Contributor guide

No contributing guide indexed for this repository

Research direction

No repository files or tests are named. Start by reviewing the current navbar component API, then compare the proposed Android and iOS structures with the linked Apple and Google navigation guidelines and the react-native-icons dependency. Done would require an agreed component design and implementation scope.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.