tttstudios / react-native-otp-input

Tiny Javascript library which provides an elegant UI for user to input one time passcode.
MIT License
538 stars 242 forks source link

After upgrading react native version to 0.74.1, Throwing "TypeError: Cannot read property 'getString' of null" #230

Open nitinelegant opened 3 months ago

nitinelegant commented 3 months ago

Describe the bug I have upgraded react native from version 0.72.12 to 0.74.1 after that it is throwing the below error runtime error TypeError: Cannot read property 'getString' of null

version installed @twotalltotems/react-native-otp-input": "^1.3.11"

To Reproduce Steps to reproduce the behavior:

  1. upgrade react native from version 0.72.12 to 0.74.1.
  2. yarn install or npm install
  3. yarn run android or npm run android
  4. After the build is ready once you navigate to the component who is using this package import OTPInputView from '@twotalltotems/react-native-otp-input'; will throw the same error
Sheryar-code commented 3 months ago

same issue

Mns9983 commented 2 months ago

Complete Solution (making a component is must) Quick guide to use @twotalltotems/react-native-otp-input for OTP Screen ,

*** first install these libraray "@twotalltotems/react-native-otp-input": "^1.3.11", "@react-native-clipboard/clipboard": "1.14.1", also check ( "react-native": "0.74.3",)

*** make a component ( must) `import React from 'react'; import { StyleSheet, View } from 'react-native'; import OTPInputView from '@twotalltotems/react-native-otp-input';

interface OTPInputComponentProps { pinCount: number; code: string; onCodeChanged: (code: string) => void; }

const OTPInputComponent: React.FC = ({ pinCount, code, onCodeChanged }) => { return (

console.log('Code is', c)} />

); };

const styles = StyleSheet.create({ container: { width: '100%', padding: 10, }, inputBox: { height: 50, }, codeInputFieldStyle: { borderWidth: 1, borderColor: '#000', }, codeInputHighlightStyle: { borderColor: '#03DAC6', }, });

export default OTPInputComponent; In your Otp screen import React, { useState } from 'react'; import { View, Text, Button } from 'react-native'; import OTPInputComponent from './OTPInputComponent'; // Ensure the path is correct

const OTPScreen: React.FC = () => { const [otpCode, setOtpCode] = useState('');

const handleCodeChanged = (newCode: string) => { setOtpCode(newCode); };

return (

Enter OTP
galbenyosef commented 1 month ago

@nitinelegant , if you are using expo: https://github.com/tttstudios/react-native-otp-input/issues/231#issuecomment-2323238450