Programming Tutorials

Touchables in React Native

By: Niraj in React-Native Tutorials on 2023-04-09  

In React Native, handling touches can be done using various components like TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, and TouchableNativeFeedback.

  1. TouchableOpacity: This component provides an opacity effect when pressed. It is often used for buttons and other touchable elements.

Example:

<TouchableOpacity onPress={() => alert('Button pressed')}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me</Text>
</View>
</TouchableOpacity>
  1. TouchableHighlight: This component provides a highlight effect when pressed. It is often used for buttons and other touchable elements.

Example:

<TouchableHighlight onPress={() => alert('Button pressed')}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me</Text>
</View>
</TouchableHighlight>
  1. TouchableWithoutFeedback: This component does not provide any feedback when pressed. It is often used for handling gestures like swipes and pinches.

Example:

<TouchableWithoutFeedback onPress={() => alert('Button pressed')}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me</Text>
</View>
</TouchableWithoutFeedback>
  1. TouchableNativeFeedback: This component provides a ripple effect when pressed on Android devices. It is often used for buttons and other touchable elements.

Example:

<TouchableNativeFeedback onPress={() => alert('Button pressed')}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me</Text>
</View>
</TouchableNativeFeedback>

Each of these components accepts an onPress function that will be executed when the component is pressed. In the above examples, we are using an anonymous function to show an alert when the button is pressed.

In addition to onPress, these components also accept various other props like onLongPress, delayLongPress, and pressRetentionOffset, which can be used to customize the touch handling behavior.






Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in React-Native )

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native