React Native Start Stop Device Vibration on Button Click Android iOS

Vibration is part of every Android and iOS mobile phone. Vibration comes when the small machine present inside the mobile device shakes or vibrates itself, The machine vibrates so fast so the whole mobile start vibrating. Vibration is mostly used when mobile owner put the mobile into Silent mode. So in this tutorial we would going to create a react native app with React Native’s Vibration API component. We would Start Stop Device Vibration on button click and stop it. The Vibration method Vibration.vibrate() is a asynchronous method so it will immediately starts the device vibrating.

Note: The Android and iOS simulator dose not support vibration, So you need to test this app in real device to see how it works.

Configure Vibration in Android :

  1.  Open YourProjectName -> android -> app -> src -> main -> AndroidManifest.xml file.
  2.  Put the  <uses-permission android:name="android.permission.VIBRATE"/> permission inside it.

Configure Vibration in iOS :

There is no need to configure anything for iOS devices.

Contents in this project Start Stop Device Vibration on Button Click Android iOS react native app tutorial :

1. Import StyleSheet, View, Vibration and Button component in your project.

2. Create 2 constants in your project named as DURATION and PATTERN. The DURATION constant consist 10000 which represents here 10 seconds, So the device will continuously vibrate for 10 seconds. Second constant PATTERN consist a array of 1000, 2000, 3000, 4000 which represents 1 second, 2 second, 3 second and 4 seconds. Using the PATTERN constant it will vibrate in pattern.

3. Create a function named as StartVibrationFunction(). Inside this function we would start the vibration using the Vibration.vibrate() method. See the below code to more options.

5. Create a function named as StopVibrationFunction() to stop the vibration.

6. Create a Root View inside the render’s return block.

7. Now we would make 2 button component inside the Root View and call the StartVibrationFunction() and StopVibrationFunction() function on button onPress event.

8. Create Style for Root View.

9. Complete source code for App.js File :

Screenshot in Android device :

Start Stop Device VibrationScreenshot in iOS device :

2 Comments

  1. how to set silent mode and general mode using react native

Leave a Reply

Your email address will not be published.