The way component should evolve

[Kureev]

Dear community,

Finally, I had a chance to look deeper into guidelines about navigation bars from Apple and Google. 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

<Navbar>
  <NavIcon/>
  <Title>Some title</Title>

  <ActionIcons>
    <SearchButton handler={() => {}} />
    <LikeButton handler={() => {}} />
  </ActionIcons>
  <MenuIcon handler={() => {}}/>
</Navbar>

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 with default styling.
• PortraitMode / LandscapeMode - containers for LM/PM. I think it's intuitive how they should work.

<Navbar>
  <NavbarButtonA />

  <Title>Some magic</Title>

  <PortraitMode>
    <NavbarButtonB />
  </PortraitMode>

  <LandscapeMode>
    <NavbarButtonB />
    <NavbarButtonC />
    <NavbarButtonD />
  </LandscapeMode>
</Navbar>

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, 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 <NavIcon /> and <MenuIcon />.

cc @brentvatne @grabbou

[Kureev]

What do you think about Android approach? Would it be useful for you, @tgoldenberg @niftylettuce?

[niftylettuce]

That might be cool - I don't really have a use for this anymore as I rolled my own though, maybe in future on my next React Native app.

[tgoldenberg]

Hi @Kureev, I think this is an excellent approach. I think you have it spot on by adhering to the MD guidelines, and this makes for a much more professional look. To tell the truth, I have been using this project with the iOS styling on Android apps for fun, but if I was going to put something out professionally I would want to follow exactly what you are saying.

I will say that you may want to look into react-native-vector-icons, I think they might have a slight edge of the react-native-icons package in terms of usability, though that's my individual opinion.

@niftylettuce, care to share with us what you came up with? Android development with RN is still a wide open area, so any examples would help a lot.

[dgilperez]

Great work, I'd love to see this implemented. MD implementation would be a lovely thing to have for this component.

+1 to using react-native-vector-icons, for the handful reasons explained in the project's README.

I'm just starting with RN but if I can help, let me know.

[yogiben]

+1

[BilalBudhani]

Hey @Kureev,

This proposal looks really neat. Great work. However, I would recommend rather than going with handler attribute, let's stick with onPress. It sounds more appropriate and is a standard in most of the touch responder components. What do you think?

Also, react-native-vector-icons is what even I prefer. :+1:

[jineshshah36]

I actually forked your repo because I needed something that worked with android and iOS today. I think I have created something very similar to what you propose. Maybe we can work together or combine? https://github.com/jineshshah36/react-native-nav

[jbrodriguez]

I like this approach a lot https://github.com/jineshshah36/react-native-nav

[Kureev]

Yeah, I like it. You can take a look on https://github.com/react-native-fellowship/react-native-navbar/tree/feature/new-navbar branch I started few months ago :smiley: It works for iOS, but I want to roll out a version for Android as well.