App content does not respect SafeAreaLayout on iPhone X

[hawkrives]

screenshot

None of our views – except the webviews – are aware of the iPhone X's notch.

To mitigate this, I believe that we need to use RN's SafeAreaView; hopefully we can just insert it somewhere high up the stack and forget about it.

There may also be a setting we can change in react-navigation somewhere.

This needs investigation.

Views

• Settings
  • [x] Main Screen
  • [x] Credits (see https://github.com/StoDevX/AAO-React-Native/issues/2160)
  • [ ] FAQs
  • [ ] App Icon
  • [ ] Privacy
  • [ ] Legal
• Home
  • [x] Main Screen
  • ~[ ] EditHome~ removed from app entirely
• Menus
  • [ ] Menu
  • [ ] Carleton Menus list
  • [ ] Filter
• SIS
  • [ ] Balances
  • [ ] Student Work
• Building Hours
  • [ ] List
  • [ ] Report an Issue
• Calendar
  • [ ] List
  • [ ] Event Detail
• Streaming Media
  • [ ] Streams
  • [ ] Webcams
  • [ ] KSTO
• News
  • [ ] List
• Contacts
  • [ ] List
  • [ ] Detail
• Transportation
  • [ ] Bus Timetable
  • [ ] Other Modes list
  • [ ] Other Modes detail
• Dictionary
  • [ ] List
  • [ ] Detail
• Orgs
  • [ ] List
  • [ ] Detail
• [ ] Help

[drewvolz]

https://medium.com/react-native-training/react-native-iphonex-92ff511282af

Here's their example. Looks like we can just wrap App with it.

import {
  ...
  SafeAreaView
} from 'react-native';

class Main extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <App />
      </SafeAreaView>
    )
  }
}
const styles = StyleSheet.create({
  ...,
  safeArea: {
    flex: 1,
    backgroundColor: '#ddd'
  }
})

[hawkrives]

I don't necessarily want to apply it above react-navigation; I'm nervous about having two of them in the component tree. And react-navigation applies theirs successfully, as you can see in the fact that the settings gear / edit button are inset properly.

[drewvolz]

You're right, it would cause conflict.

React navigation does not automatically wrap screens with SafeAreaView, developers are required to add it to their screens as needed. In many use cases wrapping the screen in a SafeAreaView is not appropriate, such as for lists and scrollviews. Sorry for the confusion!

[drewvolz]

I paged thru 4-5 issues in the repo to find one that was not a dup or incorrectly filed. There is a solution I think might work for us in there? https://github.com/react-navigation/react-navigation/issues/3072

[hawkrives]

Took a stab at wrapping a view in SafeAreaView… let's just say that it's a little too safe for this spot.

[hawkrives]

If I put the SafeAreaView inside the ScrollView, it works! I'm on to other views now.

[hawkrives]

I've pushed to the safelayoutview branch, which fixes the homescreen, but I would like to find a better solution than adding SafeAreaView to each spot individually.

[hawkrives]

I think that we'll need to add <SafeAreaView/> and contentInsetAdjustmentBehavior="automatic" pretty much everywhere. I don't know of a better way to handle it.

as to why contentInsetAdjustmentBehavior is "never" by default when iOS defaults to "automatic"… well, you'll have to ask React Native.

[hawkrives]

I need to learn more about how iOS proper handles contentInsetAdjustmentBehavior before I can understand how this works, because it doesn't make sense to me.

I can get the bottom padding easily enough, but I've only managed to get the side padding with "always"... which somehow manages to put padding around the view and yet not resize it to fit, so we manage to scroll left and right in addition to up and down.

[hawkrives]

After discussing this with @drewvolz, we've decided that (given that neither of us really has any idea how to fix this right now) 2.5 is in enough of a better place than 2.4 with-regards-to-iPhone-X-support that we can push this back and ship without it.

We don't want to, but we're not going to make an Interim Break release if we don't push it back.

[drewvolz]

That all sounds correct :+1:

[hannesmcman]

Is this still an issue? @hawkrives @drewvolz

[hawkrives]

Yeah… for example, the Dictionary list doesn't respect the safe area at the bottom of the view / bottom of the screen.

[hawkrives]

I've just updated the OP's checklist with what I know works (two items). A number of others "work", but only because they're in tab views.