A lightweight React Native library that detects shake gestures on both iOS and Android. Built with support for React Native's New Architecture (Turbo Modules).
Works best on real devices β shake detection is limited in simulators/emulators.
If this project helps you, consider buying me a pizza π
| Minimum | |
|---|---|
| iOS | iOS 13.0+ |
| Android | API 21+ (Android 5.0) |
| React Native | 0.68+ |
- π± Cross-Platform: Works on both iOS and Android
- β‘ New Architecture: Built with Turbo Module support
- π· TypeScript: Full TypeScript definitions included
- πͺΆ Lightweight: Minimal footprint, no heavy dependencies
- π Simple API: Subscribe and unsubscribe with one call each
npm install react-native-shakeor
yarn add react-native-shakeRun pod install after installing the package:
cd ios && pod installNo additional configuration required. The library links automatically via autolinking (React Native 0.60+).
import React from 'react';
import RNShake from 'react-native-shake';
export const MyComponent = () => {
React.useEffect(() => {
const subscription = RNShake.addListener(() => {
// Your shake handler here...
});
return () => {
subscription.remove();
};
}, []);
return null;
};import RNShake from 'react-native-shake';
// For v4.x.x:
class MyComponent extends React.Component {
componentDidMount() {
RNShake.addListener(() => {
// Your code...
});
}
componentWillUnmount() {
RNShake.removeListener();
}
}
// For v3.x.x and below:
class MyComponent extends React.Component {
componentDidMount() {
RNShake.addEventListener('ShakeEvent', () => {
// Your code...
});
}
componentWillUnmount() {
RNShake.removeEventListener('ShakeEvent');
}
}Registers a listener for the shake event. Returns a subscription object.
| Parameter | Type | Description |
|---|---|---|
callback |
() => void |
Function called when a shake is detected |
Returns: EmitterSubscription β call .remove() to unsubscribe.
const subscription = RNShake.addListener(() => {
console.log('Device shaken!');
});
// Later, to unsubscribe:
subscription.remove();Removes all active shake event listeners.
RNShake.removeAllListeners();This package includes full TypeScript definitions. Import and use it directly with type safety:
import RNShake from 'react-native-shake';
import type { EmitterSubscription } from 'react-native';
const subscription: EmitterSubscription = RNShake.addListener(() => {
console.log('Shake detected!');
});See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
