React-native: SafeAreaView - option to choose only top or bottom spacing

[pie6k]

• [x] I have reviewed the documentation
• [x] I have searched existing issues
• [x] I am using the latest React Native version

Environment:
  OS: macOS High Sierra 10.13.4
  Node: 9.4.0
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.3 Build version 9E145
  Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.52.2 => 0.52.2

I need a view that respect top safe area (including iPhone X), but will stretch all the way down to the bottom.

Right now, SafeAreaView doesn't have any customisation options.

Is it possible to ignore bottom spacing using it?

[react-native-bot]

Thanks for posting this! It looks like your issue may be incomplete. Are all the fields required by the Issue Template filled out?

If you believe your issue contains all the relevant information, let us know in order to have a maintainer remove the No Template label. Thank you for your contributions.

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

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

[react-native-bot]

This issue was marked as lacking information required by the issue template. There has been no activity on this issue for a while, so I will go ahead and close it.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

If you are the author of this issue and you believe this issue was closed in error (i.e. you have edited your issue to ensure it meets the template requirements), please let us know.

[MayeuldP]

Yeah, any suggestions ? Same problem here !

[MayeuldP]

Well found a tricks to do it => I used
import SafeAreaView from react-navigation instead of react-native
And they manage the props forceInset={{ top: 'never'}} for example if you dont want the SafeView on top. It works like a charm 💯

[pie6k]

@MayeuldP works great!

Also, you might use https://github.com/react-community/react-native-safe-area-view - that is extracted from react-navigation if you don't need entire react-navigation

[adimshev]

It's better to have native solution, not just check that width and height match iPhone X (like in react-navigation SafeAreaView).

[vjsingh]

Re-opened this issue here: https://github.com/facebook/react-native/issues/23279