React-native: Animated.View not firing TouchableOpacity event on Android if initially rendered off screen

[CatapultJesse]

🐛 Bug Report

When you have an animated view initially rendered off the screen on android it seems the touchable opacity event doesn't get fired.

Works correctly on iOS

To Reproduce

https://snack.expo.io/@jkcooper/rn-issue-animated-scroll-touchable-opacity-android

Expected Behavior

Tapping on a touchable opacity that gets brought into view will fire

Code Example

Snack: https://snack.expo.io/@jkcooper/rn-issue-animated-scroll-touchable-opacity-android

Environment

React Native Environment Info:
System:
OS: macOS 10.14.3
CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
Memory: 73.95 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.13.0 - /usr/local/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5314842
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.4 => 16.8.4
react-native: 0.59.1 => 0.59.1
npmGlobalPackages:
react-native-cli: 2.0.1

[andriadze]

I had the exact same issue and what fixed it for me was removing position: 'absolute' from TouchableOpacity

I don't think that's the problem in your case though.

[CatapultJesse]

It seems the issue is the Animated.View width doesn't extend on Android based on its contents, and the TouchableOpacity can only be hit within the parent container.

If you put a background color on the Animated.View in the snack you'll see what I mean.

This means a work around of specifically setting the width of the Animated.View (in the snack example width: (TABS.length + 2) * (width / 3)) will make all items touchable.

[hopewise]

any update?

[jordmccord]

Anyone know why this happens? Can't figure out a workaround without moving content out of Animated.View...

[ErnesII]

I just migrated one project from rn 0.55.4 to 0.60 and some components based on animations stopped working, after several hours I found that Animated.Value() did not work, atleast for android... you need to use: Animated.Value(0.01), 0.01 is required. Also If you are using some content that needs to be hidden inside of Animated.View, you will need to use a ScrollView instead of a normal View:

<ScrollView
    scrollEnabled={false} 
    showsVerticalScrollIndicator={false}
    showsHorizontalScrollIndicator={false}
>
    { this.props.children }
</ScrollView>

Before I was using this code specifically for iOS, but it seems that rn 0.60 in Android is behaving exactly like iOS.

[tomtargosz]

Having the same issue in 0.59.10. Manually animating TouchableOpacity with Animated.createAnimatedElement doesn't work either.

[jonathandai]

Having the same issue on RN 0.60.4. Works fine on iOS, but onPress for touchables on Android do not fire.

[lakshanmamalgaha]

I also have the same issue in android touchable opacity not firing in RN version 0.60.4. Is any one found a solution for this?

[bigo104]

Seeing the same issue, animated.view doesn't like onPress event handler from touchable components .

[bigo104]

have any of the contributors or maintainers chimed in here? Seems like 5 months is a good amount of time to fix this issue.

[bigo104]

Upon further investigation and using my eyes to read -- when using Animated.View we should resolve to PanResponders

[thibmaek]

We are experiencing the same issue here (https://github.com/thibmaek/react-components/blob/master/react-native/rn-bounce/index.js#L81).

The only effective workaround is setting a width and height on the Animated.View

[haveamission]

@bigo104 - how would one use PanResponders in a similar way to an Animated.View?

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

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.