React Native onpress not working - react-native

Question

onRadioPressed does not seem to be called - what am I doing wrong? I also need to get the text contained in the 'clicked' item.
I believe I can get that with event.nativeEvent.text, correct?
Thanks for any help.
class RadioBtn extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
onRadioPressed(event) {
console.log('RADIOBUTTON PUSHED:');
}
render() {
return (
<View style={styles.radioGrp}>
<View style={styles.radioContainer}>
<TouchableHighlight onpress={() => this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>
<Text style={styles.radio}>Left</Text>
</TouchableHighlight>
</View>
<View style={styles.radioContainer}>
<TouchableHighlight onpress={() => this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>
<Text style={styles.radio}>Right</Text>
</TouchableHighlight>
</View>
</View>
);
}
}

Answer 1

So here:
<TouchableHighlight onpress={() => this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>
<Text style={styles.radio}>Left</Text>
</TouchableHighlight>
First change onpress to onPress. Here () => this.onRadioPressed.bind(this) you are specifying an arrow function that returns another function this.onRadioPressed.bind(this) but you never trigger it.
Correct ways:
// You can do either this
<TouchableHighlight onPress={() => this.onRadioPressed()} underlayColor='#f1c40f'>
<Text style={styles.radio}>Left</Text>
</TouchableHighlight>
// Or you can do either this
<TouchableHighlight onPress={this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>
<Text style={styles.radio}>Left</Text>
</TouchableHighlight>
I would recommend checking this article out https://medium.com/#housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.irpdw9lh0

Answer 2

You can not bind the function inside onpress link this :
<TouchableHighlight onpress={() => this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>
use it like this :
<TouchableHighlight onpress={() => this.onRadioPressed()} underlayColor='#f1c40f'>
if you want to bind the function then try this:
<TouchableHighlight onpress={this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>
Cheers:)

Answer 3

Use below line
<TouchableHighlight onPress={this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>
or using arrow function
<TouchableHighlight onPress={() => this.onRadioPressed()} underlayColor='#f1c40f'>

Answer 4

if https://stackoverflow.com/a/41651845/9264008 doesn't works check the way you have imported TouchableOpacity
✅ correct import import { TouchableOpacity } from 'react-native'
sometimes mistakenly weird import happens example below
❌ Import import { TouchableOpacity } from 'react-native-gesture-handler'

Answer 5

I'm using react-native 0.66 version and it's working fine.
import React, { useState } from 'react';
import { StyleSheet,Text,View } from "react-native";
const App = () => {
const [ prevCount, setCount ] = useState(1)
const onPress = () => setCount(prevCount => prevCount + 1);
return (
<View style={styles.container}>
<Text style={styles.prevCount}> {prevCount} </Text>
<Text style={styles.pressHere} onPress={onPress} > Press Here </Text>
</View>
)
};
const styles = StyleSheet.create({
container: {
marginTop: 50
},
pressHere:{
fontSize: 30
},
prevCount: {
fontSize: 20,
color: 'red'
}
})
export default App;
also, you can use this doc.