React-native: [0.57.1] Android overflow doesn't register taps (touchable) in the "overflowed" area

[rborn]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] 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 🤗

[YanvegHD]

Same issue here ! Tried everything...

[taylorkline]

@rborn For the purposes of searching, can you please edit the title to include the keyword touchable, for searches that use RN terminology?

[YanvegHD]

Typo, it's "Touchable" not "Toucheable"

[rborn]

@YanvegHD 😅

[YanvegHD]

No one ? :disappointed:

[zacksleo]

Same issue

[summmmer]

same issue

[arqex]

Same here, isn't it a workaround or an explanation?

[gasparteixeira]

Same here. RN 0.57.1

[Liqiankun]

Overflowed area is not touchable on Android!

[Liqiankun]

@gasparteixeira @rborn Man, then what did you do to this issue? Change design?

[gasparteixeira]

@Liqiankun I change design. It doesn't work!

[Liqiankun]

@gasparteixeira OK, I think this is the only way. Thanks.

[loginov-rocks]

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.

[renaekathleen]

Still seeing this on 0.59.3.

[fontesrp]

Still happening on 0.59.9

[danielgindi]

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:

1. CI in this repo fails to compile - without any error details.
2. Locally I can't compile for use in an RN project, due to error: package com.facebook.hermes.reactexecutor does not exist

Anyone who knows the correct steps for compiling RN for Android - is welcome to try this. And push the staff to merge this.

[mahdinba97]

still an issue on 0.61.2

[stale[bot]]

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.

[danielgindi]

Hey stale-bot, not it's not fixed, and the PR was not merged.

[kazzkiq]

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).

[stale[bot]]

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.

[danielgindi]

No, bot, it's still pending #26374

[lgenzelis]

Still happening in RN 0.62 :(

[tickietackie]

Still not fixed. I'm also waiting for this. Can somebody explain how you changed the design to make it work in another way? I also really tried a lot now and cannot find a way to make get around this.

[kazzkiq]

@tickietackie In my case I redesigned my entire component in a way that nothing would need to be pushed outside, causing overflow.

Grab a pen and a paper, and try to re-imagine your layout in a way that the overflown element doesn't need to be.