onPress is not called after using useNativeDriver transform button #36504

ThinkerLu · 2023-03-16T17:36:32Z

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;

The text was updated successfully, but these errors were encountered:

iMonk777 · 2023-05-05T07:09:57Z

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

jugshaurya · 2023-05-29T11:25:34Z

+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

the-skins-app · 2023-06-11T12:04:28Z

@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

jugshaurya · 2023-06-11T13:20:54Z

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

vrgimael · 2023-06-28T13:22:41Z

@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 · 2023-06-28T13:33:35Z

@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 · 2023-12-26T05:13:29Z

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 · 2024-01-02T05:23:59Z

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

cipolleschi · 2024-01-24T12:19:59Z

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 · 2024-04-17T11:38:47Z

@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:

onpress-example.mp4

sonicbaume · 2024-04-26T11:10:48Z

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

cortinico · 2024-04-26T16:59:52Z

@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 · 2024-05-01T13:21:48Z

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.

ThinkerLu added Needs: Triage 🔍 Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules) labels Mar 16, 2023

react-native-bot added the Component: Button label Mar 16, 2023

cjshearer mentioned this issue Jun 1, 2023

React-navigation Drawer Buttons Not Working With New Architecture Enabled on Android react-navigation/react-navigation#11021

Open

12 tasks

the-skins-app mentioned this issue Jun 11, 2023

Touchable components stop responding randomly #36710

Closed

Flewp mentioned this issue Oct 10, 2023

NativeMeasurer for Android discord/react-native#44

Merged

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Dec 26, 2023

github-actions bot closed this as completed Jan 2, 2024

sammy-SC reopened this Jan 6, 2024

github-actions bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 7, 2024

j-piasecki linked a pull request May 7, 2024 that will close this issue

Trigger render when Animated.Event stream pauses #44447

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

onPress is not called after using useNativeDriver transform button #36504

onPress is not called after using useNativeDriver transform button #36504

ThinkerLu commented Mar 16, 2023 •

edited

iMonk777 commented May 5, 2023

jugshaurya commented May 29, 2023 •

edited

the-skins-app commented Jun 11, 2023 •

edited

jugshaurya commented Jun 11, 2023 •

edited

vrgimael commented Jun 28, 2023

jugshaurya commented Jun 28, 2023

github-actions bot commented Dec 26, 2023

github-actions bot commented Jan 2, 2024

cipolleschi commented Jan 24, 2024

sonicbaume commented Apr 17, 2024

sonicbaume commented Apr 26, 2024

cortinico commented Apr 26, 2024

cipolleschi commented May 1, 2024

onPress is not called after using useNativeDriver transform button #36504

onPress is not called after using useNativeDriver transform button #36504

Comments

ThinkerLu commented Mar 16, 2023 • edited

Description

React Native Version

Output of npx react-native info

Steps to reproduce

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

iMonk777 commented May 5, 2023

jugshaurya commented May 29, 2023 • edited

the-skins-app commented Jun 11, 2023 • edited

jugshaurya commented Jun 11, 2023 • edited

vrgimael commented Jun 28, 2023

jugshaurya commented Jun 28, 2023

github-actions bot commented Dec 26, 2023

github-actions bot commented Jan 2, 2024

cipolleschi commented Jan 24, 2024

sonicbaume commented Apr 17, 2024

sonicbaume commented Apr 26, 2024

cortinico commented Apr 26, 2024

cipolleschi commented May 1, 2024

ThinkerLu commented Mar 16, 2023 •

edited

Output of `npx react-native info`

jugshaurya commented May 29, 2023 •

edited

the-skins-app commented Jun 11, 2023 •

edited

jugshaurya commented Jun 11, 2023 •

edited