How can I config React Js and React Native in same project? - reactjs

I want to use react js for web and react native for mobile in same project for redux and stylesheet.
I have seen such a git repos ReactNativeWebHelloWorld but I think the application is written in older versions so I could not get it to work.
I guess Expo is coming as default with new versions.
I could not get out of the problem.
Is it possible to do this with React 16 and React Native ^ 0.5, Expo ..?
edit : for package.json
{
"name": "ReactNativeWebHelloWorld",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native-scripts start",
"ios-bundle": "react-native bundle --dev false --entry-file index.ios.js --platform ios --bundle-output ios/main.jsbundle",
"ios-dev-bundle": "react-native bundle --entry-file index.ios.js --platform ios --bundle-output ios/main.jsbundle",
"android-bundle": "react-native bundle --dev false --entry-file index.android.js --platform android --bundle-output android/app/src/main/assets/index.android.bundle",
"android-dev-bundle": "react-native bundle --entry-file index.android.js --platform android --bundle-output android/app/src/main/assets/index.android.bundle",
"web-bundle": "webpack --config web/webpack/web.prod.config.js --progress --colors",
"web-dev": "webpack-dev-server --content-base web/public/ --config web/webpack/web.dev.config.js --port 3001 --inline --hot --colors",
"clear-cache": "gulp clear-cache"
},
"dependencies": {
"babel": "^6.3.26",
"babel-polyfill": "^6.3.14",
"clone": "^2.1.1",
"morgan": "^1.6.1",
"object-assign": "^4.0.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-native": "^0.56.0",
"react-redux": "^5.0.7",
"redux": "^3.1.1",
"redux-thunk": "^2.3.0",
"superagent": "^3.8.3",
"expo": "^27.0.1"
},
"devDependencies": {
"autoprefixer": "^9.0.1",
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.4.5",
"babel-loader": "^7.1.5",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"css-loader": "^1.0.0",
"gulp": "^3.9.0",
"json-loader": "^0.5.4",
"less": "^3.8.0",
"less-loader": "^4.1.0",
"react-native-cli": "^2.0.1",
"react-transform-catch-errors": "^1.0.1",
"react-transform-hmr": "^1.0.1",
"redbox-react": "^1.3.2",
"redux": "^4.0.0",
"redux-devtools": "^3.3.1",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"redux-logger": "^3.0.6",
"style-loader": "^0.21.0",
"webpack": "^4.16.3",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.5",
"webpack-hot-middleware": "^2.6.4",
"react-native-scripts": "1.14.0",
"jest-expo": "~27.0.0",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "jest-expo"
}
}
Edit: I take this warnings and errors when I want to run on android emulator
E:\NewProjects\react-native-web-hello-world-master>react-native run-android
Scanning folders for symlinks in E:\NewProjects\react-native-web-hello-world-master\node_modules (65ms)Starting JS server...
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
Starting a Gradle Daemon, 1 incompatible and 1 stopped Daemons could not be reused, use --status for details
cache fileHashes.bin (C:\Users\H³seyin\.gradle\caches\4.9\fileHashes\fileHashes.bin) is corrupt. Discarding.
> Configure project :app
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation'.
It will be removed at the end of 2018
> Task :app:mergeDebugResources FAILED
Error: E:\NewProjects\react-native-web-hello-world-master\android\app\build\intermediates\incremental\mergeDebugResources\merged.dir\values\values.xml (Eri■im engellendi)
FAILURE: Build failed with an exception.
* What went wrong:
Failed to capture snapshot of output files for task ':app:mergeDebugResources' property 'incrementalFolder' during up-to-date check.
> Could not read path 'E:\NewProjects\react-native-web-hello-world-master\android\app\build\intermediates\incremental\mergeDebugResources\merged.dir\values'.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log
output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BU¦LD FAILED in 17s
11 actionable tasks: 1 executed, 10 up-to-date
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html

I am running API as well react at same time
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"react": "webpack-dev-server --open --mode development",
"api": "nodemon ./bin/www",
"start": "concurrently \"npm run react\" \"npm run api\"",
"build": "webpack --mode production"
}

Related

Issues getting Offcanvas working with reactstrap

I'm working with an old react app. I want to use the Offcanvas component that's in reactstrap but the version I'm on does that not that installed.
Since the app is rather old I tried to do a pass and update everything at once. This however broke the app. So to keep my sanity I'm trying to only update the reactstrap lib. I ran npm update reactstrap npm update bootstrap and npm update react-bootstrap but I'm still getting a warning "export 'Offcanvas' was not found in 'reactstrap'
I do not have that much experience when it comes to react so I'm struggling when it comes to updates and configurations. Any advice on this issues and a general way to debug this would be extremely welcomed.
Here's my package json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.7.0",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/preset-react": "^7.7.0",
"axios": "^0.19",
"bootstrap": "^4.3.1",
"cross-env": "^5.2.1",
"jquery": "^3.2",
"laravel-mix": "^4.1.4",
"lodash": "^4.17.15",
"popper.js": "^1.16.0",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.23.3",
"sass-loader": "^7.3.1"
},
"dependencies": {
"#babel/runtime": "^7.17.9",
"#fortawesome/fontawesome-svg-core": "^1.2.25",
"#fortawesome/free-solid-svg-icons": "^5.11.2",
"#fortawesome/react-fontawesome": "^0.1.7",
"#yaireo/tagify": "^4.8.1",
"datepicker": "0.0.0",
"query-string": "^6.9.0",
"react-autosuggest": "^9.4.3",
"react-bootstrap": "^2.0.0-rc.0",
"react-confirm-alert": "^2.4.1",
"react-draggable": "^3.3.2",
"react-router-dom": "^5.1.2",
"react-switch": "^5.0.1",
"react-table": "^7.7.0",
"react-tabs": "^3.0.0",
"reactstrap": "^8.1.1",
"recharts": "^1.8.5",
"styled-components": "^5.3.0"
}
}
You have to upgrade your react-bootstrap:
npm i react-bootstrap#latest

Why Changes are not reflecting in React native?

I am changing something in .js file for ex. any text for textfiled placeholder. But after running command react-native run-android nothing is changing in android emulator. only when i run npm run bundle-android and then run react-native run-android changes are reflecting.
My package.json is like
{
"name": "xyz",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"bundle-android": "react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/",
"bundle-ios": "react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false",
"test": "jest",
"ios": "react-native run-ios --simulator 'iPhone X'",
"android": "react-native run-android -- --reset-cache",
"android-ete": "ENVFILE=.env.ete react-native run-android -- --reset-cache",
"ios-ete": "ENVFILE=.env.ete react-native run-ios",
"ios-prod": "ENVFILE=.env.prod react-native run-ios",
"exportcert-ete": "java -jar BKSPubKeyTool.jar --importkeystore keystore_ete.bks --alias oauth.testing --password keystorepwd --exportcert src/keystore/id_rsa_ete.pem --exportjs src/keystore/pubKey_ete.js",
"exportcert-prod": "java -jar BKSPubKeyTool.jar --importkeystore keystore.bks --alias oauth --password keystorepwd --exportcert src/keystore/id_rsa_prod.pem --exportjs src/keystore/pubKey_prod.js",
"lint": "eslint ."
},
"dependencies": {
"axios": "^0.19.0",
"buffer": "^5.2.1",
"crypto-js": "^3.1.9-1",
"jetifier": "^1.6.3",
"jsencrypt": "^3.0.0-rc.1",
"mobx": "^5.11.0",
"mobx-react": "^5.4.4",
"moment": "^2.24.0",
"native-base": "^2.12.1",
"prop-types": "^15.7.2",
"querystring": "^0.2.0",
"react": "16.8.6",
"react-native": "0.60.3",
"react-native-config": "^0.11.7",
"react-native-date-picker": "^2.7.3",
"react-native-device-info": "2.3.2",
"react-native-exception-handler": "^2.10.8",
"react-native-gesture-handler": "^1.4.0",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-linear-gradient": "^2.5.4",
"react-native-modal": "^11.1.0",
"react-native-modal-dropdown": "^0.6.2",
"react-native-picker-select": "^6.3.0",
"react-native-popup-dialog": "^0.18.2",
"react-native-reanimated": "^1.4.0",
"react-native-root-toast": "^3.1.2",
"react-native-screens": "^2.0.0-beta.10",
"react-native-scrollable-tab-view": "^0.10.0",
"react-native-splash-screen": "^3.2.0",
"react-native-sqlite-storage": "^3.3.11",
"react-native-tab-view": "^2.8.0",
"react-native-user-agent": "^1.0.4",
"react-native-user-inactivity": "^1.0.1",
"react-native-uuid": "^1.4.9",
"react-native-wheel-picker-android": "^2.0.5",
"react-navigation": "^3.11.1"
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/runtime": "^7.5.5",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.8.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-react-native": "^4.0.1",
"eslint": "^6.1.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.55.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
As i am new to react native please let me know if more information needed in question?
Thank you for help
Sometimes it can load an old version of the code and not updating.
For me sometimes just \android\gradlew clean and react-native run-android (from the main folder) works.
I don't know if it solves your problem but it worth a try. A lot of errors in react-native can be solved by gradlew clean and/or restarting your computer.
You need to compile the code first..
npm run dev
Or
npm test

React js error TypeError: React.memo is not a function

I am new in react js just now I have a install data-table component using npm install react-data-table-component styled-components and apply its basic example but its give me error TypeError: React.memo is not a function I have try to google its but all solutions about the redux currently I am using this my package.json file
{
"private": true,
"scripts": {
"dev": "npm run development",
"start": "react-scripts start",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#babel/preset-react": "^7.0.0",
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0"
},
"dependencies": {
"mui-datatables": "^2.12.4",
"react-data-table-component": "^3.9.0",
"react-notifications-component": "^2.2.3",
"react-router-dom": "^5.1.2",
"styled-components": "^4.4.1"
}
}
Thanks
You are using react 16.2 but React.memo was released in 16.6. The library you are using requires the newer version of React.

how to check dependency versions in expo react

I am using expo, react native and react together with react native web. I am upgrading to expo#32 and thus react-native#57.1
I am running everything great on phone however not on web. with a dependency error often displayed:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '../Components/AccessibilityInfo/AccessibilityInfo' (While processing preset: "/Users/jeremie/piple/piple/node_modules/react-native/Libraries/react-native/react-native-implementation.js")
at Function.Module._resolveFilename (module.js:548:15)
at Function.Module._load (module.js:475:25)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object.get AccessibilityInfo [as AccessibilityInfo] (/Users/jeremie/piple/piple/node_modules/react-native/Libraries/react-native/react-native-implementation.js:19:12)
at /Users/jeremie/piple/piple/node_modules/lodash/_baseClone.js:163:23
at arrayEach (/Users/jeremie/piple/piple/node_modules/lodash/_arrayEach.js:15:9)
at baseClone (/Users/jeremie/piple/piple/node_modules/lodash/_baseClone.js:160:3)
at cloneDeepWith (/Users/jeremie/piple/piple/node_modules/lodash/cloneDeepWith.js:37:10)
at OptionManager.mergeOptions (/Users/jeremie/piple/piple/node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:44)
# multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js main[2]
I need to make sure that all my packages versions are compatible. I have looked at the changelog of react native and expo and updated everything as it should..
I don't get how to inspect more and how to debug my error.
Here is my package.json
"name": "piple",
"version": "0.7",
"private": true,
"devDependencies": {
"babel-loader": "^7.1.2",
"babel-plugin-expo-web": "^0.0.5",
"babel-plugin-react-native-web": "^0.10.0",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-imports": "1.4.1",
"babel-plugin-transform-runtime": "6.23.0",
"css-loader": "0.28.7",
"docz": "^0.12.16",
"eslint-plugin-react": "^7.10.0",
"file-loader": "^1.1.7",
"gh-pages": "^1.2.0",
"jest-expo": "^32.0.0",
"react-native-scripts": "^2.0.1",
"react-styleguidist": "^8.0.6",
"react-test-renderer": "16.6.3",
"style-loader": "^0.19.0",
"sw-precache-webpack-plugin": "^0.11.5",
"webpack-cli": "^3.1.2",
"webpack-manifest-plugin": "^2.0.4"
},
"main": "./node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"eject": "expo eject",
"android": "expo start --android",
"ios": "expo start --ios",
"test": "NODE_ENV=test node_modules/.bin/jest",
"test:ci": "jest --ci",
"clean": "rm -rf node_modules && yarn cache clean && npm cache clean --force",
"make": "yarn",
"deploy:full": "./deploy",
"deploy:fast": "yarn build:prod && expo publish && git add -A && git commit -m 'new version of PiPle keep looking on our develop branch' && git push && git checkout master && git merge --no-edit devellop && git push && git checkout devellop",
"docu:dev": "docz dev",
"docu:build": "docz build",
"web": "webpack-dev-server -d --config ./webpack.config.js --env dev --inline --hot --colors --content-base app/ --history-api-fallback",
"build:dev": "NODE_ENV=production webpack --env dev --config ./webpack.config.js",
"build:prod": "NODE_ENV=production webpack --env prod --config ./webpack.config.js"
},
"jest": {
"transformIgnorePatterns": [
"node_module/(?!(jest-)?react-native|react-navigation)"
],
"moduleDirectories": [
"node_modules"
],
"preset": [
"jest-expo"
]
},
"dependencies": {
"#sentry/browser": "^4.4.1",
"#sentry/cli": "^1.31.0",
"audit": "0.0.6",
"babel-plugin-transform-remove-console": "^6.9.4",
"es6-symbol": "^3.1.1",
"expo": "^32.0.0",
"expo-analytics": "^1.0.7",
"expo-firebase-crashlytics": "^1.0.0",
"expo-web": "^0.0.14",
"firebase": "^5.0.3",
"get-urls": "^8.0.0",
"javascript-time-ago": "^1.0.34",
"jsc-android": "^224109.1.0",
"lodash": "^4.15.0",
"mobx": "^4",
"mobx-react": "5.1.0",
"npm": "^6.5.0",
"open-graph-scraper": "^3.6.0",
"password-validator": "^4.1.1",
"prop-types": "^15.6.2",
"query-string": "^6.2.0",
"react": "^16.6.3",
"react-art": "^16.5.1",
"react-css-blur": "^1.1.1",
"react-dom": "^16.5.1",
"react-markdown": "^4.0.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-blur": "^3.2.2",
"react-native-camera-roll-picker": "^1.2.3",
"react-native-dialog": "^5.4.0",
"react-native-simple-markdown": "^1.1.0",
"react-native-web": "^0.10.0",
"react-native-web-svg": "^1.0.0",
"react-navigation": "^3.0.9",
"sentry-expo": "^1.11.0",
"simple-markdown": "git://github.com/CharlesMangwa/simple-markdown.git",
"sweetalert": "^2.1.2",
"uglifyjs-webpack-plugin": "^1",
"webpack": "^4.0.0",
"webpack-dev-server": "^3.1.10",
"ws": "^6.0.0"
}
}
When you call npx expo or npx expo start it should also validate all dependencies, and if there are some problems it writes something like:
Also, npx expo-cli doctor can help by providing additional info.

Heroku is deploying old react?

Im using laravel framework (as rest api) and reactjs (to render views). I did a lot of changes to my code (local) and then pushed it on github and deploy on heroku. I noticed that react app is rendering old code version when laravel api works fine (i can use routes which i added). Why react didnt update?
package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {},
"dependencies": {
"axios": "^0.18",
"babel-preset-react": "^6.23.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"gh-pages": "^2.0.1",
"react-icons": "^3.2.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"styled-components": "^4.0.2",
"react-router-dom": "^4.3.1",
"redux-thunk": "^2.3.0"
}
}
May be the problem with your browser cache. Not in heroku. Please clear your browser cache and open your app again
Okay i figured it out! I need to render project on localhost to regenerate app.js in public/js before deploy on heroku -_-'

Resources