Getting Started with React Native Navigation V1 – Handlebar Labs – Medium

Getting Started with React Native Navigation V1:  #chstech #reactnative

  • This might not work for some people and others may just prefer a native option.When React Native was first released the only navigation solution was NavigatorIOS, but it’s no longer being maintained and it only worked on iOS.
  • Airbnb has native navigation, but it’s still very new.That’s where React Native Navigation comes in — it uses native navigators on iOS and Android and has an easy to use Javascript API.
  • gradle, update the dependencies with compile You also want to update compileSdkVersion and buildToolsVersion, located in android.Next modify MainActivity.javaWe’ve also got to modify MainApplication.java.Then add the following to the body of MainApplication.javaUsageReact Native Navigation changes a bit of how React Native works (as you can tell by the installation).
  • js we’ll create our function that actually registers the application.The first thing we want to do in that function is register our screens with React Native Navigation.
  • In screens that were registered with Navigation you have access to this.props.navigation on which you simply want to “push” a new screen to it.ModalOpening a modal is as easy as pushing a new screen onto the stack.In ConclusionI’ve just scratched the surface of React Native Navigation and I’m excited to learn more about it.

There are quite a few options out there for Navigation in React Native. I typically default to React Navigation (tutorial on getting started) but that’s a Javascript based routing solution. This…

@syntaxcon: Getting Started with React Native Navigation V1: #chstech #reactnative

There are quite a few options out there for Navigation in React Native. I typically default to React Navigation (tutorial on getting started) but that’s a Javascript based routing solution. This might not work for some people and others may just prefer a native option.

When React Native was first released the only navigation solution was NavigatorIOS, but it’s no longer being maintained and it only worked on iOS. Airbnb has native navigation, but it’s still very new.

That’s where React Native Navigation comes in — it uses native navigators on iOS and Android and has an easy to use Javascript API. I’ve never used it before but thought I would share my experiences getting up and running with it.

The final code is available on Github.

Now we need to modify the AppDelegate.m.

and add the following to it.

We’ve also got to modify MainApplication.java.

we’ll create our function that actually registers the application.

. Inside of that config we can pass a “tabs” array which represents the tabs of our application. All of the keys are pretty self explanatory so I won’t cover them. Full documentation is available here. The only thing I’ll note is that screen must align with a screen we registered previously.

Note: I’ve added a few images to the app. You can get those in the Github repo.

on which you simply want to “push” a new screen to it.

Opening a modal is as easy as pushing a new screen onto the stack.

I’ve just scratched the surface of React Native Navigation and I’m excited to learn more about it. There are certainly benefits to going the native route, though installation can be a pain. I’m interested to see how flexible it is and what kind of interactions we can use with it. Until next time!

Getting Started with React Native Navigation V1 – Handlebar Labs – Medium