Skip to content

Doko-Demo-Doa/react-native-shake

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

147 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

react-native-shake

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.

npm version Monthly downloads New Architecture TypeScript License: MIT

If this project helps you, consider buying me a pizza πŸ•

"Buy Me A Coffee"


Requirements

Minimum
iOS iOS 13.0+
Android API 21+ (Android 5.0)
React Native 0.68+

Features

  • πŸ“± 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

Installation

npm install react-native-shake

or

yarn add react-native-shake

iOS Setup

Run pod install after installing the package:

cd ios && pod install

Android Setup

No additional configuration required. The library links automatically via autolinking (React Native 0.60+).


Usage

Basic Usage (v5.x.x and higher)

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;
};

Legacy Usage

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');
  }
}

API

RNShake.addListener(callback)

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();

RNShake.removeAllListeners()

Removes all active shake event listeners.

RNShake.removeAllListeners();

TypeScript Support

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!');
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.


License

MIT

About

React Native shake event detector

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Packages

 
 
 

Contributors