jpudysz / react-native-unistyles

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

Android platform, in versions 2.8.0+, when the keyboard pops up, the bottom insert is incorrect. #230

Closed dppo closed 2 months ago

dppo commented 2 months ago

Description

when the keyboard pops up

miniRuntime.insets.bottom =
287 but in useSafeAreaInsets insets.bottom =
24

Steps to reproduce

console.log('miniRuntime.insets.bottom = ', miniRuntime.insets.bottom); console.log('miniRuntime.navigationBar.height = ', miniRuntime.navigationBar.height);

const insets = useSafeAreaInsets(); console.log('insets = ', insets.bottom);

LOG 11:40:05 AM | DEBUG : miniRuntime.insets.bottom =
287

LOG 11:40:05 AM | DEBUG : miniRuntime.navigationBar.height =
287

LOG 11:40:05 AM | DEBUG : insets =
24

Snack or a link to a repository (optional)

No response

Unistyles version

2.8.0

React Native version

0.74.3

Platforms

Android

Engine

Hermes

Architecture

Fabric (new)

jpudysz commented 2 months ago

Thanks for the report! I need to ignore the IME insets (keyboard).

jpudysz commented 2 months ago

Hmm I can't repro 🤔

https://github.com/jpudysz/react-native-unistyles/assets/9088288/c259b4ee-8aea-46af-b035-bc86d9b7ffd6

image

Can you show me how to repro?

dppo commented 2 months ago

Hmm I can't repro 🤔

Screen.Recording.2024-07-04.at.17.21.04.mov image

Can you show me how to repro?

I wrote a reproducible code this

mobily commented 2 months ago

hey @jpudysz! 👋 I'm having the same (?) issue. When I hide the keyboard and wait for a few seconds, there's some strange behavior happening. Unistyles is giving new insets values (see timestamps):

2024-07-05T10:11:00.092Z android insets {"bottom": 16, "left": 0, "right": 0, "top": 34}
2024-07-05T10:11:15.953Z android insets {"bottom": 327, "left": 0, "right": 0, "top": 34}
2024-07-05T10:11:31.128Z android insets {"bottom": 16, "left": 0, "right": 0, "top": 34}
jpudysz commented 2 months ago

@dppo thank for the repo. I was able to repro it 🙏

I will create a patch

jpudysz commented 2 months ago

https://github.com/jpudysz/react-native-unistyles/assets/9088288/590a6086-3a80-494a-8415-374c49799759

This is with extra patch -> if keyboard is visible then inset is 0. Without it it's little bit uglier:

image

Still wondering if it will break anything.