Assets not showing when using expo:build for .apk after upgrading to SDK 39 - react-native

I am updating app from Expo SDK 38 to Expo SDK 39. Everything goes smoothly it works perfectly in the Expo Client.
When I build a standalone app for testing before submission with the following:
expo build:android -t apk --release-channel some-build-release
I open the app to no assets showing. My custom fonts which are in the same assets directory are being used properly.
I am bundling the assets directly into the binary with the following app.json:
"assetBundlePatterns": [
"assets/**/*"
],
All of my assets are in the assets folder. When I build a standalone app on SDK 38 everything works perfectly. Assets show up with no issues. Any help is appreciated.
The following is my package.json in case that helps:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
...
},
"dependencies": {
"#react-native-community/async-storage": "~1.12.0",
"#react-native-community/datetimepicker": "^3.0.4",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/netinfo": "5.9.6",
"#react-native-community/slider": "3.0.3",
"#react-navigation/bottom-tabs": "^5.10.1",
"#react-navigation/drawer": "^5.10.1",
"#react-navigation/material-top-tabs": "^5.3.1",
"#react-navigation/native": "^5.8.1",
"#react-navigation/stack": "^5.11.0",
"#types/expo": "^32.0.13",
"#types/react-native": "~0.63.2",
"axios": "^0.19.2",
"convert-time": "^0.3.0",
"expo": "^39.0.0",
"expo-application": "~2.3.0",
"expo-av": "~8.6.0",
"expo-blur": "~8.2.0",
"expo-camera": "~9.0.0",
"expo-constants": "~9.2.0",
"expo-device": "~2.3.0",
"expo-file-system": "~9.2.0",
"expo-firebase-analytics": "~2.5.0",
"expo-font": "~8.3.0",
"expo-image-picker": "~9.1.0",
"expo-linear-gradient": "~8.3.0",
"expo-localization": "~9.0.0",
"expo-location": "~9.0.0",
"expo-media-library": "~9.2.1",
"expo-network": "~2.3.0",
"expo-notifications": "~0.7.2",
"expo-permissions": "~9.3.0",
"expo-status-bar": "~1.0.2",
"expo-video-player": "^1.5.8",
"lodash": "^4.17.19",
"moment": "^2.24.0",
"moment-timezone": "^0.5.31",
"react": "16.13.1",
"react-devtools": "^3.6.3",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-animatable": "^1.3.3",
"react-native-collapsible": "^1.5.2",
"react-native-elements": "^2.1.0",
"react-native-expo-image-cache": "^4.1.0",
"react-native-geocoding": "^0.4.0",
"react-native-gesture-handler": "~1.7.0",
"react-native-google-places-autocomplete": "^1.8.0",
"react-native-hyperlink": "0.0.19",
"react-native-keyboard-accessory": "^0.1.10",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-maps": "0.27.1",
"react-native-modal": "^11.5.6",
"react-native-modal-datetime-picker": "^8.9.0",
"react-native-paper": "^3.10.1",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1",
"react-native-snap-carousel": "^3.9.1",
"react-native-svg": "12.1.0",
"react-native-tab-view": "^2.15.2",
"react-native-web": "~0.13.7",
"react-navigation-header-buttons": "^6.0.0",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"sentry-expo": "^3.0.3",
"tslib": "^2.0.1",
"validator": "^12.1.0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^3.9.0",
"#typescript-eslint/parser": "^3.9.0",
"babel-eslint": "^10.1.0",
"babel-preset-expo": "^8.3.0",
"eslint": "^7.7.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.0.8",
"typescript": "~3.9.2"
},
"private": true
}

Was not an issue with the build process but instead an issue with another part of my code where other assets were getting saved to the documentDirectory.
I originally was saving assets (such as a small video) to the root documentDirectory. I had another process that would clear old assets based on an array of values of "what should be there".
There was a change from Expo 38 -> 39 where binary assets now got bundled directly to the root of the documentDirectory so when my app was loading it would remove all the bundled assets.
Easy fix was to just store these other assets that I was loading on app launch to a subdirectory in the documentDirectory (in my case documentDirectory/assetCache).

Related

Invariant Violation: Tried to register two views with the same name RNSVGSvgView

I added this lib:
https://github.com/mdjfs/expo-image-multiple-picker
then I get this err:
Invariant Violation: Tried to register two views with the same name RNSVGSvgView
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
package.json
"dependencies": {
"#babel/preset-typescript": "^7.17.12",
"#gorhom/bottom-sheet": "^4.4.0",
"#ramotion/react-native-circle-menu": "^1.0.0",
"#react-native-community/datetimepicker": "6.2.0",
"#react-navigation/bottom-tabs": "6.3.3",
"#react-navigation/native": "6.0.12",
"#react-navigation/native-stack": "6.8.0",
"#reduxjs/toolkit": "^1.8.0",
"#shopify/flash-list": "1.1.0",
"#testing-library/react-native": "^9.0.0",
"#types/jest": "^27.4.1",
"#types/react-native-countdown-component": "^2.7.0",
"axios": "^0.26.1",
"d3-shape": "^3.1.0",
"date-fns": "^2.28.0",
"expo": "^46.0.0",
"expo-app-loading": "~2.1.0",
"expo-constants": "~13.2.3",
"expo-facebook": "~12.2.0",
"expo-font": "~10.2.0",
"expo-haptics": "~11.3.0",
"expo-image-multiple-picker": "^4.5.0",
"expo-image-picker": "~13.3.1",
"expo-linear-gradient": "~11.4.0",
"expo-linking": "~3.2.2",
"expo-media-library": "~14.2.0",
"expo-screen-capture": "~4.3.0",
"expo-screen-orientation": "~4.3.0",
"expo-secure-store": "~11.3.0",
"expo-sharing": "~10.3.0",
"expo-status-bar": "~1.4.0",
"formik": "^2.2.9",
"i18next": "^21.6.14",
"i18next-browser-languagedetector": "^6.1.3",
"i18next-http-backend": "^1.4.0",
"intl": "^1.2.5",
"jest": "^26.6.3",
"jest-expo": "^46.0.0",
"lodash": "^4.17.21",
"lottie-react-native": "5.1.3",
"prop-types": "^15.8.1",
"re-reselect": "^4.0.0",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-fast-compare": "^3.2.0",
"react-freeze": "^1.0.0",
"react-hook-form": "^7.31.3",
"react-i18next": "^11.16.1",
"react-native": "0.69.6",
"react-native-big-list": "^1.5.4",
"react-native-chart-kit": "^6.12.0",
"react-native-collapsible-tab-view": "^5.0.0-rc.6",
"react-native-confirmation-code-field": "^7.3.0",
"react-native-countdown-component": "^2.7.1",
"react-native-gesture-handler": "~2.5.0",
"react-native-image-viewing": "^0.2.2",
"react-native-interactions": "^0.4.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-modalize": "^2.0.13",
"react-native-pager-view": "5.4.24",
"react-native-portalize": "^1.0.7",
"react-native-reanimated": "~2.9.1",
"react-native-reanimated-carousel": "3.1.0",
"react-native-redash": "^16.2.3",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-select-dropdown": "^2.0.0",
"react-native-skeleton-content": "^1.0.28",
"react-native-slider": "^0.11.0",
"react-native-svg": "12.3.0",
"react-native-tab-view": "^3.1.1",
"react-native-toast-message": "^2.1.5",
"react-native-uuid": "^2.0.1",
"react-native-web": "~0.18.7",
"react-redux": "^7.2.6",
"react-verification-input": "^2.0.6",
"reanimated-bottom-sheet": "^1.0.0-alpha.22",
"recyclerlistview": "^3.0.5",
"reselect": "^4.1.5",
"tinycolor2": "^1.4.2",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.18.6",
"#types/react": "~18.0.0",
"#types/react-native": "~0.69.1",
"#types/react-redux": "^7.1.23",
"#types/tinycolor2": "^1.4.3",
"babel-eslint": "^10.1.0",
"babel-plugin-module-resolver": "^4.1.0",
"deprecated-react-native-prop-types": "^2.3.0",
"eslint": "^8.12.0",
"react-native-dotenv": "^3.3.1",
"typescript": "^4.6.3"
},
"private": true
so what can I do to prevent this error message ? thank you for your answers
................................................................................................................................................................................................................
This usually resolves by stopping the Metro bundler, deleting your /node_modules and /ios/Pods folders, running yarn install && npx pod-install, restarting the bundler -- yarn start, and rebuilding your application.
N.B. Replace yarn with npm if you are using npm for package management.

Parse errors in imported module react-native

A friend and I are developing a small react-native app.
He recently included Es-lint and prettier to the project and I have an import error I have not been able to resolve since.
Any imports from react-native show the following error
module
"C:/Users/Brendan/projects/garden-manager-native/node_modules/#types/react-native/index"
Parse errors in imported module 'react-native': ';' expected.
(14:32)eslintimport/namespace.
I have the following dependencies in package.json:
"dependencies": {
"#expo/vector-icons": "^13.0.0",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-navigation/bottom-tabs": "^6.0.5",
"#react-navigation/native": "^6.0.2",
"#react-navigation/native-stack": "^6.1.0",
"#reduxjs/toolkit": "^1.8.0",
"date-fns": "^2.28.0",
"expo": "~44.0.0",
"expo-asset": "~8.4.6",
"expo-camera": "~12.1.2",
"expo-cli": "^5.3.0",
"expo-constants": "~13.0.1",
"expo-file-system": "~13.1.4",
"expo-font": "~10.0.4",
"expo-linking": "~3.0.0",
"expo-splash-screen": "~0.14.1",
"expo-status-bar": "~1.2.0",
"expo-updates": "~0.11.7",
"expo-web-browser": "~10.1.0",
"normalizr": "^3.6.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-hook-form": "^7.28.1",
"react-native": "0.64.3",
"react-native-calendars": "^1.1283.0",
"react-native-elements": "^3.4.2",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "~3.10.1",
"react-native-timeline-flatlist": "^0.8.0",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "0.17.1",
"react-redux": "^7.2.6",
"redux-persist": "^6.0.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#testing-library/jest-native": "4.0.4",
"#testing-library/react-native": "^9.1.0",
"#trivago/prettier-plugin-sort-imports": "^3.3.0",
"#types/jest": "^27.4.1",
"#types/react": "~17.0.21",
"#types/react-native": "~0.64.12",
"eslint": "^8.21.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-universe": "^11.1.0",
"jest": "^26.6.3",
"jest-expo": "~44.0.0",
"prettier": "^2.7.1",
"react-test-renderer": "17.0.1",
"typescript": "~4.3.5"
},
"private": true,
"resolutions": {
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2",
"react-devtools-core": "4.14.0"
}
My friend is not receiving this error on his end.
I cant seem to find much information on this particular problem but I have tried reinstalling the node_modules folder without any effect.
I know I can disable this rule to remove the error but would prefer to find a better solution.
You might follow this thread: https://github.com/facebook/react-native/issues/28549
or temporary use:
settings: {
'import/ignore': ['react-native'],
}
in your eslintrc file
Per the convo at https://github.com/facebook/react-native/issues/28549#issuecomment-657249702
You should use this pattern as it will not match things like react-native-navigation.
settings: {
'import/ignore': ['node_modules/react-native/index\\.js$']
}

Expo (react-native) Failed to load all assets on production env (expo start --no-dev -c)

Getting Failed to load all assets error on production environment while running with expo start --no-dev -c command. The error happens on both iOS & Android. Tried clearing npm cache, metro bundler cache. Still no luck. Could not find a valid solution from the forums or expo discord community. Any ideas/help are most welcome.
package.json as follows
"dependencies": {
"#react-native-async-storage/async-storage": "~1.17.3",
"#react-native-community/datetimepicker": "6.1.2",
"#react-native-community/netinfo": "8.2.0",
"#react-native-masked-view/masked-view": "0.2.6",
"#react-navigation/bottom-tabs": "^5.11.15",
"#react-navigation/drawer": "^5.12.9",
"#react-navigation/native": "^5.9.8",
"#react-navigation/stack": "^5.14.9",
"#reduxjs/toolkit": "^1.7.2",
"date-fns": "^2.23.0",
"expo": "^45.0.0",
"expo-camera": "~12.2.0",
"expo-dev-client": "~1.0.1",
"expo-device": "~4.2.0",
"expo-document-picker": "~10.2.1",
"expo-file-system": "~14.0.0",
"expo-font": "~10.1.0",
"expo-image-picker": "~13.1.1",
"expo-location": "~14.2.2",
"expo-notifications": "~0.15.4",
"expo-splash-screen": "~0.15.1",
"expo-status-bar": "~1.3.0",
"expo-updates": "~0.13.3",
"formik": "^2.2.9",
"just-clone": "^3.2.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-calendars": "^1.1266.0",
"react-native-gesture-handler": "~2.2.1",
"react-native-keyboard-aware-scroll-view": "^0.9.4",
"react-native-pager-view": "5.4.15",
"react-native-popup-menu": "^0.15.11",
"react-native-reanimated": "~2.8.0",
"react-native-root-toast": "^3.4.0",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-svg": "12.3.0",
"react-native-tab-view": "^2.16.0",
"react-native-timeline-feed": "^2.0.0",
"react-native-web": "0.17.7",
"react-native-webview": "11.18.1",
"react-redux": "^7.2.6",
"uuid": "^8.3.2",
"victory-native": "^35.5.4",
"yup": "^0.32.9"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"babel-jest": "^25.2.6",
"eslint": "^7.32.0",
"eslint-plugin-react": "^7.25.1",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-react-native": "^3.11.0",
"jest": "^26.6.3",
"react-test-renderer": "17.0.1",
"reactotron-react-native": "^5.0.0",
"reactotron-redux": "^3.1.3"
}
For me, I accidentally left 1 character out of Text element.
It started to work after I remove the character.
Try examining your recent code.

Invariant Violation: ViewPagerAndroid has been removed from React Native. Expo v35 to v39 Migration

Tried most of the solutions and even updated all the packages but none of them is working for me.
Touching this project after a while so was migrating from
React Native Expo v35 to v39.
Error Stack Trace:
My list of packages:
package.json
"dependencies": {
"#apollo/react-components": "^3.0.1",
"#apollo/react-hoc": "^3.1.1",
"#apollo/react-hooks": "^3.0.0",
"#react-native-community/async-storage": "~1.12.0",
"#react-native-community/viewpager": "^4.1.6",
"apollo-boost": "^0.4.4",
"apollo-fetch": "^0.7.0",
"apollo-link": "^1.2.13",
"apollo-link-context": "^1.0.19",
"crypto": "^1.0.1",
"crypto-js": "^4.0.0",
"expo": "^39.0.3",
"expo-facebook": "~9.0.0",
"expo-font": "~8.3.0",
"expo-google-app-auth": "^8.0.0",
"expo-image-picker": "~9.1.0",
"expo-notifications": "~0.7.2",
"graphql": "^14.4.2",
"moment": "^2.24.0",
"native-base": "^2.13.8",
"react": "16.13.1",
"react-apollo": "^3.1.3",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.0.tar.gz",
"react-native-aws3": "^0.0.9",
"react-native-gesture-handler": "~1.7.0",
"react-native-google-places-autocomplete": "^1.4.1",
"react-native-material-ripple": "^0.9.1",
"react-native-modal": "^11.5.6",
"react-native-modal-datetime-picker": "^7.6.0",
"react-native-multiple-select": "^0.5.3",
"react-native-paper": "^3.0.0",
"react-native-picker-select": "^6.3.3",
"react-native-screens": "~2.10.1",
"react-native-status-bar-height": "^2.4.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.13.7",
"react-navigation": "^4.4.2",
"react-navigation-drawer": "^1.4.0",
"react-navigation-stack": "^1.7.3",
"react-navigation-tabs": "^1.2.0",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#graphql-codegen/introspection": "^1.12.2",
"#types/react": "~16.9.35",
"#types/react-native": "~0.63.2",
"babel-jest": "^24.9.0",
"babel-preset-expo": "^8.3.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"jest": "^24.9.0",
"jest-environment-enzyme": "^7.1.1",
"jest-enzyme": "^7.1.1",
"react-test-renderer": "16.8.3",
"typescript": "~3.9.2"
},
"private": true
}
Based on what I read, it's some package that is causing this issue.
Can someone please help me find the package based on the Trace Stack?
I was unable to find it.
Package Name: react-navigation.
How to search:
Search for ViewPagerAndroid in your VS Code and don't exclude node_modules.
What you need to replace?
import {ViewPagerAndroid} from 'react-native'
with
import ViewPagerAndroid from '#react-native-community/viewpager'
NOTE:
You will need to add #react-native-community/viewpager package

Aws-amplify not working with react-native and expo version 36.0.0

I'm currently working on a react-native-app using expoSdk which is supposed to run on web,ios and android. The most challenging part till now has been to setup the navigation which I finally did. Now I added amplify to my project but the project stops working whenever I run it on any mobile device but it works just fine on web. The error I receive is
NetInfo has been removed from React Native
After a lot of trial and error I discovered that the error comes from aws-amplify since it seems to still run with reac-native-community/netinfo. The error only occours when I import something from amplify. I found this in
node_modules\#aws-amplify\core\lib\Util\Reachability.native.js
Deo anyone know how I can resolve this issue?
Here is my package.json if needed
"dependencies": {
"#expo/vector-icons": "~10.0.0",
"aws-amplify": "^2.2.6",
"#react-native-community/masked-view": "0.1.5",
"#react-navigation/bottom-tabs": "^5.0.0",
"#react-navigation/drawer": "^5.2.0",
"#react-navigation/native": "^5.0.0",
"#react-navigation/stack": "^5.0.0",
"#react-navigation/web": "~1.0.0-alpha.9",
"expo": "~36.0.0",
"expo-asset": "~8.0.0",
"expo-constants": "~8.0.0",
"expo-font": "~8.0.0",
"expo-web-browser": "~8.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "~1.5.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "0.6.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-web": "~0.11.7",
"react-spring": "^8.0.27",
"styled-components": "^5.0.1",
"#aws-amplify/api": "^2.1.6",
"#aws-amplify/pubsub": "^2.1.7",
"#expo/samples": "^3.0.3",
"apollo-boost": "^0.4.3",
"apollo-cache-inmemory": "^1.6.2",
"apollo-client": "^2.6.3",
"apollo-link-http": "^1.5.15",
"aws-amplify-react-native": "^3.2.2",
"aws-appsync": "^1.7.0",
"aws-appsync-react": "^1.2.5",
"expo-av": "~8.0.0",
"expo-camera": "~8.0.0",
"expo-file-system": "~8.0.0",
"expo-image-picker": "~8.0.1",
"expo-permissions": "~8.0.0",
"graphql-tag": "^2.10.1",
"moment": "^2.20.1",
"prop-types": "^15.7.2",
"react-apollo": "^2.0.4",
"react-native-datepicker": "^1.7.2",
"react-native-deck-swiper": "^1.6.7",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-material-dropdown": "^0.11.1",
"react-native-modal": "^11.3.1",
"react-native-modal-datetime-picker": "^4.13.0",
"react-native-modal-dropdown": "^0.6.2",
"react-native-paper": "^2.16.0",
"react-native-responsive-screen": "^1.4.0",
"react-native-segmented-control-tab": "^3.4.1",
"react-native-slideable-calendar-strip": "^0.4.0",
"react-native-snap-carousel": "^3.8.0",
"react-native-sound": "^0.11.0",
"react-native-svg": "9.13.3",
"react-native-swipe-gestures": "^1.0.3",
"react-native-swipeable": "^0.6.0",
"react-native-swipeout": "^2.3.3",
"react-native-touchable-swipe": "^1.0.0",
"react-navigation": "^4.2.2",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-persist": "^4.10.2",
"redux-thunk": "^2.3.0",
"uuid": "^3.2.1"
},
Any help is much appreciated thanks.
Incase someone has this issue this is the solution by #Ashish-Nanda on github:
The issue you linked has a reply from the package maintainer with the reason for the error.
It is likely that one or more of your dependencies is importing NetInfo from React Native core. Looking at your package.json, one of these would be aws-appsync-react where you will need to upgrade to any version above 2.x.x. Remove both aws-appsync-react and aws-appsync from your package.json and install the latest versions (ensure its above 2.x.x). And then do:
npm install --save #react-native-community/netinfo#4.7.0
You need to install this specific version because newer versions cause issues as the API changed.