Calling component by navigation props : Part 12

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

renderIndex() {
     this.props.navigation.navigate('Index');
  }

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

{ 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

renderVideoList() {
      this.props.navigation.navigate('VideoList', {
        playlistid: 'LLA34Z3lq8FozSQzDHsSLcmQ'
      });
  }

And now i should replace VideoList with this function

{ 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

 

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

© Copyrights 2014 by STW Services LLP