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

<Button
          onPress={() => 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 (
          <View>
            <Text>Hello, This is splash</Text>
            <Button
              onPress={() => navigate('Home')}
              title="Go Home"
            />
          </View>
        );
      }
    }

you can dig up more here

and its that simple. cheers

Answer 2

In AppNav file you have written wrong code for import, do as below AppNav.js

AppNav.js

import Splash from './Splash';
import Home from './Home';
import Login from './Login';
import Register from './Register';

Second problem is you haven't export your files. Add last line in All files

Home.js

export default Home;

Splash.js

export default Splash;

Login.js

export default Login;

Register.js

export default Home;

I have done this changes in your code and its works.