I cannot run React Native app on expo environment on Android - reactjs

I cannot run React Native app on expo environment on Android; it throws this error when running the app on Expo on my Android phone:
Something went wrong.
32.0.0 is not a valid sdk version. Options are 35.0.0, 34.0.0, 33.0.0, UNVERSIONED.
Same app works perfectly on Expo environment on my iOS phone.
I launch 'expo start' from my MAC and connect both phones to the same WIFI as my MACBOOK PRO.
Here is my app.json file :
{
"expo": {
"name": "travel-management-app",
"slug": "travel-management-app",
"description": "Travel management application",
"privacy": "public",
"sdkVersion": "32.0.0",
"platforms": [
"ios",
"android"
],
"version": "1.0.0",
"orientation": "portrait",
"primaryColor": "#cccccc",
"icon": "./assets/icons/bg_screen5_square.png",
"splash": {
"image": "./assets/icons/bg_screen5.png"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
}
}
}
Here is my package.json file :
{
"name": "travel-management-app",
"version": "1.0.0",
"description": "Travel management Application",
"author": "Luchian Chivoiu",
"private": true,
"homepage": "https://www.sienna.ro",
"main": "src/index.native.js",
"dependencies": {
"#babel/polyfill": "^7.2.5",
"#expo/vector-icons": "^9.0.0",
"expo": "^32.0.0",
"expo-linear-gradient": "^3.0.0",
"gh-pages": "^2.0.1",
"lodash": "^4.17.4",
"material-ui": "^0.20.2",
"prop-types": "^15.7.2",
"react": "16.5.0",
"react-art": "^16.8.3",
"react-autowhatever": "^10.2.0",
"react-dom": "^16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-autocomplete-input": "^4.1.0",
"react-native-elements": "^1.0.0-beta8",
"react-native-gesture-handler": "1.0.17",
"react-native-gesture-handler-web": "npm:react-native-gesture-handler#1.1.0",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-picker-select": "^6.3.3",
"react-native-ratings": "^6.3.0",
"react-native-touchable-scale": "2.0.0",
"react-native-vector-icons": "^6.3.0",
"react-native-web": "^0.10.0",
"react-navigation": "^3.5.1",
"react-navigation-animated-switch": "^0.2.1",
"react-redux": "6.0.1",
"react-scripts": "^2.1.5",
"react-select": "^3.0.4",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"web": "react-app-rewired start",
"native": "expo start",
"build:web": "react-app-rewired build",
"deploy": "gh-pages -d build",
"build:android": "expo ba",
"build:ios": "expo bi",
"eject:web": "react-scripts eject",
"eject:native": "expo eject",
"prettify": "prettier --write 'src/**/*.js'",
"clean-install": "rm -rf node_modules && npm cache clean --force && watchman watch-del-all && yarn"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.3.4",
"babel-preset-expo": "^5.0.0",
"customize-cra": "^0.2.12",
"prettier": "^1.15.3",
"react-app-rewired": "^2.1.0"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
package-lock.json contains this:
"react-native": {
"version": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"integrity": "sha512-+taJh7bN2owmwaZpJUrNpHdmPAL6ZynNCZj15uLQgjaPFq0ZBIG2ZWuSJ48eGoUjAb3lrWxkmLlHb2eJFXc7sQ==",
How can I make this work on Android too? This app worked on expo on my Android phone some days ago until I did some package update.
I have updated something, some package , a package and maybe that made this Android expo app not able to run.

You are using an outdated Expo SDK and applications, SDK 32 and below is no longer maintained.
Follow the instructions on this link you should be good to go
Hope this Helps!

Related

Why is my react/next project not compiling?

I am facing trouble compiling my react/next project which I am trying to run using VScode. After 'npm start', whenever I try to make any changes, it just freezes, doesn't compile and not reflecting to the dashboard. The same project is running for my teammates. So I believe this doesn't concern with the code but my system itself.
Below are my system config:
MacOS Monterey (Apple M2)
tried Node Version v14.15.1, v14.17.0, v14.21.3, v16.19.1, v19.6.1
deleted and re-installed node_modules
What else can be the reason? Let me know if you need any other details.
Below is my package.json file
{
"name": "eflexjobs",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material-ui/styles": "^4.11.3",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.1",
"axios": "^0.21.1",
"eslint": "^8.6.0",
"formik": "^2.2.6",
"globby": "^12.0.2",
"html-react-parser": "^1.4.9",
"lite-youtube-embed": "^0.2.0",
"moment": "^2.29.1",
"netlify-cms-app": "^2.15.59",
"next": "^11.1.3",
"next-seo": "^5.1.0",
"next-sitemap": "^1.6.203",
"prettier": "^2.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-facebook-pixel": "^1.0.4",
"react-gtm-module": "^2.0.11",
"react-lite-youtube-embed": "^2.1.3",
"react-loader": "^2.4.7",
"react-loader-spinner": "^4.0.0",
"react-markdown": "^4.2.2",
"react-player": "^2.9.0",
"react-slick": "^0.28.1",
"react-spinners": "^0.12.0",
"react-toastify": "^7.0.4",
"reactjs-freshchat": "^1.3.2",
"sass": "^1.41.1",
"sass-loader": "^12.1.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.3",
"swiper": "^6.8.1",
"typeface-raleway": "0.0.75",
"use-debounce": "^6.0.1",
"web-vitals": "^1.1.0",
"window-or-global": "^1.0.1",
"yup": "^0.32.9"
},
"scripts": {
"dev": "next dev",
"build": "node public/main.js && next build",
"postbuild": "next-sitemap",
"start": "next start",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "node public/main.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {}
}
There Should be Many reasons like:
1.Dependencies
2.Configuration issues.
3.Version incompatibility.
4.Network issues
If it is a next.js project, it is run by default using npm run dev or yarn dev command.
If you have any issues, please share the package.json file.
Turns out that the auto-save mode was not on. I had to save it after every change. And now it's working.

I'm not able to run the react web project and npm install also not working

I'm getting following errors if npm install
i tried clean cache also like this
if i directly run the project it's shows react it shows
"'react-scripts' is not recognized as an internal or external command"
this is the package.json code used in my project i'm not getting what's the issue bcoz i'm new to react.let me know how to run the project.. thanks in advance..
{
"name": "pay-management",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/core": "^11.0.0",
"#emotion/react": "^11.1.5",
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-brands-svg-icons": "^5.15.2",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/react-fontawesome": "^0.1.14",
"#material-ui/core": "^4.11.1",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.57",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"autoprefixer": "7",
"change-case": "^4.1.1",
"lodash": "^4.17.21",
"material-ui": "^0.20.2",
"material-ui-bootstrap": "^2.0.0",
"moment": "^2.29.1",
"postcss": "7",
"postcss-flexbugs-fixes": "4",
"postcss-preset-env": "^6.7.0",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.0.0",
"react-csv-importer": "^0.3.0",
"react-dom": "^17.0.1",
"react-dropzone": "^11.2.4",
"react-moment": "^1.1.1",
"react-number-format": "^4.4.4",
"react-papaparse": "^3.11.1",
"react-resize-observer": "^1.1.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-table": "^7.6.2",
"react-timer-mixin": "^0.13.4",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"globals": {
"_": true
},
"homepage": "url",
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#tailwindcssinjs/macro": "^0.17.0",
"cross-env": "^7.0.2",
"tailwindcss": "^2.0.1-compat"
},
"main": "index.js",
"author": "",
"license": "ISC"
}
The error message you're seeing trying to run build makes sense. You can't run your build script if you haven't installed the dependencies first - since you don't have the libraries necessary to compile the project yet! npm run build is a synonym for "react-scripts build" according to your package.json file, so you need react (which is part of your dependency list). You have to solve the dependency conflicts first - then you can run build.
The npm dependecy conflict message tells you the steps to follow in order to solve them, read them and follow those. AFTER trying those official steps, if they don't help, as the last resort I would try upgrading manually autoprefixer to be v 10.0.2 ~it appears you installed it manually while developing without knowing tailwind was going to use it internally.
Hope that helps.

should NOT have additional property ‘nodeModulesPath’

Good afternoon! hope you all in the good condition.
I’ve something to ask, i’ve using react native sdk 41 (after i upgraded my project), and then, when i want to publish using expo build:android -t app-bundle, i got Error looks like this Error: Problem validating fields in app.json. See https://docs.expo.io/workflow/configuration/ • should NOT have additional property 'nodeModulesPath'., when i see my app.json, i’m pretty sure that my app.json is fine (at least in my opinion)
Here’s my app.json:
{
"expo": {
"name": "MyProjectName",
"slug": "MyProjectSlug",
"version": "1.1.2",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"scheme": "MyProjectScheme",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#393939"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"android": {
"package": "com.mycompany.myprojectpackage"
"versionCode": 31,
"config": {
"googleMobileAdsAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
}
},
"ios": {
"supportsTablet": true,
"config": {
"googleMobileAdsAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
}
}
}
}
And here’s my package.json looks like:
{
"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",
"test": "jest --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/vector-icons": "^12.0.0",
"#react-native-async-storage/async-storage": "^1.15.4",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/netinfo": "6.0.0",
"#react-navigation/bottom-tabs": "^5.0.0",
"#react-navigation/native": "^5.0.0",
"#react-navigation/stack": "^5.14.4",
"#react-navigation/web": "~1.0.0-alpha.9",
"axios": "^0.19.2",
"expo": "^41.0.0",
"expo-ads-admob": "~10.0.4",
"expo-asset": "~8.3.1",
"expo-av": "~9.1.2",
"expo-constants": "~10.1.3",
"expo-font": "~9.1.0",
"expo-image-picker": "~10.1.4",
"expo-permissions": "~12.0.1",
"expo-splash-screen": "~0.10.2",
"expo-web-browser": "~9.1.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.1.0",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.0.0",
"react-native-svg": "12.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.13.12",
"react-native-webview": "11.2.3",
"reanimated-bottom-sheet": "^1.0.0-alpha.19"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"babel-preset-expo": "8.3.0",
"jest-expo": "^41.0.0"
},
"private": true
}
Can someone help me about this thing? i really appriciate it :)
Yes, I faced the same issue. So I upgraded the expo-cli using npm install -g expo-cli My expo-cli version is 4.4.4 and I can't see the error anymore.
Em... i think i solved this, not really me, you can see 51194, just doin npm install -g expo-cli

electron and react with expressjs build issues

I have an app almost ready to package, I've been using express, react, bootstrap and electron. I can run the app file using npm start, But i cant package it. Build completes and when i run application file electron open but neither react runs on localhost nor express.
My directory structure is as follows
- api
- containes expressjs (package.json)
- client
- containes react and electron (package.json)
*let me know if you need more detailed structure
This is my procfile
react: npm run react-start
electron: npm run electron-start
express: npm start --prefix ../api/
This is my package.json
{
"name": "POSifier",
"version": "0.1.0",
"description": "system",
"private": true,
"homepage": "../",
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/pickers": "^3.2.10",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#wojtekmaj/react-datetimerange-picker": "^3.0.0",
"bootstrap": "^4.5.2",
"canvasjs": "^1.8.3",
"custom-electron-titlebar": "^3.2.5",
"date-fns": "^2.16.1",
"jquery": "^3.5.1",
"jsbarcode": "^3.11.3",
"moment": "^2.29.1",
"mysql": "^2.18.1",
"pouchdb": "^7.2.2",
"pouchdb-authentication": "^1.1.3",
"pouchdb-browser": "^7.2.2",
"pouchdb-find": "^7.2.2",
"pouchdb-react-native": "^6.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-bootstrap-date-picker": "^5.1.0",
"react-dom": "^16.13.1",
"react-fade-in": "^1.1.1",
"react-native": "^0.63.2",
"react-pouchdb": "^2.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"web-vitals": "^0.2.4"
},
"build": {
"appId": "com.Posifier.app",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
}
},
"scripts": {
"start": "nf start -p 3000",
"electron-start": "node src/wait-for-react",
"electron-pack": "build --em.main=build/electron.js",
"preelectron-pack": "yarn build",
"react-start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"new":"react-scripts build && electron-builder --publish=always"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"electron": "^11.1.1",
"electron-builder": "^22.9.1",
"foreman": "^3.0.1"
},
"main": "public/electron.js"
}

Images loading blurred or not loading - Gatsby and GitHub Pages

I am super new to gatsby and it's been a while since i touched any kind of web development project.
I am trying to create a photography portfolio using this gatsby template
https://github.com/LekoArts/gatsby-starter-portfolio-emilia and my github account (github pages).
The problem is in the main page the image im using as cover picture doesn't load and in the album I'm either getting a blurred version or a weird grayscale version. In development they work just fine.
I'm running on MacOS High Sierra and have tried Firefox, Chrome and Safari. (not sure if relevant)
Here are some dev v. deploy pictures.
I'll post some of the code; but if it's not enough just ask me about something and I'll update the question. I'm really not sure where to begin debugging.
This is my package.json
{
"name": "photos",
"description": "photo portfolio",
"version": "3.0.0",
"author": "Alex Ingberg (hi#alexingberg.com)",
"scripts": {
"develop": "gatsby develop",
"dev": "gatsby develop -o",
"build": "gatsby build",
"serve": "gatsby serve",
"deploy": "gatsby build && gh-pages -d public --branch master",
"lint": "eslint . --ext .js,.jsx --ignore-path .gitignore",
"lint:fix": "eslint . --ext .js,.jsx --fix --ignore-path .gitignore",
"format": "prettier \"**/*.{md,mdx} \" --write",
"lint:ci": "yarn lint --format junit -o results/eslint/result.xml",
"cy:open": "cypress open",
"cy:run": "cypress run",
"cy:run:ci": "cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=results/cypress/result.xml'",
"test:e2e:dev": "cross-env CYPRESS_SUPPORT=y start-server-and-test dev http://localhost:8000 cy:open",
"test:e2e:run": "cross-env CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run",
"test:e2e:ci": "cross-env CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run:ci"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.6.3",
"#fortawesome/fontawesome-svg-core": "^1.2.17",
"#mdx-js/mdx": "^1.0.10",
"#mdx-js/react": "^1.0.6",
"babel-plugin-styled-components": "^1.10.0",
"font-awesome": "^4.7.0",
"gatsby": "^2.9.11",
"gatsby-image": "^2.1.4",
"gatsby-mdx": "^0.6.2",
"gatsby-plugin-google-analytics": "^2.0.18",
"gatsby-plugin-lodash": "^3.0.5",
"gatsby-plugin-manifest": "^2.0.29",
"gatsby-plugin-netlify": "^2.0.14",
"gatsby-plugin-offline": "^2.0.25",
"gatsby-plugin-react-helmet": "^3.0.12",
"gatsby-plugin-sharp": "^2.0.35",
"gatsby-plugin-sitemap": "^2.0.12",
"gatsby-plugin-styled-components": "^3.0.7",
"gatsby-remark-external-links": "^0.0.4",
"gatsby-source-filesystem": "^2.0.29",
"gatsby-transformer-sharp": "^2.1.18",
"gh-pages": "^2.0.1",
"lodash": "^4.17.11",
"polished": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.0",
"react-spring": "^8.0.19",
"styled-components": "^4.2.0",
"styled-theming": "^2.2.0",
"typeface-fira-sans": "^0.0.54",
"typeface-montserrat": "^0.0.54"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"cross-env": "^5.2.0",
"cypress": "^3.2.0",
"cypress-testing-library": "^2.4.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-cypress": "^2.2.1",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"#fortawesome/fontawesome-free": "^5.6.3",
"gatsby-cypress": "^0.1.8",
"prettier": "^1.17.0",
"start-server-and-test": "^1.7.13"
},
"homepage": "https://www.alexingberg.com/photos",
"bugs": {
"url": "https://github.com/alexing/photos/issues"
},
"keywords": [
"gatsby",
"gatsby-starter",
"gatsby-starter-portfolio",
"alexing"
],
"license": "MIT",
"main": "n/a",
"repository": {
"type": "git",
"url": "git+https://github.com/alexing/photos.git"
}
}
Also, in the develop branch of my repo you can find the complete source code.
https://github.com/alexing/photos/tree/develop
Thanks a million.

Resources