Open hakimov-dev opened 2 months ago
I also getting same error
// OtpInput.js import React, { useRef, useState } from "react"; import { View, TextInput, StyleSheet, TouchableOpacity, Text, } from "react-native";
const OtpInput = ({ length = 6, onComplete }) => { const [otp, setOtp] = useState(Array(length).fill("")); const inputs = useRef([]);
const focusNext = (index) => { if (index < length - 1 && inputs.current[index + 1]) { inputs.current[index + 1].focus(); } };
const focusPrev = (index) => { if (index > 0 && inputs.current[index - 1]) { inputs.current[index - 1].focus(); } };
const handleChangeText = (text, index) => { const newOtp = [...otp]; newOtp[index] = text; setOtp(newOtp);
if (text) {
focusNext(index);
}
if (newOtp.every((val) => val !== "") && onComplete) {
onComplete(newOtp.join(""));
}
};
const handleKeyPress = ({ nativeEvent: { key } }, index) => { if (key === "Backspace" && !otp[index]) { focusPrev(index); } };
return (
); };
const styles = StyleSheet.create({ container: { flexDirection: "row", justifyContent: "space-between", marginVertical: 20, }, input: { borderBottomWidth: 2, paddingBottom: 10, borderBottomColor: "#000", width: 40, textAlign: "center", fontSize: 20, }, });
export default OtpInput;
I've created my own custom otp inptu feel free to use it here is the codes:
// OtpInput.js
import React, { useRef, useState } from "react";
import {
View,
TextInput,
StyleSheet,
TouchableOpacity,
Text,
} from "react-native";
const OtpInput = ({ length = 6, onComplete }) => {
const [otp, setOtp] = useState(Array(length).fill(""));
const inputs = useRef([]);
const focusNext = (index) => {
if (index < length - 1 && inputs.current[index + 1]) {
inputs.current[index + 1].focus();
}
};
const focusPrev = (index) => {
if (index > 0 && inputs.current[index - 1]) {
inputs.current[index - 1].focus();
}
};
const handleChangeText = (text, index) => {
const newOtp = [...otp];
newOtp[index] = text;
setOtp(newOtp);
if (text) {
focusNext(index);
}
if (newOtp.every((val) => val !== "") && onComplete) {
onComplete(newOtp.join(""));
}
};
const handleKeyPress = ({ nativeEvent: { key } }, index) => {
if (key === "Backspace" && !otp[index]) {
focusPrev(index);
}
};
return (
<View style={styles.container}>
{otp.map((value, index) => (
<TextInput
key={index}
ref={(ref) => (inputs.current[index] = ref)}
style={[
styles.input,
{ marginHorizontal: index !== 0 || index !== length - 1 ? 10 : 0 },
]}
keyboardType="numeric"
maxLength={1}
onChangeText={(text) => handleChangeText(text, index)}
onKeyPress={(e) => handleKeyPress(e, index)}
value={value}
/>
))}
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: "row",
justifyContent: "space-between",
marginVertical: 20,
},
input: {
borderBottomWidth: 2,
paddingBottom: 10,
borderBottomColor: "#000",
width: 40,
textAlign: "center",
fontSize: 20,
},
});
export default OtpInput;
Using the custom component:
<OtpInput
length={4}
onComplete={(otp) => {
setOtp(otp);
}}
/>
@hakimov-dev , if you are using expo: expo and community clipboard package as a dependency are not compatible, you should replace it with expo-clipboard, then replace Clipboard.getString() to Clipboard.getStringAsync() Check this patch:
@hakimov-dev , if you are using expo: expo and community clipboard package as a dependency are not compatible, you should replace it with expo-clipboard, then replace Clipboard.getString() to Clipboard.getStringAsync() Check this patch:
It works perfectly! Thank you :)
Describe the bug I'm getting "Cannot read property 'getString' of null" error when i wanna use that package.
Expected behavior I just wanna use that package, as i need without any bugs.
Smartphone (please complete the following information):