Playing of a video blo - react-native

Question

The next program in React-Native allows a video to play but blocks the clicking on the button. I believe this is because of the position:absolute value but is there a way to avoid this problem?
import React, { Component } from 'react';
import Video from 'react-native-video';
import {
StyleSheet,
TouchableOpacity,
Text,
View,
Button,
} from 'react-native'
class App extends Component {
state = {
count: 0,
message: 'Hello Everybody'
}
onPress = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<View style={styles.container}>
<Button title={'Press me'}
onPress={() => {
console.log('Boton Presionado')
this.setState({message: 'Presiono'})
}}
/>
<Text>{this.state.message}</Text>
<Video source={{uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'}}
ref={(ref) => {
this.player = ref
}} // Store reference
onBuffer={this.onBuffer} // Callback when remote video is buffering
onError={this.videoError} // Callback when video cannot be loaded
style={styles.backgroundVideo}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
marginBottom: '10'
},
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
}
})
export default App;

Answer 1

I changed position: 'absolute' to position: 'relative' and added values for height and width.