Blank screen after splash in react native eas build, how to debug? - react-native

My app runs well in expo go but when I create a apk with eas build it shows a blank screen after splash screen. I created apk with expo 45 build, it was fine.
{
"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/samples": "~36.0.0",
"#expo/vector-icons": "^13.0.0",
"#react-native-community/masked-view": "^0.1.11",
"expo": "^47.0.8",
"expo-app-loading": "^2.1.1",
"expo-asset": "^8.7.0",
"expo-constants": "~14.0.2",
"expo-dev-client": "~2.0.1",
"expo-file-system": "~15.1.1",
"expo-font": "~11.0.1",
"expo-intent-launcher": "^10.3.1",
"expo-localization": "~14.0.0",
"expo-sqlite": "~11.0.0",
"expo-updates": "^0.15.6",
"expo-web-browser": "~12.0.0",
"i18next": "^22.4.5",
"js-base64": "3.7.3",
"native-base": "^3.4.25",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-i18next": "^12.1.1",
"react-native": "0.70.5",
"react-native-device-info": "^10.3.0",
"react-native-elements": "^3.4.2",
"react-native-fontawesome": "^7.0.0",
"react-native-gesture-handler": "~2.8.0",
"react-native-permissions": "^3.6.1",
"react-native-reanimated": "~2.12.0",
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.2",
"react-native-svg": "^13.4.0",
"react-native-vector-icons": "^9.2.0",
"react-native-view-pdf": "^0.14.0",
"react-native-web": "0.18.10",
"react-native-webview": "11.23.1",
"react-native-youtube-iframe": "^2.2.2",
"react-navigation": "^4.0.5",
"react-navigation-drawer": "^2.2.1",
"react-navigation-stack": "^2.1.0",
"react-navigation-tabs": "^2.5.3",
"watchman": "^1.0.0"
},
"devDependencies": {
"#babel/core": "^7.20.5",
"#types/react": "~18.0.26",
"babel-preset-expo": "~9.2.2",
"jest-expo": "^47.0.1",
"typescript": "~4.9.4"
},
"private": true
}

Related

how to resolve expo error when running github repo

i had a github repo that i coded a few months back, i tried opening the repo and running it and its not working. Every time i try to run it i keep getting the same error. I tried all the solutions to similar question but none of them work. When i create a new expo project it works, but as soon as i paste my code from my repo i get that error.
here is the error i keep getting:
node_modules/#react-navigation/native/src/index.tsx: [BABEL]
/Users/myname/Desktop/app-frontend/node_modules/#react-
navigation/native/src/index.tsx:
You gave us a visitor for the node type TSInstantiationExpression but it's not a valid type
here is my 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"
},
"dependencies": {
"#babel/cli": "^7.17.10",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-native-community/hooks": "^2.6.0",
"#react-native-community/netinfo": "7.1.3",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-native-picker/picker": "2.2.1",
"#react-navigation/bottom-tabs": "^5.11.7",
"#react-navigation/native": "^5.9.2",
"#react-navigation/stack": "^5.14.2",
"apisauce": "^2.0.1",
"d3-scale": "^3.2.3",
"d3-shape": "^2.0.0",
"dayjs": "^1.10.4",
"expo": "^44.0.0",
"expo-app-loading": "~1.3.0",
"expo-av": "~10.2.0",
"expo-camera": "~12.1.0",
"expo-constants": "~13.0.0",
"expo-contacts": "~10.1.0",
"expo-image-manipulator": "~10.2.0",
"expo-image-picker": "~12.0.1",
"expo-linking": "~3.0.0",
"expo-local-authentication": "~12.1.0",
"expo-permissions": "~13.1.0",
"expo-secure-store": "~11.1.0",
"expo-status-bar": "~1.2.0",
"formik": "^2.2.6",
"jwt-decode": "^3.1.2",
"lottie-react-native": "5.0.1",
"moment": "^2.29.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
"react-native-actionsheet": "^2.4.2",
"react-native-appearance": "~0.3.3",
"react-native-calendars": "^1.1282.0",
"react-native-contacts": "^7.0.4",
"react-native-country-list": "^1.0.10",
"react-native-dynamic": "^1.0.0",
"react-native-elements": "^3.3.0",
"react-native-gesture-handler": "~2.1.0",
"react-native-image-pan-zoom": "^2.1.12",
"react-native-image-zoom-viewer": "^3.0.1",
"react-native-masked-text": "^1.13.0",
"react-native-modal": "^11.10.0",
"react-native-modalize": "^2.0.13",
"react-native-progress": "^4.1.2",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-size-matters": "^0.4.0",
"react-native-skeleton-placeholder": "^3.0.4",
"react-native-snap-carousel": "^3.9.1",
"react-native-svg": "^12.1.1",
"react-native-web": "0.17.1",
"svg-path-properties": "^1.0.11",
"victory-native": "^35.3.1",
"yup": "^0.32.9"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"babel-cli": "^6.26.0"
},
"private": true
}

How to fix drawer application with latest react-native

I am getting this error in starting template of drawer application
Animated: useNativeDriver is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add RCTAnimation module to this app, or remove useNativeDriver. Make sure to run pod install first. Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
{
"name": "awesomeproject-type",
"version": "1.0.0",
"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": "^13.0.0",
"#react-navigation/bottom-tabs": "^6.0.5",
"#react-navigation/drawer": "^6.4.1",
"#react-navigation/native": "^6.0.2",
"#react-navigation/native-stack": "^6.1.0",
"expo": "~45.0.0",
"expo-asset": "~8.5.0",
"expo-constants": "~13.1.1",
"expo-font": "~10.1.0",
"expo-linking": "~3.1.0",
"expo-splash-screen": "~0.15.1",
"expo-status-bar": "~1.3.0",
"expo-system-ui": "~1.2.0",
"expo-web-browser": "~10.2.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-gesture-handler": "^2.4.2",
"react-native-reanimated": "^2.8.0",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-web": "0.17.7",
"react-native-webview": "^11.18.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~17.0.21",
"#types/react-native": "~0.66.13",
"jest": "^26.6.3",
"jest-expo": "~45.0.0",
"react-test-renderer": "17.0.2",
"typescript": "~4.3.5"
},
"private": true
}

Expo standalone apk stucks in spash screen

I have build the standalone apk using the command "eas build -p android --profile preview", It is working fine on development. But, if we run the apk in real device ny installing the apk, the splash screen alone is rendering for a period of long time.. Any ideas ?
package.json
{
"name": "My_Remainder",
"version": "1.0.0",
"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": {
"#expo/vector-icons": "^12.0.5",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-native-masked-view/masked-view": "0.2.6",
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/drawer": "^6.4.1",
"#react-navigation/native": "^6.0.7",
"#react-navigation/stack": "^6.1.1",
"#sentry/react-native": "^3.4.1",
"expo": "~44.0.0",
"expo-application": "~4.0.1",
"expo-auth-session": "^3.5.0",
"expo-constants": "~13.0.1",
"expo-device": "~4.1.0",
"expo-font": "~10.0.4",
"expo-google-sign-in": "~10.1.0",
"expo-haptics": "~11.1.0",
"expo-linear-gradient": "~11.0.2",
"expo-linking": "~3.0.0",
"expo-random": "~12.1.1",
"expo-sharing": "~10.1.0",
"expo-status-bar": "~1.2.0",
"expo-updates": "~0.11.6",
"expo-web-browser": "~10.1.0",
"moment": "^2.29.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-calendar-picker": "^7.1.2",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~2.1.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-modal": "^13.0.1",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "^3.4.1",
"react-native-svg": "^12.3.0",
"react-native-web": "0.17.1",
"react-redux": "^7.2.8",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"sentry-expo": "^4.0.0",
"expo-splash-screen": "~0.14.1"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}

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

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()