react-native-video crashes application when instantiated

Question

Current behavior

When I attempt to invoke the Video library (import { Video } from 'react-native-video') my application breaks with the error of Module AppRegistry is not a registered callable module (calling runApplication)

Reproduction steps

My Video component is as follows:

import React, { Component } from 'react';
import { Video } from 'react-native-video';
import {
  View,
  Dimensions,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Animated,
  Text,
  Slider,
  NetInfo,
  StyleSheet
} from 'react-native';

class VideoPlayer extends Component {
  state = {
    paused: true
  };

  render() {
    const videoWidth = Dimensions.get('window').width;
    const videoHeight = videoWidth * (9 / 16);

    const styles = StyleSheet.create({
      videoContainer: {
        width: videoWidth,
        height: videoHeight,
        backgroundColor: 'rgb(255,255,255)',
        paddingTop: 0
      }
    })

    return (
      <Video
        source={{ uri: 'https://www.youtube.com/embed/3NhHqPA8nIs?rel=0&autoplay=0&showinfo=0&controls=0' }}
        paused={this.state.pause}
        style={styles.videoContainer}
      />
    )
  }

}

export default VideoPlayer;

and App.js

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Header from './components/Header';
import VideoPlayer from './components/Video';

export default class App extends Component {
  render () {
    return (
      <View style={styles.container}>
      <View style={styles.headerContainer}>
        <Header />
      </View>
      <View style={styles.videoContainer}>
        <VideoPlayer />
      </View>
        <Text style={{color: 'white'}}>Hello Wilbur!</Text>
        <Text style={{color: 'white'}}>Some text</Text>
        <Text style={{color: 'white'}}>some other text</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgb(4,4,4)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerContainer: {
    position: 'absolute',
    flex: 1,
    top: 0,
    height: 72,
    alignSelf: 'stretch',
    paddingTop: 20,
    paddingLeft: 12,
    paddingRight: 12,
    flexDirection: 'row',
    backgroundColor: 'white'
  },
  videoContainer: {
    flex: 0,
    backgroundColor: 'rgb(4,4,4)',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 0
  }
});

If I do not instantiate the component I can render the application fine, and even make it work with a WebView, however when I attempt to import my VideoPlayer component I receive the aforementioned error.

Expected behavior

A functional video component, or at least an error related to the video player.

Platform

• iOS

Video sample

https://www.youtube.com/embed/3NhHqPA8nIs?rel=0&autoplay=0&showinfo=0&controls=0

Does anyone see what I'm doing wrong? Thank you.

Answer 1

react-native-video does not currently support youtube... https://github.com/react-native-community/react-native-video/issues/1147