search

jpudysz / react-native-unistyles

Level up your React Native StyleSheet
https://unistyl.es
MIT License
1.25k stars 36 forks source link

useAnimatedKeyboard causes problems with edge-to-edge #235

Closed SickanK closed 1 week ago

SickanK commented 1 week ago

Description

Hi there! While reviewing the FAQ, I noticed the section about packages that can interfere with Edge-to-Edge on Android. I'd like to share an issue I recently resolved in my own app where it would unexpectedly switch between Edge-to-Edge mode and the "regular mode".

The cause turned out to be useAnimatedKeyboard from react-native-reanimated. I hadn't set isStatusBarTranslucentAndroid to true, which led to the inconsistent behavior. See documentation.

I'm not entirely certain about the exact conditions that trigger this issue. In my experience, useAnimatedKeyboard functioned correctly on some screens (using react-navigation) but not on others. When it switched over to "regular mode", the app stayed in that mode until restart.

It might be beneficial to add this information to the relevant FAQ section.

Please let me know if this should've a discussion post instead!

Steps to reproduce

  1. Use useAnimatedKeyboard in a React Native app with Unistyles
  2. Leave isStatusBarTranslucentAndroid set to false (which it is by default)
  3. Navigate between different screens in the app

Snack or a link to a repository (optional)

No response

Unistyles version

2.8.2

React Native version

0.73.0

Platforms

Android

Engine

Hermes

Architecture

Paper (old)

SickanK commented 1 week ago

After going through my app some more I found that useAnimatedKeyboard was still causing issues with the bottom insets, even with isStatusBarTranslucentAndroid set to true. After following what's mentioned in this comment the problem was partially solved. However, I my guess is that this overrides Unistyles bottom insets...

jpudysz commented 1 week ago

Can you tell me more? What kind of issue ? Have you tried the latest version 2.8.2? It has additional improvements for the bottom insets.

If the lib is manipulating insets then I can't do anything about it. Android has only one way to check it and it's not indicating if insets were manipulated by lib or by system.

I'm happy to add it to docs but I need more details.