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;