ReactNative Code not running on WEB (ReactCLI) - react-native

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"
}
}

Related

Google Play store reject app due to non-certified ad SDK, React Native

When publishing the app on Google Play, we encountered the problem "Your app includes non-certified advertising SDKs»
In short, this means that our advertising SDK does not meet the requirements of Google.
Our application falls into the group "for children".
We also participate in the "Apps for the Whole Family" program
For advertising, we use react-native-firebase/admob
After checking the list of certified SDKs, we found admob there. That is, everything should be fine with this point.
Next, we configured the request to receive ads, as required by Google.
admob()
.setRequestConfiguration({
maxAdContentRating: MaxAdContentRating.G,
tagForChildDirectedTreatment: true,
tagForUnderAgeOfConsent: true,
})
After resending the application, we received another failure with the same reason.
There were attempts to send the app with both the expo sdk and the bare react-native.
This also failed to produce any results.
Our package.json looks like this:
{
"name": "My Little Genius",
"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": {
"#ant-design/icons": "^4.6.2",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-firebase/admob": "^11.5.0",
"#react-native-firebase/app": "^11.5.0",
"#react-navigation/stack": "^5.14.5",
"#reduxjs/toolkit": "^1.5.1",
"expo-av": "^9.1.2",
"react": "17.0.1",
"react-native": "0.64.1",
"react-native-animatable": "^1.3.3",
"react-native-elements": "^3.4.1",
"react-native-gesture-handler": "^1.10.3",
"react-native-linear-gradient": "^2.5.6",
"react-native-localization": "^2.1.7",
"react-native-looped-carousel": "^0.1.13",
"react-native-orientation-locker": "^1.3.1",
"react-native-paper": "^4.8.1",
"react-native-reanimated": "^2.1.0",
"react-native-rename": "^2.8.1",
"react-native-responsive-fontsize": "^0.5.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.2.0",
"react-native-swipe-gestures": "^1.0.5",
"react-native-unimodules": "^0.13.3",
"react-native-vector-icons": "^8.1.0"
},
"devDependencies": {
"#babel/core": "^7.14.0",
"#babel/runtime": "^7.14.0",
"#react-native-community/eslint-config": "^2.0.0",
"#react-navigation/native": "^5.9.4",
"babel-jest": "^26.6.3",
"eslint": "^7.25.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.0",
"react-native-confetti-cannon": "^1.5.2",
"react-native-drax": "^0.8.0",
"react-redux": "^7.2.4",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native"
}
}
We have studied the documentation, but have not found a solution to our problem. It is also not entirely clear why Google swears at the advertising SDK, if we use an SDK from the list of certified ones.

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.

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

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.

Problem after ejecting application using expo

After having launched the command npm run eject, I follow those steps:
Bare: I'd like a bare React Native project.
I set the name of the app and the xcode project
The command return this message Ejected successfully!
After that, into the ios generated folder I run the command pod install and the result is Pod installation complete!
After performing this procedure I try to run the application using a ios simulator, but I have this error:
The Expo SDK requires Expo to run. It appears the native Expo modules are unavailable and this code is not running on Expo. Visit https://docs.expo.io to learn more about developing an Expo project.
Note that before executing the npm run eject command the app worked correctly.
This is the package.json before the eject:
{
"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"
},
"dependencies": {
"#apollo/react-hooks": "^3.0.1",
"apollo-boost": "^0.4.4",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link-http": "^1.5.15",
"expo": "^34.0.1",
"expo-font": "^6.0.1",
"graphql-tag": "^2.10.1",
"metro-react-native-babel-preset": "^0.56.0",
"prop-types": "^15.7.2",
"react": "16.8.3",
"react-apollo": "^3.0.1",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
"react-native-camera": "^3.3.2",
"react-native-camera-kit": "^8.0.1",
"react-native-circle-checkbox": "^0.1.6",
"react-native-elements": "^1.1.0",
"react-native-gesture-handler": "^1.3.0",
"react-native-image-picker": "^1.1.0",
"react-native-modal-datetime-picker": "^7.5.0",
"react-native-signature-pad": "^0.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.4",
"react-native-webview": "^5.12.1",
"react-navigation": "^3.12.1",
"tcomb-form-native": "^0.6.20"
},
"devDependencies": {
"babel-preset-expo": "^6.0.0"
},
"private": true
}
After eject the package.json has become:
{
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "^34.0.1",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "0.59.10",
"react-native-gesture-handler": "^1.3.0",
"react-native-reanimated": "~1.1.0",
"react-native-screens": "1.0.0-alpha.22",
"react-native-unimodules": "~0.5.2",
"react-native-web": "^0.11.4",
"#apollo/react-hooks": "^3.0.1",
"apollo-boost": "^0.4.4",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link-http": "^1.5.15",
"expo-font": "^6.0.1",
"graphql-tag": "^2.10.1",
"metro-react-native-babel-preset": "^0.56.0",
"prop-types": "^15.7.2",
"react-apollo": "^3.0.1",
"react-native-camera": "^3.3.2",
"react-native-camera-kit": "^8.0.1",
"react-native-circle-checkbox": "^0.1.6",
"react-native-elements": "^1.1.0",
"react-native-image-picker": "^1.1.0",
"react-native-modal-datetime-picker": "^7.5.0",
"react-native-signature-pad": "^0.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-webview": "^5.12.1",
"react-navigation": "^3.12.1",
"tcomb-form-native": "^0.6.20"
},
"devDependencies": {
"babel-preset-expo": "^6.0.0"
},
"private": true
}
The problem you're having is that you have an AppLoading from "expo" package in the App.js that doesn't have support without que ExpoSDK. You have to erase that and put the fonts in the componentDidMount()