I want to render a fullscreen video playback with custom buttons overlayed on top of the video playback (for example a tick mark/cross/circle which I want to render using the TouchableOpacity). I can’t seem to add any sub components to the Video component. Here is an example code:
renderVideoPreview() {
return (
<View
style={{
flex: 1,
backgroundColor: 'transparent'
}}
>
<Video
source={{ uri: this.state.tempRecording }}
rate={1.0}
volume={1.0}
muted={true}
resizeMode="cover"
shouldPlay
isLooping
style={{ flex: 1 }}
>
<View style={{
backgroundColor: 'transparent'
}}>
<TouchableOpacity style={styles.circle}>
</TouchableOpacity>
</View>
</Video>
</View>
);
}
I have tried to put the components outside of the Video component but that didn’t achieve what I wanted it to. Here is the code:
renderVideoPreview() {
return (
<View
style={{
flex: 1,
backgroundColor: 'transparent'
}}
>
<Video
source={{ uri: this.state.tempRecording }}
rate={1.0}
volume={1.0}
muted={true}
resizeMode="cover"
shouldPlay
isLooping
style={{ flex: 1 }}
/>
<View style={{
backgroundColor: 'transparent'
}}>
<TouchableOpacity style={styles.circle}>
</TouchableOpacity>
</View>
</View>
);
}
The code resulted in the below output. it whitened out the whole View component even though i specified the backgroundColor: ‘transparent’
Any help would be appreciated