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
Related
I created an Expo project because I thought it would be easier to the person I'm teaching to code in React Native. But my instinct is to just use yarn or npm. Am I damaging project structure in any way?
https://docs.expo.dev/workflow/using-libraries/#using-expo-sdk-libraries
The expo install command will pick a version of the library that is compatible with your project and then use your JavaScript package manager (such as npm) to install it.
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
I have a question regarding the package manager npm and the meaning of installing the package globally.
For example I work often with react, should I install react globally?
npm install -g react react-dom
Does this mean that next time when I do
npx creat-react-app my-app
It will get the package from the global or it does not matter and it will still download it locally inside my-app?
Because I really do not understand the idea behind installing globally.
Because if I want to use a package it should be mentioned in package.json, if it is in package.json it is then located in node_module ... so yeah ...
Could anyone give me better insight?
Thanks in advance
React library can be installed globally on your local machine. In development there is no real reason to do that since you might not have the latest version and this might cause issues.
Better practise is to use react on project level by using the command you stated above npx create-react-app my-app
If you push code to a server the package.json file will install the dependencies (React, React DOM,..) to build your project.
Read more here : https://create-react-app.dev/docs/getting-started/
If you've previously installed create-react-app globally via npm
install -g create-react-app, we recommend you uninstall the package
using npm uninstall -g create-react-app or yarn global remove
create-react-app to ensure that npx always uses the latest version.
You can check what packages are installed globally using:
npm list -g --depth 0
It took me quite a few days to figure out I need to install the latest react-native cli from #react-native-community/cli but not from react-native-cli as I used to do.
Do:
yarn add #react-native-community/cli
but not:
yarn add react-native-cli
There are quite many modules now under #react-native-community, my question is that when I should install from #react-native-community/module_name and when just react-native-modulename.
Lots of libraries used to be a part of react-native library, but recently they decided to move them out. So now modules like react-native-camera can be installed via npm install react-native-camera and then imported from react-native-camera package.
It's easy to understand when to install a package from npm and when just import from react-native. If your import tells you that there is no such module in core lib, just go to npm and check it there.
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