opened
mtt87
username_0
### Current Behavior

`SafeAreaView` imported from `react-navigation` doesn't work properly with iPhone XR and iPhone XS Max, despite working fine with iPhone X and iPhone XS.

There is an extra white space at the bottom of the screen right before the bottom tab bar.

![screenshot 2019-02-25 at 20 58 45](https://user-images.githubusercontent.com/2150927/53368297-446a0600-3940-11e9-92b5-3ae8ab3d7662.png)

### Expected Behavior

No extra white space at the bottom

### How to reproduce

It's quite simple but I've created a repo here just in case
https://github.com/username_0/react-navigation_bug_SafeAreaView

`react-native init bug`
`yarn add react-navigation react-native-gesture-handler`
`react-native link`

```
import React, {Component} from 'react';
import { Text, ScrollView } from 'react-native';
import { SafeAreaView, createAppContainer, createBottomTabNavigator } from 'react-navigation';

const testData = new Array(200).fill('hello world');

const TestScreen = () => (
  <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
    <ScrollView style={{ flex: 1, backgroundColor: 'red' }}>
      {testData.map((e, i) => (<Text key={i}>{e}</Text>))}
    </ScrollView>
  </SafeAreaView>
);

const Tabs = createBottomTabNavigator({
  Tab1: {
    screen: TestScreen,
    navigationOptions: {
        title: 'Tab1',
    }
  },
  Tab2: {
    screen: TestScreen,
    navigationOptions: {
        title: 'Tab2',
    }
  },
  Tab3: {
    screen: TestScreen,
    navigationOptions: {
        title: 'Tab3',
    }
  },
});

const Root = createAppContainer(Tabs);


export default class App extends Component {
  render() {
    return (
      <Root />
    );
  }
}
```

### Your Environment

| software         | version
| ---------------- | -------
| react-navigation | 3.3.0
| react-native     | 0.58.5
| node             | 10.15.1
| npm or yarn      | 6.4.1 / 1.13.0
SafeAreaView doesn't work properly on iPhone XR / XS max
issue
created
brentvatne
username_1
looks like there was a bug in safe area view where it wasn't using the correct dimensions. fixed in react-navigation@3.3.2
comment
closed
brentvatne
username_1
issue
created
claudioviola
username_2
I've the `3.5.1` and I'm facing still the bug
comment
created
brentvatne
username_1
@username_2 - please create a new issue if you are having this problem, the original reproducible example works as expected on latest version on xs max and xr https://snack.expo.io/@notbrent/privileged-blueberries
comment