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

import ViewVideo from './src/components/ViewVideo';
import VideoList from './src/components/VideoList';
import Index from './src/components/Index';

Then define screen for all components

YoutubeVideo: {
      screen: YoutubeVideo
    },
    Index: {
      screen: Index
    },
    VideoList: {
      screen: VideoList
    }

Now our index.js page code should look like this

import React from 'react';
import { StackNavigator, } from 'react-navigation';
import { AppRegistry } from 'react-native';
import YoutubeVideo from './App';
import VideoList from './src/components/VideoList';
import Index from './src/components/Index';

const AppNav = StackNavigator({
    YoutubeVideo: {
      screen: YoutubeVideo
    },
    Index: {
      screen: Index
    },
    VideoList: {
      screen: VideoList
    }
    });

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

 

© Copyrights 2014 by STW Services LLP