Create VideoPlaybackScreen

The next functionality that we want to add to the app, is the ability to launch a video player. For this tutorial, you’ll create a dedicated VideoPlaybackScreen that can host your preferred video player component. We recommend using the W3C Media API for its cross-platform compatibility and standardized interface, though you’re free to integrate any supported player that meets your requirements.

Create a new file called VideoPlaybackScreen.tsx in the screens folder.

src/
├── components/
│   ├── Header.tsx
│   ├── VideoCard.tsx
│   └── index.ts
├── screens
│   ├── LandingScreen.tsx
│   ├── VideoDetailScreen.tsx
│   ├── VideoPlaybackScreen.tsx
│   └── index.ts
└── App.tsx

Open the VideoPlaybackScreen.tsx and add our import statements for React, View, and StyleSheet from ‘react-native’, and the Vega VideoPlayer component.

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

Create the VideoPlaybackScreen component which returns a placeholder text element wrapped in a View.
Export the VideoPlaybackScreen.
Create a StyleSheet called styles after the VideoPlaybackScreen arrow function.
Add a style called playerContainer and playerPlaceholder and assign the style props to the View and Text resectively.

const VideoPlaybackScreen = () => {
  return (
    <View>
      <Text>Player Placeholder<Text/>
    </View>
  );
}

const styles = StyleSheet.create({
  playerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
  playerPlaceholder:{
    color: 'white'
    fontSize: 30,
  }
});

export default VideoPlaybackScreen;

Exiting the VideoPlaybackScreen

We need to provide a way to get back to the LandingScreen from the VideoPlaybackScreen. In reality, a customer will be able to use the “back” button on their remote to go back (or go “up” on the D-Pad and then choose to go back). However for now, we will create a basic “Back” button on-screen.

Add a View that contains a Button called “Back”
Set the Button’s onPress prop to be an arrow function that calls navigation.goBack().

<View>
  <Button title="Back" onPress={() => navigation.goBack()} />
</View>

Give the View a style prop of buttonContainer
Add the buttonContainer to the StyleSheet with the following values:

const styles = StyleSheet.create({
  buttonContainer: {
    width: 100,
    position: 'absolute',
    top: 10,
    left: 10,
  },
});

Export VideoPlaybackScreen

Dont forget to export the VideoPlaybackScreen in the index.ts

import LandingScreen from './LandingScreen';
import VideoDetailScreen from './VideoDetailScreen'
import VideoPlaybackScreen from './VideoPlaybackScreen'

export {
    LandingScreen,
    VideoDetailScreen,
    VideoPlaybackScreen
}

The VideoPlaybackScreen.tsx code should look like this:

import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import {Button} from '../components';

const VideoPlaybackScreen = ({navigation}: any) => {
  return (
    <View style={styles.playerContainer}>
      <Text style={styles.playerPlaceholder}>Player Placeholder</Text>
      <View style={styles.buttonContainer}>
        <Button buttonText="Back" pressFunction={() => navigation.goBack()} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  playerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonContainer: {
    width: 100,
    position: 'absolute',
    top: 10,
    left: 10,
  },
  playerPlaceholder: {
    color: 'white',
    fontSize: 30,
  },
});

export default VideoPlaybackScreen;