Blog

Creating component to display video : Part 13

November 1, 2018/ stw / Javascript frameworks, Reactnative / 0 comments

Creating Component To Display Video – 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

1. import React, { Component } from ‘react’;
2. import { View, Text } from ‘react-native’;
4. class ViewVideo extends Component {
5. render() {
6. return (
7. <View>
8. <Text>We will play video here…</Text>
9. </View>
10. );
11. }
12. }
14. <span style=”font-weight: 400;”>export default ViewVideo;</span>

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

So first import  ViewVideo on index

1. import ViewVideo from ‘./src/components/ViewVideo’;

Not add screen for this so add after comma

1. …….
3. YoutubeVideo: {
4. screen: YoutubeVideo
5. },
6. Index: {
7. screen: Index
8. },
9. VideoList: {
10. screen: VideoList
11. },
12. ViewVideo: {
13. screen: ViewVideo
14. }
15. ……

Now our screen is ready to call as navigator. we have button on each video as View. So we will call on Press 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

1. <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