tttstudios / react-native-otp-input

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

TypeError: Cannot read property 'getString' of undefined #143

Open saurav-bhagat opened 3 years ago

saurav-bhagat commented 3 years ago

Getting the error:

TypeError: Cannot read property 'getString' of undefined

This error is located at:
    in OTPInputView (at OTPScreen.js:9)

As mentioned in the pinned issue, I installed @react-native-community/clipboard, still facing the same issue. I did yarn cache clean, deleted node_modules and yarn. lock and even then didn't work.

My package.json:

"@react-native-community/clipboard": "^1.5.1",
"@twotalltotems/react-native-otp-input": "^1.3.11",

OTPSceen component:

import React from 'react';
import { View, Text, StyleSheet, SafeAreaView } from 'react-native';
import OTPInputView from '@twotalltotems/react-native-otp-input';

const OTPScreen = () => {
  return(
    <View style={styles.otpContainer}>
      <Text>Inside OTP Screen</Text>
      <OTPInputView 
          style={{width: '80%', height: 200}}
          pinCount={4}
          codeInputFieldStyle={styles.underlineStyleBase}
              codeInputHighlightStyle={styles.underlineStyleHighLighted}
          onCodeFilled = {(code => {
                console.log(`Code is ${code}, you are good to go!`)
           })}
      />
    </View>
  );
};

image

Could you please advise, what am I missing here?

Thanks

skjangid commented 3 years ago

I also getting same error.

saurav-bhagat commented 3 years ago

Steps for reproducing the error:

  1. expo init testProject (bare javascript template)
  2. yarn add @twotalltotems/react-native-otp-input and yarn add @react-native-community/clipboard
  3. In App.js file , added these 2 line:
import OTPInputView from '@twotalltotems/react-native-otp-input'

<OTPInputView pinCount={4} />
  1. expo start

Getting the same error as shown in the screenshot above. Can you please suggest, if there is a workaround or version mismatch issue?

"@react-native-community/clipboard": "^1.5.1", "@twotalltotems/react-native-otp-input": "^1.3.11",

Omaksousa commented 3 years ago

I faced this issue and solved it by using these versions

"@twotalltotems/react-native-otp-input": "1.3.5", "@react-native-community/clipboard": "^1.5.1",

saurav-bhagat commented 3 years ago

I faced this issue and solved it by using these versions

"@twotalltotems/react-native-otp-input": "1.3.5", "@react-native-community/clipboard": "^1.5.1",

This did work. Thanks But this will create a hard dependency on the version.

gauravkhatri99 commented 3 years ago

I faced this issue and solved it by using these versions "@twotalltotems/react-native-otp-input": "1.3.5", "@react-native-community/clipboard": "^1.5.1",

This did work. Thanks But this will create a hard dependency on the version.

I am also facing the same problem but this solution didn't work for me.

Omaksousa commented 3 years ago

I faced this issue and solved it by using these versions "@twotalltotems/react-native-otp-input": "1.3.5", "@react-native-community/clipboard": "^1.5.1",

This did work. Thanks But this will create a hard dependency on the version.

I am also facing the same problem but this solution didn't work for me.

Make sure u delete the package-lock.json or yarn-lock.json then delete node_modules and npm install again

D-Navadiya commented 3 years ago

I faced this issue and solved it by using these versions

"@twotalltotems/react-native-otp-input": "1.3.5", "@react-native-community/clipboard": "^1.5.1",

Thanks @Omaksousa, this worked for now, I had to perform rm -rf node_modules tho.

vdewangga commented 3 years ago

facing same issue but not work with above solution

sami-99 commented 2 years ago

I faced this issue and solved it by using these versions

"@twotalltotems/react-native-otp-input": "1.3.5", "@react-native-community/clipboard": "^1.5.1",

This works for me .

savithri-lab commented 2 years ago

I faced this issue and solved it by using these versions

"@twotalltotems/react-native-otp-input": "1.3.5", "@react-native-community/clipboard": "^1.5.1",

if installed clipboard npm its working fine npm install --save @react-native-community/clipboard

IKTANIM commented 2 years ago

I faced this issue and solved it by using these versions "@twotalltotems/react-native-otp-input": "1.3.5", "@react-native-community/clipboard": "^1.5.1",

if installed clipboard npm its working fine npm install --save @react-native-community/clipboard

It works for me.

volchishka1 commented 1 year ago

You can tried set false in props property autofillFromClipboard={false}. It's work for me

saqibkhan01 commented 1 year ago

can we use this library in expo manage workflow

hadsluks commented 1 year ago

Worked with me with the latest version: ^1.11.2 just ran npx react-native run-android and it worked

Umar-cs commented 1 year ago

npm install --save @react-native-community/clipboard npx react-native run-android // worked for me

ritu-tripathi-neo commented 1 year ago

npm install --save @react-native-community/clipboard npx react-native run-android it worked !!!

Abdullah-146 commented 12 months ago

Great Worked for me was making app on expo

hamza157kashif commented 8 months ago

Still getting this error.

running my app on android 14,

app crashes on otp input with this error

I installed react-native/clipboard but that is failing the build

hamza157kashif commented 8 months ago

I faced this issue and solved it by using these versions

"@twotalltotems/react-native-otp-input": "1.3.5", "@react-native-community/clipboard": "^1.5.1",

this solution is now outdated

sergetasarim commented 7 months ago

I faced this issue and solved it by using these versions "@twotalltotems/react-native-otp-input": "1.3.5", "@react-native-community/clipboard": "^1.5.1",

this solution is now outdated

Did you solve the problem? For react-native version 0.73.1

saranbarua commented 7 months ago

can anyone help me out? WARN Clipboard has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-clipboard/clipboard' instead of 'react-native'. See https://github.com/react-native-clipboard/clipboard

nielmendegorin commented 6 months ago

This issue still exists. Any fix?

vishaldadarwal commented 2 months ago

try this @react-native-clipboard/clipboard "^1.14.1" @twotalltotems/react-native-otp-input": "^1.3.11",

my current React native version: 0.74.1 It works perfectly for me on both Android and iOS.