Category: Reactnative

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”

Calling Screens In Stack Navigator- Here one need to notice. When we use navigation we should call all component through navigator props. If you will include direct then props from one component to another component will not go and we get error when navigate.

So before video play we will change all component call using navigate function . Here is further process

So first import all component pages in index.js

1. import ViewVideo from ‘./src/components/ViewVideo’;
2. import VideoList from ‘./src/components/VideoList’;
3. import Index from ‘./src/components/Index’;

Then define screen for all components

1. YoutubeVideo: {
2. screen: YoutubeVideo
3. },
4. Index: {
5. screen: Index
6. },
7. VideoList: {
8. screen: VideoList
9. }

Now our index.js page code should look like this

1. import React from ‘react’;
2. import { StackNavigator, } from ‘react-navigation’;
3. import { AppRegistry } from ‘react-native’;
4. import YoutubeVideo from ‘./App’;
5. import VideoList from ‘./src/components/VideoList’;
6. import Index from ‘./src/components/Index’;
8. const AppNav = StackNavigator({
9. YoutubeVideo: {
10. screen: YoutubeVideo
11. },
12. Index: {
13. screen: Index
14. },
15. VideoList: {
16. screen: VideoList
17. }
18. });
20. AppRegistry.registerComponent(‘youtube_video’, () => AppNav);

so now our all screen are added in Stack Navigator function. Now we call any screen to load by using navigation props anywhere without import. Now in next post i will show you how we can call any page instead of import

Calling component by navigation props- So first open App.js . In this file we have called Index component so now we will call this using navigation here

So make a function renderIndex before render() function and call it in return

1. renderIndex() {
2. this.props.navigation.navigate(‘Index’);
3. }

And in return () function after header component replace <Index /> with

1. { this.renderIndex() }

So now our Index component from Index.js component will load by navigator

So remove import Index from ‘./src/components/Index’; from this App.js

Now we will do same for VideoList component which is called in Index.js

So again i will create a function in components/Index.js file

1. renderVideoList() {
2. this.props.navigation.navigate(‘VideoList’, {
3. playlistid: ‘LLA34Z3lq8FozSQzDHsSLcmQ’
4. });
5. }

And now i should replace VideoList with this function

1. { this.renderVideoList() }

And remove import from this file 

import VideoList from ‘./VideoList’;

Here you can see I am passing a props of playlistid which i will get on VideoList page like this now

Find this line

const playerid = this.props.playlistid

& change with

1. const playerid = this.props.navigation.state.params.playlistid

To get navigation props value we use this.props.navigation.state.params.propsname

Now in further step we will make a new page to play video and link that page to this navigation . After linking this page to navigation we will call that page on button click and pass a props as video id . After that on View video page we will display video by youtube video id

Creating Component To Display Video – So I added further now we wil make a new file in components folder ViewVideo.js

Now we will start adding code in that so first import React and Component

1. import React, { Component } from ‘react’;
2. import { View, Text } from ‘react-native’;
4. class ViewVideo extends Component {
5. render() {
6. return (
7. <View>
8. <Text>We will play video here…</Text>
9. </View>
10. );
11. }
12. }
14. <span style=”font-weight: 400;”>export default ViewVideo;</span>

Now we will create screen on navigation and call this page. So open index.js on root

So first import  ViewVideo on index

1. import ViewVideo from ‘./src/components/ViewVideo’;

Not add screen for this so add after comma

1. …….
3. YoutubeVideo: {
4. screen: YoutubeVideo
5. },
6. Index: {
7. screen: Index
8. },
9. VideoList: {
10. screen: VideoList
11. },
12. ViewVideo: {
13. screen: ViewVideo
14. }
15. ……

Now our screen is ready to call as navigator. we have button on each video as View. So we will call on Press function to pass props and video id and send to ViewVideo page.

Open VideoList.js file and find code where <Button /> added

Add onPress function in it

1. <Button onPress={() => this.props.navigation.navigate(‘ViewVideo’, { vidid: video.id })}>

this.props.navigation.navigate this function call screen and send to that screen which is added in ‘ ‘ second parameter is props . i have taken vidid as props and assigned video id value to it

So now we will refresh simulator 

Passing Navigation props to screen – Open View Video.js file and get props video id . so our code should be to get value.

this.props.navigation.state.params.vidid;

so add

1. const videoId = this.props.navigation.state.params.vidid;

Now we can call { vidid } and use to display videoid which is clicked on VideoList page. So to check it 

Now in return we will call vidid in Text

So change Text like this

1. <Text>{vidid}</Text>

Now refresh simulator and click on button of any video you will see that video id on that page

Now import WebView from react-native

WebView use to embed any url on page . It is same like we use iframe in normal html code. So we will use youtube embed url to embed video here using this component

Now in return add this code

1. <WebView
2. source={{ uri: ‘https://www.youtube.com/embed/’ + videoId }}
3. />

Modifying Navigation & Header – Copy api key and add in ViewVideo youtube parameter which was null. Now your code is ready to play video.

But you can see a arrow in header of page. If you would like to remove it you nee to pass a option in navigator.

So add this new code

const options = {

 header: null

};

And now we will call this navigation option in StackNavigator so your code should look like this

const AppNav = StackNavigator({

   YoutubeVideo: {

     screen: YoutubeVideo

   },

   Index: {

     screen: Index

   },

   VideoList: {

     screen: VideoList

   },

   ViewVideo: {

     screen: ViewVideo

   }

 },

   {

     navigationOptions: options

   }

);

Final code of screen in index.js

1. import { AppRegistry } from ‘react-native’;
2. import { StackNavigator } from ‘react-navigation’;
3. import YoutubeVideo from ‘./App’;
4. import VideoList from ‘./src/components/VideoList’;
5. import Index from ‘./src/components/Index’;
6. import ViewVideo from ‘./src/components/ViewVideo’;
8. const options = {
9. header: null
10. };
12. const AppNav = StackNavigator({
13. YoutubeVideo: {
14. screen: YoutubeVideo
15. },
16. Index: {
17. screen: Index
18. },
19. VideoList: {
20. screen: VideoList
21. },
22. ViewVideo: {
23. screen: ViewVideo
24. }
26. },
27. {
28. navigationOptions: options
29. }
30. );
33. AppRegistry.registerComponent(‘youtube_video’, () => AppNav);

Now you can see we have blank page when go back , it is because we have Index screen to load then video list screen to load, So now we will do some modifications to use navigator header and remove Index component

Final touch

Now open VideoList.js and change variable with this code

1. const url = ‘http://www.youtube.com/feeds/videos.xml?playlist_id=LLA34Z3lq8FozSQzDHsSLcmQ’;

Now you can see i have directly added playlist id in const url

Well, Now we will create a function to render navbar header

1. renderNavBar() {
2. return (
3. <View style={styles.navBar}>
4. <TouchableOpacity style={styles.logo} >
5. <Text style={styles.text}>Pankaj Bhadouria Masterchef</Text>
6. </TouchableOpacity>
7. </View>
8. );
9. }

and call this function in render function of component where header is called, So remove Header component and add

1. render() {
2. return (
3. <View>
4. { this.renderNavBar() }
5. <ScrollView>
6. {this.renderthumbnails()}
7. </ScrollView>
8. </View>
9. );
10. }

If you want to show video title of youtube on view video page so pass video.title props in onPress function so change like this

1. <Button
2. onPress={() => this.props.navigation.navigate(‘ViewVideo’, { vidid: video.id, vidtitle: video.title })}
3. >

and finally open ViewVideo.js and call this props like this

1. import React, { Component } from ‘react’;
2. import { View, WebView } from ‘react-native’;
3. import NavBar from ‘../common/NavBar’;
5. class ViewVideo extends Component {
6. render() {
7. const videoId = this.props.navigation.state.params.vidid;
8. const videoTitle = this.props.navigation.state.params.vidtitle;
9. return (
10. <View style={{ flex: 1 }}>
11. <NavBar
12. navigator={this.props.navigation}
13. title={videoTitle}
14. />
15. <WebView
16. source={{ uri: `https://www.youtube.com/embed/${videoId}` }}
17. />
18. </View>
19. );
20. }
21. }
23. export default ViewVideo;

Now our application is ready to play youtube video . If you need to find code you can find it on GIT

In this tutorial we learned how to install react native , create component, create design , navigation and parse video xml of youtube

Hope you enjoyed it !!