clickable doesnt work in flatlist after i build

Question

"I have a MapView BottomSheet code wrapper with BottomSheetModalProvider, and my BottomSheet has a FlatList. The FlatList renders information such as name, contact information, and two buttons to locate them. It also displays a description of the place. When testing the app using Expo, the code works well, and the buttons in the FlatList function as expected. However, after releasing the app, the buttons no longer work. Something clicks, but most of the time, it doesn't. I don't know why. When not released, all components work fine, and there are no errors in my code. I've checked the console, but no errors are reported."

`Flatlist renderedItem`



  const CustomerLocation = ({ item }) => {
    const named = name.find((data) => data.id === item.id);
    const status = item.status === 'On Deliver';
    if (named && status) {
      return (
        <View style={styles.customerLocationContainer}>
          <View style={styles.customerLocationContent}>
            <View style={styles.row}>
              <FontAwesome5 name="user-alt" size={24} color="black" />
              <Text style={styles.boldWhite}>Name: </Text>
              <Text style={styles.normalWhite}>{named.name}</Text>
            </View>
  
            <View style={styles.row}>
              <MaterialIcons name="place" size={24} color="black" />
              <Text style={styles.boldWhite}>Place: </Text>
              <Text style={styles.normalWhite}>{item.location.coords.place} {item.location.streetName}</Text>
            </View>
  
            <View style={styles.row}>
              <Ionicons name="call-sharp" size={24} color="black" />
              <Text style={styles.boldWhite}>Contact: </Text>
              <Text style={styles.normalWhite}>{named.contact}</Text>
            </View>
  
            {/* Glassy Time Button  onPress={() => targetCustomerLocation(item.location.coords)}*/}
          </View>
  
          <View style={{ flexDirection: 'column', alignItems: 'center' }}>
            <TouchableOpacity
              style={{
                flexDirection: 'row',
                backgroundColor: '#FF0266',
                paddingHorizontal: 20,
                paddingVertical: 10,
                borderRadius: 10,
                marginVertical: 10,
                alignItems: 'center',
                justifyContent: 'center',
                width: 200,
              }}
              onPress={() => targetCustomerLocation(item.location.coords)}
            >
              <Text style={{ color: 'white', marginRight: 10 }}>Locate</Text>
              <MaterialIcons name="gps-fixed" size={24} color="white" />
            </TouchableOpacity>
  
            <TouchableOpacity
              style={{
                flexDirection: 'row',
                backgroundColor: '#BB86FC',
                paddingHorizontal: 20,
                paddingVertical: 10,
                borderRadius: 10,
                marginVertical: 10,
                alignItems: 'center',
                justifyContent: 'center',
                width: 200,
              }}
              onPress={() => getDescription(item.location.imgStreet, item.location.description)}
            >
              <Text style={{ color: 'white', marginRight: 10 }}>Information</Text>
              <AntDesign name="infocirlce" size={24} color="white" />
            </TouchableOpacity>
          </View>
        </View>
      );
    }
  };

`react native`



    <GestureHandlerRootView style={{ flex: 1 }}>
    <BottomSheetModalProvider>
    <View style={styles.container}>
      <MapView style={styles.map} provider={PROVIDER_GOOGLE} showsUserLocation ref={mapRef} customMapStyle={mapCustomStyle}>
        {dataCoordinate?.map((data, index) => (
        <Marker key={index} coordinate={{
          latitude:parseFloat(data.location.coords.latitude),
          longitude:parseFloat(data.location.coords.longitude)
        }}>
        <Callout>
          <View style={{padding:10}}>
            <Text style={{color:'black'}}>{findName(data.id)}</Text>
            <Text style={{color:'black'}}>{data.location.streetName},{data.location.coords.place}</Text>
          </View>
        </Callout>
      </Marker>
    ))}
      </MapView>
        <BottomSheet dataCoordinate={dataCoordinate} CustomerLocation={CustomerLocation} btnSheetRef={btnSheetRef}/>
        <ModalDescription modalDescription={modalDescription} onClose={()=>setModalDescription(false)} imgUri={imgUri} description={description}/>
    </View>
    </BottomSheetModalProvider>
    </GestureHandlerRootView>


   

`BottomSheet`
const BottomSheetComponent = (props) => {
  const { dataCoordinate, CustomerLocation, btnSheetRef } = props;
  return (
  
          <BottomSheetModal ref={btnSheetRef} index={0} snapPoints={btnSheetSize} backgroundStyle={{ backgroundColor: '#17263c' }}>
              <View style={{flex:1}}>
              <FlatList
              horizontal
              data={dataCoordinate}
              keyExtractor={(item) => item.id}
              renderItem={({ item }) => <CustomerLocation item={item} />}
              />    
                  
              </View>
          </BottomSheetModal>

  );
};

Debugged code, expecting resolved button click issue in release. Discovered no errors; confusion persists.

Answer 1

Where are you exporting TouchableOpacity from? i.e. 'react-natve' or 'react-native-gesture-handler' and does it happening in Android or IOS. Please provider more information

Also can you try and tell if using Pressable works for you or not?