Blog

Navigation Screen Using React Navigation : Part 10

December 12, 2018/ Javascript frameworks, Reactnative / 0 comments

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

1. import { StackNavigator, } from ‘react-navigation’;

Now create new screen component in index.js

1. const AppNav = StackNavigator({
2. YoutubeVideo: {
3. screen: YoutubeVideo
4. }
5. });

And in app registry change component name AppNav

1. 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

1. import { StackNavigator, } from ‘react-navigation’;
2. import { AppRegistry } from ‘react-native’;
3. import YoutubeVideo from ‘./App’;
5. const AppNav = StackNavigator({
6. YoutubeVideo: {
7. screen: YoutubeVideo
8. }
9. });
11. 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”