Creating component to display video : Part 13

So I added further now we wil make a new file in components folder ViewVideo.js

Now we will start adding code in that so first import React and Component

 

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class ViewVideo extends Component {
 render() {
   return (
       <View>
          <Text>We will play video here...</Text>
       </View>
    );
 }
}

export default ViewVideo;

Now we will create screen on navigation and call this page. So open index.js on root

So first import  ViewVideo on index

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

Not add screen for this so add after comma

…….

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

Now our screen is ready to call as navigator. we have button on each video as View. So we will call onPress function to pass props and video id and send to ViewVideo page

Open VideoList.js file and find code where <Button /> added

Add onPress function in it

 

<Button onPress={() => this.props.navigation.navigate('ViewVideo', { vidid: video.id })}>

 

this.props.navigation.navigate this function call screen and send to that screen which is added in ‘ ‘ second parameter is props . i have taken vidid as props and assigned video id value to it

 

So now we will refresh simulator 

© Copyrights 2014 by STW Services LLP