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

Detect react-native-edge-to-edge and bypass setShouldMimicIOSBehavior #219

Merged
merged 2 commits into from
Nov 18, 2024

Conversation

zoontek
Copy link
Contributor

@zoontek zoontek commented Nov 17, 2024

Description

This PR brings react-native-edge-to-edge detection to react-native-avoid-softinput.

The future of Android is edge-to-edge, and to make the React Native developer experience seamless in this regard, the ecosystem needs to transition from “opaque system bars by default” to “edge-to-edge by default.”

To prevent library authors from implementing their own edge-to-edge solutions—which could interfere with other libraries—and because it’s not possible to reliably detect if edge-to-edge is already enabled on Android, we have collaborated with Expo to create a library that handles this functionality and is detectable using a simple helper: react-native-is-edge-to-edge (250 bytes minified - no gzip).

This approach allows you to bypass certain options and props (in this case, it removes the need to call setShouldMimicIOSBehavior entirely, which is dangerous as setShouldMimicIOSBehavior(false) currently breaks edge-to-edge).

After digging a bit into your code, I think this is the only required change. setShouldMimicIOSBehavior calls setShouldHandleInsets, which only call WindowCompat.setDecorFitsSystemWindows(activity.window, decorFitsSystemWindows) (doesn't even update a module level variable or else), something already handled by react-native-edge-to-edge that call WindowCompat.setDecorFitsSystemWindows(activity.window, false) immediately at app start.

This will also print a warning to inform the users that calling this function is not needed anymore in such case:

shoudMimic value is ignored when using react-native-edge-to-edge

PS: If you want to keep the call, I can update the TS to be:

function setShouldMimicIOSBehavior(shouldMimic: boolean) {
  if (Platform.OS !== 'android') {
    return;
  }
  if (__DEV__) {
    controlEdgeToEdgeValues({ shouldMimic });
  }

  module.setShouldMimicIOSBehavior(EDGE_TO_EDGE || shouldMimic);
}

Affected platforms

  • Android
  • iOS

@mateusz1913
Copy link
Owner

heeey, looks cool! I'll check it today's evening

@mateusz1913
Copy link
Owner

Looks good! Thx for the contribution! I'll need to mention in docs that react-native-edge-to-edge should now be recommended way and will deprecate shouldMimicIOSBehavior before releasing new version (I hope to find some time this week)

@mateusz1913 mateusz1913 merged commit 26f8ea0 into mateusz1913:main Nov 18, 2024
3 checks passed
@zoontek zoontek deleted the detect-edge-to-edge branch November 18, 2024 22:00
@mateusz1913
Copy link
Owner

This is now released in v7.0.0 🥳

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.

2 participants