react-native-otp-fields 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-otp-fields",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A customizable React Native OTP input component with smooth focus handling, digit-only validation, and easy integration for verification codes, PINs, or passcodes.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/OtpInput.tsx

@@ -0,0 +1,108 @@
+ import React, { useRef, useState } from 'react';
+ import {
+   View,
+   TextInput,
+   StyleSheet,
+   ViewStyle,
+   TextStyle,
+   TextInputKeyPressEvent,
+ } from 'react-native';
+ 
+ interface OtpInputProps {
+   length?: number;
+   onOtpComplete?: (otp: string) => void;
+   inputStyle?: TextStyle;
+   containerStyle?: ViewStyle;
+ };
+ 
+ export default function OtpInput({
+   length = 6,
+   onOtpComplete,
+   inputStyle,
+   containerStyle,
+ }: OtpInputProps) {
+   const [otp, setOtp] = useState<string[]>(Array(length).fill(''));
+   const inputsRef = useRef<Array<TextInput | null>>([]);
+ 
+   const handleChangeText = (text: string, index: number) => {
+     const newOtp = [...otp];
+     const char = text.slice(-1);
+     const digitRegex = /^\d$/;
+ 
+     if (digitRegex.test(char)) {
+       newOtp[index] = char;
+       setOtp(newOtp);
+ 
+       if (index < length - 1) {
+         inputsRef.current[index + 1]?.focus();
+       }
+ 
+       if (newOtp.every(d => d !== '')) {
+         onOtpComplete?.(newOtp.join(''));
+       }
+     } else if (text === '') {
+       newOtp[index] = '';
+       setOtp(newOtp);
+     }
+   };
+ 
+   const handleKeyPress = ({ nativeEvent }: TextInputKeyPressEvent, index: number) => {
+     if (nativeEvent.key === 'Backspace') {
+       setOtp((prevOtp) => {
+         const newOtp = [...prevOtp];
+ 
+         if (newOtp[index] === '') {
+           if (index > 0) {
+             newOtp[index - 1] = '';
+             inputsRef.current[index - 1]?.focus();
+           }
+         } else {
+           newOtp[index] = '';
+           inputsRef.current[index]?.focus();
+         }
+ 
+         return newOtp;
+       });
+     }
+   };
+ 
+ 
+   return (
+     <View style={[styles.container, containerStyle]}>
+       {Array.from({ length }).map((_, i) => (
+         <TextInput
+           key={i}
+           // @ts-ignore
+           ref={ref => (inputsRef.current[i] = ref)}
+           value={otp[i]}
+           onChangeText={text => handleChangeText(text, i)}
+           onKeyPress={e => handleKeyPress(e, i)}
+           keyboardType="number-pad"
+           maxLength={1}
+           style={[styles.input, inputStyle]}
+           returnKeyType="done"
+           autoFocus={i === 0}
+         />
+       ))}
+     </View>
+   );
+ };
+ 
+ const styles = StyleSheet.create({
+   container: {
+     flexDirection: 'row',
+     gap: 12,
+     justifyContent: 'center',
+     padding: 20,
+   },
+   input: {
+     width: 48,
+     height: 58,
+     borderWidth: 1,
+     borderColor: '#ccc',
+     borderRadius: 8,
+     textAlign: 'center',
+     fontSize: 20,
+     backgroundColor: '#fff',
+   },
+ });

package/src/index.ts

@@ -0,0 +1 @@
+export { default as OtpInput } from "./OtpInput"