Kureev / Kureev/react-native-navbar
The way component should evolve
- 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:

## 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