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 :-)

[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

[satya164]

@grabbou is there a constant exposed for statusbar height on iOS? if it is, then we could use it on older versions of iOS for SafeAreaView.

[vovkasm]

Status bar height is not a constant on iOS. It can change dynamically, e.g. while incoming call.

But ideally SafeAreaView can measure view controller's layout gides on older versions of ios.

[satya164]

@vovkasm yeah, but SafeAreaView can automatically do that since it's a native component

[vovkasm]

Right. And I mention that already in #17638 (comment)

[vovkasm]

Just create PR #18534, can anyone test it in real application?

[grabbou]

Let's carry on the review process in there. I'll try to give it a shot since I am working on the library that uses it heavily right now.

Thanks for submitting pull request :)

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[vovkasm]

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

[randomco]

Tested safeareaview on RN 0.55, it does not work on or below iOS 10. Application goes behind the status bar.

[vovkasm]

@randomco PR #18534 still not merged, so this bug exists also in 0.56 and in master. You can fork RN and apply this patch. I'am currently slowly try to implement independent module with this functional, that also will fix other gotchas with RN implementation.

[blac3777]

While this is being taken care of, could SafeAreaView also be made to avoid content from going under the statusbar on android? I don't like having to hard-code margin height, it seems sketchy and destined to result in future bugs. Also, SafeAreaView should be able to avoid statusbar on ios and android w/o separate implementations.

[ronilitman]

Same issue. The solution that I found is to use this library from the time being, same implementation:
https://github.com/react-community/react-native-safe-area-view

[nikola-kolosek]

Quick workaround:

const WorkaroundView = props => {
  if (Platform.OS === 'ios' && Platform.Version < 11)
    return <View {...props} style={[props.style, { paddingTop: 15 }]} /> // Add padding to avoid rendering behind StatusBar
  else return <SafeAreaView {...props} />
}

Then use <WorkaroundView> as a component