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() {

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