CODEWITHSUNDEEP
react-nativebackground
Walter Monecke
Walter Monecke

Reputation: 2558

Setting Background video in react-native

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?

  1. I did npm install --save react-native-video.
  2. 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.

Upvotes: 1

Views: 2849

Answers (1)

Antoine Grandchamp
Antoine Grandchamp

Reputation: 7470

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')}
...
/>

Upvotes: 1

Related Questions