React Native Touchables

 AppName: Test

Component Name: App.js

------------------------------------------------------------------------------------------

import React, { Component } from 'react'

import { View, Alert, StyleSheet, TouchableHighlight, Text, TouchableOpacity, TouchableNativeFeedback, SafeAreaView } from 'react-native';

class App extends Component {

onPressButton() {

Alert.alert('You Clicked On The Button')

}

render() {

return (

<SafeAreaView>

<View style={StyleSheet.containerMAIN}>

<TouchableHighlight onPress={this.onPressButton} underlayColor="white">

<View style={styles.buttonALL}>

<Text style={styles.buttonTextALL}>TouchableHighlight</Text>

</View>

</TouchableHighlight>

<TouchableOpacity onPress={this.onPressButton}>

<View style={styles.buttonALL}>

<Text style={styles.buttonTextALL}>TouchableOpacity</Text>

</View>

</TouchableOpacity>

<TouchableNativeFeedback

onPress={this.onPressButton} background={Platform.OS==='android' ? TouchableNativeFeedback.SelectableBackground():''}>

<View style={styles.buttonALL}>

<Text style={styles.buttonTextALL}>TouchableNativeFeedback</Text>

</View>

</TouchableNativeFeedback>

</View>

</SafeAreaView>

)

}

}

const styles = StyleSheet.create({

containerMAIN: {

paddingTop: 60,

alignItems: 'center',

},

buttonALL: {

marginBottom: 20,

width: 270,

backgroundColor: '#EF6537',

alignItems: 'center'

},

buttonTextALL: {

padding: 20,

color: 'white',

fontSize: 18

}

})

export default App;