What does the Gesture Responder System do in React Native ?

Last Updated : 24 Jul, 2024

Gesture Responder System allows the app to respond to user interactions and manage the entire lifecycle of the gesture. Here the gesture can be as simple as a single touch or as long as dragging on the screen. The apps today are very attractive as they provide us with different ways of interacting with them and such an app can be even developed in React Native using the Feature called Responder System. The simplest attribute in ReactNative that allows users to interact is onPress. But this can only handle the Click event like clicking on a button.

React-Native: A React Framework to build Cross-Platform Apps with Javascript.

Steps to create a React-native project: To understand to create a react-native project in detail visit here or follow the given steps in short :

Create a react native project using npx react-native init <projectName>
In the project folder you will find the index.js, Just paste the below-given code samples
Run npm run android, It will open the emulator that displays output like shown below

Example: Here you will see the working of the onPress event handler on the Button Component.

index.js

JavaScript

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import React, { Component } from 'react';
import { Button, StyleSheet, View, Text } from 'react-native';

class ButtonView extends Component {
    onPressButton() {
        alert('You Pressed The Button !')
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.buttonContainer}>
                    <Text style={{ padding: 10, 
                                   fontSize: 42, 
                                   textAlign: 'center', 
                                   color: "green" }}>
                        GeeksforGeeks
                    </Text>
                    <Text style={{ padding: 10, 
                                   fontSize: 20, 
                                   textAlign: 'center' }}>
                        What does the Gesture Responder System 
                        do in React Native ?
                    </Text>
                    <Button
                        onPress={this.onPressButton}
                        title="Press Me"
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    buttonContainer: {
        margin: 20
    }
});

AppRegistry.registerComponent(appName, () => ButtonView);

Output:

To handle other gestures React Native provides something called a Gesture Responder System.

Touchables are the ReactNative Built-in APIs that allow you to capture gestures and provide feedback. So there are 3 kinds of Touchables with different responding capabilities:

TouchableHighlight: Here the background gets darkened for the feedback
TouchableOpacity: Here the Button itself partially transparent for feedback
TouchableWithoutFeedback: As the name tells it gives no feedback

Gesture Responder System makes use of these Touchables along with some lifecycle properties to respond to the user gesture, But using touchable is optional and it is just for feedback. The app basically contains Views in a hierarchy. We can make these Views respond using the Responder Lifecycle. There are 2 methods to initiate the response process

View.props.onStartShouldSetResponder: (event) => true/false

This allows you to decide whether the view wants to become the responder of the touch

View.props.onMoveShouldSetResponder: (event) => true/false

This is called when a touch move occurs and works similarly to onStartShouldSetResponder.

The above two methods are called bubbling patterns which means the deepest node in the hierarchy will become the responder when the entire hierarchy returns true. To have a reverse feature we replace it with the following:

View.props.onStartShouldSetResponderCapture: (event) => true/false
View.props.onMoveShouldSetResponderCapture: (event) => true/false

When these methods return true, the either of the following methods triggers:

View.props.onResponderGrant: (event) => {...}

Triggers when the permission for the responder is granted

View.props.onResponderReject: (event) => {...}

Triggers when some other component in the app is currently responding and it cannot release.

On grant the following handlers can be called :

onResponderMove: The user moves the finger
onResponderRelease: The user releases the touch
onResponderTerminateRequest: When some other component wants to respond. Returns true or false
onResponderTerminate: The component can no longer respond

The event in every method above is the synthetic touch event that contains properties like Id of the touch, X and Y position, target component, etc.

Example 1: In this example, I will maintain two variables X and Y on the screen that shows the position of touch. The values of the X and Y change when you move your touch on the screen and this is done using the Gesture Responder System.

index.js

JavaScript

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import React, { Component } from 'react';
import { Button, StyleSheet, View, Text } from 'react-native';

class Tracker extends Component {

    constructor(props) {
        super(props);
        this.state = { x: 0, y: 0 }
    }
    render() {
        return (
            <View style={styles.container}
                onStartShouldSetResponder={() => {
                    return true
                }}

                onResponderMove={(event) => {
                    this.setState(state => {
                        state.x = event.nativeEvent.locationX;
                        state.y = event.nativeEvent.locationY;
                        return state;
                    })
                }}
            >
                <View style={styles.buttonContainer}>
                    <Text style={{ padding: 10, 
                                   fontSize: 42, 
                                   textAlign: 'center', 
                                   color: "green" }} 
                           selectable={false}>
                        GeeksforGeeks
                    </Text>
                    <Text style={{ padding: 10, 
                                   fontSize: 20, 
                                   textAlign: 'center' }} 
                          selectable={false}>
                        What does the Gesture Responder System 
                        do in React Native ?
                    </Text>
                    <Text style={{ padding: 10, 
                                   fontSize: 20, 
                                   textAlign: 'center' }} 
                           selectable={false}>x : {this.state.x}      
                           y : {this.state.y}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    }
});

AppRegistry.registerComponent(appName, () => Tracker);

Output :

Example 2: In this example, I will create a draggable element that we can drag with the above-given lifecycle methods in Gesture Responder System.

index.js

JavaScript

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import React, { Component } from 'react';
import { Button, StyleSheet, View, Text } from 'react-native';

class Draggable extends Component {

    constructor(props) {
        super(props);
        this.state = { x: 50, y: 45 }
    }

    render() {
        return (
            <View style={styles.container}
                onStartShouldSetResponder={() => {
                    return true
                }}

                onResponderMove={(event) => {
                    let x = event.nativeEvent.pageX, y = event.nativeEvent.pageY;
                    console.log(x, y)
                    this.setState(state => {
                        state.x = x;
                        state.y = y;
                        return state;
                    })
                }}
            >
                <View style={styles.buttonContainer}>
                    <Text style={{ padding: 10, 
                                   fontSize: 42, 
                                   textAlign: 'center', 
                                   color: "green" }} 
                           selectable={false}>
                        GeeksforGeeks
                    </Text>
                    <Text style={{ padding: 10, 
                                   fontSize: 20, 
                                   textAlign: 'center' }} 
                          selectable={false}>
                        What does the Gesture Responder System 
                        do in React Native ?
                    </Text>
                </View>
                <Text style={{ padding: 10, 
                               fontSize: 20, 
                               color: 'blue', 
                               fontWeight: 'bold', 
                               textAlign: 'center', 
                               position: "absolute", 
                               top: this.state.y, 
                               left: this.state.x }} 
                       selectable={false}>Draggable Text!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    buttonContainer: {
        margin: 20
    }
});

AppRegistry.registerComponent(appName, () => Draggable);

Output:

What are Refs used for in React Native ?

nikhilkalburgi

Improve

Article Tags :

What does the Gesture Responder System do in React Native ?

Similar Reads

Thank You!

What kind of Experience do you want to share?