Opening fullScreen video causes bottomPadding to disappear on iphoneX devices

[Freysi21]

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;`

[Freysi21]

I'm sorry for the code formatting.

[brentvatne]

this should be resolved in version 1.0 which was released today, thanks for reporting!