I want to eject my react-native so I can install mobx but running both 'yarn run eject' and 'npm run eject' doesn't work.i think this is new issue and so couldn't find help online. any help would be appreciated.
this is my package.json file and the error given below.
{
"name": "a2x",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-react-native-stage-0": "^1.0.1",
"jest": "^22.4.4",
"jest-react-native": "^18.0.0",
"react-test-renderer": "16.3.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest",
"eject": "react-native run-eject"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"axios": "^0.18.0",
"mobx": "^5.5.0",
"mobx-react": "^5.2.8",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-native-elements": "^0.19.1",
"react-navigation": "^2.0.1"
}
}
Try npm run eject..not npm run-eject
But if you trying to add native dependencies later i think better to start project using react native init. not using create-react-native-app.
Actual command is react-native eject.
It will create new folder for android and iOS to run it seperately on native.
As you said you are getting error of Both the iOS and Android folders already exist!, so please delete it and try with this command.
If you already have android and ios folder with some native implementation, there is no need to use eject command at all.
regarding npm run reject command, I guess this will be more useful to clear everything.
Always working for me, only follow two steps
first install in your project
yarn add react-native-eject
and then run
react-native eject
make sure you have install yarn in your pc
Related
I have tried below steps to publish my React Native application for windows:
Open the solution in Visual Studio
Select the Release configuration from the Configuration Manager drop-down.
Build the solution. You can now launch without first launching Metro.
If you want to build an APPX package to share or publish, use the Project > Publish > Create App Packages... option.
Took reference from [https://microsoft.github.io/react-native-windows/docs/getting-started]
I have used below command to create my react-native application:
npx react-native init {projectName} --template react-native#^0.71.0
cd {projectName}
npx react-native-windows-init --overwrite
npx react-native run-windows
Here is my package.json looks like:
{
"name": "SampleRNApp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest",
"windows": "react-native run-windows"
},
"dependencies": {
"react": "18.2.0",
"react-native": "0.71.0",
"react-native-windows": "0.71.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/preset-env": "^7.14.0",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^3.0.0",
"#tsconfig/react-native": "^2.0.2",
"#types/jest": "^29.2.1",
"#types/react": "^18.0.24",
"#types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.5",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4",
"metro-config": "^0.73.7"
},
"jest": {
"preset": "react-native"
}
}
Observations:
For building the app it takes a hell lot of time (more than 30 mins) and after completing build successfully I'm not able to launch my RN application without Metro. It gives me error "A connection with the server could not be established" (see below error screen-shot).
System specs: I'm using Windows 11 OS and Visual Studio 2022 professional
After publishing I see there is an react-native application automatically installed into my system with the same name of my application and upon double clicking it I'm getting same error.
Error screen-shot:
error screen-shot
Could you please advice me how we can create React Native application for Windows project, standalone package which will work without explicitly running Metro (without running npm start command).
Thanks in advance!
When I reload my bundle this exception is uncaught:
Error: EISDIR: illegal operation on a directory, read
at Object.readSync (fs.js:592:3)
at tryReadSync (fs.js:366:20)
at Object.readFileSync (fs.js:403:19)
at UnableToResolveError.buildCodeFrameMessage (/home/brady/obs-websocket-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:347:17)
at new UnableToResolveError (/home/brady/obs-websocket-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:333:35)
at ModuleResolver.resolveDependency (/home/brady/obs-websocket-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
at DependencyGraph.resolveDependency (/home/brady/obs-websocket-app/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
at /home/brady/obs-websocket-app/node_modules/metro/src/lib/transformHelpers.js:317:42
at /home/brady/obs-websocket-app/node_modules/metro/src/Server.js:1471:14
at Generator.next (<anonymous>)
My package.json
{
"main": "src/index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"#types/node": "^14.14.35",
"events": "^3.3.0",
"expo": "~40.0.0",
"expo-splash-screen": "~0.8.0",
"expo-updates": "~0.4.0",
"obs-websocket-js": "^4.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.64.0",
"react-native-elements": "^3.3.2",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.0",
"react-native-unimodules": "~0.12.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"#types/react": "~16.9.35",
"#types/react-dom": "~16.9.8",
"#types/react-native": "~0.63.2",
"babel-preset-expo": "~8.3.0",
"jest-expo": "~40.0.0",
"typescript": "~4.0.0"
},
"jest": {
"preset": "react-native"
},
"private": true
}
Replace this code in `MainApplication.java
#Override
protected String getJSMainModuleName() {
return "src/index"; <---add this
}
For IOS
// packages/myapp/ios/myapp/AppDelegate.m:56
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:#"src/index" fallbackResource:nil];
Apparently there's an issue with moving index.js to src/index.js. I moved it back to the project root and it's working fine now.
Solved by deleting and creating new android emulator...
I got same error, but all going well after I yarn global remove wml
yarn global remove wml
that save my life
if you have never install wml, just consider some other related global libs
----update-----
I got the error again even I uninstall wml staff, but I found my issue's root cause was the watchman, after run brew uninstall watchman, all going well
An old instance of the remote debugger running caused this for me. Not sure of the "whys", but if you want to kill the debugger programmatically, add this to the top of your App.tsx or whatever your top-level entry file is:
import { NativeModules } from 'react-native';
NativeModules.DevSettings.setIsDebuggingRemotely(false);
Credit to Christophe Marois over at this answer How to disable Remote JS Debugging in React-Native
If you are using create-react-native-library for native modules and getting this error. Do the following:
cd example
npx react-native start
In rootDir, yarn example run
I created a new react-native project and added my android native module as a dependency.using official doc https://reactnative.dev/docs/native-modules-setup
When I run this I get the error with following stack trace:
java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libfbjni.so result: 0
at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:825)
at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:673)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:611)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:559)
at com.facebook.soloader.NativeLoaderToSoLoaderDelegate.loadLibrary(NativeLoaderToSoLoaderDelegate.java:25)
at com.facebook.soloader.nativeloader.NativeLoader.loadLibrary(NativeLoader.java:44)
at com.facebook.jni.HybridData.<clinit>(HybridData.java:34)
at com.facebook.flipper.android.FlipperThread.run(FlipperThread.java:25)
Following is my package.json
{
"name": "albums",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"axios": "^0.19.2",
"react": "16.11.0",
"react-native": "0.62.0-rc.5",
"react-native-my-fancy-library": "../react-native-my-fancy-library/"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/runtime": "^7.9.2",
"#react-native-community/eslint-config": "^1.0.0",
"babel-jest": "^25.3.0",
"eslint": "^6.8.0",
"jest": "^25.3.0",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
I have already tried:
https://stackoverflow.com/a/61695629/9715339
https://stackoverflow.com/a/57155606/9715339
https://github.com/facebook/react-native/issues/25415
But none of these solved my issue.
I am a beginner in react-native. So I don't know what other details files I need to post here. Do let me know if you need any other files.
For me the following two solved it (I think it was the latter that did it):
Reset cache: react-native start --reset-cache
Clean Android: cd android -> ./gradlew clean
for me this is resolved after following below steps
3 steps
Up minSdk to 23
In gradle.properties add line:
android.bundle.enableUncompressedNativeLibs=false;
In your manifest file add line:
android:extractNativeLibs=true;
I had the same problem that I solved by updating build.gradle 3.5.2 to 3.5.3 by Android Strudio.
The image shows the update of the classpath in the dependencies in the build.gradle file in the android folder
I am new in react-native and I have, for the first time, created my own module(npm).
I have tried to create my own module(npm) for common components and individually it works fine. However once I install, link it in our app, and try to use those components, it gives an error like this:
Unable to resolve module `<Module-name>` from `<file>`: Module `<Module-name>` does not exist in the Haste module map.
(Note: I have tested using Android Emulator only)
I have followed the below steps for module and test app creation
For Module
react-native init <module-name>
Add simple code of component in main index.js
And set pacakge.json like this:
{
"name": "<module-name>",
"version": "0.0.1",
"private": true,
"main": "index.js",
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"build": "echo 'build script executed'"
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4"
},
Now I check this component (react-native run-android), it will work fine.
Now I have tried to use in an app with the below steps
For Test App
Create new fresh app (react-native init <app-name>)
Install created npm with full path like;
npm install <full path of component>
Now I try react-native link <full path of component>, I have also tried simple react-native link, but nothing happens.
Now I run app using react-native run-android, however every time it gives the same error like;
Unable to resolve module <created-module name>
test app package.json
{
"name": "<app-name>",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-my-library": "^1.0.2",
"<created-module-name>": "file:../<created-module-name>"
},
"devDependencies": {
"#babel/core": "7.5.5",
"#babel/runtime": "7.5.5",
"#react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"eslint": "6.1.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Created module successfully installed but I think it is not linked properly and it will gives error.
So what is wrong here ?
Please give me suggestion / help.
Thanks.
I am assuming your module is successfully published in npm repository. Otherwise you can not use npm install <full path of component>.
If you are using
npm install <full path of component>
command for installing your module to a Test App from npm repo. Specify in your package.json like
"<created-module-name>": "file:../<created-module-name>"
is wrong. You need to remove that line from your package.json and try to install like;
npm install --save <full path of component>
This will automatically create a line in your package.json. You can now manually link your module.
For manual linking you can follow that guide.
Edited:
If you are using in your local computer,
Then no need to npm install.
Just copy your module into your project node_modules folder.
Then in you package.json add;
"dependencies": {
...
"your_module_name": "your_module_version"
...
}
Then, you just follow the manual linking process that I mentioned above.
after I ran expo build:android i got the apk file built successfully but when I try to install it in many devices, it is not being installed and it shows "App not installed" error [image].
here is my package.json:
{
"name": "some-app",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"axios": "^0.18.0",
"expo": "^31.0.2",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-navigation": "^3.1.2",
"react-redux": "^6.0.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
}
}
the problem was in the android packager name in my app.json
so it was like that:
"package": "com.<myName>.<appName>"
i replaced myName with the appName like that :
"package": "com.<appName>.<appName>"
and it worked like a magic and I was able to successfully build and install the app on multiple devices
Make sure to uninstall any previous version of the App installed as they may have the same package name.
On your main screen of the phone, scroll down the status bar of the phone.
Select the “Airplane Mode”, and press “Turn ON”
Now go and try to install your application
While installing a notification may appear about “Blocked by Play Protect”
Then press “Install anyway”
The solution for me was the disk space of my phone.
Solution:
-> Try to uninstall some apps and after this try to install. ;-) worked fine for me
Those two solutions didn't make it for me. What made it for me was just to install the last Os on my phone and the apk install finally worked. Hope my answer can help someone as it took me a long time to find out why.
Also check if your mobile device has space. I cleared up about 2GB of dummy data on my device and the app installed.