Blog

Calling component by navigation props : Part 12

November 11, 2018/ Javascript frameworks, Reactnative / 0 comments

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