CODEWITHSUNDEEP
react-native
miarde
miarde

Reputation: 109

React Native onpress not working

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>
    );
  }
}

Upvotes: 10

Views: 35750

Answers (5)

Siddhartha Mukherjee
Siddhartha Mukherjee

Reputation: 2943

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.

Upvotes: 0

Abdul Mateen Shaikh
Abdul Mateen Shaikh

Reputation: 311

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'

Upvotes: 3

Vyacheslav A.
Vyacheslav A.

Reputation: 185

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

Upvotes: 11

Jagadish Upadhyay
Jagadish Upadhyay

Reputation: 1264

Use below line

<TouchableHighlight onPress={this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>

or using arrow function

<TouchableHighlight onPress={() => this.onRadioPressed()} underlayColor='#f1c40f'>

Upvotes: 2

Codesingh
Codesingh

Reputation: 3384

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:)

Upvotes: 2

Related Questions