React Native | Touchable Component

 App.js:

import React from 'react';

import { Text, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';

const App=()=>{

    return(

        <View>

            <Text style={{fontSize:30, backgroundColor:'blue', color:'white'}}>React Native Touchable Component</Text>

            <TouchableHighlight onPress={()=>console.log('Highlighted Clicked')}>

                <View style={{width:500, height:100, backgroundColor:'green'}}>

                    <Text style={{fontSize:30, textAlign:'center', verticalAlign:'center'}}>TouchableHighlight</Text>

                </View>

            </TouchableHighlight>

            <TouchableOpacity onPress={()=>console.log('TouchableOpacity Clicked')}>

                <View style={{width:500, height:100, backgroundColor:'green', marginTop:10}}>

                    <Text style={{fontSize:30, textAlign:'center', verticalAlign:'center'}}>TouchableOpacity</Text>

                </View>

            </TouchableOpacity>

            <TouchableWithoutFeedback onPress={()=>console.log('TouchableWithoutFeedback Clicked')}>

                <View style={{width:500, height:100, backgroundColor:'green', marginTop:10}}>

                    <Text style={{fontSize:30, textAlign:'center', verticalAlign:'center'}}>TouchableWithoutFeedback</Text>

                </View>

            </TouchableWithoutFeedback>

        </View>

    )

}

export default App;