Button And Touchable in React Native

what is Button?

As you know the Button are clickable ones which perform some operations on click/tap of it.

Let see the props of Button

onPress : Handler to be called when the user taps the button.

title : Text to display inside the button

color : Color of the text (iOS), or background color of the button (Android).

disbled : If true, disable all interactions for this component

Button is nice and simple, but its not much flexible. You cant customize the look and feel of a button except color, that's where Touchables come to rescue.

what is Touchable?

The “Touchable” components provide the capability to capture tapping gestures, and can display feedback when a gesture is recognized. In Touchables we have so many types but here i am going explain TouchableOpacity and TouchableHighlight.

what is the difference TouchableOpacity vs TouchableHighlight?

1.In TouchableOpacity we can have multiple child views where in TouchableHighlight we have only single child view.

2.We have underlayColor props in TouchableHighlight which change color on click.

Lets see an example which has all three Component

import React, { useState } from 'react';
import {SafeAreaView, StyleSheet, TextInput, View, Text, Button, Alert, Platform, TouchableOpacity, TouchableNativeFeedback, TouchableHighlight} from 'react-native';

const App = () => {
    const [course, setLanguage] = useState("")


    return (
    <SafeAreaView>
    <View style={styles.viewScreen}>

    <Button
    title ="Default Button With No Styles"
    color="#009688"
    onPress={()=>Alert.alert('You clicked the button!') }
    />

    <TouchableOpacity
    activeOpacity={0.8}
    style ={styles.appButtonContainer}
    onPress={()=>Alert.alert('You clicked the button!') } >
    <Text style={{color:"#fff", fontSize: 20, alignSelf:"center", fontStyle: 'italic'}}>TouchableOpacity Child View 1</Text>
    <Text style={{color:"#fff", fontSize: 20, alignSelf:"center", fontStyle: 'italic'}}>TouchableOpacity Child View 2</Text>
    </TouchableOpacity>

    <TouchableHighlight
    activeOpacity={0.8}
    style ={styles.appButtonContainer}
    underlayColor="#ff0000"
    onPress={()=>Alert.alert('You clicked the button!') } >
    <Text style={{color:"#fff", fontSize: 20, alignSelf:"center", fontStyle: 'italic'}}>TouchableHighlight Button</Text>
    </TouchableHighlight>


    </View>
    </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    appButtonContainer: {
        elevation: 5,
        width: '80%',
        backgroundColor: "#009688",
        borderRadius: 5,
        padding: 10,
        alignContent:'center',
        justifyContent: 'center'
    },
    viewScreen: {
            width: '100%',
            height: '100%',
            justifyContent: 'center',
            alignItems: 'center',
            flexDirection: 'column',
            gap:10
    }
});

export default App;

Output: