Post
Ask Question

Button In React Native

In this blog, learn Button component in React Native and how to use its properties.  Click on the following link for React Native Code setup for Android Apps.
The Button in React Native is used to interact with screen and helps to pass command/action for user by clicking on it.
 

Button Properties

  1. title - Represents the text inside the button ex: - Login, Logout, Register, Save.
  2. color - To change the background color of Button in Android and text color in iOS.
  3. disabled - To make Button disable. (User cannot perform any action with this component)
  4. onPress - (Event) To call handler/function.
  5. Other properties - touchSoundDisabled, accessibilityLabel, testid, hasTVPreferredFocus, nextFocusDown, nextFocusForward, nextFocusLeft, nextFocusRight
Syntax
 
<Buttontitle="Button Title"onPress={"functionName()"}/>
 
Example
 
Button component with title and onPress event.
 
First Step - Import Button, View, StyleSheet component from React Native library.
 
import {View, Button, StyleSheet} from"react-native";
 
Second Step - Add button component in View component of React Native. Add title property and onPress event to button component as well as add style using StyleSheet.
 
Code
  1. import React, { Component } from "react";  
  2. import { View, Button, StyleSheet } from "react-native";  
  3. class App extends Component {  
  4.   clickHandler = () => {  
  5.     alert('Hi, User.');  
  6.   }  
  7.   
  8.   render() {  
  9.     return (  
  10.       <View style={styles.container} >  
  11.         <View style={{ paddingTop: 10 }}>  
  12.           <Button title="Save" color="green" onPress={this.clickHandler} />  
  13.         </View>  
  14.         <View style={{ paddingTop: 10 }}>  
  15.           <Button title="Register" color="green" disabled={true} onPress={this.clickHandler} />  
  16.         </View>  
  17.       </View>  
  18.     );  
  19.   }  
  20. }  
  21.   
  22. const styles = StyleSheet.create({  
  23.   container: {  
  24.     margin: 10,  
  25.     justifyContent: 'space-between',  
  26.     paddingTop: 10  
  27.   }  
  28. })  
  29.   
  30. export default App;   
Button component with title and onPress event, color and disabled property.
 
Syntax: - To make button disable 
 
disabled={true}
 
Code
  1. import React, { Component } from "react";  
  2. import { View, Button, StyleSheet } from "react-native";  
  3.   
  4. class App extends Component {  
  5.   
  6.   clickHandler = () => {  
  7.     alert('Hi, User.');  
  8.   }  
  9.   
  10.   render() {  
  11.     return (  
  12.       <View style={styles.container} >  
  13.         <View style={{ paddingTop: 10 }}>  
  14.           <Button title="Save" color="green" onPress={this.clickHandler} />  
  15.         </View>  
  16.   
  17.         <View style={{ paddingTop: 10 }}>  
  18.           <Button title="Register" color="green" disabled={true} onPress={this.clickHandler} />  
  19.         </View>  
  20.       </View>  
  21.     );  
  22.   }  
  23. }  
  24.   
  25. const styles = StyleSheet.create({  
  26.   container: {  
  27.     margin: 10,  
  28.     justifyContent: 'space-between',  
  29.     paddingTop: 10  
  30.   }  
  31. })  
  32.   
  33. export default App;  
Output
 
 

Summary

 
Button component is very easy to use in React Native. In this blog, that’s what I discussed. In my next blog, I will talk about the TouchableOpacity component of React Native.