Blog

Calling Screens in Stack Navigator : Part 11

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

Calling Screens In Stack Navigator- Here one need to notice. When we use navigation we should call all component through navigator props. If you will include direct then props from one component to another component will not go and we get error when navigate.

So before video play we will change all component call using navigate function . Here is further process

So first import all component pages in index.js

1. import ViewVideo from ‘./src/components/ViewVideo’;
2. import VideoList from ‘./src/components/VideoList’;
3. import Index from ‘./src/components/Index’;

Then define screen for all components

1. YoutubeVideo: {
2. screen: YoutubeVideo
3. },
4. Index: {
5. screen: Index
6. },
7. VideoList: {
8. screen: VideoList
9. }

Now our index.js page code should look like this

1. import React from ‘react’;
2. import { StackNavigator, } from ‘react-navigation’;
3. import { AppRegistry } from ‘react-native’;
4. import YoutubeVideo from ‘./App’;
5. import VideoList from ‘./src/components/VideoList’;
6. import Index from ‘./src/components/Index’;
8. const AppNav = StackNavigator({
9. YoutubeVideo: {
10. screen: YoutubeVideo
11. },
12. Index: {
13. screen: Index
14. },
15. VideoList: {
16. screen: VideoList
17. }
18. });
20. AppRegistry.registerComponent(‘youtube_video’, () => AppNav);

so now our all screen are added in Stack Navigator function. Now we call any screen to load by using navigation props anywhere without import. Now in next post i will show you how we can call any page instead of import