tweetnacl returns no PRNG error in react native

Question

I use nacl in react native

i just write down code below.

it returns no PRNG error in randombytes variable.

  const test = nacl.box.keyPair();

here is my package.json too.

{
  "dependencies": {
    "@react-navigation/material-bottom-tabs": "^6.2.15",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "bs58": "^5.0.0",
    "react": "18.2.0",
    "react-native": "0.71.3",
    "react-native-get-random-values": "^1.8.0",
    "react-native-paper": "^5.4.1",
    "react-native-safe-area-context": "^4.5.0",
    "react-native-screens": "^3.20.0",
    "react-native-webview": "^11.26.1",
    "tweetnacl": "^1.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "metro-react-native-babel-preset": "0.73.7",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  }
}

Answer 1

I've faced the same problem before. During research I discovered that nacl uses nacl.randomBytes() internally. However, the actual implementation differs depending on a platform you use it. For node it invokes crypto.randomBytes(), which is not defined in ReactNative environment.

To get work nacl with ReactNative you need to provide the definition by yourself. You can do it by installing the react-native-get-random-values package and adding

import 'react-native-get-random-values'

to the index.js

This will provide nacl with the definition for the crypto.randomBytes().