React Native- Touchable not working and no errors? - ios

Question

I am trying to detect touch on a view in React Native. I followed this link and incorporated the Touchable around my styled view like so:
<TouchableWithoutFeedback onPress={cardPressed}>
<View style={styles.card}>
<Text style={styles.card_Head}>What is Something?</Text>
<Text style={styles.card_Body}>Something</Text>
</View>
</TouchableWithoutFeedback>
I am using a functional component, so after export default function App() { I have:
function cardPressed()
{
console.log('pressed');
}
No errors, but I get nothing. What is wrong w this implementation?

Answer 1

Check your import. You should import TouchableWithoutFeedback from react-native and not from react-native-gesture-handler

Answer 2

Check out this code.
import React, { useState } from "react";
import { StyleSheet, TouchableWithoutFeedback, Text, View } from "react-native";
const App = () => {
const [count, setCount] = useState(0);
const cardPressed = () => {
console.log('pressed');
setCount(count + 1);
};
return (
<View style={styles.container}>
<View style={styles.countContainer}>
<Text style={styles.countText}>Count: {count}</Text>
</View>
<TouchableWithoutFeedback onPress={cardPressed}>
<View style={styles.button}>
<Text style={styles.card_Head}>What is Something?</Text>
<Text style={styles.card_Body}>Something</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 10
},
button: {
alignItems: "center",
backgroundColor: "#DDDDDD",
padding: 10
},
countContainer: {
alignItems: "center",
padding: 10
},
countText: {
color: "#FF00FF"
},
card_Head: {
fontWeight: 'bold',
fontSize: 24
},
card_Body: {
fontStyle: 'italic'
}
});
export default App;