In react native, how do you set a video component to the background of the page?

Question

  render() {
    return (

      <View style={styles.container}>


        <Video
          source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
          rate={1.0}
          volume={1.0}
          muted={false}
          resizeMode="cover"
          repeat
          style={{ width: 300, height: 300 }}
        />


      </View>
    );
  }
}

I simply want to make the video the background of the screen. I'm using a windows, so I'm a little lost on how to do that without Xcode. Is there an alternative way?

Answer 1

In case you are using react-native-video library you can set the Video component with position: 'absolute'. See this example:

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import Video from 'react-native-video';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>

        <Video
          source={require('./video.mp4')}
          rate={1.0}
          volume={1.0}
          muted={false}
          resizeMode={"cover"}
          repeat
          style={styles.video}
        />

        <View style={styles.content}>
          <Text style={styles.text}>Hello</Text>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  video: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('App', () => App);

I tested it and works well:

Screenshot