Trying to create a drawer navigator in React Native using VSCode.
import { createDrawerNavigator } from '#react-navigation/drawer';
const Drawer = createDrawerNavigator();
When I get this error:
Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
Make sure you reset build cache after updating the config, run: yarn start --reset-cache, js engine: hermes
I made sure that everything in babel.config.js is correct:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
I added the following import to the top my root file (App.js):
import 'react-native-gesture-handler';
I reset my cache too using:
npm cache clean --force
Here are also all of my packages:
...
...
...
"dependencies": {
"#react-navigation/drawer": "^6.5.5",
"#react-navigation/native": "^6.1.1",
"#react-navigation/native-stack": "^6.9.6",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-gesture-handler": "^2.8.0",
"react-native-reanimated": "^2.13.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2"
},
...
...
...
Just ran into this issue, was fixed by running
npm start -- --reset-cache
Try installing preset by
npm i metro-react-native-babel-preset --save-dev
and then
npm start -- --reset-cache
Related
I need to install my local package in my react-native project.
I install the package using npm i /path-to-folder command
But i get this error Unable to resolve module #babel/runtime/helpers/interopRequireDefault
local package package.json
{
...
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/runtime": "^7.19.4",
"react": "^18.1.0",
"react-native": "^0.70.1",
"react-native-svg": "^13.2.0"
}
}
project's metro-config.js
resolver: {
nodeModulesPaths: [packagePath],
},
watchFolders: [packagePath],
error: bundling failed: Error: Unable to resolve module assert from path to my project\node_modules\#jest\console\build\BufferedConsole.js: Module assert does not exist in the Haste module map
I have tried to uninstall npm and reinstall it Again but this was useless
Could you advice why this happens and how could I solve this issue ?
Jest in package.json
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/runtime": "^7.6.2",
"babel-jest": "^24.8.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.54.1",
"react-test-renderer": "16.8.3",
"rn-nodeify": "^10.1.0"
},
"jest": {
"preset": "react-native"
}
the error in metro bundler is
https://i.stack.imgur.com/mJvcT.png
That happens because the dependency is missing. First check if your package.json has the jest library. If everything looks correct, I'd suggest
Try removing the cache
react-native start --reset-cache
Delete your node_modules folder and
npm install
If none works, it could be babel issue (but not likely), try
npm add #babel/runtime
If that still doesn't work, I'd have to ask you to share more code. It's hard to guess what's causing the error without any context.
I'm building a Ethereum ERC20 tokens support wallet in React Native, I have been struggling on this particular issue for the past few days and I hope someone could help.
The package at "node_modules/web3-eth-accounts/src/index.js" attempted
to import the Node standard library module "crypto"
Here is my package.json file.
"dependencies": {
"expo": "^33.0.0",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-web": "^0.11.4",
"socket.io-client": "^2.2.0",
"web3": "1.0.0-beta.34",
"cryptico": "^1.0.2",
"native-base": "2.8.0",
"node-libs-browser": "2.1.0",
"react-native-crypto": "^2.0.0",
"react-native-randombytes": "^2.0.0"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"babel-cli": "6.26.0",
"babel-preset-es2015": "6.24.1"
},
Please advise!
I have followed this link as well, no luck !
https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766
i have 2 answers for you :)
1) use ethers.js since its rich and have default support for React Native
2) copy shims from link that you provided to your project and import it on App.js file at top so your web3 lib should work
you can use .babelrc file to define optional configuration, First, install the dependencies:
You can try install npm install --save crypto-browserify
Then add plugins config to your .babelrc file:
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
},
"plugins": [
["module-resolver", {
"root": ["./app"],
"alias": {
"crypto": "crypto-browserify"
}
}]
]
}
and Please import the wallet module.
import crypto from 'crypto'
You can run npm i --save-dev rn-nodeify#latest and rn-nodeify --install "stream"
if not ./node_modules/.bin/rn-nodeify --install "stream"
rn-nodeify will create a shim.js in the project root directory
example
// index.ios.js or index.android.js or App.js
// make sure you use `import` and not `require`!
import './shim.js'
Error
Relatively new to react native. Issued the following commmands to create a new react native project:
create-react-native-app SwiperExample
cd SwiperExample
npm install --save react-native-swipe-gestures
I modified App.js and included
import Swiper from 'react-native-swiper';
When I go to test using npm start, I the following error:
Unable to resolve react-native-swiper" from "./C:\Users\sue\ReactNativeApps\SwiperExample\App.js"
Failed building JavaScript bundle
My package.json include the following dependecies
"dependencies": {
"expo": "^25.0.0",
"react": "16.2.0",
"react-native": "0.52.0",
"react-native-swipe-gestures": "^1.0.2"
}
Any suggestions what is wrong?
You are doing a wrong import
Change this
import Swiper from 'react-native-swiper';
By
import Swiper from 'react-native-swiper-gestures';
Or install the correct package in case you installed the wrong one
npm install --save react-native-swipe
I want to integrate relay with react native.
I am getting following error:
getBabelRelayPlugin is not defined while processing preset
I used following steps to integrate react native with relay
1.Back up your project.
2. Make sure you have your GraphQL server ready and your schema.json at hand too. For more details about the latter two visit the React-Relay project page.
Ensure that you’re using npm version 3 or greater.
3.If React Native's packager (react-native start) is running somewhere in the background, you should stop it now.
4.Run: watchman watch-del-all
5.Delete the ./node_modules directory from your project.
6.Edit your package.json file, make sure it has the following:
"dependencies": {
"react": "^0.14.7",
"react-native": "facebook/react-native",
"react-relay": "^0.7.3"
},
"devDependencies": {
"babel-core": "^6.6.4",
"babel-preset-react-native": "^1.4.0",
"babel-relay-plugin": "^0.7.3"
}
Babel version is especially important. Make sure that your project uses babel 6.5 or later, we need it for the passPerPreset feature in .babelrc file.
7.Create a new file .babelrc and place it in your project's directory:
{
"presets": [
"./scripts/babelRelayPlugin",
"react-native"
],
"passPerPreset": true
}
8.Create a new file in your project's directory called babelRelayPlugin.js with the following content:
const getBabelRelayPlugin = require('babel-relay-plugin');
const schema = require('./schema.json');
module.exports = { plugins: [getBabelRelayPlugin(schema.data)] };
9Copy your schema.json file to the project's directory too.
10.Run: npm install