Navigation Screen Using React Navigation : Part 10

Navigation in react native is based on many plateform which you can install and use from npm. I am going to use here react navigator

 

So open terminal or command prompt and run this command

 

npm install –save react-navigation

 

If you want to read more about react navigation please go here https://facebook.github.io/react-native/docs/navigation.html

 

When installation is complete. Please open root file index.js and we will create Screen and use it . Here i am going to use react-navigation to import StackNavigator so you can easily understand how navigator work in react native

 

To define screen we will use index.js and in that file we will define YoutubeVideo component to load first. We have added YoutubeVideo in App.js and already imported on index.js on root

 

So first import stack navigator  in index.js on top. So after this line

 

import { AppRegistry } from ‘react-native’;

 

add

import { StackNavigator, } from 'react-navigation';

Now create new screen component in index.js

const AppNav = StackNavigator({
    YoutubeVideo: {
      screen: YoutubeVideo
    }
});

And in app registry change component name AppNav

AppRegistry.registerComponent('youtube_video', () => AppNav);

Now refresh simulator and see same screen will show

 

It means you are in right direction and react navigator is working

So your index.js file whole code should look like this

import { StackNavigator, } from 'react-navigation';
import { AppRegistry } from 'react-native';
import YoutubeVideo from './App';

const AppNav = StackNavigator({
    YoutubeVideo: {
      screen: YoutubeVideo
    }
});

AppRegistry.registerComponent('youtube_video', () => AppNav);

Note: “if you are getting 500 error after installation of React Navigation, Please delete it and re-install by npm command. To delete please use command npm uninstall –save react-navigation”

 

© Copyrights 2014 by STW Services LLP