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 :
- Open YourProjectName -> android -> app -> src -> main -> AndroidManifest.xml file.
- 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.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Vibration, Button } from 'react-native' |
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.
|
1 2 3 |
const DURATION = 10000 ; const PATTERN = [ 1000, 2000, 3000, 4000] ; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
StartVibrationFunction=()=>{ // Device Will Vibrate for 10 seconds. Vibration.vibrate(DURATION) ; // Android Device Will Vibrate in pattern : Wait 1sec -> vibrate 2sec -> wait 3sec. // iOS Device Will Vibrate in pattern : Wait 1sec -> Vibrate -> wait 2sec -> Vibrate -> wait 3sec -> Vibrate // Vibration.vibrate(PATTERN) // Android Device Will Vibrate in above pattern Infinite Time. // iOS Device Will Vibrate in above pattern Infinite Time. // Vibration.vibrate(PATTERN, true) } |
5. Create a function named as StopVibrationFunction() to stop the vibration.
|
1 2 3 4 5 6 7 |
StopVibrationFunction=()=>{ // Stop Vibration. Vibration.cancel(); } |
6. Create a Root View inside the render’s return block.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
7. Now we would make 2 button component inside the Root View and call the StartVibrationFunction() and StopVibrationFunction() function on button onPress event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
render() { return ( <View style={styles.MainContainer}> <View style={{margin: 10}}> <Button title = " Start Vibration " onPress = {this.StartVibrationFunction} /> </View> <View style={{margin: 10}}> <Button title = " Stop Vibration " onPress = {this.StopVibrationFunction} /> </View> </View> ); } |
8. Create Style for Root View.
|
1 2 3 4 5 6 7 8 9 10 11 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10 } }); |
9. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import React, { Component } from 'react'; import { StyleSheet, View, Vibration, Button } from 'react-native' const DURATION = 10000 ; const PATTERN = [ 1000, 2000, 3000, 4000] ; export default class Mynewproject extends Component { StartVibrationFunction=()=>{ // Device Will Vibrate for 10 seconds. Vibration.vibrate(DURATION) ; // Android Device Will Vibrate in pattern : Wait 1sec -> vibrate 2sec -> wait 3sec. // iOS Device Will Vibrate in pattern : Wait 1sec -> Vibrate -> wait 2sec -> Vibrate -> wait 3sec -> Vibrate // Vibration.vibrate(PATTERN) // Android Device Will Vibrate in above pattern Infinite Time. // iOS Device Will Vibrate in above pattern Infinite Time. // Vibration.vibrate(PATTERN, true) } StopVibrationFunction=()=>{ // Stop Vibration. Vibration.cancel(); } render() { return ( <View style={styles.MainContainer}> <View style={{margin: 10}}> <Button title = " Start Vibration " onPress = {this.StartVibrationFunction} /> </View> <View style={{margin: 10}}> <Button title = " Stop Vibration " onPress = {this.StopVibrationFunction} /> </View> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10 } }); |
Screenshot in Android device :
Screenshot in iOS device :
how to set silent mode and general mode using react native
Thanks for asking this Komal, I will check it and if possible this would be my next tutorial.