Happened when i was updating all the packages of a 3 years old project(React-native). Help would be appreciated - react-native

ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter,
GlobalPerformanceLogger, JSDevSupportModule, HMRClient.
A frequent cause of the error is that the application entry
file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
This is my package.json
{
"name": "Deepak",
"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-native-async-storage/async-storage": "^1.17.11",
"#react-native-community/netinfo": "^9.3.7",
"#react-navigation/bottom-tabs": "^6.5.2",
"#react-navigation/native": "^6.1.1",
"#react-navigation/native-stack": "^6.9.7",
"#react-navigation/stack": "^6.3.10",
"moment": "^2.29.4",
"react": "18.1.0",
"react-native": "^0.70.6",
"react-native-confirmation-code-input": "^1.0.4",
"react-native-easy-toast": "^2.3.0",
"react-native-flip-toggle-button": "^1.0.9",
"react-native-image-placeholder": "^1.0.14",
"react-native-image-slider-show": "^1.0.3",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-keyboard-aware-scrollview": "^2.1.0",
"react-native-linear-gradient": "^2.6.2",
"react-native-modalbox": "^2.0.2",
"react-native-page-control": "^1.1.2",
"react-native-pull-to-refresh": "^2.1.3",
"react-native-razorpay": "^2.3.0",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-native-search-filter": "^0.1.5",
"react-native-simple-toast": "^2.0.0",
"react-native-slideshow": "^1.0.1",
"react-native-swipe-gestures": "^1.0.5",
"react-native-webview": "^11.26.0",
"react-redux": "^8.0.5",
"redux": "^4.2.0",
"redux-thunk": "^2.4.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "0.72.3",
"react-test-renderer": "18.1.0"
},
"jest": {
"preset": "react-native"
}
}
I commented most of the deprecated packages, don't want to change the node modules like
import Carousel, { Pagination } from 'react-native-snap-carousel';
import CheckBox from 'react-native-check-box'

Related

How to add web capabilities to react native app

My project structure
I have a React Native App that works but I want to be able to build for the web. Any help would be deeply appreciated.
Below is my package.json.
{
"name": "dotmac",
"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": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-native-fontawesome": "^0.2.7",
"#js-joda/core": "^5.2.0",
"#react-native-async-storage/async-storage": "^1.17.3",
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/drawer": "^6.4.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/native-stack": "^6.6.1",
"#types/react-native-htmlview": "^0.16.0",
"axios": "^0.26.1",
"babel-plugin-module-resolver": "^4.1.0",
"currency.js": "^2.0.4",
"flutterwave-react-native": "^1.0.2",
"react": "17.0.2",
"react-hook-form": "^7.29.0",
"react-native": "0.68.0",
"react-native-animatable": "^1.3.3",
"react-native-gesture-handler": "^2.3.2",
"react-native-htmlview": "^0.16.0",
"react-native-onesignal": "^4.4.0",
"react-native-paystack-webview": "^4.0.3",
"react-native-raw-bottom-sheet": "^2.2.0",
"react-native-reanimated": "^2.5.0",
"react-native-safe-area-context": "^4.2.4",
"react-native-screens": "^3.13.1",
"react-native-svg": "^12.3.0",
"react-native-toast-message": "^2.1.5",
"react-native-webview": "^11.18.1",
"react-native-zohodesk-portal-sdk": "^1.0.6",
"react-native-zohosalesiq-mobilisten": "^4.2.10",
"twrnc": "^3.0.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#types/jest": "^26.0.23",
"#types/react-native": "^0.67.3",
"#types/react-test-renderer": "^17.0.1",
"#typescript-eslint/eslint-plugin": "^5.17.0",
"#typescript-eslint/parser": "^5.17.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.67.0",
"react-test-renderer": "17.0.2",
"typescript": "^4.4.4"
},
"resolutions": {
"#types/react": "^17"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}
Integrating react-native-web to an existing project is kinda difficult process. You can follow the official documentation here (https://necolas.github.io/react-native-web/docs/installation/)

React Native app rejected for QUERY_ALL_PACKAGES

So, here's a head scratcher (at least, it is for me).
Issue found: Less broad app-visibility method should be used.
We are unable to approve your app’s use of QUERY_ALL_PACKAGES permission because >the declared task can be done with a less broad app-visibility method.
One suggested method is to declare your app's need for specific package >visibility using the element. You may refer to the common use cases.
But here's where it gets weird...the permission is not on my merged manifest, or anywhere in my code when searched in VSCode. I've tried every fix going but cannot trace where this permission is being generated or where it is even present!
It has been rejected three times now. Appeals lead to no-where so it must be something in the code.
package.json below.
Any help appreciated. Thanks in advance.
{
"name": "MY APP",
"version": "1.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-native-async-storage/async-storage": "^1.17.7",
"#react-native-community/netinfo": "^9.3.0",
"#react-native-firebase/app": "^15.1.1",
"#react-native-firebase/auth": "^15.1.1",
"#react-native-firebase/firestore": "^15.1.1",
"#react-native-firebase/messaging": "^15.1.1",
"#react-navigation/bottom-tabs": "^6.3.2",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"#rneui/base": "^4.0.0-rc.5",
"#rneui/themed": "^4.0.0-rc.5",
"deprecated-react-native-prop-types": "^2.3.0",
"react": "18.0.0",
"react-native": "0.69.1",
"react-native-bootsplash": "^4.2.3",
"react-native-camera": "^4.2.1",
"react-native-confetti-cannon": "^1.5.2",
"react-native-game-engine": "^1.2.0",
"react-native-gesture-handler": "^2.5.0",
"react-native-linear-gradient": "^2.6.2",
"react-native-offline": "^6.0.0",
"react-native-permissions": "^3.5.0",
"react-native-promise-rejection-utils": "^0.0.1",
"react-native-qrcode-scanner": "^1.5.5",
"react-native-qrcode-svg": "^6.1.2",
"react-native-rename": "^2.9.0",
"react-native-restart": "^0.0.24",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.15.0",
"react-native-svg": "^12.3.0",
"react-native-toast-message": "^2.1.5",
"react-native-vector-icons": "^9.2.0",
"react-native-webview": "^11.22.7",
"react-uuid": "^1.0.2",
"rn-scratch-card": "^1.0.0-beta7"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.70.3",
"react-test-renderer": "18.0.0"
},
"jest": {
"preset": "react-native"
}
}

React Native - Undefined is not an object (evaluating "iter[Symbol.iterator]")

We just sent me a big react native project that I can't open and I can't figure it out why.
I've got the message : "Undefined is not an object (evaluating "Iter[Symbol.iterator]")".
I can't access the app because of it and didn't find any topic that helped me.
Here the package.json :
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|json)\"",
"format": "npm run prettier -- --write",
"lint": "eslint --max-warnings 0 --fix --ext .js,.ts,.tsx .",
"validate": "npm run format && npm run lint"
},
"dependencies": {
"#expo-google-fonts/raleway": "^0.1.0",
"#expo/vector-icons": "^12.0.0",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/netinfo": "5.9.7",
"#react-native-community/slider": "3.0.3",
"#react-native-picker/picker": "1.9.2",
"#react-navigation/bottom-tabs": "^5.11.8",
"#react-navigation/material-bottom-tabs": "^5.3.14",
"#react-navigation/material-top-tabs": "^5.3.14",
"#react-navigation/native": "^5.9.2",
"#react-navigation/stack": "^5.14.2",
"axios": "^0.21.1",
"date-fns": "^2.19.0",
"expo": "~40.0.0",
"expo-app-loading": "^1.0.1",
"expo-av": "~8.7.0",
"expo-cli": "^4.3.2",
"expo-file-system": "~9.3.0",
"expo-font": "~8.4.0",
"expo-linear-gradient": "~8.4.0",
"expo-media-library": "~10.0.0",
"expo-permissions": "~10.0.0",
"expo-screen-orientation": "~2.1.0",
"expo-status-bar": "~1.0.3",
"expo-video-player": "^1.6.1",
"global": "^4.4.0",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-hook-form": "^6.15.2",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-autoheight-webview": "^1.5.8",
"react-native-collapsible": "^1.5.3",
"react-native-dotenv": "^2.5.3",
"react-native-elements": "^3.2.0",
"react-native-gesture-handler": "~1.8.0",
"react-native-iphone-x-helper": "^1.3.1",
"react-native-keyboard-aware-scroll-view": "^0.9.3",
"react-native-modal": "^11.7.0",
"react-native-paper": "^4.7.1",
"react-native-reanimated": "~1.13.0",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.2",
"react-native-sensitive-info": "^5.5.8",
"react-native-shared-element": "0.7.0",
"react-native-tab-view": "^2.15.2",
"react-native-vector-icons": "^8.1.0",
"react-native-video": "^5.1.1",
"react-native-web": "~0.13.12",
"react-native-webview": "11.0.0",
"react-query": "^3.13.0",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"#babel/runtime": "^7.8.4",
"babel-eslint": "^10.1.0",
"eslint": "^7.25.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-react-native": "^3.10.0",
"prettier": "^2.2.1"
},
"husky": {
"hooks": {
"pre-commit": "npm run validate"
}
},
"private": true
}
I just added the packake.json because it is only file i found relevant but tell me If another package needed.
Add this in your index.js:
// index.js
global.Symbol = require('core-js/es6/symbol');
require('core-js/fn/symbol/iterator');
require('core-js/fn/map');
require('core-js/fn/set');
require('core-js/fn/array/find');
The way I see it is that there are certain JS syntaxes that doesn't translate well for android to understand.
Reference link: Github

react-native release apk giving error in alert box {"line":132,"column":7285,"sourceURL":"index.android.bundle"}

I am new to react-native and creating apk using command sudo react-native run-android --variant=release app is working fine on usb debbuging, but when i am creating apk and run it on mobile device it gives error alert box
{"line":132,"column":7285,"sourceURL":"index.android.bundle"}
I am sharing package.json and babel.config.json
{
"name": "ReactNativeApp",
"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": {
"#bam.tech/react-native-snap-carousel": "^3.2.3",
"#react-native-community/datetimepicker": "^2.2.2",
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/drawer": "^5.1.0",
"#react-navigation/native": "^5.0.2",
"#react-navigation/stack": "^5.0.2",
"#twotalltotems/react-native-otp-input": "^1.2.0",
"core-js": "^3.6.4",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-app-intro-slider": "^3.0.0",
"react-native-bootsplash": "^0.1.0",
"react-native-countdown-component": "^2.6.0",
"react-native-datepicker": "^1.7.2",
"react-native-device-info": "^5.5.3",
"react-native-drawer": "^2.5.1",
"react-native-gesture-handler": "^1.6.0",
"react-native-image-picker": "^2.3.1",
"react-native-interactive-image-gallery": "^0.1.2",
"react-native-masonry-list": "^2.16.1",
"react-native-material-dialog": "^0.7.7",
"react-native-material-dropdown": "^0.11.1",
"react-native-modal": "^11.5.4",
"react-native-modal-datetime-picker": "^8.5.1",
"react-native-modal-dropdown": "^0.7.0",
"react-native-modals": "^0.19.9",
"react-native-photo-upload": "^1.3.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.2",
"react-native-screens": "^2.0.0-beta.2",
"react-native-snap-carousel": "^3.8.4",
"react-native-sqlite-storage": "^4.1.0",
"react-native-tab-view": "^2.13.0",
"react-native-textarea": "^1.0.3",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.1.1",
"react-navigation-drawer": "^2.3.4"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/runtime": "^7.8.4",
"#react-native-community/eslint-config": "^0.0.7",
"babel-jest": "^25.1.0",
"eslint": "^6.8.0",
"jest": "^25.1.0",
"metro-react-native-babel-preset": "^0.58.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
and babel.config.json
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
If you are using APIs call in the android and uses HTTP calls which is not secure then this problem will occur in Android API >= 28.
This problem comes in API < 28 but android handles it but now after API 28 they are not handling it rather want developers to use HTTPS api calls for added security. As android versions are coming they are more towards security.
But if you still want to use HTTP API calls in your android app, be it in react native or any other you have to add this in androidmanifest.xml file
<application
android:usesCleartextTraffic="true"
.......>
</application>
The value of usesCleartextTraffic is by default set to false in API > 28.So we have to manually set it to true to make it working.

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.