Buttons inside horizontal ScrollView doesn't response

I write project in react-native and have weird issue.

in my home page i have horizontal ScrollView, and inside it components that contain buttons, but the buttons not work. e.g. pressing on the TouchableOpacity make the button looked pressed but the action (Alert.alert("alert")) isn't triggered. I test the application now on android device.

**What I tried: **

• I change the code to the most simpliest one, with just buttons inside horizontal ScrollView
• I changed the ScrollView to FlatList or change the TouchableOpacity to Pressable - with no help
• deleting the horizontal property - make it vertical and the buttons do response.
• wrap with GestureHandlerRootView
• make keyboardShouldPersistTaps to be "always" or "handled"

here is my code

import React from 'react';
import { View, Text, FlatList, TouchableOpacity, Alert, StyleSheet, Pressable } from 'react-native';

const HorizontalFlatListWithButtons = () => {
  const data = [1, 2, 3, 4, 5];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        horizontal
        keyExtractor={(item) => item.toString()}
        renderItem={({ item }) => (
          <Pressable
            style={styles.button}
            onPress={() => Alert.alert(`נלחץ כפתור ${item}`)}
          >
            <Text style={styles.buttonText}>כפתור {item}</Text>
          </Pressable>
        )}
        contentContainerStyle={styles.listContainer}
        keyboardShouldPersistTaps="always"
        showsHorizontalScrollIndicator={true}
      />
    </View>
  );
};

export default HorizontalFlatListWithButtons;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  listContainer: {
    paddingHorizontal: 20,
  },
  button: {
    padding: 20,
    marginHorizontal: 10,
    backgroundColor: 'skyblue',
    borderRadius: 10,
  },
  buttonText: {
    fontSize: 18,
  },
});

that component is inside:

const MainScreen: React.FC = () => {

  return (
       <HorizontalFlatListWithButtons />
  );
};
export default MainScreen;

and is inside the following navigation:

<NavigationContainer ref={navigationRef}>
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="main" component={MainScreen} />
    <Stack.Screen name="location" component={LocationScreen} />
    <Stack.Screen name="learn" component={LearnScreen} />
    <Stack.Screen name="achivments" component={AchivmentsScreen} />
    <Stack.Screen name="reports" component={ReportsScreen} />
  </Stack.Navigator>
</NavigationContainer>

in app.tsx:

return (
  <GestureHandlerRootView style={{ flex: 1 }}>
    <PersistQueryClientProvider client={queryClient} persistOptions={{ persister: asyncStoragePersister }}>
      <AlertProvider>
        <Navigation />
      </AlertProvider>
    </PersistQueryClientProvider>
  </GestureHandlerRootView>
);

I realized that when pressing at the edges of the screen - the buttons are triggered, but not on the edge - do not.

• I removed any zIndex that is larger then 10
• I remoevd any pointerEvent:"none"
• There is no position: "absolute" in my project

I got to the edge, the AI doesn't help me anymore, will human do?

Will be glad with any help!

Finally the alternative solution for me was:

const [touchStartTime, setTouchStartTime] = useState(0)

<TouchableOpacity
  onPressStart={() => {
    setTouchStartTime(Date.now());
  }}
  onPressEnd={() => {
    const touchDuration = Date.now() - touchStartTime;
    if (touchDuration < 200) { 
      console.log('Button pressed!');   
    }
  }}
>
Press here
</TouchableOpacity>

the onPressStart and onPressEnd trigger in any touch, so the idea is to detect if pressing was short, and the make the action