Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
nitinelegant opened this issue Jul 18, 2024 · 4 comments

Comments

@nitinelegant
Copy link

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
@nitinelegant nitinelegant changed the title TypeError: Cannot read property 'getString' of null After upgrading react native version to 0.74.1, Throwing "TypeError: Cannot read property 'getString' of null" Jul 18, 2024
@Sheryar-code
Copy link

same issue

@Mns9983
Copy link

Mns9983 commented Jul 31, 2024

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 (

<OTPInputView
style={styles.inputBox}
pinCount={pinCount}
code={code}
onCodeChanged={onCodeChanged}
codeInputFieldStyle={styles.codeInputFieldStyle}
codeInputHighlightStyle={styles.codeInputHighlightStyle}
onCodeFilled={(c) => 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

<Button title="Submit" onPress={() => console.log('Submitted OTP:', otpCode)} />

);
};

export default OTPScreen;
`

@galbenyosef
Copy link

@nitinelegant , if you are using expo:
#231 (comment)

@root123-bot
Copy link

root123-bot commented Nov 12, 2024

I'm running on react-native 0.76.1, what I've done is to use react-native-clipboard/clipboard instead of react-native-community/clipboard as its depreacted
After that i applied the patch on the linke below working fine.
I've struggled to fix this within two days and finally I've got this working

I hope this wll help
[https://github.com//pull/233]
[https://github.com//issues/232]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants