Setting Background video in react-native - react-native

Question

I am sorry if this is such a newbie question but I am really frustrated with setting up a background-video in my react native app.
Starting off with the documentation of the react native video library.
Is it bad documentation or am I having a really hard time understanding how to set it up?
I did npm install --save react-native-video.
I ran react-native link
I checked the other java files and they already have what he notes out.
And his reference to Windows, I have no idea what or which user case scenario should do what he states.
To the code:
In my Log In Component I want to have a background video.
This is my code so far:
import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import Video from 'react-native-video';
class LoginComponent extends Component {
render() {
const {
containerStyle,
introTextContainerStyle,
introTextStyle,
introTextHighlightStyle,
loginButtonsContainerStyle,
backgroundVideo
} = styles;
return (
<View style={ containerStyle }>
<Video source={{uri: "../assets/background.mp4"}}
ref={(ref) => {
this.player = ref
}}
rate={1.0}
volume={1.0}
muted={false}
resizeMode="cover"
repeat={true}
style={backgroundVideo}
/>
<View style={ introTextContainerStyle }>
<Text style={ introTextStyle }>
Tus problemas
</Text>
<Text style={ introTextHighlightStyle }>
Lisdos's
</Text>
<Text style={ introTextStyle }>
en un abrir y cerrar de ojos
</Text>
</View>
<View style={ loginButtonsContainerStyle }>
<TouchableOpacity>
<Text>Log In with Facebook</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = {
containerStyle: {
height: '100%',
padding: 20
},
introTextContainerStyle: {
borderColor: 'black',
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center',
height: '50%'
},
introTextStyle: {
fontSize: 24,
textAlign: 'center',
lineHeight: 40
},
introTextHighlightStyle: {
fontSize: 24,
textAlign: 'center',
fontWeight: '700',
color:'gold'
},
loginButtonsContainerStyle: {
borderColor: 'blue',
borderWidth: 1,
height: '50%',
justifyContent: 'center',
alignItems: 'center'
},
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
}
}
export default LoginComponent;
Without the tag the component renders just fine but I keep hitting the infamous red screen stating:
Cannot read property 'Constants' of undefined
Am I missing something in the setup or in the tag? I my uri wrong?
Any help is appreciated.

Answer 1

The problem is your sourcetag. Since you load a file with the RN Asset system, you need to directly import your file instead of using uri.
I usually do it this way (and I recommend you to do so):
import background from '../assets/background.mp4';
...
<Video source={background}
...
/>
Or you can import your file directly in your source tag :
<Video source={require('../assets/background.mp4')}
...
/>