|
18 | 18 |
|
19 | 19 | <h4>Light Weight and <b>Robust</b> Splitted Text Input.</h4>
|
20 | 20 |
|
21 |
| -- Design skeleton loading screen of your choice |
22 |
| -- Pass colors of your choice |
23 |
| -- Powered by Reanimated 3 |
| 21 | +- Design split OTP component of your choice |
| 22 | +- Pass number of OTP digits by your choice |
| 23 | +- Fully Customizable by props |
| 24 | +- Very Easy to use |
24 | 25 | - Make your apps professional in UI/UX
|
25 | 26 |
|
26 | 27 |
|
@@ -60,24 +61,32 @@ required props to display the splitted otp text input as shown in the code snipp
|
60 | 61 | import OtpTextInput from 'react-native-text-input-otp'
|
61 | 62 |
|
62 | 63 | const App = () => {
|
| 64 | + const [otp, setOtp] = React.useState(''); |
63 | 65 |
|
64 | 66 | return(
|
65 |
| - |
| 67 | + <OtpTextInput |
| 68 | + otp={ otp } |
| 69 | + setOtp={ setOtp } |
| 70 | + digits={5} |
| 71 | + /> |
66 | 72 | )
|
67 | 73 |
|
68 | 74 | };
|
69 | 75 | ```
|
70 | 76 |
|
71 | 77 |
|
72 | 78 |
|
73 |
| -For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-skeleton-loading?platform=android) |
| 79 | +For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-text-input-otp?platform=android) |
74 | 80 |
|
75 | 81 | # ⭐ Props for the component
|
76 |
| -| Name | Type | Description | |
77 |
| -| ---- | ----------- | ----------- | |
78 |
| -| background | hex color string | Hex color string for the background of loading component |
79 |
| -| highlight | hex color string | Hex color string for the highlight of loading component |
80 |
| - |
| 82 | +| Name | Type | Reuired | Description | |
| 83 | +| ---- | ----------- | ------ | ----------- | |
| 84 | +| otp | state variable | Yes | State variable to store the otp |
| 85 | +| setOtp | state update method | Yes | Method to update state variable |
| 86 | +| digits | numeric | Yes | No of otp split fields |
| 87 | +| style | style object | No | Style of the input fields |
| 88 | +| fontStyle | style object | No | Style of font in input fields |
| 89 | +| focusedStyle | style object | No | Style of field when in focus |
81 | 90 |
|
82 | 91 |
|
83 | 92 |
|
|
0 commit comments