What are Touchable Interactions in React Native?

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