Cannot read property 'getString' of null

[hakimov-dev]

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):

• Device: Samsung A15
• OS: Android 14
• Version of package: 1.3.11

[harshitsaini17]

I also getting same error

[hakimov-dev]

// 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 (

{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}
/>
))}

);
};

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;

[hakimov-dev]

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);
      }}
  />

[galbenyosef]

@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:

@twotalltotems+react-native-otp-input+1.3.11.patch

[tmallet]

@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:

@twotalltotems+react-native-otp-input+1.3.11.patch

It works perfectly! Thank you :)

[ShivamGupta1310]

Added "@react-native-clipboard/clipboard": "^1.16.2".
The community package will be deprecated, and it's recommended to use the built-in Clipboard module from React Native.
In the file:
/node_modules/@twotalltotems/react-native-otp-input/dist/index.js
update the import as follows:
"- import Clipboard from '@react-native-community/clipboard';"
"+ import Clipboard from '@react-native-clipboard/clipboard';"

@twotalltotems+react-native-otp-input+1.3.11.patch

It work perfectly