Blog

Modifying Navigation & Header : Part 15

October 2, 2018/ stw / Javascript frameworks, Reactnative / 0 comments

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 !!