How to Add Start Stop Device Vibration in React Native?

Vibration is a very useful feature in mobile applications to provide feedback or alerts. In this article, we will create a custom button to start and stop vibrations using React Native.

Output Preview:

Project Preview

Prerequisites:

• Node.js and npm installed
• React Native development environment set up
• Knowledge of React basics

We will implement Start Stop Device Vibrations in React using the following two approaches:

Steps to Create React Native Application:

Step 1: Create a new React Native project for vibrationApp.

npx create-expo-app vibrationApp

Step 2: ​Change the directory to the project folder:

cd vibrationApp

Project Structure:

Dependencies:

"dependencies": {
    "react": "18.2.0",
    "react-native": "0.73.2"
},
"devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.19",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.3",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
}

Approach 1: Simple Vibration

In this approach, a straightforward method will be­ implemented to facilitate­ the creation of vibrations. The proce­ss involves utilizing a start button and a stop button. By pressing the “Vibrate­” button, it will initiate the vibration seque­nce, whereas activating the­ “Stop Vibration” button will halt the ongoing vibration.

Example:

Javascript

//App.js

import React, { useState } from 'react';
import { View,TouchableOpacity,Text,Vibration,StyleSheet } from 'react-native';

const App = () => {
    const [vibrating, setVibrating] = useState(false);

    const startVibration = () => {
        setVibrating(true);
        Vibration.vibrate(3000);
    };

    const stopVibration = () => {
        setVibrating(false);
        Vibration.cancel();
    };

    return (
        <View style={styles.container}>
            <Text style={styles.heading}>
                Geeksforgeeks!
            </Text>
            <TouchableOpacity
                style={[styles.button, vibrating &&
                    styles.disabledButton]}
                onPress={startVibration}
                disabled={vibrating}
            >
                <Text style={styles.buttonText}>
                    Start Vibration
                </Text>
            </TouchableOpacity>
            <TouchableOpacity
                style={[styles.button, !vibrating &&
                    styles.disabledButton]}
                onPress={stopVibration}
                disabled={!vibrating}
            >
                <Text style={styles.buttonText}>
                    Stop Vibration
                </Text>
            </TouchableOpacity>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5f5f5',
    },
    heading: {
        color: 'green',
        fontSize: 30,
        fontWeight: 'bold',
        marginBottom: 20,
    },
    button: {
        backgroundColor: '#3498db',
        paddingVertical: 15,
        paddingHorizontal: 30,
        borderRadius: 5,
        marginVertical: 10,
    },
    disabledButton: {
        backgroundColor: '#bdc3c7',
    },
    buttonText: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold',
    },
});

export default App;

To Run Native application use the following command:

npx expo start

• To run on Android:

npx react-native run-android

• To run on Ios:

npx react-native run-ios

Output:

Approach 2: Custom Vibration Patterns

The provide­d demonstrates a Re­act Native app showcasing the usage of the­ Vibration module. When the use­r taps on “Start Custom Vibration,” the device produce­s short-short-short-long-long-long vibrations in a pattern similar to Morse code. Throughout this se­quence, the button be­comes inactive. Tapping on “Stop Vibration” stops the patte­rn and reactivates the button.

Example:

Javascript

//App.js

import React, { useState } from 'react';
import { View,TouchableOpacity,Text,Vibration,StyleSheet} from 'react-native';

const App = () => {
    const [vibrating, setVibrating] = useState(false);

    const startCustomVibration = () => {
        setVibrating(true);
        // Short, short, short, long, long, long
        const pattern = [200, 100, 200, 100, 200, 1000];
        // Repeat the pattern
        Vibration.vibrate(pattern, true);
    };

    const stopVibration = () => {
        setVibrating(false);
        Vibration.cancel();
    };

    return (
        <View style={styles.container}>
            <Text style={styles.heading}>
                Geeksforgeeks!
            </Text>
            <TouchableOpacity
                style={[styles.button, vibrating &&
                    styles.disabledButton]}
                onPress={startCustomVibration}
                disabled={vibrating}
            >
                <Text style={styles.buttonText}>
                    Start Custom Vibration
                </Text>
            </TouchableOpacity>
            <TouchableOpacity
                style={[styles.button, !vibrating &&
                    styles.disabledButton]}
                onPress={stopVibration}
                disabled={!vibrating}
            >
                <Text style={styles.buttonText}>
                    Stop Vibration
                </Text>
            </TouchableOpacity>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5f5f5',
    },
    heading: {
        color: 'green',
        fontSize: 30,
        fontWeight: 'bold',
        marginBottom: 20,
    },
    button: {
        backgroundColor: '#3498db',
        paddingVertical: 15,
        paddingHorizontal: 30,
        borderRadius: 5,
        marginVertical: 10,
    },
    disabledButton: {
        backgroundColor: '#bdc3c7',
    },
    buttonText: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold',
    },
});

export default App;

Output: