Ignite expo mobile app in Yarn monorepo stuck in splash screen

[musabgulfam]

Describe the bug

So I am getting started with the monorepo guide documented here.

The other guide I used in developing this monorepo is this document from Expo itself.

However, the app runs fine in the standalone mode, but when copied in monorepo/apps/mobile-app directory, the app gets stuck in the splash screen.

Monorepo root package.json

{
  "name": "bokija-monorepo",
  "version": "1.0.0",
  "author": "Musab Bin Gulfam",
  "license": "MIT",
  "private": true,
  "workspaces": ["apps/*", "packages/*"]
}

monorepo/apps/mobile-app package.json

{
  "name": "bokija-app-v-4",
  "version": "0.0.1",
  "private": true,
  "main": "index.js",
  "scripts": {
    "compile": "tsc --noEmit -p . --pretty",
    "format": "prettier --write \"app/**/*.{js,jsx,json,md,ts,tsx}\"",
    "lint": "eslint App.tsx app test --fix --ext .js,.ts,.tsx && npm run format",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:maestro": "maestro test .maestro/FavoritePodcast.yaml",
    "adb": "adb reverse tcp:9090 tcp:9090 && adb reverse tcp:3000 tcp:3000 && adb reverse tcp:9001 tcp:9001 && adb reverse tcp:8081 tcp:8081",
    "postinstall": "",
    "bundle:visualize": "npx react-native-bundle-visualizer",
    "bundle:visualize:dev": "npx react-native-bundle-visualizer --dev",
    "build:ios:sim": "eas build --profile development --platform ios --local",
    "build:ios:dev": "eas build --profile development:device --platform ios --local",
    "build:ios:preview": "eas build --profile preview:device --platform ios",
    "build:ios:dev:remote": "eas build --profile development:device --platform ios",
    "build:ios:prod": "eas build --profile production --platform ios --local",
    "build:android:sim": "eas build --profile development --platform android --local",
    "build:android:dev": "eas build --profile development:device --platform android --local",
    "build:android:preview": "eas build --profile preview:device --platform android",
    "build:android:dev:remote": "eas build --profile development:device --platform android",
    "build:android:prod": "eas build --profile production --platform android --local",
    "start": "npx expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "npx expo start --web",
    "bundle:web": "npx expo export --platform web",
    "serve:web": "npx server dist",
    "prebuild:clean": "npx expo prebuild --clean"
  },
  "dependencies": {
    "@expo-google-fonts/space-grotesk": "^0.2.2",
    "@expo/metro-runtime": "~3.2.1",
    "@react-navigation/drawer": "^6.7.2",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.0.2",
    "apisauce": "3.0.1",
    "date-fns": "^2.30.0",
    "dayjs": "^1.11.13",
    "expo": "~51.0.35",
    "expo-build-properties": "~0.12.1",
    "expo-dev-client": "~4.0.27",
    "expo-font": "~12.0.10",
    "expo-linking": "~6.3.1",
    "expo-localization": "~15.0.3",
    "expo-splash-screen": "~0.27.6",
    "expo-status-bar": "~1.12.1",
    "firebase": "^10.13.1",
    "formik": "^2.4.6",
    "i18n-js": "^4.4.3",
    "mobx": "6.10.2",
    "mobx-react-lite": "4.0.5",
    "mobx-state-tree": "5.3.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-big-calendar": "^4.15.0",
    "react-native-blob-util": "^0.19.11",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-mmkv": "2.12.2",
    "react-native-paper": "^5.12.5",
    "react-native-paper-dates": "^0.22.26",
    "react-native-paper-select": "^1.2.0",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-svg": "15.2.0",
    "react-native-uuid": "^2.0.2",
    "react-native-web": "~0.19.6",
    "yup": "^1.4.0",
    "shared-store":  "*"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/plugin-transform-arrow-functions": "^7.0.0",
    "@babel/plugin-transform-shorthand-properties": "^7.0.0",
    "@babel/plugin-transform-template-literals": "^7.0.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@testing-library/react-native": "^12.5.2",
    "@types/i18n-js": "3.8.2",
    "@types/jest": "^29.2.1",
    "@types/react": "~18.2.14",
    "@typescript-eslint/eslint-plugin": "^5.59.0",
    "@typescript-eslint/parser": "^5.59.0",
    "babel-jest": "^29.2.1",
    "eslint": "8.17.0",
    "eslint-config": "*",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-standard": "17.0.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "6.0.0",
    "eslint-plugin-react": "7.30.0",
    "eslint-plugin-react-native": "4.0.0",
    "eslint-plugin-reactotron": "^0.1.2",
    "expo-atlas": "^0.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.2",
    "postinstall-prepare": "1.0.1",
    "prettier": "2.8.8",
    "reactotron-core-client": "^2.8.13",
    "reactotron-mst": "^3.1.7",
    "reactotron-react-js": "^3.3.11",
    "reactotron-react-native": "^5.0.5",
    "ts-jest": "^29.1.1",
    "ts-node": "^10.9.2",
    "typescript": "~5.3.3"
  },
  "engines": {
    "node": ">=18"
  },
  "prettier": {
    "printWidth": 200,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all"
  },
  "eslintConfig": {
    "extends": ["bokija-monorepo/eslint-config"]
  }
}

monorepo/apps/mobile-app/metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');

// Find the project and workspace directories
const projectRoot = __dirname;
// This can be replaced with `find-yarn-workspace-root`
const monorepoRoot = path.resolve(projectRoot, '../..');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(projectRoot);

config.transformer.getTransformOptions = async () => ({
  transform: {
    // Inline requires are very useful for deferring loading of large dependencies/components.
    // For example, we use it in app.tsx to conditionally load Reactotron.
    // However, this comes with some gotchas.
    // Read more here: https://reactnative.dev/docs/optimizing-javascript-loading
    // And here: https://github.com/expo/expo/issues/27279#issuecomment-1971610698
    inlineRequires: true,
  },
});

// 1. Watch all files within the monorepo
config.watchFolders = [monorepoRoot];
// 2. Let Metro know where to resolve packages and in what order
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(monorepoRoot, 'node_modules'),
];

// This helps support certain popular third-party libraries
// such as Firebase that use the extension cjs.
config.resolver.sourceExts.push("cjs")

module.exports = config;

Ignite version

10.1.1

Additional info

System
  platform           darwin                                                                          
  arch               arm64                                                                           
  cpu                8 cores         Apple M1                                                        
  directory          bokija-app-v4   /Users/musabgulfam/Documents/bokija-monorepo/apps/bokija-app-v4 

JavaScript (and globally-installed packages)
  node                    20.18.1      /Users/musabgulfam/.nvm/versions/node/v20.18.1/bin/node   
  npm                     10.8.2       /Users/musabgulfam/.nvm/versions/node/v20.18.1/bin/npm    
    corepack              0.29.4                                                                 
    firebase-tools        13.29.1                                                                
    npm                   10.8.2                                                                 
  yarn                    1.22.15      /opt/homebrew/bin/yarn                                    
    create-expo           3.2.0                                                                  
    react-devtools        4.26.1                                                                 
    react-native-rename   2.9.0                                                                  
  pnpm                    -            not installed                                             
  bun                     -            not installed                                             
  expo                    51.0.39      managed                                                   
  expo global cli         6.3.12       Deprecated: Found 'expo-cli' installed. Please remove it. 

Ignite
  ignite-cli         10.1.1       /Users/musabgulfam/.npm/_npx/e31027f3785124a8/node_modules/.bin/ignite      
  ignite src         build        /Users/musabgulfam/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build 

Android
  java               17.0.13      /usr/bin/java                          
  android home       -            /Users/musabgulfam/Library/Android/sdk 

[frankcalise]

Hi @musabgulfam I'm trying to reproduce this myself, while I'm working on that can you please provide some more information:

1. A specific Platform such as iOS or all the platforms are you seeing the issue?
2. Do you have the problem reproduced and posted to a public repository?

[frankcalise]

ok @musabgulfam try the following

in apps/mobile-app create index.tsx

import "@expo/metro-runtime" // Necessary for Fast Refresh on Web
import { registerRootComponent } from "expo"

import App from "./App"

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App)

in apps/mobile-app/package.json update the main key:

• It currently reads: "main": "expo/AppEntry.js",
• Change it to: "main": "index.tsx",

[frankcalise]

Made a PR to address these with some additional notes if that helps. Let me know if you are still having trouble @musabgulfam

[musabgulfam]

Hi @musabgulfam I'm trying to reproduce this myself, while I'm working on that can you please provide some more information:

1. A specific Platform such as iOS or all the platforms are you seeing the issue?
2. Do you have the problem reproduced and posted to a public repository?

Hi, thank you very much for your consideration. Currently, I only have observed this issue on android.

I am sorry, but the repository is private. Is there anything I can help with regarding the code base? Is there any specific file that I can post here?

[musabgulfam]

Made a PR to address these with some additional notes if that helps. Let me know if you are still having trouble @musabgulfam

Thank you. I will let you know when I get to work.

[infinitered-circleci]

🎉 This issue has been resolved in version 10.1.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀