Open In App

What are Touchable Interactions in React Native?

Improve
Improve
Like Article
Like
Save
Share
Report

When building a mobile application with React Native, it is important to provide a responsive and interactive user interface. One way to accomplish this is through the use of touchable interactions.

Touchable interactions in React Native refer to the components that provide touchable feedback in response to user interactions. These components can be used to create interactive and responsive user interfaces within a React Native app. Examples of touchable interactions include buttons, touchable highlights, and touchable opacity.

Key Points:

  • Touchable interactions provide responsive and interactive user interfaces
  • Touchable interactions are implemented using React Native components
  • Examples of touchable interactions include buttons, touchable highlights, and touchable opacity

Installation: Here we will use the Expo CLI version which will much smoother to run your React Native applications. Follow the below steps one by one to setup your React native environment.

Step 1: Open your terminal and run the below command.

npm install -g expo-cli

Step 2: Now expo-cli is globally installed so you can create the project folder by running the below command.

expo init "projectName"

Step 3: Now go into the created folder and start the server by using the following command.

cd "projectName"
npm start web

Project Structure:
 

 

Example 1: This example will illustrate Touchable Interactions Using TouchableOpacity:

Javascript




import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 
const App = () => {
    const [count, setCount] = useState(0);
    return (
        <View style={styles.container}>
            <TouchableOpacity
                style={styles.button}
                onPress={() => setCount(count + 1)}>
                <Text style={styles.text}>Click me</Text>
            </TouchableOpacity>
            <Text style={styles.text}>Count: {count}</Text>
        </View>
    );
};
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        backgroundColor: 'blue',
        padding: 10,
        borderRadius: 5,
    },
    text: {
        color: 'white',
        fontWeight: 'bold',
    },
});
 
export default App;


Output:

 

Explanation: The TouchableOpacity component is used to create a button that increments a count variable when pressed. The component is given a style and an onPress function that updates the count variable. The Text component is nested within the TouchableOpacity component and displays the current count.

Example 2: This example will illustrate Touchable Interactions Using TouchableHighlight

Javascript




import React, { useState } from 'react';
import { View, Text, TouchableHighlight, StyleSheet } from 'react-native';
 
const App = () => {
    const [isPressed, setIsPressed] = useState(false);
    return (
        <View style={styles.container}>
            <TouchableHighlight
                style={styles.button}
                onPress={() => setIsPressed(true)}
                onHideUnderlay={() => setIsPressed(false)}>
                <Text style={styles.text}>
                    {isPressed ? 'Button Pressed' : 'Press me'}
                </Text>
            </TouchableHighlight>
        </View>
    );
};
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        backgroundColor: 'blue',
        padding: 10,
        borderRadius: 5,
    },
    text: {
        color: 'white',
        fontWeight: 'bold',
    },
});
export default App;


Output:

 

Explanation: The TouchableHighlight component is used to create a button that changes the text displayed when pressed. The component is given a style, and onPress and onHideUnderlay functions update the isPressed state variable. The Text component is nested within the TouchableHighlight component and displays whether the button is pressed or not based on the isPressed state.

Reference: https://reactnative.dev/docs/handling-touches



Last Updated : 10 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads