I have posted this here have created react-native app using
react-native init myapp
added web3 in package.json
npm install
react-native run-ios
but i am getting the error unable to resolve module crypto from web3-eth-accounts. Is there any way to fix this
unable to resolve crypto
Crypto is a node js module, when React Native is run - it uses Javascript Core. Crypto isn't include within this. When I installed crypto I used the following package:
https://www.npmjs.com/package/react-native-crypto
Instructions:
npm i --save react-native-crypto
# install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
# install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
rn-nodeify will create a shim.js in the project root directory
// index.ios.js or index.android.js
// make sure you use `import` and not require!
import './shim.js'
// ...the rest of your code
Import shim.js in your index.js file.
When you have done that crypto should be made available, if it still doesn't work I had to create a const in my App.js file like so:
export const cryp = require('crypto');
And import it into the components you need.
UPDATE
I've done a fresh build for this, I followed the below:
react-native init TestApp
Follow the instructions above for Crypto.
Linked:
react-native link
react-native run-ios
react-native-crypto don't work on recent react-native version 0.63.3 and react version 16.13.1, any more.
I used crypto-js package. The version is 3.1.9-1 in my react-native app. It's working well.
You can add below line in package.json file.
"crypto-js": "3.1.9-1",
crypto is a node's library that works with the browser however we can use it with react native with some hacks mentioned below follow these steps and boom! you are ready to rock.
npm i --save react-native-crypto
==> install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
==>install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
==> install node core shims and recursively hack package.json files
==> in ./node_modules to add/update the "browser"/"react-native" fieldwith relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
i had the same problem, it seems the crypto module is not supported by react native because when i install crytpo , it does not have an index.js file in the node_modules. so my problem came about when i was trying to use jsonwebtoken which uses crypto to encrypt data. so i uninstalled jsonwebtoken and switched to react-native-pure-jwt
Related
I have developed an npm package for React Native (myPackage).
As might you know React Native doesn't have built-in support to handle SVG images so I am using this package react-native-svg for handling SVGs in my myPackage
After developing I have created a new React Native app (create-react-native-app my-project) and installed myPackage through npm I myPackage
so, the problem is when I install myPackage in my-project it installed successfully and listed in node_modules but I am getting an error that the RNSVGPath was not found but it actually exists in node_modules
Workaround:
It works if I install the package again in my-project
It shouldn't be like this because my-project must use dependencies of myPackage. I don't want to install manually react-native-svg
If you're using react-native-cli or the expo bare workflow, it's probably because you didn't run pod install after installation
working on implementing magic.link using react-native but i get an error when importing Magic
import { Magic } from "#magic-sdk/react-native";
error:
Attempted import error: 'WebView' is not exported from 'react-native'.
I think its because of the sub dependency of react-native-webview has been removed, but i did install it. npm install --save react-native-webview#^8.0.0 as the tutorial says? Stuck for a while now, not sure how to procede with Magic
https://magic.link/docs/login-methods/email/integration/react-native
This link was attached to the docs https://github.com/react-native-webview/react-native-webview/issues/373 . But don't know why it should not work, since the correct react-native-webview dependency was installed (8.0.0) or (^8.0.0, which is 8.2.1)
I installed the packages as the tutorial suggests
yarn add #magic-sdk/react-native
# Ensure the required `peerDependencies` are installed
yarn add react-native-webview#^8.0.0
Use this one:
npm install --save #magic-sdk/react-native
then try to link it using npm react-native link
I am using https://reactnative.dev/docs/environment-setup 0.64
I npm install #walletconnect/client
put below import in App.js
import WalletConnect from "#walletconnect/client";
after npx react-native run-ios and got below error:
error: Error: While trying to resolve module `crypto` from file `/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/#pedrouid/iso-crypto/dist/cjs/helpers/env/node.js`, the package `/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/crypto/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/crypto/index.js`. Indeed, none of these files exist:
I tried to remove node_modules folder and npm install again but still get the same error.
I am sure that it is thrown by #walletconnect/client because when I removed
import WalletConnect from "#walletconnect/client";
then the error gone
crypto is a built in Node module, which isn't available in React Native, as iOS/Android apps don't run with a Node runtime - only web apps do.
There are a few ways to solve this problem, all of them fairly hacky.
One way is to replace the crypto module with a React Native native module that does the same thing. React-native-crypto is the package used by create-react-native-dapp (https://www.npmjs.com/package/create-react-native-dapp) to integrate with WalletConnect: https://www.npmjs.com/package/react-native-crypto
To get this integration working, note that you'll need to be able to link modules and run rn-nodeify, as it mentions in the instructions on that npm package:
npm i --save react-native-crypto
# install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
# install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
If you're using Expo, note that you'll need to eject Expo before this can work.
Another hacky workaround is to run WalletConnect in a WebView using react-native-webview. There's an old but working example of this that you can just use to plug and play WalletConnect without requiring linking that you can get here: https://github.com/cawfree/react-native-walletconnect
Note that that repo is archived and effectively hardcoded to WalletConnect version 1.0.0, but it's a pretty simple codebase - you can just effectively copy and paste its code and update it to the latest version of WalletConnect to get it working with a later version if desired.
As a final note, there are multiple ways to get node modules running in React Native on top of rn-nodeify. If you'd like to explore other methods of getting node modules running, here's a quick rundown of other possibilities: https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd
I created a package which uses react-native-webview as a dependency and I published it to npm.
My steps to create and publish a package are:
npm init
npm link react-native-webview
npm install react-native-webview
npm publish
Everything worked perfectly and I successfully published my package.
However, after the installation of my package using npm install <package_name> in another project, when I run the project I always get this error:
requireNativeComponent: "RNCWebView" was not found in the UIManager
I don't know why I am getting this. I also checked the dependencies in node_modules folder and all are present. But when I install react-native-webview dependency explicitly into my project It works perfectly fine.
This error is due to native link not present in between the UIManager and the JS core
You can either run react-native link react-native-webview or link it manually
use react-native link command to link dependencies
run
npx react-native link react-native-webview
For some reason the Expo team is not updating their packages on npm and I need to install directly from their Github repo. The packages are in the packages/package-name folders on the main Expo repository.
I put "expo-blur": "expo/expo packages/expo-blur" in package.json, but that also just uses the npm release. I asked a similar question here: https://forums.expo.io/t/recommended-way-for-using-expo-packages-straight-from-github/22022.
What do I need to put in package.json so that it uses the code from here: https://github.com/expo/expo/tree/master/packages/expo-blur ?
No you can't. You will end up having it undefined in your package.json file like this:
The command was:
npm install Teknasyon-Teknoloji/desk360-react-native-sdk#1.0.0 --save
I tried:
npx expo install Teknasyon-Teknoloji/desk360-react-native-sdk#1.0.0
So the correct way is:
Switch to bare workflow if you are in managed workflow:
npx expo prebuild
Then follow the rest of the steps from the package docs. So I then ran:
npm install Teknasyon-Teknoloji/desk360-react-native-sdk#1.0.0 --save
then cd ios, pod install ...etc.