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/)
Related
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'
After archive react-native ios appication, I had test it on Immuniweb mobile application testing tool. I have got security issue given bellow.
EXPOSURE OF POTENTIALLY SENSITIVE DATA [DAST] [M2] [CWE-200]
Potentially sensitive or internal information is detected in the mobile application via tracing its system calls.
[POTENTIAL HEROKU API KEY FOUND]
We did not use HEROKU anyway.
This is my package.json contents.
{
"name": "",
"version": "0.0.1",
"private": true,
"scripts": {
"postinstall": "rn-nodeify --install fs,util,path,tls,stream,buffer,global,process --hack && patch-package",
"android": "ENVFILE=.env react-native run-android",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
},
"dependencies": {
"#gorhom/bottom-sheet": "^4.4.3",
"#invertase/react-native-apple-authentication": "^2.2.2",
"#react-native-async-storage/async-storage": "^1.17.9",
"#react-native-community/checkbox": "^0.5.12",
"#react-native-community/cli": "^8.0.5",
"#react-native-community/datetimepicker": "^6.3.2",
"#react-native-community/push-notification-ios": "^1.10.1",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-native-picker/picker": "^2.4.4",
"#react-navigation/bottom-tabs": "^6.3.2",
"#react-navigation/native": "^6.0.10",
"#react-navigation/stack": "^6.2.1",
"#rneui/base": "^0.0.0-edge.2",
"#rneui/themed": "^0.0.0-edge.2",
"#types/jest": "^29.0.0",
"asyncstorage-down": "^4.2.0",
"aws-iot-device-sdk": "^2.2.12",
"aws-sdk": "^2.1203.0",
"axios": "^0.27.2",
"buffer": "^4.9.1",
"global": "^4.4.0",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^2.2.0",
"lodash.clonedeep": "^4.5.0",
"lodash.get": "^4.4.2",
"lodash.isempty": "^4.4.0",
"lodash.max": "^4.0.1",
"lodash.min": "^4.0.1",
"lodash.omit": "^4.5.0",
"lodash.unionby": "^4.8.0",
"moment": "^2.29.4",
"patch-package": "^6.4.7",
"path-browserify": "0.0.0",
"process": "^0.11.0",
"react": "18.0.0",
"react-native": "^0.69.2",
"react-native-config": "^1.4.6",
"react-native-date-picker": "^4.2.5",
"react-native-device-info": "^10.0.2",
"react-native-encrypted-asyncstorage": "^2.1.3",
"react-native-flash-message": "^0.3.1",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.4.2",
"react-native-iap": "^11.0.0-rc.7",
"react-native-modal-datetime-picker": "^14.0.0",
"react-native-pager-view": "^6.0.0",
"react-native-paper": "^4.12.4",
"react-native-picker-select": "^8.0.4",
"react-native-progress": "^5.0.0",
"react-native-push-notification": "^8.1.1",
"react-native-reanimated": "^2.13.0",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.15.0",
"react-native-svg": "^12.4.3",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.2.0",
"react-native-webview": "^11.25.0",
"react-redux": "^7.2.2",
"readable-stream": "1.0.33",
"reanimated-bottom-sheet": "^1.0.0-alpha.22",
"redux": "^4.2.0",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"rn-swipe-button": "^1.3.7",
"save": "^2.4.0",
"stream": "^0.0.2",
"stream-browserify": "^1.0.0",
"toggle-switch-react-native": "^3.3.0",
"util": "~0.10.3",
"victory-native": "^36.5.3"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "7.13.8",
"#react-native-community/eslint-config": "1.1.0",
"babel-jest": "25.5.1",
"eslint": "^8.23.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"jest": "^28.1.1",
"metro-react-native-babel-preset": "^0.70.3",
"prettier": "^2.7.1",
"react-test-renderer": "18.0.0",
"rn-nodeify": "^10.3.0"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./app/assets/fonts"
]
},
"react-native": {
"path": "path-browserify",
"_stream_transform": "readable-stream/transform",
"_stream_readable": "readable-stream/readable",
"_stream_writable": "readable-stream/writable",
"_stream_duplex": "readable-stream/duplex",
"_stream_passthrough": "readable-stream/passthrough",
"stream": "stream-browserify",
"tls": false,
"fs": "react-native-fs"
},
"browser": {
"path": "path-browserify",
"_stream_transform": "readable-stream/transform",
"_stream_readable": "readable-stream/readable",
"_stream_writable": "readable-stream/writable",
"_stream_duplex": "readable-stream/duplex",
"_stream_passthrough": "readable-stream/passthrough",
"stream": "stream-browserify",
"tls": false,
"fs": "react-native-fs"
}
}
I need help to overcome this security issue?
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"
}
}
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
I'm getting this error:
The development server returned response 404. Cannot find entry file
index.js.
Here is my folder structure:
package.json
{
"name": "vepo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./app/fonts"
]
},
"jest": {
"preset": "react-native",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
},
"dependencies": {
"flow-typed": "^2.0.0",
"generator-rn-toolbox": "^2.2.0",
"imagemagick": "^0.1.3",
"immutable": "^3.8.1",
"native-base": "2.3.0",
"prop-types": "^15.5.10",
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-aws3": "^0.0.8",
"react-native-blur": "^3.1.3",
"react-native-communications": "^2.2.1",
"react-native-drawer": "^2.3.0",
//"react-native-fbsdk": "git://github.com/facebook/react-native-fbsdk#065507aa1d2b8b0b6cb50d13117694123f8303fa",
"react-native-git-upgrade": "^0.2.7",
"react-native-image-picker": "^0.26.4",
"react-native-interactable": "^0.1.2",
"react-native-mail": "^3.0.2",
"react-native-maps": "^0.16.4",
"react-native-modal": "^2.3.2",
"react-native-modalbox": "^1.3.9",
"react-native-multiple-choice": "^0.0.8",
"react-native-navigation": "^1.1.100",
"react-native-off-canvas-menu": "^0.1.31",
"react-native-optimized-flatlist": "^1.0.1",
"react-native-redux-router": "^1.0.7",
"react-native-select-multiple": "^1.0.3",
"react-native-side-menu": "^0.20.1",
"react-native-vector-icons": "^4.4.0",
"react-navigation": "^1.0.0-beta.11",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"redux-immutable": "^4.0.0",
"redux-observable": "^0.14.1",
"reselect": "^3.0.0",
"rxjs": "^5.2.0",
"yoga": "^0.0.0"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "19.0.0",
"babel-plugin-module-resolver": "^2.7.0",
"babel-preset-react-native": "3.0.1",
"eslint": "^3.17.0",
"eslint-plugin-flowtype": "^2.30.3",
"eslint-plugin-jsx": "^0.0.2",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-react-native": "^2.3.1",
"flow-bin": "^0.42.0",
"jest": "19.0.2",
"jest-cli": "^19.0.2",
"react-test-renderer": "~15.4.1",
"redux-devtools": "^3.3.2",
"remote-redux-devtools": "^0.5.7"
}
}
What am I doing wrong, to cause that error?
Create an index.js file in root directory of your project and copy your index.android.js or index.ios.js into it.
after RN 49 by default, we don't have different entries for ios and android. so we have just one index.js file that both android and ios use it.