npm.io
6.9.5 • Published 2 weeks ago

react-native-shake

Licence
MIT
Version
6.9.5
Deps
0
Size
54 kB
Vulns
0
Weekly
0
Stars
315

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