Expo App on Android device some onPress() not firing - react-native

Question

Several issues are happening here:
Only the delete icon fires onPress()
I've tried different nesting of JSX components to get the update icon to fire with no luck
If it matters, for some reason the 'back' arrow in the StackNavigator on this same page doesn't work either.
This code works perfectly on AVD and IOS simulator
The alpha effect of the TouchableOpacity component isn't being rendered
I've googled extensively, and the only similar problem has to with absolute positioning the TouchableOpacity component, which isn't my case.
I've also tried to onPress = {() Alert('click')} and nothing happened on the Android device.
return (
<View style={styles.container}>
<View style={styles.detailsPanel}>
{/* first row */}
<View style={styles.rowContainer}>
<View style={styles.firstColumn}>
<AppText size={16} color={STYLES.blue} weight='bold'>
{route.params.item.date}
</AppText>
</View>
<View style={styles.secondColumn}>
<View style={{ flex: 1, flexDirection: "row" }}>
<AppText size={16} color={STYLES.blue} weight='bold'>
{route.params.item.aircraft_type}
</AppText>
<AppText>{" "}</AppText>
<AppText size={16} color={STYLES.blue} weight='bold'>
{route.params.item.registration}
</AppText>
</View>
</View>
<View style={styles.thirdColumn}>
<AppText size={16} color={STYLES.blue} weight='bold'>
{route.params.item.duration}
</AppText>
</View>
</View>
{/* second row */}
<Separator />
<View style={styles.rowContainer}>
<View style={styles.firstColumn}>
<AppText size={16} color={STYLES.black}>
{route.params.item.route}
</AppText>
</View>
<View style={styles.thirdColumn}>
<AppText size={16} color={STYLES.black}>
{route.params.item.pilot_in_command ? "PIC" : ""}
{route.params.item.second_in_command ? "SIC" : ""}
{route.params.item.solo ? "Solo" : ""}
{route.params.item.dual ? "Dual" : ""}
</AppText>
</View>
</View>
{/* third row */}
<View style={styles.rowContainer}>
<View style={styles.firstColumn}>
<View style={styles.rowContainer}>
<AppText size={16} color={STYLES.black}>
Landings:
</AppText>
{route.params.item.landings_day ? (
<AppText size={16} color={STYLES.black}>
{" "}
Day {route.params.item.landings_day}
</AppText>
) : null}
{route.params.item.landings_night ? (
<AppText size={16} color={STYLES.black}>
{" "}
Night {route.params.item.landings_night}
</AppText>
) : null}
</View>
</View>
<View style={styles.secondColumn}></View>
<View style={styles.thirdColumn}>
<AppText size={16} color={STYLES.black}>
{route.params.item.instructor ? " CFI" : ""}
</AppText>
</View>
</View>
{/* fourth row */}
<View style={styles.rowContainer}>
<View style={styles.firstColumn}>
<View style={styles.rowContainer}>
{route.params.item.night ? (
<AppText size={16} color={STYLES.black}>
Night {route.params.item.night}
{" "}
</AppText>
) : null}
{route.params.item.instrument ? (
<AppText size={16} color={STYLES.black}>
Inst {route.params.item.instrument}
{" "}
</AppText>
) : null}
{route.params.item.simulated_instrument ? (
<AppText size={16} color={STYLES.black}>
Hood {route.params.item.simulated_instrument}
{" "}
</AppText>
) : null}
</View>
</View>
<View style={styles.thirdColumn}>
<AppText size={16} color={STYLES.black}>
{route.params.item.cross_country ? "XC" : ""}
{route.params.item.simulator ? " Sim" : ""}
</AppText>
</View>
</View>
<View style={styles.rowContainer}>
<View style={styles.firstColumn}>
<View style={styles.rowContainer}>
{approaches.map((appr, index) => (
<AppText size={16} color={STYLES.black} key={index}>
{appr.approach_type}-{appr.number}{" "}
</AppText>
))}
</View>
</View>
<View style={styles.thirdColumn}>
{route.params.item.hold ? <AppText size={16}>Hold</AppText> : null}
</View>
</View>
{/* fifth row */}
<View style={styles.rowContainer}>
<View style={styles.firstColumn}>
<AppText>{route.params.item.remarks}</AppText>
</View>
</View>
{/* sixth row */}
<Separator />
<View style={{ flexDirection: "row", marginBottom: 5 }}>
<TouchableOpacity
style={{
flex: 2,
backgroundColor: STYLES.danger,
alignItems: "center",
justifyContent: "center",
}}
onPress={() => {
showAlert(
route.params.item.id,
route.params.item.date,
route.params.item.route
);
}}
>
<View>
<MaterialCommunityIcons
name={"delete"}
size={30}
color={STYLES.white}
/>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
navigation.navigate("FlightUpdate", {
item: route.params.item,
});
}}
style={{
flex: 2,
backgroundColor: STYLES.blue,
alignItems: "center",
justifyContent: "center",
}}
>
<View>
<MaterialCommunityIcons
name={"update"}
size={30}
color={STYLES.white}
style={{ padding: 5 }}
/>
</View>
</TouchableOpacity>
</View>
</View>
<MapView
style={styles.map}
mapPadding={{
top: 60,
bottom: 10,
right: 40,
left: 40,
}}
ref={mapRef}
>
{markers.map((marker) => (
<Marker
key={marker.key}
coordinate={marker.coordinates}
title={marker.title}
/>
))}
<Polyline
strokeColor={STYLES.blue}
strokeWidth={3}
geodesic={true}
coordinates={polylines}
/>
</MapView>
<ActivityModal visible={Context.activityVisibleValue}></ActivityModal>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
detailsPanel: {
flexDirection: "column",
width: "100%",
margin: 0,
backgroundColor: STYLES.white,
borderRadius: STYLES.borderRadius,
padding: STYLES.borderRadius,
backgroundColor: STYLES.white,
borderRadius: STYLES.borderRadius,
},
rowContainer: {
flexDirection: "row",
paddingBottom: 5,
},
firstColumn: {
flex: 1,
flexDirection: "column",
},
secondColumn: {
flex: 2,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
},
thirdColumn: {
flex: 1,
flexDirection: "column",
alignItems: "flex-end",
},
text: {
fontFamily: STYLES.font,
color: STYLES.blue,
},
map: {
flex: 1,
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
borderRadius: STYLES.borderRadius,
},
});```

Answer 1

As you're using Expo and React Navigation, I expected that react-native-gesture-handler package is already installed.
Try to import any touchable component ( TouchableOpacity or TouchableHighlight) from react-native-gesture-handler in place of react-native
import {TouchableOpacity, TouchableHighlight} from "react-native-gesture-handler"
Make sure that your code is not wrapped inside any modal component or Bottom Sheet.
Some of those modals wrapped child components inside another touchable component which blocks touch events to propagate to nested children components.

Answer 2

I had the same issue. I would recommend importing {ScrollView, TouchableOpacity} from react-native, not react-native-gesture-handler; Worked for me; Expo Version 45