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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

zoontek
Copy link

@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
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
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
Author

zoontek commented Jan 10, 2025

@bartlomiejbloniarz I rebased against main to fix the conflict.

@@ -89,7 +89,8 @@
"@babel/plugin-transform-unicode-regex": "^7.0.0-0",
"@babel/preset-typescript": "^7.16.7",
"convert-source-map": "^2.0.0",
"invariant": "^2.2.4"
"invariant": "^2.2.4",
"react-native-is-edge-to-edge": "1.1.6"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about it. If react-native-is-edge-to-edge is supposed to be embraced by the community, we should have it as a peer dependency instead to avoid conflicts for the user, no?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But then anyone who uses just Reanimated would also need to install react-native-is-edge-to-edge which is a bit cumbersome for us.

Copy link
Author

@zoontek zoontek Jan 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tjzel Yes, that means an extra step for everyone, not a good idea. BTW react-native-is-edge-to-edge (the detection library, not react-native-edge-to-edge - I think that's where the confusion lies) is less then 100 bytes in production builds.

@zoontek
Copy link
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
Author

zoontek commented Jan 20, 2025

I rebased against main to resolve conflicts.

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