# react-native-easter-egg
> An easter egg that you can you use in your react native app.
Latest version **0.1.13** (published 2023-02-21) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-native-easter-egg
pnpm add react-native-easter-egg
yarn add react-native-easter-egg
bun add react-native-easter-egg
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.13 |
| Published | 2023-02-21 |
| First published | 2023-02-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16.0.0 |
| Dependencies | 2 |
| Unpacked size | 33.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | RayKay91 |
| Maintainers | rayraykaykay |
| Keywords | react-native, easter, egg, ios, android |
## Links
- npm: https://www.npmjs.com/package/react-native-easter-egg
- Repository: https://github.com/RayKay91/react-native-easter-egg
- Homepage: https://github.com/RayKay91/react-native-easter-egg#readme
- Issues: https://github.com/RayKay91/react-native-easter-egg/issues
- npm.io page: https://npm.io/package/react-native-easter-egg
## Dependencies (2)
- [react-native-reanimated](https://npm.io/package/react-native-reanimated.md) 2.12
- [react-native-gesture-handler](https://npm.io/package/react-native-gesture-handler.md) 2.8
## Alternatives
- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads
## Recent versions
- 0.1.13 (latest) — 2023-02-21
- 0.1.12 — 2023-02-18
- 0.1.11 — 2023-02-18
- 0.1.9 — 2023-02-18
- 0.1.8 — 2023-02-18
- 0.1.7 — 2023-02-18
- 0.1.6 — 2023-02-16
- 0.1.5 — 2023-02-16
- 0.1.4 — 2023-02-16
- 0.1.2 — 2023-02-14
- 0.1.0 — 2023-02-14
## README
# 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
```sh
npm install react-native-easter-egg
```
## Usage
Import the `` 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 ``.
| 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. |
```tsx
import { EasterEgg } from 'react-native-easter-egg';
function App() {
return (
Alert.alert('Hello')}>
);
}
```
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
---
_Source: https://npm.io/package/react-native-easter-egg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._