SafeAreaView doesn't work on iOS 10 and below

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;

[hramos]

Looks like @vovkasm clearly describe why this happens on iOS 10: https://github.com/facebook/react-native/issues/17638#issuecomment-366534837. Closing as that seems to provide a reasonable workaround.