0

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

Ravindhiran
  • 5,304
  • 9
  • 50
  • 82

2 Answers2

3

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

Dpkstr
  • 1,649
  • 1
  • 10
  • 6
  • can you share me which you tested sample app ? – Ravindhiran Jun 01 '17 at 06:33
  • @Ravindhiran :- this is pretty straightforward and working properly with my app.just create a demo project with two or more screens and you will be able to navigate using StackNavigator. But if I get time I shall make a demo and github that. – Dpkstr Jun 01 '17 at 06:56
  • pls refer this url : https://ufile.io/6c4yz but always getting error i dont know what i'm doing wrong. – Ravindhiran Jun 01 '17 at 07:14
  • I checked the zip you need to put the path properly in appNav.js if your home.js is not in same folder then you need to put the proper path that refers to home.js Please check all the paths in all of your files – Dpkstr Jun 01 '17 at 08:39
  • how to implement a custom back button action? this.props.navigation.pop(); not working – Ravindhiran Jun 08 '17 at 07:43
  • use this.props.navigation.goBack(); instead of this.props.navigation.pop(); – Dpkstr Jun 08 '17 at 10:42
  • i want to add Tabbar with stack navigator how can i do this? – Ravindhiran Jun 12 '17 at 05:30
1

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.

Nidhi Patel
  • 1,222
  • 11
  • 17