Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Android windowTranslucentNavigation makes LogBox buttons unpressable #29397

Closed
Ashoat opened this issue Jul 16, 2020 · 1 comment
Closed

Android windowTranslucentNavigation makes LogBox buttons unpressable #29397

Ashoat opened this issue Jul 16, 2020 · 1 comment
Labels
Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. LogBox Platform: Android Android applications. Resolution: Locked This issue was locked by the bot. Resolution: PR Submitted A pull request with a fix has been provided.

Comments

@Ashoat
Copy link
Contributor

Ashoat commented Jul 16, 2020

Description

Android apps can specify android:windowTranslucentNavigation to draw beneath the navigation (bottom) bar on phones that display an on-screen ("soft") navigation bar.

However, react-native's LogBox does not properly detect the bottom inset, and thus the buttons it displays at the bottom are unpressable.

This is not exactly a regression from YellowBox/RedBox, since they too did not detect the bottom inset. But the old components had slightly taller buttons, and it was still possible to press their top edge. With LogBox, the entirety of the buttons are obscured by the navigation bar.

React Native version:

System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 1.49 GB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.11.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29
      Build Tools: 26.0.3, 27.0.3, 28.0.3
      System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, chromeos-67 | Chrome OS 67
      Android NDK: 17.2.4988734
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_192 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.1 => 0.63.1
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

  1. Set android:windowTranslucentNavigation in your styles.xml
  2. Trigger a LogBox

Expected Results

I'd like to see the LogBox drawn within the "Safe Area", to borrow an iOS development term. The buttons should appear above the navigation bar.

Link to a repository

I have set up https://github.com/Ashoat/LogBoxTest to reproduce this issue.
@Ashoat Ashoat added Needs: Triage 🔍 Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. LogBox Platform: Android Android applications. and removed Needs: Triage 🔍 labels Jul 16, 2020
@Ashoat Ashoat mentioned this issue Jul 16, 2020
Closed
@Ashoat Ashoat added the Resolution: PR Submitted A pull request with a fix has been provided. label Jul 16, 2020
@rickhanlonii
Copy link
Member

Hey @Ashoat, thanks for flagging this!

@Ashoat Ashoat mentioned this issue Jul 20, 2020
Closed
grabbou pushed a commit that referenced this issue Jul 22, 2020
@Ashoat @grabbou
Set windowTranslucentNavigation to false (#29399)
d4b6e02 
Summary:
This fixes #29397. Without this, apps that specify `android:windowTranslucentNavigation` draw the `LogBox` buttons underneath the soft navigation bar, making the buttons unpressable.

Before             |  After
:-------------------------:|:-------------------------:
<img src="http://ashoat.com/AndroidTranslucentNavigationLogBox.png" width="300" />  |  <img src="http://ashoat.com/AndroidTranslucentNavigationLogBoxFixed.png" width="300" />

## Changelog

[Android] [Fixed] - Set LogBox windowTranslucentNavigation to false

Pull Request resolved: #29399

Test Plan: I tested this change on the [repo](https://github.com/Ashoat/LogBoxTest) I set up to reproduce the issue. I set it up to [build `ReactAndroid` from source](Ashoat/LogBoxTest@3a2cdab) and then edited `node_modules/react-native/ReactAndroid/src/main/res/devsupport/values/styles.xml` directly.

Reviewed By: rickhanlonii

Differential Revision: D22602970

Pulled By: mdvacca

fbshipit-source-id: 8c2adc149aa0157825075022f00bb695956d3121
@facebook facebook locked as resolved and limited conversation to collaborators Oct 1, 2021
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 1, 2021
tungdo194 pushed a commit to tungdo194/rn-test that referenced this issue Apr 28, 2024
@Ashoat
[Android][LogBox] Set windowTranslucentNavigation to false
b12fd80 
This fixes facebook/react-native#29397. Without this, apps that specify `android:windowTranslucentNavigation` draw the `LogBox` buttons underneath the soft navigation bar, making the buttons unpressable.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. LogBox Platform: Android Android applications. Resolution: Locked This issue was locked by the bot. Resolution: PR Submitted A pull request with a fix has been provided.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Android][LogBox] Set windowTranslucentNavigation to false Ashoat/react-native
3 participants
@Ashoat @rickhanlonii @react-native-bot