react-native 0.57.2 bundling failed on windows - react-native

I am using react-native-cli 2.0.1 and react-native 0.57.2 on windows 10.
When I create a project with react-native init projectname and try to run it with react-native run-android I get this error:
I tried removing node_modules and reinstalling but that didn't work.

I also had problems with the newest version of react-native on windows. After trying a lot of "workarounds", there seems to be a bug with the 0.57.x versions on windows. Then I found a solution, use the version 0.55.4 of react-native. Just run react-native init yourApp --version 0.55.4.

Related

Strange react-native Version Number When Running from Local `node_modules`

When I run react-native --version from the global installation, it reports to me what I consider to be an accurate version number, like this:
react-native-cli: 2.0.1
react-native: 0.61.4
However, when I run yarn react-native --version (from the local installation at node_modules, it reports the version number simply as 3.2.1.
Can anyone explain why?
EDIT: The definitive way to find the react native version number for your local project is to run react-native info locally. This can be done one of the following ways:
npm run react-native info
yarn react-native info
In answer to the original question: "Why am I seeing the strange version number?", here is my analysis:
As it turns out, I did not have react-native installed globally. I had react-native-cli installed globally.
If you open Terminal and cd to some random directory and run react-native --version (assuming you also have react-native-cli installed), the response will look something like this:
$ react-native --version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory
If you then cd to a react-native project's root folder and run react-native --version, it will return the actual version number of that local project.
However, when you run yarn react-native --version from the root folder of a react-native project, what actually gets returned is the version of the #react-native-community/cli installation. (You get the same result if you run npx react-native --version or if you look in the package.json file of the local #react-native-community/cli installation in node_modules/#react-native-community/cli.
So, long story short, if you want to know the exact react-native version your local project is using, use react-native info (easy) or open up ./node_modules/react-native/package.json and it will tell you the version number.

How to run an old version of react native

Just a quick question, how to run an existing older version of react native project. Lets say version 0.59.10 , without upgrading it. what would be the command line commands. Thanks
You should navigate to project directory (if you aren't yet)
cd PATH_TO_PROJECT_DIRECTORY
run the following command to install the dependencies
npm install
then if the react-native version is 0.59.10 and lowers you should also run the command below to link the dependencies to your native android and ios project.
react-native link
and then run one the following commands based on your device
for android
react-native run-android
for ios
react-native run-ios

Android 'react-native-gesture-handler' error

When I follow the instruction by the react-navigation website : https://reactnavigation.org/docs/en/getting-started.html.
react-native link react-native-gesture-handler
and then change the MainActivity.java like it asks.
Then run react-native run-android, and error pop up :
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
react-native-gesture-handler (to unlink run: "react-native unlink react-native-gesture-handler")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink " and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
my react-native version :
react-native-cli: 2.0.1
react-native: 0.60.0
However, when I follow the instruction, to unlink the library
use : react-native unlink react-native-gesture-handler
The app successfully built, but now it pops up another error in the app :
null is not an object (evaluating 'rngesturehandlermodule.direction')
I tried a lot of solution in a lot of websites, like
undefined is not an object (evaluating 'RNGestureHandlerModule.State'
non of them is working for me
Looks like this is to do with the new autolinking feature in RN 0.60.
For iOS
To fix for now just add the following podspec for RNGesureHandler to ios/Podfile
pod 'RNGestureHandler', :podspec => '../node_modules/react-native-gesture-handler/RNGestureHandler.podspec'
Then in the ios directory run pod install to install it.
For Android
Path: android/app/src/main/java/com/projectname/MainApplication.java
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
....
protected List<ReactPackage> getPackages() {
// Add additional packages you require here
// No need to add RnnPackage and MainReactPackage
return Arrays.<ReactPackage>asList(
....
new RNGestureHandlerPackage()
);
}
Have a good day.
I'm not sure about what went wrong, but very possibly because of the react-native-cli that upgraded from below 0.60.0 to above it.
BEFORE 0.60.0 when running react-native run-android, the command will run a metro packager, along with building the android app, and then run the app that connect to the metro packager.
That's why in the past, we only run one command "react-native run-android" to run the project.
But AFTER 0.60.0 when running react-native run-android, the command will only build the android-app, and run the app to connect to the metro packager.
I saw a command prompt blinked once, might also be how the command start the metro packager went wrong and the packager just closed itself somehow.
Also as for the problem with react-native link react-native-gesture-handler I believe it is the new feature of react-native 0.60.0 to autolink library, so manual linking of library is not necessary anymore. As a lot of the library provider might need to start providing auto-linking features, or might face the same error, not just react-native-gesture-handler.
Temporary Solution until someone fix the react-native-cli to run the metro packager again:
Open 2 command prompt instead of 1. And run the command below on each of the command prompt:
react-native start
react-native run-android
You might want to run the first command first and wait for it to be ready before running the 2nd.
Otherwise, you app might turn out to be blank.
Source : I tried it myself by creating new project and running the command as mentioned by the question.
What you can do is, first uninstall react-native-gesture-handler.
Then delete IOS and Android folder.
Then run below command.
1.react-native upgrade --legacy true // to recover ios and android folder.
2.npm install react-native-gesture-handler
3.react-native link
4.react-native run-android
5.react-native run-ios
Also update your MainActivity.java file , follow official website:
https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html
Did you run react-native run-android or react-native run-ios ?

"react-native eject": Unrecognized command "eject"

I am trying to recreate ios and android folders for my react-native project. As far as I know this is done with the command:
react-native eject
But I get the error:
error Unrecognized command "eject".
I am doing something wrong? How should I recreate android and ios folders?
react-native-cli: 2.0.1
npm i react-native-eject
npm i #react-native-community/cli
react-native eject
will generate the both android and ios folder
It did work in 0.59.9. This threw me too this morning after I upgraded to 0.60. Apparently you now have to run react-native upgrade --legacy true. react-native eject was much easier IMHO.
yarn add react-native-eject
react-native eject
This two-line of code solved my problem with the eject error.
Nikita is 100% correct. If the project was initialized in expo running react native eject will "eject" the project from the expo dependencies (and expo environment) and create a standalone react native project outside the expo environment. This typically adjusts the dependencies in the pakage.json file.
The command exists as a part of expo.
To initialize a project from scratch react-native init will create android and ios folders. Also ensure if you have cloned the directory to run either npm install or yarn to install the dependencies.
If the project was initialized the way I imagine yours was the commmand you are looking for would be one of the following:
react-native run ios or react-native run ios --device
react-native run android or react-native run android --device
For RN projects, which are initiated by react-native init there is no such command, by default RN is using metro bundler instead of web-version of React, where you can configure Parcel/Webpack/Rollup or run create-react-app where actually you can eject.
This question is suitable for expo where you can actually eject, if you need some native modules that are not included in expo.
Try to use expo
react-native eject and upgrade --legacy true aren't working for me.
In the end, I just created a new blank RN project and this had an ios folder. Copied the folder over to my existing project and ... seems to work.
Run npm i react-native-eject
Run npm i #react-native-community/cli --force
Note: use npx instead of npm
npx react-native eject
cd android
./gradlew.bat installDebug
cd..
npm run android

Error while running react-native-app-auth in react-native 0.60

So, I used react-native init [project-name] to create one react-native project. It installed the latest version of native, 0.60. Then I installed react-native-app-auth.
After than I started the metro server using react-native start.
But when I ran react-native run-android, the compiler gave me some errors.
Task :react-native-app-auth:compileDebugJavaWithJavac FAILED
Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
I've tried to link it manually using react-native link react-native-app-auth.
Don't have any code. It's just some simple configuration.
I expect it to run smoothly, without any errors.
I am getting error after running react-native run-android
https://gist.github.com/ElavanResu/4555dc94f460681aaf051c2a3852effa
You can try to jetify the node_modules until react-native-app-auth updates his repository making it compatible with RN 0.60.
1) npm install --save-dev jetifier
2) npx jetify
3) npx react-native run-android
4) npx jetify
as said in: https://facebook.github.io/react-native/blog/2019/07/03/version-60#androidx-support