4

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

Jim Khan
  • 397
  • 3
  • 13
  • I am having this issue today with Expo SDK 44, react native 0.64, and react-native-otp-input@1.3.11 I've installed the community clipboard package and cleared the expo cache multiple times but still the issue persists. – Gaurav Feb 15 '22 at 13:08
  • @Gaurav 1st Solution was worked for me. Did you try this?? – Jim Khan Feb 15 '22 at 14:37
  • yes it kind of works but with a LogBox warning that the clipboard was moved from react-native. – Gaurav Feb 15 '22 at 18:54

6 Answers6

16

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

Rahman Haroon
  • 1,088
  • 2
  • 12
  • 36
4

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.
Gaurav
  • 1,668
  • 1
  • 13
  • 30
1

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

Aniket
  • 982
  • 1
  • 11
  • 16
1

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.

cigien
  • 57,834
  • 11
  • 73
  • 112
Chris Nguyen
  • 2,327
  • 1
  • 16
  • 13
1

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.

ObiTech Invents
  • 408
  • 3
  • 6
1

check the package.json file and look for the "@twotalltotems/react-native-otp-input": "^1.3.7", delete the caret so it doesn't keep the current minor it would look like this "1.3.7", then npm install/yarn add check What's the difference between tilde(~) and caret(^) in package.json?

7sasking
  • 21
  • 1
  • 4
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 29 '22 at 11:30