Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add headerTopInsetEnabled prop that defaults to true to account for translucent status bars on Android #545

Merged
merged 4 commits into from
Jun 19, 2020

Conversation

brentvatne
Copy link
Contributor

Follow up from #518 using @janicduplessis' suggested solution. The inset is applied by default to encourage developers to use translucent status bars on Android, which is typically a better experience for users and consistent with the iOS behavior.

@WoLewicki
Copy link
Member

WoLewicki commented Jun 19, 2020

The situation handled here is the case where a user has his status bar set to translucent via RN StatusBar component with translucent={true} prop. In that case, the header's top padding is not applied properly which causes the content of the header to go under the status bar.

This PR introduces additional padding to the header, which is a BREAKING CHANGE and will cause the header to have too much top padding in case of not having a translucent status bar.

There are two ways to handle it:

  1. Recommended - use translucent status bar via RN StatusBar component (if you already don't use it) - https://reactnative.dev/docs/statusbar#translucent. You can add this component somewhere in the entry point of your project and it should stay translucent on every screen then.
  2. Set headerTopInsetEnabled to false (it is true by default) if you want an opaque status bar.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants