Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

Putting buttons over a full screen video in React Native

$
0
0

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>


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>