I am currently building an application that shows media files using expo-video, VideoView, these items has two states, a preview and an open state. When a video is opened the background is rendered on top of the video. This problem only occurs on android, on ios the video is rendered as intended. My goal is to have a little transparent black background behind the opened video.
<Modal
visible={modalVisible}
transparent
animationType="fade"
onRequestClose={closeModal}
>
<View style={styles.openMediaBG}>
<TouchableOpacity
style={styles.closeButtonStyle}
onPress={closeModal}
>
<Ionicons name="close" size={30} color="white" />
</TouchableOpacity>
<View style={styles.mediaContainer}>
{isVideo && modalVideoPlayer ? (
<TouchableOpacity
style={styles.videoTouchable}
onPress={handleVideoTap}
activeOpacity={1}
>
<VideoView
player={modalVideoPlayer}
style={styles.modalVideo}
allowsPictureInPicture={false}
nativeControls={true}
showsTimecodes={false}
requiresLinearPlayback={false}
contentFit="contain"
/>
</TouchableOpacity>
) : (
<Image
source={typeof selectedMedia.uri === "string"
? { uri: selectedMedia.uri }
: selectedMedia.uri
}
style={styles.modalImage}
resizeMode="contain"
/>
)}
</View>
<Text style={styles.timestampStyle}>
{selectedMedia.timestamp
? new Date(selectedMedia.timestamp).toLocaleDateString()
: "Unknown date"
}
</Text>
</View>
</Modal>
I know this is caused by surfaceView being rendered differently on android, it is being rendered first then everything else gets rendered after. On expo’s documentation site textureView mentioned as a solution for rendering issues, so I have tried it, but with that the video wasn’t appearing at all. I have also tried some alternatives like rendering two VideoView, but one had a style that made it fully black, this gave the video a black background but cannot be made transparent and I fear this is a hardware heavy solution. Besides these approaches I couldn’t find more possible solutions.