boxmodel-native-pinwidget

Pin-Widget for entering multidigit codes for authentication for react native.

❒ Example

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PinWidget from 'boxmodel-native-pinwidget';

export default function App() {

    const [verified, setVerified] = useState(false)
    const [error, setError] = useState(false)
    const [warningMessage, setWarningMessage] = useState('')

    useEffect(() => {
        if (error) console.log('Return to login page')
    }, [error])

    return (
        <View style={styles.container}>
            {verified ?
                <Text>Welcome</Text>
                :
                <>
                    <PinWidget
                        code={'1234'}
                        numbersOnly={true}
                        maximumAttempts={3}
                        setVerified={setVerified}
                        setError={setError}
                        setWarningMessage={setWarningMessage}
                        placeholder='•'
                    />
                    <Text style={styles.warningMessage}>{warningMessage}</Text>
                </>
            }
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    warningMessage: {
        color: 'red'
    }
});

code

• Pass a string as a property and the component will dynamically provide the inputs for the user to confirm.

numbersOnly && lettersOnly

• Pass true||false to determine which keyboard will be displayed, this will also ingore ingore unmatching character types.

maximumAttempts

• Set the maximum attempts the user can enter a wrong code, this property will be linked to the setVerified and setError properties.

setVerified

• If the user inputs the correct pin then this will be set to true, otherwise this will be set to false.

setError

• If the user inputs the incorrect pin and exceeds the maximumAttempts, this will be set to true.

setWarningMessage

• Pass a state function for the component to return error messages, you can then choose where the error is displayed.

placeholder

• Set the placeholder for all inputs.