[iOS] Hidden status bar not respected.

[dustinbahr]

This SafeAreaView does not respect hidden status bar in iOS as it should.

Even, when status bar is hidden, there is a top inset. You can use forceInsets to override this, however, it will then ALSO override the inset on iPhones with a notch. (iPhone X, etc)

In some circumstances, you want the safe area to inset for the notch, even if the status bar info is hidden.

The SafeAreaView built in to react-native DOES treat it correctly.

When status bar is hidden, there is still an inset on iPhone X, but not on normal iPhones.

Here are some examples:

react-native-safe-area-view SafeAreaView

import React from 'react';
import { View, StatusBar, Text } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ backgroundColor: 'red', flex: 1 }}>
        <StatusBar hidden={true} />
        <View
          style={{
            backgroundColor: 'white',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <Text>SafeAreaView</Text>
          <Text>react-native-safe-area-view</Text>
        </View>
      </SafeAreaView>
    );
  }
}

react-native SafeAreaView

import React from 'react';
import { View, StatusBar, Text, SafeAreaView } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ backgroundColor: 'red', flex: 1 }}>
        <StatusBar hidden={true} />
        <View
          style={{
            backgroundColor: 'white',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <Text>SafeAreaView</Text>
          <Text>react-native</Text>
        </View>
      </SafeAreaView>
    );
  }
}

[dustinbahr]

I've created a PR to address this, although I feel like there should be a better way. #63

[brentvatne]

I agree that there should be a better way. I'm very much looking forward to this landing: react/react-native#20999

[brentvatne]

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