Reputation: 687
constructor(props) {
super(props);
this.state = {
screenWidth: Dimensions.get('window').width,
heightScaled: null,
};
}
<View style={styles.videoView}>
<Video
source={video}
ref={(ref) => { this.player = ref }}
repeat={true}
resizeMode={"contain"}
style={{
width: this.state.screenWidth,
height: this.state.heightScaled,
}}
onLoad={response => {
const { width, height } = response.naturalSize;
const heightScaled = height * (this.state.screenWidth / width);
response.naturalSize.orientation = "horizontal";
this.setState({ heightScaled: heightScaled });
}}
/>
</View>
styles
videoView: {
flex: 1,
width: Dimensions.get('window').width,
height: 350
}
I'm fetching video from api and then using it in a video component using react-native-video
. I don't know how I can resize my video to fit in a view without stretching the video.
Here is the result of the above code.
I don't want my video to cross the red line I marked in the image. Please help me. I'm stuck on this problem from the past 3 days.
Upvotes: 1
Views: 5602
Reputation: 98
Adding one more <View />
inside the parent <View />
containing <Video />
will solve the overflow of the video.
<View style={styles.videoView}>
<Video
resizeMode={"contain"}
style={{
flex: 1
}}
/>
<View style={{flex: 1}}>
{/* Components after red line can be rendered here */}
</View>
</View>
Upvotes: 3