I am playing a video that takes up the entire screen (full height, and width of the device).I would also like to display a couple of buttons and the videos description (Kind of like TikTok does).
What would be the best way to add text and buttons over the Video? I am currently playing around the position and bottom attributes but I noticed that it does not look look good on all sizes as the bottom value doesn't work for every screen size.
This is what I currently have:
<View style={{flex: 1, height: height, width: width, backgroundColor: colors.BLACK}}>
<VideoPlayer
style={StyleSheet.absoluteFill}
paused={index !== this.state.currentVisibleIndex}
source={{uri: item.mediaUri}}
repeat={true}
disableFullscreen
disableVolume
onBack={() => this.props.navigation.goBack()}
/>
</View>
<View style={{position: 'absolute', bottom: 125, justifyContent: 'flex-start', alignItems: 'flex-start'}}>
<Text style={styles.username_text}>@{item.username}</Text>
<Text style={styles.description_text}>{item.description}</Text>
</View>