-
Notifications
You must be signed in to change notification settings - Fork 44
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
Android phones with hidden bottom navbar have issues clicking bottom pixels because ModalStack has wrong translateY value and cover some of bottom content #42
Comments
We are seeing this issue too. Confirmed reproduction: On Android, the bottom ~40 pixels on the screen are completely untouchable, even using the inspector. That made troubleshooting this pretty tricky. Disabling this lib corrects the issue. It varies depending on the device, and the home button settings on the OS. An older pixel 2 XL with fixed home/back buttons does not show the issue. But a OnePlus 8T & Pixel 5 w/ gesture based home buttons expose this issue. We're disabling this lib in our app for now, but will likely evaluate for a fix later. |
We confirmed #43 fixes the issue for us. |
Thanks for confirmation. I will hope somebody review this PR soon. |
I think the main issue with the PR is that it requires a new native library, which is something that we wouldn't want to do. Would be cool to find a way of getting the correct values without having to introduce a native dependency. |
@iremlopsum I completely agree there, it's not ideal to introduce a dep on a third party native lib. On the other hand, I've hit this exact issue across many different places in many different apps. It's a bit shocking that there isn't a major, standard reliable way to get the true screen height on Android in One comment though, I definitely wouldn't PR this in as specific version in |
If you really wanted to avoid including the lib by default, but provide a easy fix for users who hit this, we could modify the PR to make it an optional dependency. If the If you want this, LMK and I'd be happy to extend the PR to do this. |
Hi @tarasvakulka @jehartzog and thanks for your inputs regarding this issue! Would it be possible for you to provide a reproducible demo on Expo Snack please? We haven't been able to encounter this issue ourselves so far. Without that repro, it would be hard for us to review the PR and confirm that the issue is properly fixed. Regarding |
Example to reproduce: https://snack.expo.io/@tarasvakulka/github.com-tarasvakulka-rn-modalfy-example Test device: Huawei P smart 2019 (POT-LX1) Android 9 P.S. I don't understand why but if you run my example from Expo Snack "androidNavigationBar": { "visible": "sticky-immersive"} has no effect to nav bar, but issue is reproducing. Therefore it is better to clone my repo https://github.com/tarasvakulka/rn-modalfy-example.git and run npm start from command line. |
Thanks so much for the repro @tarasvakulka! It actually helped me realised I was looking for the issue at the wrong place! I may have found an easy fix: could you let me know if making these changes in // #L2
import {
TouchableWithoutFeedback,
+ Dimensions,
StyleSheet,
Animated,
Easing,
} from 'react-native' // #L40
- translateY: new Animated.Value(vh(100)),
+ translateY: new Animated.Value(Dimensions.get('screen').height), // #L80
- translateY.setValue(vh(100))
+ translateY.setValue(Dimensions.get('screen').height) @jehartzog If you also happen to have a minute to check this, it would be great! |
Yes it fixes. Dimensions.get('screen').height absolutely enough. I have use ExtraDimensions out of habit. Thanks for great and easy solution without a third party native lib. |
@CharlesMangwa I've confirmed your solution fixes the issue in our build as well. |
Thanks for confirming @tarasvakulka @jehartzog! Closing this issue as I've just published |
I reproduced issue that Android phones with hidden bottom navbar have issues clicking bottom pixels because ModalStack has wrong translateY value (see screenshot) and cover some of bottom content. I think problem with wrong Dimensions.get('window').height value on some android devices when native bottom navbar is hidden. In my case hidden android navbar programmatically in MainActivity.java:
![inspector_screenshot](https://user-images.githubusercontent.com/20745370/114165469-310a3100-9935-11eb-8b64-b791ceb22760.jpg)
@OverRide
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
}
}
Test device: Huawei P smart 2019 (POT-LX1) Android 9
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-modalfy": "2.1.1",
"react-native-gesture-handler": "1.6.1"
The text was updated successfully, but these errors were encountered: