On expo android client video not shown if you don't set width and height

Expo Development Tools
1

Hi!

import { Video } from 'expo-av'
// this works only in web 
<Video  source={{ uri }} />
// this works both: web and android client, but i don't need set up width and height 
<Video  style={{ width: 300, height: 150 }} source={{ uri }} />

How to avoid setting up manually width and height?
If I do resizeMode="stretch" and wrong height, it looks ugly…

p.s.

        "expo": "^40.0.0",
        "expo-av": "~8.7.0",
        "react-native": "0.63.4",
        "react-native-web": "~0.13.12",
2

try this solution


import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
    player : {
        position        : 'absolute',
        height          : '100%',
        width           : '100%'
    }
});
<View style={styles.player}>
  <Video/>
</View>
3

it doesn’t work . on web I see square video. on android client – nothing.

4

I’m sorry for stupid question. I hope I have found a solution:

import { View, Text, useWindowDimensions } from 'react-native'
(...)
const { width: screenWidth} = useWindowDimensions()

	return (
		<View>
				<Video
					resizeMode='stretch'
					useNativeControls
					style={{
						width: screenWidth,
						height: (screenWidth * 9) / 16
					}}
					source={{ uri }}
				/>
		</View>
	)

At least it works how I expect.

3 Likes
5

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.