The Vibration API provides access to the device’s vibration functionality. You can trigger single vibrations or pattern-based vibrations.
Methods
vibrate()
static vibrate(pattern?: number | number[], repeat?: boolean)
pattern
number | number[]
default:"400"
Vibration pattern:
- number: Duration in milliseconds to vibrate
- array: Pattern of durations alternating between vibrate and pause
- Example:
[0, 500, 200, 500] means:
- Wait 0ms
- Vibrate 500ms
- Pause 200ms
- Vibrate 500ms
Whether to repeat the vibration pattern. Only applies when pattern is an array.Android: Repeats from the first vibration (index 0)iOS: Repeats the entire pattern
Android
- Supports both single vibrations and pattern arrays
- Pattern arrays are passed directly to the native module
- Repeat behavior starts from index 0
- Requires
VIBRATE permission in AndroidManifest.xml:
<uses-permission android:name="android.permission.VIBRATE"/>
iOS
- Supports single vibrations and pattern arrays
- Pattern arrays are processed in JavaScript with scheduling
- Default vibration duration is 400ms regardless of the number passed
- No permissions required
cancel()
Stops any ongoing vibration.
Android: Calls the native cancel method
iOS: Sets internal flag to stop scheduled vibrations
Examples
Single Vibration
import {Button, Vibration} from 'react-native';
function SingleVibration() {
return (
<Button
title="Vibrate for 1 second"
onPress={() => Vibration.vibrate(1000)}
/>
);
}
Default Vibration
import {Button, Vibration} from 'react-native';
function DefaultVibration() {
return (
<Button
title="Vibrate (default 400ms)"
onPress={() => Vibration.vibrate()}
/>
);
}
Pattern Vibration
import {Button, Vibration} from 'react-native';
function PatternVibration() {
// Pattern: wait 0ms, vibrate 500ms, pause 200ms, vibrate 500ms
const pattern = [0, 500, 200, 500];
return (
<Button
title="Vibrate with pattern"
onPress={() => Vibration.vibrate(pattern)}
/>
);
}
Repeating Pattern
import React, {useState} from 'react';
import {Button, Vibration, View} from 'react-native';
function RepeatingVibration() {
const [isVibrating, setIsVibrating] = useState(false);
const pattern = [1000, 2000, 3000];
const startVibration = () => {
setIsVibrating(true);
Vibration.vibrate(pattern, true);
};
const stopVibration = () => {
setIsVibrating(false);
Vibration.cancel();
};
return (
<View>
{!isVibrating ? (
<Button title="Start Repeating" onPress={startVibration} />
) : (
<Button title="Stop Vibration" onPress={stopVibration} />
)}
</View>
);
}
Custom Alert Pattern
import {Button, Vibration} from 'react-native';
function AlertPattern() {
// Three short bursts
const pattern = [0, 100, 100, 100, 100, 100];
return (
<Button
title="Alert Vibration"
onPress={() => Vibration.vibrate(pattern)}
/>
);
}
SOS Pattern
import {Button, Vibration} from 'react-native';
function SOSPattern() {
// SOS in Morse code: ... --- ...
const pattern = [
0, 200, 100, 200, 100, 200, // S
300, // pause
600, 300, 600, 300, 600, // O
300, // pause
200, 100, 200, 100, 200 // S
];
return (
<Button
title="Vibrate SOS"
onPress={() => Vibration.vibrate(pattern)}
/>
);
}
Notes
- On iOS, the vibration duration cannot be customized; the device will always vibrate for approximately 400ms
- Android allows custom duration vibrations
- Always call
cancel() when stopping a repeating vibration pattern
- Excessive vibration can drain battery and annoy users - use judiciously
- Test vibration patterns on physical devices as simulators/emulators may not support vibration