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