I'm using Expo with React Native, testing on the Android simulator on a Galaxy S8+.

I'm using the Video ponent from the Expo library, as I couldn't get react-native-video to work.

I'm using the following code: <Video style={styles.video} source={{ uri: url }} isMuted={false} shouldPlay isLooping usePoster={true} useNativeControls={false} resizeMode="contain" />

styles.video is simply {width: window.width, height: 650}

Which displays the following: Screenshot of issue

But, if you load the video in, it actually fits the whole window and is sized the way I want, but only for half a second. After that it immediately goes small like in the screenshot. I've tried cover and center as well, and it hasn't worked. Any help would be appreciated.

Edit: More Details:

What I want it to look like is something like this, which I have working for images: Image of what it should look like

With images, I'm using the default Image ponent from React Native in the following way: <Image style={styles.image} source={{ uri: data.url }} resizeMode="contain" />

And styles.images is identical to styles.video at the moment.

I'm using Expo with React Native, testing on the Android simulator on a Galaxy S8+.

I'm using the Video ponent from the Expo library, as I couldn't get react-native-video to work.

I'm using the following code: <Video style={styles.video} source={{ uri: url }} isMuted={false} shouldPlay isLooping usePoster={true} useNativeControls={false} resizeMode="contain" />

styles.video is simply {width: window.width, height: 650}

Which displays the following: Screenshot of issue

But, if you load the video in, it actually fits the whole window and is sized the way I want, but only for half a second. After that it immediately goes small like in the screenshot. I've tried cover and center as well, and it hasn't worked. Any help would be appreciated.

Edit: More Details:

What I want it to look like is something like this, which I have working for images: Image of what it should look like

With images, I'm using the default Image ponent from React Native in the following way: <Image style={styles.image} source={{ uri: data.url }} resizeMode="contain" />

And styles.images is identical to styles.video at the moment.

• javascript
• css
• react-native
• video
• expo

• should the height be specified in pixels? height: 650px – Carol McKay Commented Nov 27, 2018 at 6:37
• Please share a sample design of your screen or denote where exactly you want to place the Video Player ! – Ron Astle Lobo Commented Nov 27, 2018 at 6:38
• Also, should that be window.innerWidth ? instead of window.width w3schools./jsref/prop_win_innerheight.asp – Carol McKay Commented Nov 27, 2018 at 6:39
• @Ron I've added some clarifying details to the original post, with a screenshot of roughly what it should look like. – Oscar Wong Commented Nov 27, 2018 at 17:05
• @CarolMcKay using numbers / "window.width" works on React Native, at least in my experience / to my knowledge. – Oscar Wong Commented Nov 27, 2018 at 17:06

3 Answers 3

resizeMode="contain" for the video

And flex:1 for the style

You can utilize another property videoStyle which lets you style the Video Component directly.

Add your style to that property, it should work

<Video ... videoStyle={{width: window.width, height: 650}} />

According to your Screen, your front-end could be designed like this.

return(
   <View style={{ width: "100%",height: "100%", flex: 1}}>
      <View style={{flex:0.7,justifyContent:'center'}}>
          <Video
           source={{ uri: url }}
           isMuted={false} 
           shouldPlay
           isLooping
           usePoster={true} 
           useNativeControls={false}
           />
       </View>
      <View style={{flex:0.1}}/>
      <TouchableOpacity style={{flex:0.1,paddingHorizontal:10}}>
           <View style={{width:"100%",justifyContent:"center",alignItems:"center",backgroundColor:"blue"}}>
            <Text>Next</Text>
           </View>
      </TouchableOpacity>
   </View>
 )

Do not forget to import TouchableOpacity!