React Native 0.44 — Stack Navigator example

Question

I\'m trying to create an Android version of my React Native app but I\'m having problems getting my head around the Android navigator.

download sample code

Answer 1

First create a file like appNav.js

import { StackNavigator } from 'react-navigation';

import Splash from './splash.js';
import Home from './home.js';
import Login from './login.js';
import Register from './register.js';
export const AppNav = StackNavigator({
    Splash: { screen: Splash },
    Home: { screen: Home },
    Login: { screen: Login },
    Register: { screen: Register }
});

export default AppNav;

then in index.android.js

import React from 'react';
import { AppRegistry } from 'react-native';
import AppNav from './components/appnav.js'
AppRegistry.registerComponent('AwesomeApp', () => AppNav);

use it like this, in splash.js

in render() function add this to use navigation

const { navigate } = this.props.navigation;

now you can use it under any button like

 navigate('Home')}
          title="Go Home"
        />

this should look like...

    class Splash extends Component {
      static navigationOptions = {
        title: 'Splash', //header:null <= if you want to hide the header
      };
      render() {
        const { navigate } = this.props.navigation;
        return (
          
            Hello, This is splash
             navigate('Home')}
              title="Go Home"
            />
          
        );
      }
    }

you can dig up more here

and its that simple. cheers