react-native: [0.57.1] Android overflow doesn't register taps (touchable) in the "overflowed" area
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
Memory: 62.65 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.9.0 - /usr/local/bin/node
Yarn: 1.7.0 - ~/.npm-packages/bin/yarn
npm: 6.0.1 - ~/.npm-packages/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 21.1.2, 23.0.1, 23.0.2, 23.0.3, 24.0.1, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.2, 27.0.3, 28.0.2
API Levels: 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28
IDEs:
Android Studio: 2.3 AI-162.4069837
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
Description
The “new” overflow feature works great now except the fact that it doesn’t register the taps on the outside area. That’s Android only.
Reproducible Demo
<View
style={{
width: 50,
height: 50,
borderColor: 'blue',
borderWidth: 2,
overflow: 'visible'
}}
>
<TouchableOpacity style={{ width: 100, height: 100, backgroundColor: '#f006' }}>
<Text>some button</Text>
</TouchableOpacity>
</View>
Tap inside the blue square - works. Tap on the red square but outside the blue one - it doesn’t
Am I doing something wrong?
Thank you 🤗
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 36
- Comments: 32 (4 by maintainers)
Commits related to this issue
- Change UI implementation of ChainSelector This is a workaround for an Android issue which prevents visible overflowed elements to receive taps. See https://github.com/facebook/react-native/issues/21... — committed to autonomoussoftware/metronome-wallet-mobile by deleted user 5 years ago
- Change UI implementation of ChainSelector This is a workaround for an Android issue which prevents visible overflowed elements to receive taps. See https://github.com/facebook/react-native/issues/21... — committed to autonomoussoftware/metronome-wallet-mobile by deleted user 5 years ago
- Change UI implementation of ChainSelector This is a workaround for an Android issue which prevents visible overflowed elements to receive taps. See https://github.com/facebook/react-native/issues/21... — committed to autonomoussoftware/metronome-wallet-mobile by deleted user 5 years ago
- Merge 0.66 into master (#951) * Rename immediate to ReactNativeMicrotask in Bridge Summary: Changelog: [Internal] This diff replaced all the internal occurrences of "Immediate" with "ReactNat... — committed to microsoft/react-native-macos by HeyImChris 2 years ago
still an issue on 0.61.2
No, bot, it’s still pending #26374
We need a solution for this since iOS works as expected. This odd behavior on Android leads to unpredictable bugs that happen only in one platform (Android).
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community’s attention? This issue may be closed if no further activity occurs. You may also label this issue as a “Discussion” or add it to the “Backlog” and I will leave it open. Thank you for your contributions.
Hey stale-bot, not it’s not fixed, and the PR was not merged.
No one ? 😞
Still happening in RN 0.62 😦
Same issue here ! Tried everything…
Still broken. Just lost a good portion of a day to this one. It is intensely frustrating that there has been a PR open to fix this for 1.5 years with no movement. @safaiyeh any ideas on how we can get that PR merged and this 2+ year old frustrating platform inconsistency finally fixed?
same issue
It’s been YEARS since this issue was open.
My workaround is thatI had to create a component with
position: 'absolute'to get the ‘overflow’ effect on a touchable component.I can only advise you to do the same, this situation is so rare that no one will ever fix it.
May your code work 🙏🏼
This PR #26374 is supposed to fix this.
I’ve tested the code in an isolated environment (ViewGroup subclass in a simple Android project).
I have two problems:
error: package com.facebook.hermes.reactexecutor does not existAnyone who knows the correct steps for compiling RN for Android - is welcome to try this. And push the staff to merge this.
In fact, it’s not required to switch overflow (
overflow: 'visible'), any kind of touchable component doesn’t work outside the rectangular of width x height.@YanvegHD 😅