React-native-easter-egg NPM

react-native-easter-egg

A fun little easter egg to include in your app. A component that accepts gestures and will match them to a secret code for your users to input.

Installation

npm install react-native-easter-egg

Usage

Import the <EasterEgg /> component and wrap your component with it. It will allow it to move along the vertical and horizontal planes. It accepts a number of props which will allow you to customise it to your needs.

Since this package relies on react-native-gesture-handler and react-native-reanimated please see the installation instructions for those if you're getting errors. The gesture handler for example requires that the app be wrapped in a <GestureHandlerRootView />.

Prop	Default	Description
onCodeInputSuccess	N/A	A function that will be executed when the user inputs match the secret code. REQUIRED
onCodeInputFailure	N/A	A function that will be executed when the user inputs match the length of the secret code, but don't match the code exactly.
onGestureStart	N/A	A function that will be executed when the pan gesture starts.
onGestureUpdate	N/A	A function that will be executed as the pan gesture updates on finger movement.
onGestureEnd	N/A	A function that will be executed when the user lifts their finger from the screen.
inputThreshold	20	The max number of pixels the user can move the component. Beyond this point moving the finger won't move the component.
onInputThresholdReached	N/A	A function that will be executed everytime the pan gesture continues after reaching the `inputThreshold`
dragResistance	4	Determines how difficult it feels to move the content in a direction. The higher the number the more difficult it will feel.
resetTimer	20000	The time in ms that it will take to reset the user inputs. After the timeout the user can enter the gestures again. Or they can unmount and remount the component by navigating away or something.
secretCode	Directions.UP, Directions.UP, Directions.DOWN, Directions.DOWN, Directions.LEFT, Directions.RIGHT, Directions.LEFT, Directions.RIGHT,	The secret code that the user must match with their inputs. Defaults to the Konami code. You can import the `Directions` enum and create your own custom array of directions for a more personalised secret code.

import { EasterEgg } from 'react-native-easter-egg';

function App() {
  return (
    <EasterEgg onCodeInputSuccess={() => Alert.alert('Hello')}>
      <YourComponent />
    </EasterEgg>
  );
}