Video.js

import React, { Component } from "react";
import {
  Modal,
  View,
  Text,
  WebView,
  Dimensions,
  TouchableOpacity,
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
import { formatDate } from "../utils/helpers";

const { height, width } = Dimensions.get("window");

const Video = (props) => {
  console.log("Should I be shown?", props.isVisible);
  return (
    <Modal
      visible={props.isVisible}
    >
      <View style={{flex: 1, padding: 16}}>
        <View style={{
          paddingTop: 16,
          paddingRight: 8,
          paddingBottom: 16,
          paddingLeft: 8,
          marginBottom: 8,
          alignItems: "flex-end",
        }}>
          <TouchableOpacity onPress={() => props.closeVideo()} >
            <Icon
              name="ios-close-outline"
              size={45}
            />
          </TouchableOpacity>
        </View>
        <View style={{ height: (width - 32) * 9 / 16}}>
          <WebView
            source={{uri: ""}}
            scrollingEnabled={false}
          />
        </View>
        <Text style={{fontSize: 17, marginTop: 16}}>{props.title}</Text>
        <Text style={{fontSize: 13, marginBottom: 16,}}>Last Watched: {formatDate(props.lastWatched)}</Text>
      </View>
    </Modal>
  )
}

export default Video;