CODEWITHSUNDEEP
react-nativevideoexpo
Chris
Chris

Reputation: 257

How to set a video as a background on React Native

I want to set a video as a background but I just could set a video on the screen, not as a background, and I want to have some buttons on it.

I have seen some questions but using react-native video library, and I am using 

import { Video } from 'expo';

I want to play a video as a background with expo library, hope somebody can help me, thanks in advance

Upvotes: 2

Views: 1492

Answers (1)

Orgil
Orgil

Reputation: 711

You can achieve it using zIndex, following code will render video as background and play button on top of it. React native styling works same as web CSS, You should read more about css positioning here.

 render() {
   return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button}>
        <Text>Play</Text>
      </TouchableOpacity>

      <Video style={styles.video} />
    </View>
   );
  }

  const styles = {
    container: {
     position: 'relative'
    },
    video: {
     position: 'absolute',
     top: 0,
     right: 0,
     left: 0,
     bottom: 0,
     zIndex: 1,
    },
    button: {
      position: 'relative',
      zIndex: 2,
    }
 };

Upvotes: 4

Related Questions