CODEWITHSUNDEEP
reactjsreact-native
Sriraman
Sriraman

Reputation: 7937

onclick function is not working in react native application

I'm new to react native. I wrote the following code to call a function, if a user clicks on a text.

var login = React.createClass({
     openPopup: function(){
        console.log("function called");
     },
     render: function(){
        return (
           <View onClick={this.openPopup}>
              <Text>
                 Login
              </Text>
           </View>
        );
     }
});

Is there anything wrong in the above code? If I click the login text, I'm not getting any feedback in the console.

EDIT This question is react native specific. Not a duplicate of any other question in Stack Overflow.

Upvotes: 45

Views: 64651

Answers (3)

purii
purii

Reputation: 6414

You need to use one of the following wrapper components. Below are just the ones listed, which are available cross-platform.

TouchableHighlight

<TouchableHighlight onPress={this.openPopup}>
    <View>...</View>
</TouchableHighlight>

TouchableOpacity

<TouchableOpacity onPress={this.openPopup}>
    <View>...</View>
</TouchableOpacity>

TouchableWithoutFeedback

<TouchableWithoutFeedback onPress={this.openPopup}>
    <View>...</View>
</TouchableWithoutFeedback>

Note the above are on their way to being deprecated. Check out Pressable

Upvotes: 48

Keshav Gera
Keshav Gera

Reputation: 11244

layout_Provider= () => {

 this.rowRenderer= this.rowRenderer.bind(this);}
}

<TouchableOpacity
 style={styles.container}
 onPress={this.GoToEditActivity.bind(this, data.student_id, data.student_name, data.student_class, data.student_subject)}
 >

 <Image style={styles.image}
 source={{uri: data.student_pic}}/>
 {/*source={{uri: "http://homepages.cae.wisc.edu/~ece533/images/barbara.png"}}/>*/}

 <View style={styles.textContainer}>
 <Text style={styles.name}> {data.student_id}</Text>
 <Text style={styles.email}> {data.student_name}</Text>
 </View>
 <View style={styles.textContainer}>
 <Text style={styles.name}> {data.student_class}</Text>
 <Text style={styles.email}> {data.student_subject}</Text>
 </View>

</TouchableOpacity>
GoToEditActivity(student_id, student_name, student_class, student_subject) {

 console.log("GoToEditActivity ---------------------- student_id " + student_id);
 console.log("GoToEditActivity ---------------------- student_name " + student_name);
 console.log("GoToEditActivity ---------------------- student_class " + student_class);
 console.log("GoToEditActivity ---------------------- student_subject " + student_subject);

 this.props.navigation.navigate('EditActivity', {

 ID : student_id,
 NAME : student_name,
 CLASS : student_class,
 SUBJECT : student_subject,

 });
}

Upvotes: 0

hazardous
hazardous

Reputation: 10837

Try this-

<TouchableOpacity onPress={this.openPopup}> 
    <View> <Text>...</Text> </View> 
</TouchableOpacity>

Upvotes: 66

Related Questions