Incorrect bottom inset (Android)
hbriese opened this issue · comments
Description
Unistyles runtime incorrectly reports insets.bottom as 0. insets.top appears to work corrrectly.
This occurs both when calling the runtime directly and when calling the createStyleSheet runtime param
Steps to reproduce
- Use Android device with bottom safe area (e.g. Pixel 7 Pro)
- Compare
useSafeAreaInsets()toUnistylesRuntime.insets
Snack or a link to a repository (optional)
https://snack.expo.dev/@haydenbriese/graceful-blue-sandwich
Unistyles version
2.7.1
React Native version
0.73.6
Platforms
Android
Engine
Hermes
Architecture
Paper (old)
Hey 👋
What does it mean with bottom safe area?
Do you use button or gesture navigation?
What's your version of Android?
Do you use any window flags?
I'm currently experiencing the same problem with button navigation on Android 14 with top inset working perfectly fine while bottom inset do not.
I'm using Expo with their "absolute" positioning. I'm unsure if they set the FLAG_LAYOUT_NO_LIMITS flag or not, but the navigation bar is positioned on-top of the content. You can find the native expo code here (setPosition).
As I've understood it, you're not using the same logic as react-native-safe-area-context. However, in this case when I'm using "absolute" positioning of the navigation bar in expo, react-native-safe-area-context give the correct bottom inset (48px) while unistyles does not (0px).
Unistyles is by far the best styling system I've tried so far, hope you're at least able to point us in the right direction
Yes, that is the case. I'm not aware of what "absolute positioning" in Expo is doing. It would be perfect to get a minimal reproduction to patch it.
Great! You can find a minimal reproduction here. Please let me know if it's unclear or if something is missing.
@jpudysz
Thanks for creating such an amazing library!
Like the above comments have already mentioned, even we've been seeing that bottom inset from UnistylesRuntime always returns 0. And we are not setting NavigationBar position to absolute.
Interestingly, even useSafeAreaInsets returns bottom inset as 0. Not sure what we're missing though.
Tested Devices
- Pixel 6
- Redmi Note 9 Pro
- Samsung Galaxy S20 FE 5G
Unistyles Version
2.7.1
Platform
Android
Thanks guys! I will check the repro and try to patch it 😇
Guys, I've created a patch for expo absolute positioning. Let me know if that works for you!
How to install 2.7.2-rc.1:
yarn add react-native-unistyles@next
If anyone has another case, please create a small repro 🙏
All works! Thanks for the quick fix 😄
@hbriese @Dhruv-manktala what are your cases? Did you try 2.7.2-rc.1?
I assume no reply = no issues. I will release next version today
@jpudysz hi, just installed 2.7.2 and it seems that the insets are being *2 on Android.
I'm using bare react-native with expo-modules core.
Maybe something is being picked up and it thinks that I'm using just expo and it doubles the inset value.
edit:
by reverting back to
private fun hasFullScreenMode(window: Window): Boolean {
return (window.attributes.flags and WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS) == WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
}everything goes back to normal.
Android 🙄
Thanks for the feedback, will try to repro today
Hi, I noticed a regression on low-end Android device (Alcatel 1B with Android 10) in bare react-native.
const { bottom } = useSafeAreaInsets // 0 ✅
runtime.insets.bottom // 0 unistyles@2.7.1 ✅
runtime.insets.bottom // 48 unistyles@2.7.2 ⭕
@jpudysz just a side note, on emulators the insets are fine, the issue happens in real devices only, in my case Samsung S22 with A14
Thanks guys, please stay at 2.7.1. I need to rethink expo status bar support
useSafeAreaInsets():
{"left":0,"bottom":48,"right":0,"top":30.85714340209961}
UnistylesRuntime.insets
{"top":0,"bottom":0,"left":0,"right":0}
UnistylesRuntime.statusBar.height
30
UnistylesRuntime.navigationBar.height
48
I'll use useSafeAreaInsets for now since it has been tested by the masses, but I noticed that the statusBar and navigationBar height matches the insets from it.
Note: this is on version 2.5.0
Why do you use old version? Please use 2.7.1
Hey guys!
I would really appreciate checking out new implementation in 2.8.0-beta.3!
Few notes:
- min required version is Expo SDK 51 / React Native 0.74
- it doesn't support
react-native-macosas there is no 0.74 version yet - I didn't test
react-native-visionosandreact-native-tvosyet react-native-windowsis not supported yet
Other notes:
- switching dynamically cutout on emulator is not supported. If you change the cutout type then please reload the app
- edgeToEdge layout a.k.a
FLAG_LAYOUT_NO_LIMITSor expoabsolutepositioning is enabled by default
I will explain more with release notes. ATM I'm looking for your feedback!
@jpudysz tested on Pixel 7 Pro A14 emulator and bottom insets seems fine! Will test on real device and update.
I’ve just released version 2.8.0-rc.1 with a complete rewrite of Android and Android Insets. It includes additional improvements on top of beta.3.
Happy testing!
@jpudysz just tested it on a samsung s22 A14, it seems that they are not properly calulated, still :/
bare rn with expo-modules
Even the Logbox warnings are being cut off on the bottom for about it's half size:
Before we rise the issue, I need to know couple things.
Do you use react-native-keyboard controller?
How are you setting margins/paddings ?
Do you have react-native-safe-area-context for the reference?
Do you use any custom flags?
Also, can you run the examples/expo on your device ? There is a "Layout" screen at the bottom with all the required information and without the noise from other libraries.
@jpudysz Android on examples/expo fails to run, incompatibility issues with gradle 8 and target sdk 33 instead of 34 for app compat. Couldn’t spent time fixing those I was too tired last night. Will try again tonight.
I don’t use keyboard controller, just safe area context.
On the first screenshot above, it worked fine on 2.8.0, it’s an ImageBackground that stretches to the screen height, for some reason the height is reported as smaller(?) this creating the gap, the Logbox being cut in the middle as it seems pushed down contradicts this though.
The bottom insets reported by useSafeAreaInsets are the same as the UnistylesRuntime.
My bottom tab bar when user is logged in is custom and animated with reanimated, it hides and shows smoothly but there are some cases where it will jump and stay way higher than it should (on Android only). I would say it locks at the same gap as shown on first screenshot above (it’s the app’s landing page when user is not logged in).
let me know if you want to connect offline and test it out together.
Android on examples/expo fails to run, incompatibility issues with gradle 8 and target sdk 33 instead of 34 for app compat. Couldn’t spent time fixing those I was too tired last night. Will try again tonight.
Can you try with the most recent Android Studio (Koala 2024.1.1)?
The bottom insets reported by useSafeAreaInsets are the same as the UnistylesRuntime.
That's the most important thing. Safe area insets has different algorithm , but long story short I'm using WindowCompat, so it's what I get from the Android and they recevice the same value too.
it will jump and stay way higher than it should
Do you use some kind of paddingBottom or marginBottom = UnistylesRuntime.insets.bottom?
Maybe something is odd with the calculations?
Remember that insets are reported few times on Android. Maybe reainmated has the initial value when your start to animate?
Do you have same issue when you move to SafeAreaInsets.bottom?
let me know if you want to connect offline and test it out together.
Sure! Let's connect tomorrow. I guess we're in the same timezone.
hi, I see this issue is closed but I can't find the answer for me.
Is there a way to disable Unistyles edgeToEdge behavior?
No, it's not possible.
Without it, I need to use hacky listeners from Android 6.
Edge to edge means that you need to add bottom padding eg. when you use bottom bar. It's not that scary :)
No, it's not possible. Without it, I need to use hacky listeners from Android 6.
Edge to edge means that you need to add bottom padding eg. when you use bottom bar. It's not that scary :)
Thank you for quick reply!
The thing is we use at the moment SafeAreaProvider. And we do take care only about bottom insets in modals at the moment.
Since the app is on production I would love to do incremental changes to have confidence about changes.
What would you advise in this case?
Stay on v. 2.7.2, I didn't add that many new features.
Branch 2.x will only get bug fixes now, so It will be smart to integrate 3.x.