2. Getting started

Welcome to the react-native-native-navigation wiki!

Installation

This library is installed the same way as any other library, just run:
npm install --save react-native-native-navigation

Because the library contains native code, you have to link it:
react-native link react-native-native-navigation

Android

For Android, you need to follow two minor steps before you can get started:

1. Go to your project root /android/app/build.gradle and update the following values:
   minSdkVersion 17
   compileSdkVersion 24
   buildToolsVersion "24.0.3"
   compile "com.android.support:appcompat-v7:24.2.1"
2. Now find MainActivity.java in your android directory
   Make sure it imports import com.facebook.react.ReactFragmentActivity; And let the class extend ReactFragmentActivity

That's it!

Simple app

Your main component, often App.js, will be the startpoint for using this library. The contents of your render method is shown until you initialise the navigation, so you could see this as a loading or splash screen. The library should be started in the constructor, and is really straightforward.

First make sure you create another page, Home for example, and make sure it's imported in your App.js.
Add the following import:

import { Navigation, SingleView } from 'react-native-native-navigation'

Inside your constructor, add the following code:

const navigation = new Navigation([Home]);
navigation.start(<SingleView id="home" screen={Home} />);

That's it, running the app, will now show your Home screen.

Redux

I'm assuming you have worked with redux before, you can add it like this:

import { Provider } from 'react-redux';

const navigation = new Navigation([Home], null, Provider, store);

Navigator props

You can access the navigation object through props as well. To reset the app to another structure call:

const reset = true;
this.props.navigation.start(<SingleView id="home" screen={Home} />, reset);

Which is useful when your app should swap to another structure after login for example.