Back to Blog

Calling Screens in StackNavigator : Part 11

Here one need to notice. When we use naviagtion 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’;
  7. const AppNav = StackNavigator({
  8. YoutubeVideo: {
  9. screen: YoutubeVideo
  10. },
  11. Index: {
  12. screen: Index
  13. },
  14. VideoList: {
  15. screen: VideoList
  16. }
  17. });
  18. AppRegistry.registerComponent(‘youtube_video’, () => AppNav);

so now our all screen are added in StackNavigator 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

Back to Blog
top