react-native: 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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 15
Comments: 20 (11 by maintainers)

Commits related to this issue

Make SafeAreaView to work on iOS < 11 (#18534) Summary: Currently `SafeAreaView` works only on iOS 11, because implemented in terms of native safeArea API, that not exists in older iOS versions. But ... — committed to microsoft/react-native-macos by vovkasm 6 years ago

Most upvoted comments

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;

+12

igorpan on Jan 20, 2018

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.

+10

hramos on Mar 5, 2018

@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

grabbou on Mar 22, 2018

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 😃

vovkasm on Feb 18, 2018

All right bots… Issue is still actual. But no one is concerned, so we have our own fork of RN with proper fix.

vovkasm on Jun 22, 2018