Modifying Navigation & Header : Part 15

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

import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import YoutubeVideo from './App';
import VideoList from './src/components/VideoList';
import Index from './src/components/Index';
import ViewVideo from './src/components/ViewVideo';

const options = {
  header: null
};

const AppNav = StackNavigator({
    YoutubeVideo: {
      screen: YoutubeVideo
    },
    Index: {
      screen: Index
    },
    VideoList: {
      screen: VideoList
    },
    ViewVideo: {
      screen: ViewVideo
    }

},
{
  navigationOptions: options
}
);


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

 

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

renderNavBar() {
      return (
          <View style={styles.navBar}>
              <TouchableOpacity style={styles.logo} >
                  <Text style={styles.text}>Pankaj Bhadouria Masterchef</Text>
              </TouchableOpacity>
          </View>
      );
  }

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

render() {
    return (
      <View>
          { this.renderNavBar() }
          <ScrollView>
              {this.renderthumbnails()}
          </ScrollView>
      </View>
    );
  }

 

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

<Button
 onPress={() => this.props.navigation.navigate('ViewVideo', { vidid: video.id, vidtitle: video.title })}
 >

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

import React, { Component } from 'react';
import { View, WebView } from 'react-native';
import NavBar from '../common/NavBar';

class ViewVideo extends Component {
  render() {
    const videoId = this.props.navigation.state.params.vidid;
    const videoTitle = this.props.navigation.state.params.vidtitle;
    return (
            <View style={{ flex: 1 }}>
                <NavBar
                    navigator={this.props.navigation}
                    title={videoTitle}
                />
                <WebView
                    source={{ uri: `https://www.youtube.com/embed/${videoId}` }}
                />
            </View>
        );
  }
}

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

© Copyrights 2014 by STW Services LLP