React Native Start Stop Device Vibration on Button Click Android Or iOS

In this tutorial, we will discuss how to start and stop vibration on button click in react native application for android or ios device. Nowadays Vibration is most integral part of  every mobile device, that helps to notify mobile user about latest notifications, calls etc. In this tutorial we are going to create a react native application using React Native’s Vibration API component. We would Start Stop Device Vibration on button click and stop it.

Lets follow below steps, while integrating vibration API in react native application.

• Open AndroidManifest.xml file in your android project 

YourProjectName  > android  > app  > src  > main  > AndroidManifest.xml 

• Add the Vibration permission in your AndroidManifest.xml file.

<uses-permission android:name="android.permission.VIBRATE"/>

Once you place the vibration permission in AndroidManifest.xml  file, AndroidManifest.xml files should look like this :

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mobileapp56">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.VIBRATE"/>

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Note: We will suggest running this example in the real device as you can’t feel the vibration in Virtual Devices.

Import Vibration

import { Vibration} from 'react-native'

Start the Vibration Using

Vibration.vibrate(DURATION)

Stop the Vibration Using

Vibration.cancel()

Let see the sample example from vibration API.

const DURATION = 10000
const PATTERN = [1000, 2000, 3000, 4000]

// Start vibration using DURATION
Vibration.vibrate(DURATION)
// Android: vibrate for 10s
// iOS: duration is not configurable, vibrate for fixed time (about 500ms)

// Start vibration using PATTERN
Vibration.vibrate(PATTERN)
// Android: wait 1s -> vibrate 2s -> wait 3s -> vibrate 4s
// iOS: wait 1s -> vibrate -> wait 2s -> vibrate -> wait 3s -> vibrate -> wait 4s -> vibrate

// Start vibration using PATTERN in repeated order
Vibration.vibrate(PATTERN, true)
// Android: wait 1s -> vibrate 2s -> wait 3s -> -> vibrate 4s -> wait 1s -> vibrate 2s -> wait 3s -> -> vibrate 4s ...
// iOS: wait 1s -> vibrate -> wait 2s -> vibrate -> wait 3s -> vibrate -> wait 4s -> vibrate -> wait 1s -> vibrate -> wait 2s -> vibrate -> wait 3s -> vibrate -> wait 4s -> vibrate ...

//Stop vibration
Vibration.cancel()
// Android: vibration stopped
// iOS: vibration stopped

React Native Vibration API :

Lets follow the below steps to Start and Stop Device Vibration on Button Click in react native application for Android Or iOS device.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components. For Vibration we need to use Vibration component from the react-native  package.

import React, { Component } from "react";
import { Platform, StyleSheet, View, Vibration, Button } from "react-native";

Step-4: Specify the DURATION and PATTERN variable outside the App class.

 const DURATION = 5000 ;
 const PATTERN = [ 1000, 2000, 3000, 4000] ;

Step-5: Create startVibration and stopVibration function inside the App class.

startVibration=()=>{
    // Device Will Vibrate for 10 seconds.
    Vibration.vibrate(PATTERN) ;
  }


   stopVibration=()=>{
    // Stop Vibration.
    Vibration.cancel();
  }

Step-6: Implement render method inside the App class and wrapped the below layout design inside the root View component.

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

         <View style={{margin: 10}}>
          <Button title = "Start Vibration" onPress = {this.startVibration} />
        </View>

        <View style={{margin: 10}}>
         <Button title = "Stop Vibration" onPress = {this.stopVibration} />
        </View>

      </View>
      );
}

Step-7 : Apply the below style sheet design.

 const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems : 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to Start and Stop Device Vibration on Button Click in react native application for Android Or iOS device.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

 import React, { Component } from "react";
 import { Platform, StyleSheet, View, Vibration, Button } from "react-native";


 const DURATION = 5000 ;
 const PATTERN = [ 1000, 2000, 3000, 4000] ;

 export default class App extends Component {

   startVibration=()=>{
    // Device Will Vibrate for 10 seconds.
    Vibration.vibrate(PATTERN) ;
  }


   stopVibration=()=>{
    // Stop Vibration.
    Vibration.cancel();
  }

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

         <View style={{margin: 10}}>
          <Button title = "Start Vibration" onPress = {this.startVibration} />
        </View>

        <View style={{margin: 10}}>
         <Button title = "Stop Vibration" onPress = {this.stopVibration} />
        </View>

      </View>
      );
    }
 }

 const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems : 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
});

Screenshot :

This is all about React Native Start Stop Device Vibration on Button Click Android Or iOS. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.