Keyboard SharedValue stop responding on Android when using WebBrowser after installing unistyles

[vaharoni]

Description

After returning to the application from a WebBrowser session, the keyboard related SharedValues from react-native-reanimated or react-native-keyboard-controller stop responding to keyboard changes until the app is closed and reopened.

This is problematic since WebBrowser is a common way to perform authentication for social login. After the user gets redirected back to the app, all dependencies on the keyboard's shared value stop working.

Importantly, one does not need to use any feature of unistyles for this to manifest. Simply configuring unistyles causes the issue.

The issue could not be reproduced on iOS.

Steps to Reproduce

In the reproduction repo:

1. Click on the text input field. Observe that the animated view attached to the shared value of the keyboard height gets properly animated.
2. Click on the button saying "Click to launch WebBrowser". While nothing seems to happen, the app just got back from a webbrowser session.
3. Click on the text input field again.

On the main branch, the animated view would work. On unistyles-2.20 or unistyles-3 branches, the view would stop responding.

Snack or Repository Link (Optional)

https://github.com/vaharoni/expo-webbrowser-keyboard-issue

Unistyles Version

Both 3.0 and 2.20

React Native Version

0.76.3

Platforms

Android

Expo

Yes

[jpudysz]

Hey! Thanks for the report.

Based on your description, I can already explain why this is happening. I’m not sure if there’s anything I can do about it or if you should open an issue in the Reanimated repo.

This issue occurs only on Android because Unistyles 2.8+ enforces edge-to-edge layout. Additionally, when you return from a web browser session, Unistyles once again enforces edge-to-edge layout (when app comes to foreground). I’m not sure how Reanimated handles this, and I can’t check it right now, but that’s my assumption.

To confirm, you can either install Unistyles 2.7.2 and try reproducing the issue or uninstall Unistyles and install react-native-edge-to-edge, which functions the same way as Unistyles (forces edge to edge).

I hope this provides more clarity. Unfortunately, I can’t disable edge-to-edge layout since I rely on Android’s inset system, which requires it. Also, with the release of Android 15, this has become the standard.

I can be mistaken, so if that's not the case then please let me know I will try to find the root cause.

[vaharoni]

Thank you for your response. I tried to reproduce with 2.7.2 and indeed the issue does not occur.

However, installing react-native-edge-to-edge did not cause the issue. I also tried react-native-keyboard-controller, which enforces edge-to-edge (see here), and observed no issue.

So I suspect this issue is not caused by edge-to-edge per-se.

Also, to clarify - the issue does not occur each time the app comes to the foreground. I could only reproduce it so far after coming back from a WebBrowser session.

[jpudysz]

Thank you for your response. I tried to reproduce with 2.7.2 and indeed the issue does not occur.

That was the main change compared to version 2.8.0. Additionally, reading the keyboard height is based on IME insets (keyboard insets), so it must be related to that.

Unistyles does not modify any insets, it only reads them and forces edge-to-edge rendering. I'm not sure how I can help with this issue as I'm not blocking Animated from reading these values.

[jpudysz]

Nevertheless will try to debug your repro (thank you for that) in free time, maybe I will find the problem