1.0.2 • Published 3 years ago
react-native-simple-lock-screen v1.0.2
react-native-simple-lock-screen
expo 44+ reanimated
tested
- expo 45.0.0 with react-native-reanimated 2.8.0
Props
| Name | Type | Description |
|---|---|---|
initBlockTime | ?number | init blocktime ( good when app reopen and u want to remember block time ) |
initErrorMsg | ?string | init Error msg ( good when app reopen and u want to remember error msg ) |
input | string[] | User inputs |
validInput | string[] | User valid input, when passed by user onValidInput is triggered |
onValidInput | ?() => void | triggered when user pass validInput |
errors | {[key: number]: {time: number, errorMessage: string}} | key - number of wrongattempts, time - block time in secounds, errorMessage - error when blocked |
buildInTopComponentOptions | ?{label: string, filledColor?: string, unfilledColor?: string } | basic settings for buildin top component |
buildInBottomComponentOptions | ?{bottomComponent: {label: string, onPress: () => void}} | basic settings for buildin bottom component |
customTopComponent | ?React.FC<{currentInput: string[], wrongAttempts: number}> | |
customBottomComponent | ?React.FC<{currentInput: string[], setCurrentInput: Dispatch<string[]>, wrongAttempts: number, blockedInput: boolean}> | |
containerStyle | ViewStyle | custom styles for main wrapper |
Example
<SafeAreaView style={{flex: 1}}>
<LockScreen
input={['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']}
validInput={['1', '1', '1', '1']}
onValidInput={() => {
alert('valid pin')
}}
errors={{
3: {
time: 120,
errorMessage: 'Error, too manny attempts, try again in #_BLOCKED_TIME_COUNTDOWN_#',
},
6: {
time: 360,
errorMessage: 'Error, too manny attempts, try again in #_BLOCKED_TIME_COUNTDOWN_#',
}
}}
buildInTopComponentOptions={{label: 'Welcome back, YourName'}}
buildInBottomComponentOptions={{bottomComponent: {label: 'Forgot your pin?', onPress: () => {alert('forgot pin pressed')}}}}
/>
</SafeAreaView>