IOS & Andoird builds get stuck on the splash screen without crashing the app

Summary

So we need to add the Stripe integration to our application. We found the library (@stripe/stripe-react-native) for that and went through all the installation docs. Locally app works great with stripe methods, but whenever we try to build it, the app gets stuck on the splash screen without crashes. Building it with expo build:android & eas for ios, also I think the problem is with expo cuz found exactly the same issue but without using stripe

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

iOS

SDK Version (managed workflow only)

44.0.4

Environment

expo-env-info 1.0.2 environment info: System: OS: macOS 11.6 Shell: 5.8 - /bin/zsh Binaries: Node: 14.17.6 - /usr/local/bin/node Yarn: 1.22.11 - /usr/local/bin/yarn npm: 6.14.15 - /usr/local/bin/npm Watchman: 2021.12.20.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.2 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 Android SDK: API Levels: 23, 28, 29, 30, 31 Build Tools: 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0 System Images: android-31 | Google APIs ARM 64 v8a, android-31 | Google Play ARM 64 v8a IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8193401 Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild npmPackages: expo: 44.0.4 => 44.0.4 react-native: 0.64.3 => 0.64.3 npmGlobalPackages: eas-cli: 0.48.2 expo-cli: 5.3.0 Expo Workflow: managed

Reproducible demo

EAS config for ios build: { “build”: { “release”: { “releaseChannel”: “production”, “env”: { “STAGE”: “production” } }, “preview”: { “node”: “14.17.6”, “releaseChannel”: “staging”, “distribution”: “internal”, “ios”: { “simulator”: true }, “android”: { “buildType”: “apk”, “withoutCredentials”: true, “gradleCommand”: “:app:assembleDebug” }, “env”: { “STAGE”: “staging” } }, “development”: { “developmentClient”: true, “distribution”: “internal”, “env”: { “STAGE”: “development” } } }, “cli”: { “version”: “>= 0.48.2” } }

package json:

{ “main”: “index.js”, “name”: “xxxxxxx”, “version”: “0.0.1”, “author”: “xxxxx”, “license”: “NOLICENSE”, “scripts”: { “start”: “expo start --dev-client”, “start:expo”: “expo start”, “start:clear”: “yarn start:expo -c”, “start:dev-client”: “yarn expo:prebuild && yarn start:expo --dev-client”, “start:dev-client:clear”: “yarn start:dev-client -c”, “start:android”: “expo --android”, “start:ios”: “expo --ios”, “android”: “react-native run-android”, “ios”: “react-native run-ios”, “dev”: “yarn start:expo”, “eject”: “expo eject”, “expo:prebuild”: “expo prebuild --skip-dependency-update react”, “run:ios”: “yarn expo:prebuild && expo run:ios”, “run:android”: “yarn expo:prebuild && expo run:android”, “postinstall”: “expo-yarn-workspaces postinstall && cd …/…”, “publish:development”: “STAGE=development expo publish”, “publish:staging”: “STAGE=staging expo publish --release-channel=staging”, “publish:production”: “STAGE=production expo publish --release-channel=production”, “build:development”: “STAGE=development eas build --profile development --platform all”, “build:development:ios”: “STAGE=development eas build --profile development --platform ios”, “build:development:android”: “STAGE=development eas build --profile development --platform android”, “build:preview”: “STAGE=staging eas build --profile preview --platform all”, “build:preview:ios”: “STAGE=staging eas build --profile preview --platform ios”, “build:preview:android”: “STAGE=staging eas build --profile preview --platform android”, “build:production”: “STAGE=production eas build --profile production --platform all”, “build:production:ios”: “STAGE=production eas build --profile production --platform ios”, “build:production:android”: “STAGE=production eas build --profile production --platform android” }, “dependencies”: { “@babel/plugin-proposal-export-namespace-from”: “^7.16.7”, “@ethersproject/shims”: “^5.6.0”, “@gorhom/bottom-sheet”: “4.1.5”, “@gorhom/portal”: “^1.0.12”, “@magic-ext/react-native-oauth”: “^1.0.0”, “@magic-sdk/react-native”: “^7.0.0”, “@react-native-async-storage/async-storage”: “~1.15.0”, “@react-native-community/datetimepicker”: “^6.1.2”, “@react-native-community/masked-view”: “0.1.10”, “@react-native-community/netinfo”: “^8.1.0”, “@react-navigation/native”: “^6.0.6”, “@react-navigation/stack”: “^6.0.11”, “@sanar/react-native-highlight-text”: “^1.0.2”, “@sentry/react-native”: “3.2.11”, “@socol/api”: “", “@socol/config”: "”, “@stripe/stripe-react-native”: “^0.3.0”, “@trpc/client”: “9.16.0”, “@trpc/react”: “9.16.0”, “@types/highlight-words-core”: “^1.2.1”, “@unimodules/core”: “^7.1.2”, “@unimodules/react-native-adapter”: “^6.3.9”, “@web3auth/ethereum-provider”: “^0.2.2”, “app”: “*”, “dayjs”: “^1.10.7”, “dripsy”: “3.6.0”, “emoji-utils”: “^1.0.1”, “ethers”: “^5.6.1”, “expo”: “44.0.4”, “expo-app-loading”: “1.3.0”, “expo-application”: “4.0.1”, “expo-auth-session”: “~3.5.0”, “expo-blur”: “^11.0.0”, “expo-checkbox”: “^2.0.0”, “expo-clipboard”: “^2.1.1”, “expo-constants”: “13.0.0”, “expo-crypto”: “~10.1.1”, “expo-dev-client”: “0.8.0”, “expo-device”: “4.1.0”, “expo-document-picker”: “^10.1.3”, “expo-file-system”: “^13.1.4”, “expo-font”: “10.0.4”, “expo-gl”: “~11.1.1”, “expo-haptics”: “11.1.0”, “expo-image-editor”: “^1.7.1”, “expo-image-manipulator”: “~10.2.0”, “expo-image-picker”: “^12.0.1”, “expo-images-picker”: “^2.2.5”, “expo-intent-launcher”: “~10.1.0”, “expo-linear-gradient”: “~11.0.0”, “expo-linking”: “3.0.0”, “expo-media-library”: “~12.1.2”, “expo-modules-core”: “0.6.4”, “expo-notifications”: “0.14.0”, “expo-random”: “~12.1.1”, “expo-secure-store”: “~11.1.0”, “expo-sharing”: “^10.1.1”, “expo-splash-screen”: “~0.14.1”, “expo-status-bar”: “1.2.0”, “expo-updates”: “0.11.3”, “expo-web-browser”: “^10.1.0”, “formik”: “^2.2.9”, “hermes-engine”: “0.10.0”, “identicon.js”: “^2.3.3”, “magic-sdk”: “^7.0.0”, “node-libs-browser”: “^2.2.1”, “node-libs-react-native”: “^1.2.1”, “openlogin-expo-sdk”: “^0.0.1”, “react”: “17.0.2”, “react-dom”: “17.0.2”, “react-native”: “0.64.3”, “react-native-animatable”: “^1.3.3”, “react-native-calendar-picker”: “^7.1.2”, “react-native-crypto”: “^2.2.0”, “react-native-dotenv”: “^3.3.1”, “react-native-draggable”: “^3.3.0”, “react-native-dropdown-picker”: “^5.3.0”, “react-native-email-link”: “^1.12.2”, “react-native-gesture-handler”: “2.1.0”, “react-native-get-random-values”: “^1.7.2”, “react-native-gifted-chat”: “^0.16.3”, “react-native-keyboard-aware-scroll-view”: “^0.9.5”, “react-native-lightbox-v2”: “^0.8.8”, “react-native-modal”: “^13.0.0”, “react-native-modal-datetime-picker”: “^13.1.2”, “react-native-pager-view”: “^5.4.9”, “react-native-popup-menu”: “^0.15.12”, “react-native-reanimated”: “~2.3.1”, “react-native-reanimated-carousel”: “^2.3.2”, “react-native-safe-area-context”: “3.3.2”, “react-native-screens”: “3.10.1”, “react-native-sticky-parallax-header”: “https://github.com/netguru/sticky-parallax-header.git”, “react-native-svg”: “^12.1.1”, “react-native-swipe-detect”: “^1.0.10”, “react-native-swipe-gestures”: “^1.0.5”, “react-native-swipe-list-view”: “^3.2.9”, “react-native-tab-view”: “^3.1.1”, “react-native-toggle-element”: “^1.0.1”, “react-native-unimodules”: “0.15.0”, “react-native-uuid”: “^2.0.1”, “react-native-web”: “0.17.5”, “react-native-webview”: “^11.16.0”, “react-query”: “3.34.7”, “recoil”: “^0.5.2”, “sentry-expo”: “4.0.3”, “stream”: “^0.0.2”, “stream-chat”: “^5.4.0”, “stream-chat-expo”: “^3.10.2”, “stream-chat-react-native”: “^3.10.2”, “stream-chat-react-native-core”: “^4.1.4”, “superjson”: “1.8.0”, “toggle-switch-react-native”: “^3.3.0”, “twrnc”: “^2.2.0”, “unimodules-app-loader”: “3.0.0”, “unimodules-constants-interface”: “6.1.0”, “unimodules-file-system-interface”: “6.1.0”, “unimodules-font-interface”: “6.1.0”, “unimodules-permissions-interface”: “6.1.0”, “web3”: “^1.7.0”, “yup”: “^0.32.11” }, “devDependencies”: { “@babel/core”: “7.16.7”, “@expo/next-adapter”: “3.1.16”, “@types/lodash”: “^4.14.178”, “@types/react”: “17.0.37”, “@types/react-native”: “0.66.11”, “expo-cli”: “5.0.3”, “expo-yarn-workspaces”: “1.7.0”, “next-compose-plugins”: “2.2.1”, “react-native-svg-transformer”: “^1.0.0”, “typescript”: “4.5.4” }, “private”: true, “expo-yarn-workspaces”: { “symlinks”: [ “react-native”, “react-native-unimodules”, “expo-modules-core”, “react-native-reanimated”, “react-native-safe-area-context”, “sentry-expo”, “@sentry/cli”, “@sentry/react-native”, “@expo/next-adapter”, “expo-app-loading”, “expo-application”, “expo-constants”, “expo-device”, “expo-error-recovery”, “expo-file-system”, “expo-font”, “expo-haptics”, “expo-keep-awake”, “expo-linking”, “expo-permissions”, “expo-splash-screen”, “expo-status-bar”, “expo-structured-headers”, “expo-updates”, “expo-dev-client”, “expo-dev-launcher”, “expo-dev-menu-interface”, “expo-dev-menu”, “expo-updates-interface”, “expo-notifications”, “unimodules-app-loader”, “unimodules-barcode-scanner-interface”, “unimodules-camera-interface”, “unimodules-constants-interface”, “@unimodules/core”, “unimodules-face-detector-interface”, “unimodules-file-system-interface”, “unimodules-font-interface”, “unimodules-image-loader-interface”, “unimodules-permissions-interface”, “@unimodules/react-native-adapter”, “unimodules-sensors-interface”, “unimodules-task-manager-interface” ] }, “react-native-unimodules”: { “android”: { “modulesPaths”: [ “…/…/…/…/”, “…/…/…/…/packages” ], “configuration”: “api”, “target”: “react-native” }, “ios”: { “modules_paths”: [ “…/…/…/”, “…/…/…/packages” ], “flags”: { “inhibit_warnings”: false } } } }

[widjesh]

Sure it was react-native-animated, I had to add a plugin in my babel.config.js. Check this documentation https://docs.expo.dev/versions/latest/sdk/reanimated/

Finding out that this package caused my issue was the hardest thing I ever encountered in my life. There was a guy in the expo discord channel and he advices me to use flipper, which reads and prints the logs for you whenever you are building your app and running it through a simulator.

Hope this helps.

[zain148]

Thanks yes i’ll try

On Mon, 22 Aug 2022 at 4:53 PM Jordan Disch @.***> wrote:

@zain148 https://github.com/zain148 not on the logging side.

TLDR; your packages are not installed when building with eas build when you are hoisting packages in a monorepo.

For anyone here that has a monorepo who’s dependencies are not references in the package.json of their mobile app folder, you will need to reference that package. We did that by installing the package directly in the mobile app folder. Think this has something to do with how eas build sends only the mobile app folder when you run the client command ‘eas build’. Where as ‘expo build’ builds it locally and then sends to expo, so the hoisted package is installed? Obviously want to leveraged our hoisted packages so we can share dependencies across the monorepo, so will need to look into a better way of getting those packages referenced from the mobile app folder.

— Reply to this email directly, view it on GitHub https://github.com/expo/expo/issues/17160#issuecomment-1222248721, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKQTYR42FNN7ADUDTQ3Y26TV2NS2PANCNFSM5T724HNQ . You are receiving this because you were mentioned.Message ID: @.***>