SafeAreaView doesn't work on iOS 10 and below

[greenraze]

Is this a bug report?

don't know

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.4.0
Xcode: 9.2

react-native: 0.48.1 => 0.48.1
react: 16.0.0-alpha.12 => 16.0.0-alpha.12

Target Platform: iOS 10 and greater

Steps to Reproduce

in my index.ios.js

`render() {
    StatusBar.setBarStyle('light-content', true);
    StatusBar.setTranslucent(true)
    StatusBar.setHidden(true)
    return (
      <SafeAreaView style={{ flex:1,backgroundColor:BACKGROUND,}}>
        <View style={{flex:1}}>
          <StatusBar hidden={true} />
          <Provider  store={store}>
            <RouterComponent />
          </Provider>
        </View>
      </SafeAreaView>

    );
  } 
)`

My React Native app on iOS 10 starts from under the status bar but in iOS 11 the app starts from below the status bar. I want to start the app from 0x 0y off screen for all versions of iOS and the nav bar under the status bar. In Android there is a function called setTranslucent() but on iOS I didn't find a function which supports this. In my index.ios.js
@redmar @mojodna @aroth

[igorpan]

Have the exact same issue with SafeAreaView. Definitely smells like a bug.

Same code running in two simulators side by side. Happens on actual devices too:

Code:

class ListPageHeader extends React.Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    actions: PropTypes.arrayOf(PropTypes.object),
    onSearchChange: PropTypes.func,
  };

  static defaultProps = {
    actions: []
  };

  render() {
    const { title, actions, onSearchChange } = this.props;

    return (
      <SafeAreaView style={styles.wrapper}>
        <View style={styles.padding}>
          <PageTitle text={title} />
          <View style={styles.actions}>
            {actions.map((action, i) => <Action key={i} action={action} />)}
          </View>
        </View>
        <SearchBar onSearchChange={onSearchChange} containerStyle={styles.searchBar} />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: '#ffffff',
  },
  searchBar: {
    paddingTop: 9,
    paddingBottom: 30,
  },
  padding: {
    paddingLeft: 15,
    paddingRight: 15,
    paddingTop: 15,
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'space-between',
  },
  actions: {
    flexDirection: 'row',
  }
});

The workaround we currently use is to add padding to our heading component if iOS version is under 11:

const majorVersionIOS = parseInt(Platform.Version, 10);
const paddingTop = majorVersionIOS < 11? 35 : 15;

[thame]

I noticed the same issue which appears to be dependent on the iOS version. SafeAreaView does not seem to provide any space for the StatusBar on iOS 10 (I tested this on iOS 10.3), but works perfectly on iOS 11.

My fix was to use this package instead: react-native-safe-area-view

[vovkasm]

It is because SafeAreaView in RN (at least in 0.53) is simple converts UIView.safeAreaInsets property to RCTView paddings. But safeAreaInsets was introduced only in iOS 11. So on iOS 10 it's currently noop.

Indeed iOS provides another (now deprecated and bad designed imho) way to get "safe area" on pre iPhone X devices: UIViewController.topLayoutGide. This method has many problems to be integrated into RN properly mainly because it operated on View Controllers level, but RN operates on UIView level, e.g. standalone RN application has one naked UIViewController that contains only default logic... I think backward compatibility for SafeAreaView can be implemented, may be someone will fork RN SafeAreaView, improve and release to npm as independent package.

PS. mentioned react-native-safe-area-view - is totally incorrect, it simple hardcode all metrics... it will be always buggy and your app will be broken on every new iOS release :-)

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[douglasjunior]

Still not working with React Native 0.53.

For me it works with react-native-safe-area-view.

[hramos]

Looks like @vovkasm clearly describe why this happens on iOS 10: #17638 (comment). Closing as that seems to provide a reasonable workaround.

[grabbou]

@hramos we should provide a warning when SafeAreaView is used on iOS 10 and below. Right now, it silently fails to work - for people (like me) relying on status bar padding this is providing hard to debug glitches.

CC: @satya164