Nanoid can't be used in react-native

Question

I don't know exactly what happened when I'm using the nanoid package in react native it's shown some kind of below error. I'm not sure about it.

I hope someone help from this community.

Thanks in advance.

Scenario: I just import to the nanoid package.

import { nanoid } from 'nanoid';

Error: React Native does not have a built-in secure random generator. If you don’t need unpredictable IDs use `nanoid/non-secure`. For secure IDs, import `react-native-get-random-values` before Nano ID.    
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\react-native\Libraries\polyfills\error-guard.js:49:36 in ErrorUtils.reportFatalError   
at node_modules\metro\src\lib\polyfills\require.js:204:6 in guardedLoadModule
at http://192.168.43.19:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false&minify=false:203661:3 in global code

Passerby

Have you tried importing react-native-get-random-values before? – Teillo

Just now installed I'm gonna try it out and let you know – Passerby

Now it was given new error :( – Passerby

Error: Requiring module "node_modules\react-native-get-random-values\getRandomBase64.js", which threw an exception: TypeError: null is not an object (evaluating '_$$_REQUIRE(_dependencyMap[0], "react-native").NativeModules.RNGetRandomValues.getRandomBase64') at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error – Passerby

I was resolved this issue by using following functions. So I think in nanoid used crypto module so in react-native it doesn't exist. For that we need to use nanoid/non-secure module. Below I was also used customAlphabet method. Finally it works. :) ``` import { customAlphabet } from 'nanoid/non-secure'; const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10); ``` – Passerby

sure I'll keep it in mind. – Passerby

Answer 1

Issue resolved

I have resolved this issue by using the following functions.

So I think in the nanoid used crypto module so in react-native it doesn't exist.

For that, we need to use a nanoid/non-secure module. Below I have also used customAlphabet method.

Finally it works. :)

import { customAlphabet } from 'nanoid/non-secure'; 

const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10); 

Passerby

The answer from @eckc is more accurate per the nanoid docks – Outmarch

Answer 2

Add the react-native-get-random-values dependency and then import it before Nano ID:

import 'react-native-get-random-values'
import { nanoid } from 'nanoid'

From the Nano ID docs:

React Native does not have built-in random generator. The following polyfill works for plain React Native and Expo starting with 39.x.

Check react-native-get-random-values docs and install it. Import it before Nano ID.

Desert

Answer 3

You could also import the following to your App.jsx/tsx or index file (if you don't mind the extra dependencies):

import 'react-native-url-polyfill/auto';
import 'react-native-get-random-values';

After this the following works where you need to use it:

import {nanoid} from 'nanoid';

Autotoxin

Answer 4

nanoid uses crypto which doesn't exist in react native. Adding this polyfill will fix this.

|crypto-polyfill.ts (note: You can use any other crypto package instead of expo-crypto as well)

import * as Crypto from "expo-crypto";

declare const global: {
  crypto: {
    getRandomValues(array: Uint8Array): Uint8Array;
    randomUUID(): string;
  };
};

export function bootCryptoPolyfill() {
  global.crypto = {
    getRandomValues(array: Uint8Array) {
      return Crypto.getRandomValues(array);
    },
    randomUUID() {
      return Crypto.randomUUID();
    },
  };
}

Call the function in your app.tsx or anywhere else before using nanoid

bootCryptoPolyfill();

Klapp