Stuck splash screen after update expo SDK to 45 - react-native

Since I updated expo sdk to 45 I can no longer access the apk
I'm sure it's a version story of one of the modules that is not up to date
If you can help me I would be happy !
in Local it works perfectly well but on the APK the screen stops in the splash screen
I will share you my package.json
{
"dependencies": {
"#expo/cli": "^0.3.2",
"#react-native-async-storage/async-storage": "~1.17.3",
"#react-native-community/datetimepicker": "6.1.2",
"#react-native-community/slider": "4.2.1",
"#react-native-masked-view/masked-view": "0.2.6",
"#react-navigation/drawer": "^6.1.4",
"#react-navigation/native": "^6.0.4",
"#react-navigation/stack": "^6.0.9",
"#unimodules/core": "^7.1.2",
"#unimodules/react-native-adapter": "^6.3.9",
"babel-core": "7.0.0-bridge.0",
"babel-preset-expo": "~9.1.0",
"expo": "^45.0.0",
"expo-camera": "~12.2.0",
"expo-cli": "5.4.3",
"expo-constants": "~13.1.1",
"expo-device": "~4.2.0",
"expo-image-manipulator": "~10.3.1",
"expo-media-library": "~14.1.0",
"expo-notifications": "~0.15.4",
"expo-screen-orientation": "~4.2.0",
"expo-splash-screen": "~0.15.1",
"expo-sqlite": "~10.2.0",
"expo-updates": "~0.13.4",
"expo-web-browser": "~10.2.1",
"formik": "^2.2.9",
"moment": "^2.29.1",
"qs": "^6.10.2",
"react": "17.0.2",
"react-native": "0.68.2",
"react-native-calendars": "^1.1254.0",
"react-native-gesture-handler": "~2.2.1",
"react-native-maps": "0.30.2",
"react-native-mask-text": "^0.2.2",
"react-native-modal-datetime-picker": "^10.0.0",
"react-native-modal-selector": "^2.0.3",
"react-native-reanimated": "~2.8.0",
"react-native-roll-picker": "^1.0.6",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-version-check-expo": "^3.4.2",
"rn-pdf-reader-js": "^0.3.0",
"sentry-expo": "^4.2.0",
"yup": "^0.32.11"
},
"resolutions": {
"#expo/config-plugins": "^4.1.0",
"#expo/prebuild-config": "^4.0.0",
"expo-modules-autolinking": "~0.8.1"
},
"devDependencies": {
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"jest-expo": "^45.0.0",
"metro-react-native-babel-preset": "^0.73.3",
"react-dom": "17.0.2",
"react-test-renderer": "^16.8.6"
},
"jest": {
"preset": "jest-expo",
"collectCoverage": true,
"moduleDirectories": [
"node_modules"
],
"setupFiles": [
"./__tests__/setup.js"
],
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|react-clone-referenced-element|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|sentry-expo|native-base))"
],
"coveragePathIgnorePatterns": [
"/node_modules/",
"/__tests__",
"/assets"
]
}
}
cmd expo doctor :
Found invalid:
#unimodules/core#7.1.2
(for more info, run: npm why #unimodules/core)
Expected to not find any copies of #unimodules/react-native-adapter
Found invalid:
#unimodules/react-native-adapter#6.3.9
(for more info, run: npm why #unimodules/react-native-adapter)
But I have to use these modules otherwise locally it does not work
EXPO 45
In my root file I used like this the SplashScreen.hideAsync() in the useEffect:
SplashScreen.preventAutoHideAsync();
export default function App() {
useEffect(() => {
setTimeout(async () => {
console.log('useEffect Splash ?');
await SplashScreen.hideAsync();
}, 3000);
}, []);
return (
<AuthProvider>
<RootNavigator />
</AuthProvider>
);
}
Locally it works perfectly after 3 seconds and if I put 10 in the setTimeOut after 10 seconds the splashScreen hides
But in the APK the splashScreen does not hide
If anyone of you has encountered this problem or has an idea of how to solve it, I'm all ears!
I thank you in advance

Related

babel-relay-plugin with react-native (expo) throwing error about 'cypto'

I am trying to implement react-relay in an expo project using the babel-plugin-relay package.
It was working on expo web (npm run web), but when I went to run it on my android device (npm start) this error happened.
The Error
The package at "node_modules/babel-plugin-relay/lib/compileGraphQLTag.js" attempted to import the Node standard library module "crypto". It failed because the native React runtime does not include the Node standard library. Read more at https://docs.expo.io/workflow/using-libraries/#using-third-party-libraries
My Configuration
// babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
['relay']
]
};
};
// package.json
"dependencies": {
"#absinthe/socket-relay": "^0.2.1",
"#expo/vector-icons": "^10.2.1",
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/bottom-tabs": "^5.11.1",
"#react-navigation/native": "^5.8.9",
"#react-navigation/stack": "^5.12.6",
"expo": "~39.0.2",
"expo-asset": "^8.2.0",
"expo-constants": "^9.2.0",
"expo-font": "^8.3.0",
"expo-linking": "^1.0.5",
"expo-splash-screen": "^0.6.2",
"expo-status-bar": "~1.0.2",
"expo-web-browser": "^8.5.0",
"phoenix": "^1.5.6",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-gesture-handler": "^1.8.0",
"react-native-paper": "^4.3.1",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.14.0",
"react-native-web": "^0.13.18",
"react-relay": "^10.0.1",
"relay-runtime": "^10.0.1"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"babel-plugin-relay": "^10.0.1",
"graphql": "^15.4.0",
"relay-compiler": "^10.0.1"
},
// relay.config.js
module.exports = {
src: './src',
schema: './schema.graphql',
exclude: [
'**/node_modules/**',
'**/__mocks__/**',
'src/__generated__/**'
],
};
I am using the babel-plugin-relay/macro for composing graphql fragments (import graphql from "babel-plugin-relay/macro";).
If someone could help me resolve this I would really appreciate it. Thanks.

Jest tests break after upgrading to react-native 0.58

all my test using react-test-renderer or enzyme break after upgrading to react-native 0.58.6
Errors I got are e.g.
TypeError: Cannot read property 'default' of undefined
Expected value to be truthy, instead received undefined
TypeError: Cannot read property 'dive' of undefined
TypeError: Cannot read property 'find' of undefined
Has someone experienced a similar behaviour? I tried different versions of enzyme, or jest but hat no luck.
my dependencies:
"dependencies": {
"firebase": "^5.9.0",
"prop-types": "^15.6.0",
"react": "16.6.3",
"react-native": "0.58.6",
"react-native-code-push": "^5.5.2",
"react-native-image-picker": "^0.28.0",
"react-native-keychain": "^3.0.0",
"react-native-paper": "^1.12.0",
"react-native-vector-icons": "^6.4.1",
"react-navigation": "^1.6.1",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"yarn": "^1.9.4"
},
"devDependencies": {
"babel-eslint": "^8.2.2",
"babel-jest": "^23.6.0",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"eslint": "^4.18.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.12.3",
"husky": "^0.14.3",
"jest": "^23.6.0",
"jest-fetch-mock": "^2.1.0",
"lint-staged": "^7.2.2",
"metro-react-native-babel-preset": "^0.53.1",
"prettier": "1.10.2",
"react-dom": "^16.7.0",
"react-test-renderer": "^16.7.0",
"redux-mock-store": "^1.5.3"
},
"jest": {
"preset": "react-native",
"setupFiles": ["<rootDir>/tests/setup.js"],
"collectCoverageFrom": ["app/**/*.js", "!app/components/index.js"],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-navigation)"
]
}
reproducer
https://github.com/defrian/TestProject.git
I solved the issue by removing
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
from the package.json
solution found here https://github.com/facebook/react-native/issues/22175#issuecomment-474786382
i also added/updated some dev dependencies:
"babel-core": "^7.0.0-bridge.0", (new)
"babel-jest": "24.5.0", (from "^23.6.0")
"enzyme": "^3.9.0", (from "^3.8.0")
"enzyme-adapter-react-16": "^1.11.2", (from "^1.7.1")
"jest": "^24.5.0", (from "^23.6.0")
"react-test-renderer": "^16.8.4", (from "^16.7.0")

Error: Plugin/Presets are not allowed to export objects, only functions. After update to react native 0.57

I am trying to upgrade my app from react native 0.56 to 0.57.3, but I'm getting the following issue when my app is loading:
error: bundling failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/babel-preset-react-native/index.js
at createDescriptor (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
at presets (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-chain.js:315:26)
at /Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-chain.js:278:7
at mergeExtendsChain (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-chain.js:294:21)
I have tried deleting node_modules, cleaning the build folder, etc.
My package.json file is:
"dependencies": {
"axios": "^0.18.0",
"date-fns": "^1.29.0",
"lodash.intersection": "^4.4.0",
"lodash.isempty": "^4.4.0",
"lodash.pick": "^4.4.0",
"normalizr": "^3.2.4",
"prop-types": "^15.6.1",
"react": "16.5",
"react-native": "0.57.3",
"react-native-actionsheet": "^2.4.2",
"react-native-code-push": "^5.4.2",
"react-native-datepicker": "^1.7.2",
"react-native-elements": "^0.19.1",
"react-native-geolocation-service": "^1.1.0",
"react-native-i18n": "^2.0.12",
"react-native-image-picker": "^0.26.10",
"react-native-map-link": "^2.0.1",
"react-native-maps": "git+https://github.com/otaviogaiao/react-native-maps#master",
"react-native-maps-super-cluster": "git+https://github.com/otaviogaiao/react-native-maps-super-cluster.git#1.4.2",
"react-native-material-dropdown": "^0.11.1",
"react-native-modal": "^6.5.0",
"react-native-nested-scroll-view": "^7.0.0",
"react-native-responsive-screen": "^1.1.6",
"react-native-splash-screen": "3.0.9",
"react-native-sqlite-storage": "^3.3.5",
"react-native-text-input-mask": "^0.7.0",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "2.0.4",
"react-navigation-redux-helpers": "1.1.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-saga": "^0.16.0",
"remove-accents": "^0.4.2",
"rn-fetch-blob": "^0.10.13",
"url": "^0.11.0"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.3",
"babel-jest": "22.4.4",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.8.2",
"jest": "22.4.4",
"metro-react-native-babel-preset": "^0.45.0",
"prettier": "1.12.1",
"prettier-eslint": "^8.8.1",
"react-test-renderer": "16.5"
},
and this is my .babelrc file:
{
"presets": [
"react-native",
"module:metro-react-native-babel-preset"
],
"env": {
"development": {
"plugins": [
"#babel/plugin-transform-react-jsx-source"
]
}
},
"retainLines": true
}
I looked around for answers, but couldn't find anything that helped me.
Any help is appreciated.

ReactNative 0.57 build IOS Cannot read property 'filename' of undefined (null))

Error screenshot
Error log on server
package.json code
"dependencies": {
"#babel/plugin-external-helpers": "^7.0.0",
"#types/events": "^1.2.0",
"#types/prop-types": "^15.5.5",
"#types/query-string": "^6.1.0",
"#types/react": "^16.4.14",
"#types/react-native": "^0.56.23",
"#types/react-native-drawer-layout": "^1.3.5",
"#types/react-navigation": "^2.0.21",
"antd-mobile-rn": "^2.2.1",
"axios": "^0.18.0",
"babel-plugin-import": "^1.9.1",
"events": "^3.0.0",
"mobx": "4.3.1",
"mobx-react": "^5.2.8",
"moment": "^2.22.2",
"query-string": "^6.1.0",
"react": "16.5.0",
"react-native": "0.57.0",
"react-native-image-zoom-viewer": "^2.2.18",
"react-native-keyboard-aware-scroll-view": "^0.7.2",
"react-native-simple-radio-button": "^2.7.3",
"react-native-swipeout": "^2.3.6",
"react-navigation": "^2.16.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.45.4",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
Check your .babelrc file it must have something like this
{
"presets": ["module:metro-react-native-babel-preset"]
}

Plugin/Preset files are not allowed to export objects, only functions

I'm getting this error after updating react-native to "^0.56.0":
bundling failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/ben/vepo/frontend/node_modules/babel-preset-flow/lib/index.js
I tried to do something similar to the highest voted answer here but instead for babel-preset-flow:
https://github.com/babel/babel-loader/issues/540
.babelrc:
"presets": ["react-native", "flow", "#babel/preset-flow"]
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": {
"#babel/preset-flow": "^7.0.0-beta.52",
"#babel/preset-react": "^7.0.0-beta.52",
"babel-preset-react-native": "^4.0.0",
"flow-typed": "^2.4.0",
"generator-rn-toolbox": "^2.2.0",
"imagemagick": "^0.1.3",
"immutable": "4.0.0-rc.9",
"metro-bundler": "^0.22.1",
"native-base": "^2.3.3",
"prop-types": "^15.5.10",
"react": "16.3.1",
"react-native": "^0.56.0",
"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": "facebook/react-native-fbsdk#065507a",
"react-native-git-upgrade": "^0.2.7",
"react-native-image-picker": "^0.26.7",
"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",
"yarn": "^1.3.2",
"yoga": "^0.0.0"
},
"devDependencies": {
"adm-zip": "^0.4.7",
"babel-cli": "^6.26.0",
"babel-eslint": "^7.1.1",
"babel-plugin-module-resolver": "^2.7.0",
"eslint": "^3.17.0",
"eslint-config-prettier": "^2.9.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.72.0",
"plist": "^2.1.0",
"react-devtools": "^3.2.1",
"react-test-renderer": "~15.4.1",
"redux-devtools": "^3.3.2",
"remote-redux-devtools": "^0.5.7",
"remotedev-server": "^0.2.4",
"xcode": "^1.0.0"
}
}
Nothing is working. Any ideas?
EDIT: there is no node_modules/babel-preset-flow folder at all
I had the same error and resolved it by uninstalling babel-preset-flow and installing #babel/preset-flow. I believe this is due to React Native 56 using Babel 7. And add to .babelrc
{
"presets": ["#babel/preset-flow"]
}
Upgrade your babel-preset-react-native dependency.
"babel-preset-react-native": "^5",
You don't need to have #babel/preset-react or #babel/preset-flow installed.
Hope this helps.
Open .babelrc file and then edit the presets section of the code as follows:
"presets": ["module:metro-react-native-babel-preset"],
I solved this issue by installing "babel-preset-react-native-stage-0" in my project and changed .babelrc file:
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
]
for Babel 7 and above and according to this document create a file with name bable.config.js instead of .babelrc and then export presets like this :
const presets = [
"flow"
]
module.exports = {presets}