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

feature: Detect edge-to-edge and set isStatusBarTranslucentAndroid / isNavigationBarTranslucentAndroid #6732

Merged
merged 5 commits into from
Feb 24, 2025

Conversation

zoontek
Copy link
Contributor

@zoontek zoontek commented Nov 19, 2024

Summary

Similar to the PR I opened on the react-native-screens repository (I highly recommend to read the discussion there to understand the motivation behind this), this PR detects if the user enabled edge-to-edge and act accordingly: useAnimatedKeyboard are ignored, set to true automatically. If those are set, a warning is logged:

isStatusBarTranslucentAndroid and isNavigationBarTranslucentAndroid values are ignored when using react-native-edge-to-edge

It at some point this proposal lands in core, react-native-is-edge-to-edge will be updated to support both the library and the core edge-to-edge flag, making the transition seamless for the users.

Test plan

  • Install react-native-edge-to-edge in the example app.
  • Don't set isStatusBarTranslucentAndroid / isNavigationBarTranslucentAndroid, or set them to something else than true

@tomekzaw
Copy link
Member

Hi @zoontek, thanks for this PR. We briefly discussed this internally and @bartlomiejbloniarz will take a look on it.

@zoontek
Copy link
Contributor Author

zoontek commented Jan 7, 2025

@tomekzaw @bartlomiejbloniarz Any news? It continues to create hard to detect issues.

@bartlomiejbloniarz
Copy link
Contributor

Hi @zoontek. I changed the version of react-native-is-edge-to-edge to a concrete version (without ^) just to be extra safe, as we try to keep our dependencies to minimum.

@zoontek
Copy link
Contributor Author

zoontek commented Jan 9, 2025

@bartlomiejbloniarz Sure, no worry 🙂

@zoontek zoontek force-pushed the detect-edge-to-edge branch from e04f041 to 5d91625 Compare January 10, 2025 09:11
@zoontek
Copy link
Contributor Author

zoontek commented Jan 10, 2025

@bartlomiejbloniarz I rebased against main to fix the conflict.

@zoontek
Copy link
Contributor Author

zoontek commented Jan 11, 2025

@bartlomiejbloniarz @tjzel Note that if it's blocking for you to add a dependency, we can also just inline the check and remove the dep.

This is super lightweight, no dependencies, but also no control / warnings.

Screenshot 2025-01-11 at 12 58 42

@tjzel
Copy link
Collaborator

tjzel commented Jan 14, 2025

Don't worry @zoontek. I looked into the packages code and I understood the context more and I think there won't be problems even if there are multiple versions loaded in.

@tjzel
Copy link
Collaborator

tjzel commented Jan 14, 2025

Currently we are freezing the main branch for maintenance reasons so it will land there a bit later.

zoontek and others added 3 commits January 20, 2025 15:04
…isNavigationBarTranslucentAndroid

# Conflicts:
#	packages/react-native-reanimated/src/core.ts

# Conflicts:
#	yarn.lock
@zoontek zoontek force-pushed the detect-edge-to-edge branch from 5d91625 to bde185f Compare January 20, 2025 14:04
@zoontek
Copy link
Contributor Author

zoontek commented Jan 20, 2025

I rebased against main to resolve conflicts.

@bartlomiejbloniarz bartlomiejbloniarz added this pull request to the merge queue Feb 24, 2025
Merged via the queue into software-mansion:main with commit 4d5f34b Feb 24, 2025
11 checks passed
@zoontek zoontek deleted the detect-edge-to-edge branch February 24, 2025 14:20
tjzel pushed a commit that referenced this pull request Feb 24, 2025
…isNavigationBarTranslucentAndroid (#6732)

## Summary

Similar to [the
PR](software-mansion/react-native-screens#2464)
I opened on the `react-native-screens` repository (I highly recommend to
read the discussion there to understand the motivation behind this),
this PR detects if the user enabled edge-to-edge and act accordingly:
`useAnimatedKeyboard` are ignored, set to `true` automatically. If those
are set, a warning is logged:

> `isStatusBarTranslucentAndroid` and
`isNavigationBarTranslucentAndroid` values are ignored when `using
react-native-edge-to-edge`

It at some point [this
proposal](facebook/react-native#47554) lands in
core, `react-native-is-edge-to-edge` will be updated to support both the
library and the core edge-to-edge flag, making the transition seamless
for the users.

## Test plan

- Install
[react-native-edge-to-edge](https://github.com/zoontek/react-native-edge-to-edge)
in the example app.
- Don't set `isStatusBarTranslucentAndroid` /
`isNavigationBarTranslucentAndroid`, or set them to something else than
`true`

---------

Co-authored-by: Bartłomiej Błoniarz <[email protected]>
tjzel pushed a commit that referenced this pull request Feb 24, 2025
…isNavigationBarTranslucentAndroid (#6732)

## Summary

Similar to [the
PR](software-mansion/react-native-screens#2464)
I opened on the `react-native-screens` repository (I highly recommend to
read the discussion there to understand the motivation behind this),
this PR detects if the user enabled edge-to-edge and act accordingly:
`useAnimatedKeyboard` are ignored, set to `true` automatically. If those
are set, a warning is logged:

> `isStatusBarTranslucentAndroid` and
`isNavigationBarTranslucentAndroid` values are ignored when `using
react-native-edge-to-edge`

It at some point [this
proposal](facebook/react-native#47554) lands in
core, `react-native-is-edge-to-edge` will be updated to support both the
library and the core edge-to-edge flag, making the transition seamless
for the users.

## Test plan

- Install
[react-native-edge-to-edge](https://github.com/zoontek/react-native-edge-to-edge)
in the example app.
- Don't set `isStatusBarTranslucentAndroid` /
`isNavigationBarTranslucentAndroid`, or set them to something else than
`true`

---------

Co-authored-by: Bartłomiej Błoniarz <[email protected]>
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.

5 participants