I have a problem with safe-area-view when I have the device in landscape and then presentFullscreenPlayer. When exiting the fullscreen player paddingBottom provided by safe-area-view is set to 0. Before entering fullscreen the padding was 34.
I think I have seen this also when using Modal from react-native.
if you open this screen implementation with the iphone x device in landscape you will see the padding is gone. I wrapped the presentFullscreenPlayer in a timeout so I could see the difference before the video is presented.
`import React, { Component } from "react";
import { StyleSheet, Platform, TouchableOpacity, View, Image } from "react-native";
import { SafeAreaView } from "react-navigation";
import { WINDOW_WIDTH, WINDOW_HEIGHT } from "services/constants";
import { Video } from "expo";
export interface TestScreenProps {}
export interface TestScreenState {
selectedVideo: string | null;
}
interface FullscreenUpdateEvent {
fullscreenUpdate: number;
}
class TestScreen extends Component<TestScreenProps, TestScreenState> {
videoPlayer: Video | null;
state = {
selectedVideo:
"https://s3-eu-central-1.amazonaws.com/xps-ger/6156376847515164452/chatfiles/-7196241898081865239.m4v"
};
static navigationOptions = {
header: null,
gesturesEnabled: false,
tabBarVisible: false
};
renderVideo = () => {
if (this.state.selectedVideo) {
return (
<Video
ref={ref => (this.videoPlayer = ref)}
source={{ uri: this.state.selectedVideo }}
shouldPlay={true}
resizeMode={Video.RESIZE_MODE_CONTAIN}
onFullscreenUpdate={(fs: FullscreenUpdateEvent) => this.onFullscreenUpdate(fs)}
useNativeControls={true}
onLoad={ns => this.onVideoLoad(ns)}
/>
);
}
};
onFullscreenUpdate(fs: FullscreenUpdateEvent) {
if (fs.fullscreenUpdate == 3) {
this.setState({ selectedVideo: null });
}
}
async onVideoLoad(ns) {
setTimeout(async () => {
if (this.videoPlayer) {
await this.videoPlayer.presentFullscreenPlayer();
console.log("FULL SCREEEN !");
}
}, 20000);
}
render() {
return (
{this.state.selectedVideo && this.renderVideo()}
<View style={{ flex: 1 }}>
<TouchableOpacity
onPress={() => {
this.setState({ selectedVideo: "https://www4.sidelinesports.com/thumbs/1100571932817616089.png" });
}}
>
<Image
source={{ uri: "https://www4.sidelinesports.com/thumbs/1100571932817616089.png" }}
style={styles.image}
resizeMode="cover"
/>
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: "stretch",
backgroundColor: "white",
flex: 1,
flexDirection: "column"
},
safeArea: {
flex: 1,
backgroundColor: "white",
paddingTop: Platform.OS === "android" ? 25 : 0
},
activityIndicator: {
width: WINDOW_WIDTH,
height: WINDOW_HEIGHT
},
gallery: {
width: "100%",
height: "100%"
},
image: {
width: 150,
height: 100,
margin: 10,
justifyContent: "center",
alignItems: "center"
}
});
export default TestScreen;`