Scribd
Upload
48 views2 pages

TouchableOpacity vs TouchableHighlight

This document is a React Native component that defines a simple user interface with two buttons: TouchableOpacity and TouchableHighlight. The TouchableOpacity button triggers an alert when pressed, while the TouchableHighlight button has an empty function assigned to its onPress event. The component also includes styling for the buttons and layout using StyleSheet.

Uploaded by

acharyaayush2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
48 views2 pages

TouchableOpacity vs TouchableHighlight

This document is a React Native component that defines a simple user interface with two buttons: TouchableOpacity and TouchableHighlight. The TouchableOpacity button triggers an alert when pressed, while the TouchableHighlight button has an empty function assigned to its onPress event. The component also includes styling for the buttons and layout using StyleSheet.

Uploaded by

acharyaayush2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import { StyleSheet, Text, View, TouchableOpacity, TouchableHighlight } from

'react-native'
import React from 'react'

const index = () => {

function printData1 () {
alert('This is TouchableOpacity')
}

const printData2 = () => {}

return (
<View style={[Link]}>

<TouchableOpacity style={styles.btn1} onPress={printData1}>


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

<TouchableHighlight style={styles.btn2} onPress={printData2}


underlayColor="tomato">
<Text style={styles.btn2Txt}>TouchableHighlight</Text>
</TouchableHighlight>
</View>
)
}

export default index

const styles = [Link]({


container: {
flex:1,
gap:50
},
btn1: {
height:50,
width:'60%',
backgroundColor:'red',
borderRadius:25,
justifyContent:'center',
alignItems:'center',
},
btn1Txt: {
fontSize:20,
fontWeight:'bold',
color:'white'
},
btn2: {
height:50,
width:'60%',
backgroundColor:'blue',
borderRadius:25,
justifyContent:'center',
alignItems:'center'
},
btn2Txt: {
fontSize:20,
fontWeight:'bold',
color:'white'
},
})

You might also like