zoontek / react-native-bootsplash

🚀 Show a splash screen during app startup. Hide it when you are ready.
MIT License
3.74k stars 258 forks source link

pre-build no longer works after installing bootsplash - expo SDK51 #610

Closed AyoCodess closed 3 months ago

AyoCodess commented 3 months ago

Before submitting a new issue

Bug summary

command used: npx react-native generate-bootsplash assets/icon.png --platforms=android,ios --background=F5FCFF --logo-width=100 --assets-output=assets/bootsplash --flavor=main

i have followed all other instructions...

package json

"expo": { "autolinking": { "exclude": [ "expo-splash-screen" ] } }

app config:

["react-native-bootsplash", { assetsDir: "assets/bootsplash" }],

Resuts when running prebuild

IOS

✔ Would you like to proceed? … yes
✔ Cleared ios code
✔ Created native directory
✔ Updated package.json | no changes
✖ Prebuild failed
Error: [ios.dangerous]: withIosDangerousBaseMod: ENOENT: no such file or directory, lstat '/Users/ayo/Desktop/Code/honeymoon/apps/mobile/assets/bootsplash/ios/BootSplash.storyboard'

ANDROID:

✔ Cleared android code
✔ Created native directory
✔ Updated package.json | no changes
✖ Prebuild failed
Error: [android.dangerous]: withAndroidDangerousBaseMod: ENOENT: no such file or directory, scandir '/Users/ayo/Desktop/Code/honeymoon/apps/mobile/assets/bootsplash/android'
Error: [android.dangerous]: withAndroidDangerousBaseMod: ENOENT: no such file or directory, scandir '/Users/ayo/Desktop/Code/honeymoon/apps/mobile/assets/bootsplash/android'
    at Object.readdirSync (node:fs:1527:3)
    at Object.readDir (/Users/ayo/Desktop/Code/honeymoon/node_modules/react-native-bootsplash/dist/commonjs/generate.js:136:37)

the CLi does not generate the ios and android files within the /bootsplash folder.

Screenshot 2024-08-16 at 08 54 42

Library version

6.1.1

Environment info

shell
System:
  OS: macOS 14.4.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 92.80 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.17.0
    path: ~/.nvm/versions/node/v18.17.0/bin/node
  Yarn:
    version: 1.22.21
    path: ~/.nvm/versions/node/v18.17.0/bin/yarn
  npm:
    version: 9.6.7
    path: ~/.nvm/versions/node/v18.17.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK:
    API Levels:
      - "32"
      - "34"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-34 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10227.8.2321.11479570
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.2.0
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Steps to reproduce

  1. … install a library into any expo project

Reproducible sample code

follow basic instructions
zoontek commented 3 months ago

@AyoCodess Publish your package.json

AyoCodess commented 3 months ago

@AyoCodess Publish your package.json

{
"name": "mobile",
"version": "0.0.1062",
"updateVersion": "13",
"main": "index.js",
"scripts": {
"start": "npm run cds && npx expo start -c --dev-client",
"device-i": "npm run cds && npx expo run:ios --device",
"device-a": "npm run cds && npx expo run:android --device",
"prebuild-i": "npm run cds && npx expo prebuild --clean -p ios",
"prebuild-a": "npm run cds && npx expo prebuild --clean -p android",
"prebuild": "npx expo prebuild --clean",
"create-d": "eas device:create",
"and": "expo run:android",
"ios": "expo run:ios",
"android": "expo run:android",
"patch": "patch-package"
},
"dependencies": {
"@clerk/clerk-expo": "^1.2.7",
"@codler/react-native-keyboard-aware-scroll-view": "^2.0.1",
"@expo/config": "~9.0.0",
"@gorhom/bottom-sheet": "^4.6.3",
"@hookform/resolvers": "^3.3.3",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-native-community/datetimepicker": "8.0.1",
"@react-native-community/slider": "4.5.2",
"@react-native-picker/picker": "2.7.5",
"@repo/api": "*",
"@sentry/react-native": "~5.22.0",
"@shopify/flash-list": "1.6.4",
"class-variance-authority": "^0.7.0",
"dayjs": "^1.11.10",
"expo": "^51.0.20",
"expo-application": "~5.9.1",
"expo-build-properties": "~0.12.3",
"expo-checkbox": "~3.0.0",
"expo-clipboard": "~6.0.3",
"expo-constants": "~16.0.2",
"expo-crypto": "~13.0.2",
"expo-device": "~6.0.2",
"expo-file-system": "~17.0.1",
"expo-font": "~12.0.8",
"expo-linear-gradient": "^13.0.2",
"expo-linking": "~6.3.1",
"expo-local-authentication": "~14.0.1",
"expo-localization": "~15.0.3",
"expo-router": "=3.5.16",
"expo-secure-store": "~13.0.2",
"expo-sharing": "~12.0.1",
"expo-status-bar": "~1.12.1",
"expo-updates": "~0.25.19",
"expo-web-browser": "~13.0.3",
"lottie-react-native": "6.7.0",
"moti": "^0.29.0",
"nativewind": "^4.0.36",
"posthog-react-native": "^3.1.2",
"react": "18.2.0",
"react-hook-form": "^7.49.2",
"react-native": "0.74.5",
"react-native-bootsplash": "^6.1.1",
"react-native-circular-progress": "^1.3.9",
"react-native-circular-progress-indicator": "^4.4.2",
"react-native-gesture-handler": "~2.16.1",
"react-native-get-random-values": "~1.11.0",
"react-native-gifted-charts": "^1.4.9",
"react-native-haptic-feedback": "^2.2.0",
"react-native-modal": "^13.0.1",
"react-native-modal-datetime-picker": "^17.1.0",
"react-native-onboard": "^2.6.0",
"react-native-pager-view": "6.3.0",
"react-native-progress": "^5.0.1",
"react-native-reanimated": "~3.10.1",
"react-native-reanimated-carousel": "^3.5.1",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"react-native-select-dropdown": "^4.0.1",
"react-native-svg": "15.2.0",
"react-native-tab-view": "^3.5.2",
"react-native-toast-message": "^2.2.0",
"tailwindcss": "^3.4.3",
"zod": "^3.23.4",
"zustand": "^4.5.2"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@biomejs/biome": "1.8.3",
"@expo/config-plugins": "~8.0.0",
"@repo/typescript-config": "*",
"@types/node": "^20.11.19",
"@types/react": "~18.2.14",
"@types/react-native-get-random-values": "^1.8.2",
"expo-dev-client": "^4.0.15",
"patch-package": "^8.0.0",
"tailwind": "^4.0.0",
"typescript": "~5.3.3"
},
"expo": {
"autolinking": {
"exclude": [
"expo-splash-screen"
]
},
"private": true
}
}

app config

import type { ExpoConfig } from "@expo/config";
import { theme } from "./rawTheme";
const packageJson = require("./package.json");

const defineConfig = (): ExpoConfig => ({
    name: getAppName(),
    slug: "honeyroots",
    scheme: "honeyroots",
    orientation: "portrait",
    icon: "./assets/icon.png",
    userInterfaceStyle: "light",
    version: packageJson.version,
    experiments: {
        typedRoutes: true,
    },
    assetBundlePatterns: ["**/*"],
    ios: {
        supportsTablet: true,
        bundleIdentifier: getBundleId(),
        config: {
            usesNonExemptEncryption: false,
        },
        infoPlist: {
            UIBackgroundModes: ["fetch", "remote-notification"],
            NSFaceIDUsageDescription: "Allow HoneyRoots to use Face ID.",
        },
    },
    android: {
        adaptiveIcon: {
            foregroundImage: "./assets/adaptive-icon.png",
            backgroundColor: theme.raw.colors.primary,
        },
        permissions: [],
        package: getBundleId(),
        googleServicesFile:
            process.env.GOOGLE_SERVICES_JSON ?? "./google-services.json",
    },
    web: {
        favicon: "./assets/favicon.png",
    },
    extra: {
        eas: {
            projectId: "bggreeg",
        },
        supportsRTL: true,
    },
    owner: "ayocodes",
    updates: {
        url: "https://u.expo.dev/bgregd",
    },
    runtimeVersion: {
        policy: "appVersion",
    },

    plugins: [
        [
            "expo-build-properties",
            {
                ios: {
                    newArchEnabled: false,
                },
                android: {
                    newArchEnabled: false,
                },
            },
        ],
        ["expo-router"],
        [
            "expo-updates",
            {
                username: "ayocodes",
                enabled: true,
            },
        ],
        [
            "expo-local-authentication",
            {
                faceIDPermission: "Allow $(The HoneyRoots App) to use Face ID.",
            },
        ],
        ["expo-font"],
        [
            "@sentry/react-native/expo",
            {
                url: "https://sentry.io/",
                note: process.env.SENTRY_AUTH_TOKEN ?? "sentry auth token error",
                project: "honeyroots-app",
                organization: "honeyroots",
            },
        ],
        ["expo-localization"],
         ["react-native-bootsplash", { assetsDir: "assets/bootsplash" }],

    ],
});

export default defineConfig;
zoontek commented 3 months ago

Nothing wrong here.

I tried to reproduce with an identical expo version, but everything went well, the directories are correctly created.

Try isolate the issue and publish a minimal repository.

AyoCodess commented 3 months ago

Nothing wrong here.

I tried to reproduce with an identical expo version, but everything went well, the directories are correctly created.

Try isolate the issue and publish a minimal repository.

Im working within a monorepo setup but i can't see why that would cause an issue.

AyoCodess commented 3 months ago

as soon i remove the plugin from my app config, prebuild works.

    [
            "react-native-bootsplash",
            {
                assetsDir: "assets/bootsplash",
                android: {
                    parentTheme: "TransparentStatus",
                    darkContentBarsStyle: false,
                },
            },
        ],
zoontek commented 3 months ago

The issue could indeed come from the monorepo, as node_modules/expo is not detected inside the directory you are probably running the command in.

Try generating the assets at your project root. Where node_modules/expo is.

AyoCodess commented 3 months ago

The issue could indeed come from the monorepo, as node_modules/expo is not detected inside the directory you are probably running the command in.

Try generating the assets at your project root. Where node_modules/expo is.

You was right! I ran the command at the root and generated the files. Thank you 👍🏾

AyoCodess commented 3 months ago

@zoontek i'm running into a weird issue, when ever i run this command for both ios and android

npx expo prebuild --clean -p ios and then expo run:ios npx expo prebuild --clean -p android and then expo run:android

my app builds and runs on my simulators just fine

but when ever i want to build my apps locally to upload to the app stores manually with these commands

eas build --platform ios --profile staging --local as build --platform android --profile staging --local

i get these errors

ios

PREBUILD] - Creating native directory (./ios)
[PREBUILD] ✔ Created native directory
[PREBUILD] - Updating package.json
[PREBUILD] ✔ Updated package.json | no changes
[PREBUILD] - Running prebuild
[PREBUILD] ✖ Prebuild failed
[PREBUILD] Error: [ios.dangerous]: withIosDangerousBaseMod: ENOENT: no such file or directory, lstat '/private/var/folders/92/p2kc10hd1zx8m9xkx3rnxt0m0000gn/T/eas-build-local-nodejs/063215af-0106-4148-8669-330cb266369e/build/apps/mobile/assets/bootsplash/ios/BootSplash.storyboard'
[PREBUILD] Error: [ios.dangerous]: withIosDangerousBaseMod: ENOENT: no such file or directory, lstat '/private/var/folders/92/p2kc10hd1zx8m9xkx3rnxt0m0000gn/T/eas-build-local-nodejs/063215af-0106-4148-8669-330cb266369e/build/apps/mobile/assets/bootsplash/ios/BootSplash.storyboard'

ANDROID

[PREBUILD] - Creating native directory (./android)
[PREBUILD] ✔ Created native directory
[PREBUILD] - Updating package.json
[PREBUILD] ✔ Updated package.json | no changes
[PREBUILD] - Running prebuild
[PREBUILD] ✖ Prebuild failed
[PREBUILD] Error: [android.dangerous]: withAndroidDangerousBaseMod: ENOENT: no such file or directory, scandir '/private/var/folders/92/p2kc10hd1zx8m9xkx3rnxt0m0000gn/T/eas-build-local-nodejs/4cb4abca-ddb0-49e6-baef-55ef7b901121/build/apps/mobile/assets/bootsplash/android'
[PREBUILD] Error: [android.dangerous]: withAndroidDangerousBaseMod: ENOENT: no such file or directory, scandir '/private/var/folders/92/p2kc10hd1zx8m9xkx3rnxt0m0000gn/T/eas-build-local-nodejs/4cb4abca-ddb0-49e6-baef-55ef7b901121/build/apps/mobile/assets/bootsplash/android'
[PREBUILD]     at Object.readdirSync (node:fs:1527:3)

Screenshot 2024-08-19 at 17 18 23

i tried EAS cloud, same error

Screenshot 2024-08-19 at 17 20 09

same errors i got before with prebuild. Any ideas?

zoontek commented 3 months ago

@AyoCodess https://github.com/zoontek/react-native-bootsplash/issues/595#issuecomment-2254211269

The Expo documentation really needs to be fixed here, as having let's say src/components/android/stuff.tsx will also be omitted from your EAS build 😅

AyoCodess commented 3 months ago

@AyoCodess #595 (comment)

dayuuuuum...

Thanks again.

AyoCodess commented 3 months ago

say

Thanks for the heads up!

zoontek commented 3 months ago

@AyoCodess Actually, I saw that this has been merged / fixed. Fortunately

rk779 commented 2 months ago

I have randomly started facing this issue as well. Everything is done according to the document and even removed android/ from .gitignore file. Prebuild started failing with the same error as above. I'm not using monorepo as well.

EDIT: The issue occurs if there is no native project at all.

UPDATE: It was an issue on my end. It removed the assets/bootsplash/android directory when I added android to .gitignore. The problem is fixed now.