In this tutorial we will learn how to create different types of Button in React Native projects. It can be used for both android and IOS platforms with a single codebase.

Types Of Button In React Native

There are different types of buttons in react native like text buttons, icon buttons, button with text and icon and custom buttons. We will learn all these types of buttons.

• Button
• Text Button
• Icon Button
• Text and Icon Button
• Rounded Button

1. Simple Button In React Native

The Button tag is used to create simple button. This button has less features like you can not style it according to use.

 <Button
         title="Press me"
         onPress={() => Alert.alert('Simple Button')}
        />

Button onPress()

To perform any action use onPress = {call anything }, inside the button.

How To Style Simple Button In React Native?

To give style to this simple button , you have to wrap it to the View and then give style for the View like below.

How to Disable Simple Button in RN?

To disable the button use ->  disabled={true}  inside the button as props.

Background Color Of React Native Button

To change the background color of simple button, wrap it by View and then use the background color of View.

import React, { Component } from "react";
import { View, Text, StyleSheet, Image, Button, Alert} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";


export default class Home extends React.Component {
    constructor() {
        super();
        this.state = {
            counter: 0,

        };
    }

    setState
    render() {
        return (
            <SafeAreaView>
                <View>

                    <Text style = {styles.text}>Types of button</Text>
                   {/* simple button */}
                    <View style = {styles.buttonView}>
                    <Button
                        title="Press me"
                        onPress={() => Alert.alert('Simple Button')}
                    />
                    </View>

                </View>
            </SafeAreaView>

        );
    }
}

const styles = StyleSheet.create({
    text :{
        fontSize: 26,
        margin: 20,
        textAlign : "center",
        alignContent : 'center'
    },
    buttonView: {
        margin: 50,
        title : 20
    }

})

2. Text Button

The text buttons are more reliable buttons in react native. We can customize according to us. To perform onPress, we have to wrap the Text by TouchableOpacity. This type buttons are simple to use.

<TouchableOpacity 
               onPress = {() =>Alert.alert('Text Button')}>
                 <Text style={styles.textButton}>Text TouchableOpacity Button</Text>
            </TouchableOpacity>

Here you can style the Text which is inside the TouchableOpacity.

const styles = StyleSheet.create({
   
    textButton:{
        fontSize: 20,
        backgroundColor: 'green',
        margin: 40,
        color :"white",
        padding: 10,
        textAlign : 'center'
    },

})

Further you can use TouchableWithoutFeedback instead TouchableOpacity to make button like below.

 <TouchableWithoutFeedback
                    onPress = {() =>Alert.alert('Text Button TouchableWithoutFeedback')}>
                        <Text style={styles.textButton}>Text TouchableWithoutFeedback Button</Text>
                    </TouchableWithoutFeedback>

TouchableHighlight Button

This type buttons are also text type buttons. They highlight when you touch them.

<TouchableHighlight
                    onPress = {() =>Alert.alert('Text Button TouchableHighlight')}>
                        <Text style={styles.textButton}>Text TouchableHighlight Button</Text>
                    </TouchableHighlight>

TouchableNativeFeedback Button In RN

You can create a Text button using the TouchableNativeFeedback.

<TouchableNativeFeedback
                    onPress = {() =>Alert.alert('Text Button TouchableNativeFeedback')}>
                        <Text style={styles.textButton}>Text TouchableNativeFeedback Button</Text>
                    </TouchableNativeFeedback>

Note : Don’t forgot to import the the above components from react-native-gesture-handler while using above components.

import { TouchableOpacity, TouchableWithoutFeedback, TouchableHighlight, TouchableNativeFeedback } from "react-native-gesture-handler";

3. Icon Button

To use icons in react native first install its vector-icons npm using following command:

npm install --save react-native-vector-icons

Now to make an icon button place the icon inside the simple button, TouchableOpacity and anyone from the above components.

Import the react-native-vectors library in your project.

import Icon from 'react-native-vector-icons/FontAwesome';

<TouchableOpacity
                        onPress={() => Alert.alert('Text Button TouchableOpacity')}>
                          icon={
                            <Icon
                                name="arrow-right"
                                size={15}
                                color="white"
                            />
                        }
                    </TouchableOpacity>

4. Button With Icon And Text

To make a button with icon and text you can use Icon and Text in the row or column format inside any touchable component like below.

Install vector-icons npm.

npm i react-native-vector-icons

Then import its library in your project.

import Icon from 'react-native-vector-icons/FontAwesome';

  <Button
                        icon={
                            <Icon
                                name="arrow-right"
                                size={15}
                                color="white"
                            />
                        }
                        title="Button with icon"
                    />

 <TouchableOpacity
                        onPress={() => Alert.alert('Text Button TouchableOpacity')}>
                          icon={
                            <Icon
                                name="arrow-right"
                                size={15}
                                color="white"
                            />
                        }
                        <Text style={styles.textButton}>Button</Text>
                    </TouchableOpacity>

Rounded Button In React Native

To create rounded button just use the following code.

 <TouchableOpacity
                        style={styles.roundedButton}
                        onPress={() => Alert.alert('Text Rounded Button')}>
                        <Text style = {styles.roundedButtonTitle}>Rounded Button</Text>
                    </TouchableOpacity>

Style For Rounded Button

Use following style properties to give the rounded shape to a TouchableOpacity button.

roundedButton: {
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
        margin: 15,
        padding: 10,
        borderRadius: 10,
        backgroundColor: 'orange',
        fontSize : 20,
    },
    roundedButtonTitle :{
        fontSize: 20,
        fontWeight : "400",
        color: "white"
    }

Results

Hope you enjoyed and learn the types of buttons in react native. For Any query you can comment in the comment section below. Thank You for visiting this tutorial.

You can learn more React Native Elements from here.