CODEWITHSUNDEEP
androidreact-native
Ravindhiran
Ravindhiran

Reputation: 5384

React Native 0.44 -- Stack Navigator example

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

Upvotes: 0

Views: 2228

Answers (2)

Nidhi Patel
Nidhi Patel

Reputation: 1292

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.

Upvotes: 1

Dpkstr
Dpkstr

Reputation: 1659

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

Upvotes: 3

Related Questions