Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to handle touches in ReactNative?
On a device the interaction with the UI mainly happens through a touch or tap. So when we use the app, we mostly tap the button to perform some action, or scroll the page by touching the screen, try to zoom the page etc. To handle these gestures like tap, touch reactnative has events that cap capture it or a touchable component to deal with touches it.
Let us see the example of what happens when a button is clicked.
Example 1: Handling Tap on Button
Here is a simple example of Button.
<Button
onPress={() => {
alert('You Tapped on Me!');
}}
title="Tap Me"
/>The onPress event will get called when the user taps on the button. Here is a working example of it.
import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
return (
<View style={{flex :1, justifyContent: 'center', margin: 15 }}>
<Button
onPress={() => {
alert('You Tapped on Me!');
}}
title="Tap Me"
/>
</View>
);
}
export default App;Output
Touchable Component
React native touchable component helps to capture the tapping gesture in case there are any issues with the events like onPress() which is used on react native components like buttons.
The touchable component comes with following options to handle tapping gestures on any react native component
- Touchable Opacity
- Touchable Highlight
- Touchable Without Feedback
Touchable Opacity
This element will change the opacity of an element when touched.
You can use TouchableOpacity as follows −
<TouchableOpacity onPress={() => alert('You Tapped Me')}>
<Text style = {styles.text}>
Button
</Text>
</TouchableOpacity>Here is a working example −
import React from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'
const App = () => {
return (
<View style = {styles.container}>
<TouchableOpacity onPress={() => alert('You Tapped Me')}>
<Text style = {styles.text}>
Button
</Text>
</TouchableOpacity>
</View>
)
}
export default App
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
},
text: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'red'
}
});You will see the opacity when user touches the button −
Touchable Highlight
When a user presses the element, it will get darker and the underlying color will show through.
You have to import TouchableHighlight before using it as shown below −
import { TouchableHighlight } from 'react-native'The Button component is wrapped inside the Text component and the Text is inside the TouchableHighlight component . You can add styles to the components as per your requirements. The onPress function is added on the TouchableHighlight and on tap the alert message will be shown.
<TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}>
<Text style = {styles.text}>
Button
</Text>
</TouchableHighlight>The full working example is as follows −
import React from 'react'
import { View, TouchableHighlight, Text, StyleSheet } from 'react-native'
const App = (props) => {
return (
<View style = {styles.container}>
<TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}>
<Text style = {styles.text}>
Button
</Text>
</TouchableHighlight>
</View>
)
}
export default App
const styles = StyleSheet.create ({
container: {
padding:100,
alignItems: 'center',
},
text: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'gray'
}
})Output
Touchable Without Feedback
This should be used when you want to handle the touch event and don’t need any feedback.
Here the Button is wrapped inside the TouchableWithoutFeedback component as shown below −
<TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}>
<Text style = {styles.text}>
Button
</Text>
</TouchableWithoutFeedback>Example: Working with TouchableWithoutFeedback component
import React from 'react'
import { View, TouchableWithoutFeedback, Text, StyleSheet } from 'react-native'
const Home = (props) => {
return (
<View style = {styles.container}>
<TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}>
<Text style = {styles.text}>
Button
</Text>
</TouchableWithoutFeedback>
</View>
)
}
export default Home
const styles = StyleSheet.create ({
container: {
padding:100,
alignItems: 'center',
},
text: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'gray'
}
})Output
446 Views
