onPress is not called after using useNativeDriver transform button

[ThinkerLu]

Description

After using useNativeDriver transform button, finger movement occurs when the button is pressed, the button's onPress will not be called, but the visual feedback of the button is normal. The bug only occurs on Android devices, and when the new architecture is enabled, useNativeDriver=true is set.

React Native Version

0.71.4

Output of npx react-native info

System: OS: macOS 13.1 CPU: (10) arm64 Apple M1 Pro Memory: 148.16 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 19.7.0 - /opt/homebrew/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 9.5.0 - /opt/homebrew/bin/npm Watchman: 2023.03.06.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: Not Found SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: API Levels: 28, 29, 30, 31, 32, 33 Build Tools: 28.0.3, 30.0.2, 30.0.3, 31.0.0, 33.0.0 System Images: android-31 | Google APIs ARM 64 v8a, android-33 | Google APIs ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: Electric Eel 2022.1.1 Patch 2 Electric Eel 2022.1.1 Patch 2 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 11.0.15 - /opt/homebrew/opt/openjdk@11/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.4 => 0.71.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Run my code, Press the button after scrolling the FlatList, move your finger slightly and lift it up.

Snack, code example, screenshot, or link to a repository

import React, {useRef, useState} from 'react'; import {View, Text, Button, Animated} from 'react-native';

const componentList: number[] = Array.from(new Array(100).keys());

const App = () => { const currScroll = useRef(new Animated.Value(0)).current; const [count, setCount] = useState(0);

return ( <View style={{flex: 1}}> <Animated.View style={{ position: 'absolute', zIndex: 2, width: '100%', transform: [{translateY: currScroll}], }}> <Button title={Press count : ${count}} onPress={() => { console.log('pressed'); setCount(count + 1); }}> </Animated.View> <Animated.FlatList style={{width: '100%', height: '100%', position: 'absolute', zIndex: 1}} data={componentList} renderItem={({index}) => ( <Text style={{ backgroundColor: 'white', height: 28, }}> {index} )} keyExtractor={item => item.toString()} onScroll={Animated.event( [ { nativeEvent: { contentOffset: { y: currScroll, }, }, }, ], {useNativeDriver: true}, )}></Animated.FlatList> ); };

export default App;

[iMonk777]

Hi @ThinkerLu , we still have this issue. Did you find any solution for this?

[jugshaurya]

+1, after applying transform: translateX/Y/Z(*), on Animated.View, internal content of this View become non-responsive, works after multiple clicking.

It comes after using New Arch.Even used latest 0.72.0-RC.3

Tested Today: 29/05/23

[skinsapp]

@jugshaurya I can confirm I'm having the same issue, using 71.10, android. It basically makes the new architecture unusable on Android, unless you plan to have no animation. It's occurring with all touchables and pressables.

related: https://github.com/facebook/react-native/issues/36710

[jugshaurya]

@jugshaurya I can confirm I'm having the same issue, using 71.10, android. It basically makes the new architecture unusable on Android, unless you plan to have no animation. It's occurring with all touchables and pressables.

related: https://github.com/facebook/react-native/issues/36710

I found a temp/possible solution for it, after researching for more than 2 weeks.

Use onPressIn instead of onPress !

Let me know if it also works for you. Also to increase tappable area to make button more responsive, you can use hitslop prop.

[vrgimael]

@jugshaurya I can confirm I'm having the same issue, using 71.10, android. It basically makes the new architecture unusable on Android, unless you plan to have no animation. It's occurring with all touchables and pressables. related: #36710

I found a temp/possible solution for it, after researching for more than 2 weeks.

Use onPressIn instead of onPress !

Let me know if it also works for you. Also to increase tappable area to make button more responsive, you can use hitslop prop.

This is not a solution as it triggers accidentally on any scrollable item

[jugshaurya]

@jugshaurya I can confirm I'm having the same issue, using 71.10, android. It basically makes the new architecture unusable on Android, unless you plan to have no animation. It's occurring with all touchables and pressables. related: #36710

I found a temp/possible solution for it, after researching for more than 2 weeks.

Use onPressIn instead of onPress !

Let me know if it also works for you. Also to increase tappable area to make button more responsive, you can use hitslop prop.

This is not a solution as it triggers accidentally on any scrollable item

Can you share an example gif or something to get the better context, because i used this solution for codebase, it is working fine.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[cipolleschi]

Hi everyone, we have this investigation marked as high priority, so we hopefully would be able to make progress on this as fast as we can.

To help us out, we would greatly appreciate a reproducer starting from this repo. I understand that the issue does not reproduce consistently, but if you can set up something and tell us how and how much we need to interact with the repro to get the issue happening, this will help us a lot.

Thank you all for the cooperation! 🙏

[sonicbaume]

@cipolleschi Here's the example from @ThinkerLu as a reproducer repo, and a video of the result.

Reproducer: https://github.com/sonicbaume/fabric-onpress-bug-reproducer

Video:

https://github.com/facebook/react-native/assets/102724304/97806c87-4788-488a-8f2b-593ea286d300

[sonicbaume]

@cipolleschi Is this still considered high priority? Is there anything else you need?

[cortinico]

@cipolleschi Is this still considered high priority? Is there anything else you need?

Yes it is. If someone is willing to attempt to fix it and send a PR, it would be greatly appreaciated. Otherwise we'll eventually fix it in the (hopefully soon) future

[cipolleschi]

Thanks for your patience, competing priorities took most of my time. :(

As @cortinico said, we want to fix this issue, together with some other that are affecting the New Architecture. Bear with us, we will get there.

[cipolleschi]

Hi @sonicbaume @ThinkerLu @iMonk777 @jugshaurya @vrgimael, sorry that this took us so long.

I was trying the reproducer and it feels like it is fixed on 0.74.1 with regular touches.

There is still something weird related to when you tap-drag-release within the button. It looks that onPress is not invoked in that case. It works if you click-drat to the top-release: it looks like that when we 'release' the touch, we are not considering the translated position.

https://github.com/facebook/react-native/assets/11162307/d8239609-57b8-45b9-b6c6-af363d52f4ca

Let's note that this behavior happens also on iOS:

https://github.com/facebook/react-native/assets/11162307/128f4474-f43e-4536-9c3c-5059bf9544d3