This library is a small tool when you want a secret on your React-Native
app. You might want to navigate to a hidden screen, display an alert or anything you want.
npm install react-native-secret-chamber
or
yarn add react-native-secret-chamber
Set the number of taps you want and encapsulate any ReactNode as a child. You can also set a password for it. If you do, you can also pass a alert title and message for the dialog
Note: The cadence of taps needs to be lower than 1.5 seconds, otherwise it will reset the tap counting.
import { SecretChamber } from 'react-native-secret-chamber';
import { Alert, StyleSheet, View, Text } from 'react-native';
export default function App() {
const [secret, setSecret] = React.useState(false);
return (
<View style={styles.container}>
<SecretChamber
taps={10}
password="123456"
alertTitle="You should not be here!"
alertMessage="Get out of my swamp!"
onOpen={() => {
Alert.alert('You entered', 'this gonna be our secret, okay? :)');
setSecret(true);
}}
>
<Text>There's nothing to see here</Text>
</SecretChamber>
{secret && <Text>Oops, you got me!</Text>}
</View>
);
}
Prop name | required | default value | type | description |
---|---|---|---|---|
taps | Yes | you have to set | number | The number of taps required to trigger the action |
onOpen | Yes | you have to set | () => void | The function you want to trigger when the number of taps reached the required amount |
password | No | you have to set | string | An optional password. It will trigger an alert prompt asking for the password. |
alertTitle | No | "Password" | string | An optional title for the alert in case you set a password |
alertMessage | No | - | string | An optional message for the alert in case you set a password |
MIT
Made with create-react-native-library