Set onClickListener onPress on Button in React Native Android iOS

How to add onPress to button component in React Native and call a function defined in the same class on button click event using this.

What we are doing in this project : In this tutorial we would going to implement onClick method on Button using onPress. The onPress method works on both android and iOS devices. After setting up onPress we would declare a simple method in our main class. Inside this method we would call a simple Alert message. You can define any task in this method, which you want to complete on button click event.

Contents in this project Set onClickListener onPress on Button :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add AppRegistry, View, Button, Alert component in import block.

<br />
import { AppRegistry, View, Button, Alert } from ‘react-native’;

1	import { AppRegistry, View, Button, Alert } from ‘react-native’;

3. declare a function named as SampleFunction() in your main class.

<br />
TestFunction() {</p>
<p>    Alert.alert(‘Button Pressed !!!’)</p>
<p>  }

TestFunction() {

Alert.alert(‘Button Pressed !!!’)

}

4. Add Singe View as parent view in render’s return block and style it using inline css.

<br />
render() {<br />
    return (<br />
     <View style={{flex :1, justifyContent: ‘center’, margin: 8 }}></p>
<p>     </View><br />
    );<br />
  }

render() {

return (

</View>

);

}

5. Add Button in Parent View.

<br />
render() {<br />
    return (<br />
     <View style={{flex :1, justifyContent: ‘center’, margin: 8 }}></p>
<p>        <Button /></p>
<p>     </View><br />
    );<br />
  }

render() {

return (

</View>

);

}

6. Add onPress on button. We have to call the function with this and dot ( . ) operator. this determines that this function belongs to the same class.

<br />
<View style={{flex :1, justifyContent: ‘center’, margin: 8 }}></p>
<p>        <Button onPress={ this.TestFunction } /></p>
<p></View>

</View>

7. Set button Above title text which is shows on button as button Text and button color using style.

<br />
<View style={{flex :1, justifyContent: ‘center’, margin: 8 }}></p>
<p>        <Button onPress={ this.TestFunction } title=”Test Button” color=”#009688″ /></p>
<p></View>

</View>

8. Complete Source Code for index.android.js file :

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, View, Button, Alert } from ‘react-native’;</p>
<p>class Myproject extends Component {</p>
<p>  TestFunction() {</p>
<p>    Alert.alert(‘Button Pressed !!!’)</p>
<p>  }</p>
<p>  render() {<br />
    return (<br />
     <View style={{flex :1, justifyContent: ‘center’, margin: 8 }}></p>
<p>        <Button onPress={ this.TestFunction } title=”Test Button” color=”#009688″ /></p>
<p>     </View><br />
    );<br />
  }<br />
}</p>
<p>AppRegistry.registerComponent(‘Myproject’, () => Myproject);