sms-entry-code-rn

React Native. Custom component to confirm SMS code.

Installation

Run the following command to install the package.:

$ npm i sms-entry-code-rn

Usage

Example:

import SmsEntryCode from 'sms-entry-code-rn'

export default function App() {
    return (
        <View style={styles.container}>
            <Text>Confirmation</Text>
            <SmsEntryCode />
            <StatusBar style="auto" />
        </View>
    );
}

Props

1. boxNumber | Number
2. placeholder | String
3. boxColor | String
4. textColor | String
5. additionalStyle | Object
6. codeHandler | Function
7. activeBackground | String
8. currentBoxTextColor | String

Definition Props

| Props | Definition | | ------------ | ------------ | | boxNumber | defines the number of boxes where the limit is 6. | | placeholder | represents the provisional text. | | boxColor| set the background color of the boxes.| | textColor| set the text color of the boxes.| | additionalStyle | set additional styles for boxes. | | codeHandler | method or function to capture the value.| | activeBackground| Set the background color when simulating a click. | | currentBoxTextColor | sets the text color of the current box. |

Code Example

import SmsEntryCodeRn from 'sms-entry-code-rn';

export default function App() {
    const [code, setMyCode] = useState('')
    return (
        <View style={styles.container}>
            <Text style={{padding: 20, fontSize: 20}}>My Code: {code}</Text>
            <SmsEntryCodeRn 
                boxNumber={5}
                placeholder='*'
                codeHandler={setMyCode}
                boxNumber={4}
                textColor='#188'
            />
            <StatusBar style="auto" />
        </View>
    );
}

Demostraciòn

Example 1

Example 2:

Example 3

Autor

• Nèstor Benjamìn