React native version mismatch after upgrading to 0.61.1 in brand new project - react-native

I am upgrading my React Native app from 0.59 to 0,61. What I did was to generate a brand new project from ground up with react-native init emps_fe6 and yarn add each module in package.json. Also copy the components and App.js over to the new project. Here is my new package.json file:
{
"name": "emps_fe6",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/async-storage": "^1.6.2",
"moment": "^2.24.0",
"react": "16.9.0",
"react-native": "0.61.1",
"react-native-cli": "^2.0.1",
"react-native-confirmation-code-field": "^3.9.0",
"react-native-device-info": "^3.1.4",
"react-native-elements": "^1.2.3",
"react-native-gesture-handler": "^1.4.1",
"react-native-gifted-chat": "^0.10.1",
"react-native-keychain": "^4.0.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-modal": "^11.4.0",
"react-native-modal-datetime-picker": "^7.6.0",
"react-native-segmented-control-tab": "^3.4.1",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"socket.io-client": "2.1.1"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
Then start on Android emulator with react-native run-android. It throws out the error of version mismatch:
I don't quite understand what causes the error, as there is no reference to version 0.59.9 in components and App.js copied. The project is started from brand new and each module is yarn add individually. Only thing from previous version is the components and App.js.

Maybe you had metro bundler running with a previous version of React Native which caused this issue. So, what I typically do when I face this problem is to start the bundler like npm start --reset-cache. Make sure to stop any metro bundler running.
If problem persist try restarting your machine.

Related

react native apk build fail

I have been trying to make an APK of my react native app, but don't know what problem is causing the APK build to fail. I am using the command gradlew assembleRelease to make APK
Following below I have given information about my app and error, please comment if any more information is required.
package.json:
{
"name": "appName",
"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 . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"#react-native-community/datetimepicker": "3.5.2",
"#react-navigation/native": "5.9.2",
"#react-navigation/stack": "5.14.2",
"formik": "^2.2.9",
"moment": "^2.29.4",
"react": "17.0.2",
"react-native": "0.68.2",
"react-native-confirmation-code-field": "7.2.0",
"react-native-countdown-component": "^2.7.1",
"react-native-gesture-handler": "1.9.0",
"react-native-mask-input": "1.2.1",
"react-native-modal-selector-searchable": "^2.1.4",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "2.17.1",
"react-native-svg": "12.1.0",
"react-native-video": "^5.2.1",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.20.12",
"#babel/runtime": "^7.20.13",
"#react-native-community/eslint-config": "^3.2.0",
"#types/react": "^18.0.27",
"#types/react-native": "^0.71.2",
"babel-jest": "^29.4.1",
"eslint": "^8.33.0",
"jest": "^29.4.1",
"metro-react-native-babel-preset": "^0.75.0",
"prettier": "^2.8.4",
"react-native-svg-transformer": "^1.0.0",
"react-test-renderer": "17.0.2",
"typescript": "^4.9.5"
},
"jest": {
"preset": "react-native"
}
}
error while building APK:
> Task :react-native-screens:generateReleaseRFile FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':react-native-screens:generateReleaseRFile'.
> Could not resolve all files for configuration ':react-native-screens:releaseCompileClasspath'.
> Failed to transform react-native-0.71.0-rc.0-release.aar (com.facebook.react:react-native:0.71.0-rc.0) to match attributes {artifactType=android-symbol-with-package-name, com.android.build.api.attributes.BuildTypeAttr=release, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-api}.
> Could not find react-native-0.71.0-rc.0-release.aar (com.facebook.react:react-native:0.71.0-rc.0).
Searched in the following locations:
https://repo.maven.apache.org/maven2/com/facebook/react/react-native/0.71.0-rc.0/react-native-0.71.0-rc.0-release.aar
This issue was caused by a wrong reference for React Native android artifacts on Maven repository - React Native Core Team already provided the patch - https://github.com/facebook/react-native/issues/35210

Error : interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead

I have a Small problem getting this to work without warnings or Errors
I stumbled into this Error trying to get this to work, following a step by step tutorial on here from this tutorial https://medium.com/#ritikjain1272/making-drawer-navigator-and-a-splash-screen-on-your-react-native-app-2fb561ee17f1
Now I have installed everything correctly, then it gives me this warning interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead
How Can I resolve this , Downgrading gives a further Error.
This is what the Package.json Looks like
{
"name": "**********",
"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": {
"react": "17.0.1",
"react-native": "0.64.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.1.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.1.1",
"react-native-vector-icons": "^8.1.0",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.0",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
"#babel/core": "7.13.15",
"#babel/runtime": "7.13.10",
"#react-native-community/eslint-config": "2.0.0",
"babel-jest": "26.6.3",
"eslint": "7.14.0",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.64.0",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native"
}
}
Edit
The image after downgrading I get
You have installed the latest stable react-native-reanimated version, whilst in the tutorial the version 1.7.0 is being used.
So you'll have to change your react-native-reanimated version to 1.7.0. Change the version in your package.json file:
"dependencies": {
...
"react-native-reanimated": "^1.7.0",
...
}
And then run npm install and npx pod-install/cd ios && pod install if you're running it on iOS.

ReactNative Code not running on WEB (ReactCLI)

I am new to ReactNative world,
I am using ReactCLI (No Expo)
My Code running fine on Android Simulator, but don't know why it is not executing on WEB. (See attachment). I am using Windows 10.
Additionally,
I got URL (why my code not run in react-native code in web) that saying - It doesn't work. But as per the FACEBOOK guideline "React Native is used to develop applications for Android, iOS, Web and UWP by enabling developers to use React along with native platform capabilities."
So, what I am missing??
Below is my Package.JSON
"scripts": {
"android": "npx react-native run-android",
"ios": "react-native run-ios",
"start": "npx react-native start --reset-cache",
"test": "jest",
"lint": "eslint .",
"build-android": "cd ./android && ./gradlew clean && ./gradlew assembleRelease"
},
"pre-commit": [
"lint"
],
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/drawer": "^5.8.0",
"#react-navigation/native": "^5.4.3",
"#react-navigation/stack": "^5.4.0",
"axios": "^0.19.2",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-paper": "^3.10.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^2.0.3",
"react-native-screens": "^2.8.0",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.1.0",
"react-native-unimodules": "^0.9.1",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.3.9"
},
"devDependencies": {
"#babel/core": "^7.10.0",
"#babel/runtime": "^7.10.0",
"#react-native-community/eslint-config": "^1.1.0",
"babel-jest": "^26.0.1",
"eslint": "^7.1.0",
"jest": "^26.0.1",
"metro-react-native-babel-preset": "^0.59.0",
"pre-commit": "^1.2.2",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}

child_process could not be found within the project-- react native

Created a new project on react native 0.61.4
Copied the screens and functionality from previous project which was on 0.55.4.
Everything is build but the bundling is failed with the following errors:
error: bundling failed: Error: Unable to resolve module child_process from node_modules\jest-changed-files\node_modules\execa\index.js: child_process could not be found within the project.
Error: Bundling failed
Package.json:
{
"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": {
"execa": "^3.2.0",
"jest-changed-files": "^24.9.0",
"mockjs": "^1.1.0",
"moment": "^2.24.0",
"native-base": "^2.13.8",
"react": "16.9.0",
"react-moment": "^0.9.6",
"react-month-picker": "^1.3.11",
"react-native": "0.61.4",
"react-native-datepicker-dialog": "0.0.9",
"react-native-gesture-handler": "^1.5.0",
"react-native-image-slider-show": "^1.0.3",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-modal-datetime-picker": "^7.6.0",
"react-native-month-selector": "^1.4.0",
"react-native-responsive-screen": "^1.3.0",
"react-native-simple-table": "0.0.3",
"react-native-slideshow": "^1.0.1",
"react-native-spinkit": "^1.5.0",
"react-native-svg": "^9.13.3",
"react-native-swipe-gestures": "^1.0.4",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
"react-time-picker": "^3.7.2"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/runtime": "^7.6.3",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.6.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.57.0",
"path": "^0.12.7",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
},
"browser": { "child_process": false }
}
Any help would be appreciated!
Please clean your project then run project.Some library is not adding by autolinking fearure so please check and add properly like firebase library need to add manually.I attached some screenshot so please check.
Check in any of the files you were working on recently and be sure you are not mistakenly importing child_process somewhere. In my case it was process as shown in the image above.

unable to reduce react-native application's size

i made an app with expo but am not satisfied with it's size, i found this blog/tutoriel on how to reduce it using react-native init project , here is the link : https://medium.com/#aswinmohanme/how-i-reduced-the-size-of-my-react-native-app-by-86-27be72bba640
the blog says to "Install all dependencies of the Expo project except Expo specific libraries." , but since i made the app with expo i used expo-av and expo-linear-gradient,it gave me this error
error: bundling failed: Error: Unable to resolve module #unimodules/core from
node_modules/expo-av/build/ExponentAV.js`: #unimodules/core could not be found within the project.
this error was fixed after i downloaded expo into the directory, it gave me a white screen but the build was succesfull.
when i removed the expo related libaries, it gave an error (ofcourse..).
NOTE : this isn't the first time that android studio emulator gives the white screen :( , so what am i doing wrong !!
here is the current package.json , i didn't change anything else in the project directory exept from adding the js files and the assets folder.
{
"name": "fixemulatorBug",
"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": {
"expo-av": "5.0.2",
"expo-linear-gradient": "~5.0.1",
"react": "16.9.0",
"react-dom": "16.8.3",
"react-native": "0.61.3",
"react-native-drawer": "2.2.2",
"react-native-elements": "1.2.1",
"react-native-gesture-handler": "^1.5.0",
"react-native-reanimated": "^1.4.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "0.11.7",
"react-navigation": "4.0.10",
"react-navigation-drawer": "2.2.2",
"react-navigation-stack": "^1.9.4"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/runtime": "^7.6.3",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.6.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.57.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}