TypeError: null is not an object (evaluating 'NativeClipboard_1.default.getString')

user_10128276 0
Viewed 3642

I want to use @twotalltotems/react-native-otp-input in my expo project. I have go through with the documentation of @twotalltotems/react-native-otp-input But I'm getting this error. I have tried the solution from https://github.com/tttstudios/react-native-otp-input/issues/87

But none of that is worked for me! enter image description here

expo react-native
5 Answers

Try this

1: install yarn add @twotalltotems/react-native-otp-input@1.3.7

2: install yarn add @react-native-community/clipboard

3: Run expo start -c to clear the cache

user_139130530

For people using this package @twotalltotems/react-native-otp-input with expo, remember expo is not compatible with Clipboard package but itself offers another package expo-clipboard. So you've two ways -

  1. either use @twotalltotems/react-native-otp-input version 1.3.7 (it uses clipboard from react-native but throws a warning that Clipboard is deprecated.)
  2. Or you can hack around by copying this package code (from GitHub or node-modules) into your codebase. Create your own component and install expo install expo-clipboard and replace default clipboard import with import Clipboard from 'expo-clipboard'; in index.js file. Note - Do not make this change in node-modules as any package update will nullify your hack.
user_76829250

As per documentation you have to install @react-native-community/clipboard as a dependency it would fix your issue just do npm install --save @react-native-community/clipboard

user_70517070

You'll need to override this component by these steps:

Clone this file @twotalltotems/react-native-otp-input/dist/index.js

Replace these lines:

  import Clipboard from '@react-native-community/clipboard';

  import styles from './styles';

  import { isAutoFillSupported } from './helpers/device';

  import { codeToArray } from './helpers/codeToArray';

to

import * as Clipboard from 'expo-clipboard';

import styles from '@twotalltotems/react-native-otp-input/dist/styles';

import { isAutoFillSupported } from '@twotalltotems/react-native-otp-input/dist/helpers/device';

import { codeToArray } from '@twotalltotems/react-native-otp-input/dist/helpers/codeToArray';

and change Clipboard.getString() to Clipboard.getStringAsync()

Then use your own component instead of. it should work as expected

if you are using typescript, add this // @ts-nocheck on top.

user_27885420

For Window users clear your cache. Mostly this issue pops up when you install a new dependence in my case i installed @react-native-community/clipboard since it was required by @twotalltotems/react-native-otp-input.

After the installation the error pops up. So what did I do?

I cleared my cache by running yarn cache clean and then restarted my PC everything went back to normal.

user_185415570
Related