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

Question

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!

Answer 1

Try this

1: install yarn add @twotalltotems/[email protected]

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

3: Run expo start -c to clear the cache

Answer 2

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

Answer 3

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.

Answer 4

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.