Button In React Native

In this blog, I will demonstrate use of React Native Button component.

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.

• How To Set Up React Native Development Environment 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

import React, { Component } from "react";
import { View, Button, StyleSheet } from "react-native";
class App extends Component {
  clickHandler = () => {
    alert('Hi, User.');
  }

  render() {
    return (
      <View style={styles.container} >
        <View style={{ paddingTop: 10 }}>
          <Button title="Save" color="green" onPress={this.clickHandler} />
        </View>
        <View style={{ paddingTop: 10 }}>
          <Button title="Register" color="green" disabled={true} onPress={this.clickHandler} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    margin: 10,
    justifyContent: 'space-between',
    paddingTop: 10
  }
})

export default App;

Button component with title and onPress event, color and disabled property.

 

Syntax: - To make button disable 

 

disabled={true}

 

Code

import React, { Component } from "react";
import { View, Button, StyleSheet } from "react-native";

class App extends Component {

  clickHandler = () => {
    alert('Hi, User.');
  }

  render() {
    return (
      <View style={styles.container} >
        <View style={{ paddingTop: 10 }}>
          <Button title="Save" color="green" onPress={this.clickHandler} />
        </View>

        <View style={{ paddingTop: 10 }}>
          <Button title="Register" color="green" disabled={true} onPress={this.clickHandler} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    margin: 10,
    justifyContent: 'space-between',
    paddingTop: 10
  }
})

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.