EAS - white screen after splash-screen in production mode on iOS

[MaxLmqr]

Build/Submit details page URL

No response

Summary

I have an (two actually) app that is working correctly in a development environment.

1. The app launches
2. The splash screen appears
3. Data are loaded while the splash screen is kept using expo-splash-screen
4. The splash screen is hidden when the app is fully loaded

When using expo build:ios -t archive, the app works correctly in production mode as well.

But when I try to use eas to build the app, I am having a white screen after the splash screen, while data are loaded..

Why do I think that this is due tu eas ? The white screen appeared for the first time after I started using eas cli.
I also found out that when I'm using expo publish, then back to the classic expo build, then the white screen is gone.
I tried once again to use eas build, and got the white screen back.

Managed or bare?

Managed

Environment

expo-env-info 1.0.2 environment info:
System:
OS: macOS 12.2.1
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
Yarn: 1.22.17 - /opt/homebrew/bin/yarn
npm: 8.5.1 - /opt/homebrew/bin/npm
Watchman: 2022.02.28.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.2 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7935034
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
npmPackages:
expo: ^44.0.0 => 44.0.6
react: 17.0.1 => 17.0.1
react-dom: 17.0.1 => 17.0.1
react-native: 0.64.3 => 0.64.3
react-native-web: 0.17.1 => 0.17.1
npmGlobalPackages:
eas-cli: 0.46.0
expo-cli: 5.3.0
Expo Workflow: managed

Error output

No response

Reproducible demo or steps to reproduce from a blank project

Not really reproducible in a Snack..

But it should be the following :

Create a project, with expo-splash-screen set up as expo documentation.

Publish to production with expo:build

Everything should be fine in production.

Publish to production with eas cli

There should be a white screen after the splashscreen, which might be very quick in a blank project.

It happened to me on two different apps.

[dlamon1]

Having the same issue, android and ios.

[valentinoConti]

Similar issue but not a white screen, app crashes after splash screen.

expo build:android --> Builds correctly and works good on device ✅
eas build -p android --> Builds correctly and works good on device ✅

expo build:ios --> Builds correctly and works good on device ✅
eas build -p ios --> Builds correctly, installs correctly on device, but when I open it I can see the splash screen and then it closes itself. ❌

Tried to see the "device console" on xCode and this is the error it shows when it crashes:

Process start failed with Error Domain=NSPOSIXErrorDomain Code=88 "Malformed Mach-o file" UserInfo={NSLocalizedDescription=Launchd job spawn failed with error: 88}

---

No idea what to even try to make it work with eas-cli instead of traditional expo build system. I'll keep using expo build system till it gets deprecated I guess!

[EvanBacon]

@valentinoConti you can try building the app locally to get insight from xcode on the fatal error expo run:ios.

[valentinoConti]

@valentinoConti you can try building the app locally to get insight from xcode on the fatal error expo run:ios.

Doing expo run:ios builds and runs the app amazing. Same if I expo build:ios and install the .ipa generated via xCode to my phone. It just crashes if I do eas build -p ios (tried with --clear-cache and --local options to see and always the same result)

eas build -p android generated apk works fine on Android devices.

[Ross-Landry]

I'm seeing the same, on both Android and iPhone. The splash screen displays, but afterwards it is a blank white screen. The classic build commands are still working for me (expo build:ios and expo build:android) - only seeing the issue when I run eas build

eas-cli/0.48.2 darwin-x64 node-v16.13.2

[dlamon1]

If I should open a separate thread for this issue,, please let me know.

I do not see a splash screen. I see white while the app loads. I am using Apploader

This happens only when published to the store. It does not happen in development. It does not happen when I build(using both eas and expo build) an .apk and install directly.

[valentinoConti]

This happens only when published to the store. It does not happen in development. It does not happen when I build(using both eas and expo build) an .apk and install directly.

Don't know about the solution to your problem, but to have a better sight of what the store app it's going to work like, you can instead of building an .apk file directly with expo/eas try to create an .aab file and then using bundletool to get an .apk from that file:

bundletool build-apks --bundle=/path/to/build.aab --output=/path/build.apks --mode=universal

After that you are going to have a build.apks file, you rename it to builds.zip, then extract the zip and you will have a folder with the actual .apk file. That apk its the closest thing you have to the store release, and that prevents you from uploading your app to the store to test if it works right or not 👍🏼

[dlamon1]

@valentinoConti thank you very much for the input. It sounds like I don't have to explain to you how difficult it is troubleshooting bugs that only appear from uploading to the store.

[jasj]

same here with at least android (i didn-t try on ios).

the app works excellent with expo build

[RSchneider94]

Same problem here with ios, any updates on this?

[HosamCS]

I have same issue 🥲
Here, in the above code, while running it in metro bundler, using expo run android command, the app is running properly in expo without any issue or error. But When I build the apk using expo build:android, and try to install it in my physical device, then it's showing the splash screen and after that it is showing the white blank screen. Not routing  Screens

[jasj]

Which version of expo sdk do you have. We solve it moving to 43 Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Hossam Hassan ***@***.***> Sent: Tuesday, April 19, 2022 12:56:37 AM To: expo/eas-cli ***@***.***> Cc: Juan Andres Segreda Johanning ***@***.***>; Comment ***@***.***> Subject: Re: [expo/eas-cli] EAS - white screen after splash-screen in production mode on iOS (Issue #1017) I have same issue 🥲 Here, in the above code, while running it in metro bundler, using expo run android command, the app is running properly in expo without any issue or error. But When I build the apk using expo build:android, and try to install it in my physical device, then it's showing the splash screen and after that it is showing the white blank screen. Not routing Screens — Reply to this email directly, view it on GitHub<#1017 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABKOZMMZ4A5RVS2ITACCAULVFZKKLANCNFSM5QWKBEMA>. You are receiving this because you commented.Message ID: ***@***.***>

[RSchneider94]

Update from my side:

Don't know f it has to do with your problems as well, but mine was really on my side and I could find it just in one way:

1. Turn of remote debugging / React Native Debugger
2. Run the application and let the "Chrome Debugger" run

I don't know why, but on my side, React Native Debugger wasn't showing me some errors that were happening on my code, in my case specifically, was with the uuid library. After turning off the Native Debugger, the problems appeared on my terminal (iTerm2). That is, nothing to do with EAS CLI.

[HosamCS]

Which version of expo sdk do you have. We solve it moving to 43 Get Outlook for Androidhttps://aka.ms/AAb9ysg
…
________________________________ From: Hossam Hassan @.> Sent: Tuesday, April 19, 2022 12:56:37 AM To: expo/eas-cli @.> Cc: Juan Andres Segreda Johanning @.>; Comment @.> Subject: Re: [expo/eas-cli] EAS - white screen after splash-screen in production mode on iOS (Issue #1017) I have same issue 🥲 Here, in the above code, while running it in metro bundler, using expo run android command, the app is running properly in expo without any issue or error. But When I build the apk using expo build:android, and try to install it in my physical device, then it's showing the splash screen and after that it is showing the white blank screen. Not routing Screens — Reply to this email directly, view it on GitHub<#1017 (comment)>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABKOZMMZ4A5RVS2ITACCAULVFZKKLANCNFSM5QWKBEMA. You are receiving this because you commented.Message ID: @.***>

Old sdk is 41 ......How to move or update expo sdk 43 ?

[Monkeystation]

I was running into this same issue and found a solution. As per the instructions I had the await SplashScreen.preventAutoHideAsync(); within a useEffect hook in App.tsx. Even in an otherwise empty file, this did not prevent the SplashScreen from disappearing in production mode.
But when I move SplashScreen.preventAutoHideAsync(); directly under the list of imports, or just outside of the useEffect hook, it works fine!

[MaxLmqr]

Interesting! I will try this solution and let you know if it solves my issue as well.

EDIT : It worked!

[ktjh123]

I'm facing an issue where the apk for expo build:android works but eas build --platform android does not.
Expo version 44

Would appreciate any help

[jewwc7]

I was running into this same issue and found a solution. As per the instructions I had the await SplashScreen.preventAutoHideAsync(); within a useEffect hook in App.tsx. Even in an otherwise empty file, this did not prevent the SplashScreen from disappearing in production mode.
But when I move SplashScreen.preventAutoHideAsync(); directly under the list of imports, or just outside of the useEffect hook, it works fine!

This worked for me. I placed SpalshScreen.preventAutoHideAsync() outside useffect and removed the await.

[vicreative]

I'm seeing the same, on both Android and iPhone. The splash screen displays, but afterwards it is a blank white screen. The classic build commands are still working for me (expo build:ios and expo build:android) - only seeing the issue when I run eas build

eas-cli/0.48.2 darwin-x64 node-v16.13.2

I'm having the same issue here

[isaachinman]

when I move SplashScreen.preventAutoHideAsync(); directly under the list of imports

Same approach worked for me. Running preventAutoHideAsync outside of the React hierarchy, as soon as possible in your bundle, should fix the problem.

@brentvatne Not sure what's up here, but it seems like the docs need to be updated.

[brentvatne]

@isaachinman - can you share a minimal reproducible example to demonstrate what you are experiencing?

[isaachinman]

@brentvatne Yes, happy to help here. What is the best way to provide a repro for a prod-only issue?

[MohammadKurjieh]

Same approach worked for me. Running preventAutoHideAsync outside of the React hierarchy, as soon as possible in your bundle, should fix the problem.

Yes indeed this fixed the issue for me. The issue definitely frustrating especially that it occurred out of nowhere after updating expo!

Also this issue is occurring on production builds for both Android and iOS.

[brentvatne]

@brentvatne Yes, happy to help here. What is the best way to provide a repro for a prod-only issue?

it should be reproducible locally if you run expo run:ios --configuration Release

[github-actions]

This issue is stale because it has been open for 30 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[cmacha2]

Me encontré con este mismo problema y encontré una solución. Según las instrucciones que tenía await SplashScreen.preventAutoHideAsync();dentro de un useEffectgancho en App.tsx. Incluso en un archivo vacío, esto no impidió que SplashScreen desapareciera en el modo de producción.
Pero cuando me muevo SplashScreen.preventAutoHideAsync();directamente debajo de la lista de importaciones, o justo fuera del useEffectgancho, ¡funciona bien!

Esto funcionó para mí. Coloqué SpalshScreen.preventAutoHideAsync() fuera de useffect y eliminé await.

In which file should this change be made?

[BerkeAras]

Same issue, nothing works :(

[BerkeAras]

Maybe this works. Try Running eas build -p=ios —auto-submit —clear-cache

[faderik]

Same issue with expo build:android :(

EDIT: using @valentinoConti solution works. thx.
Then consider to move to eas for building, bcause found another issue when using expo build:android is disappear when using eas build (with the same code), not sure y

[expo-bot]

Hi there! It looks like your issue requires a minimal reproducible example, but it is invalid or absent. Please prepare such an example and share it in a new issue.

The best way to get attention to your issue is to provide a clean and easy way for a developer to reproduce the issue on their own machine. Please do not provide your entire project, or a project with more code than is necessary to reproduce the issue.

A side benefit of going through the process of narrowing down the minimal amount of code needed to reproduce the issue is that you may get lucky and discover that the bug is due to a mistake in your application code that you can quickly fix on your own.

Resources

• "How to create a Minimal, Reproducible Example"
• "How to narrow down the source of an error"

Common concerns

"I've only been able to reproduce it in private, proprietary code"

You may not have spent enough time narrowing down the root cause of the issue. Try out the techniques discussed in this manual debugging guide to learn how to isolate the problem from the rest of your codebase.

"I didn't have time to create one"

That's understandable, it can take some time to prepare. We ask that you hold off on filing an issue until you are able to fully complete the required fields in the issue template.

"You can reproduce it by yourself by creating a project and following these steps"

This is useful knowledge, but it's still valuable to have the resulting project that is produced from running the steps, where you have verified you can reproduce the issue.

[bhaambhu]

I found the solution. It was as silly as it seems.
Turns out the root View in App.js needs to have flex: 1 in its style.

[Mayahi-Adel]

Hi, try to install :

• react-native-screens
• react-native-safe-area-context
• react-native-svg
  Problem solved for me

[ashifkhn]

how did you solved this issue???

[MaxLmqr]

@bhaambhu the original issue was about a short white screen between splash and app. But indeed, if you don't apply the flex: 1, then you will only see a white screen.

@ashifkhn the issue should not occur anymore, the doc has been updated with the solution, which was to move the SplashScreen.preventAutoHideAsync(); out of the App useEffect. Check out the documentation :

[lucianolopezz]

same

[FaryzK]

Applied flex: 1 and it worked!

[mtayyab03]

If I should open a separate thread for this issue,, please let me know.

I do not see a splash screen. I see white while the app loads. I am using Apploader

This happens only when published to the store. It does not happen in development. It does not happen when I build(using both eas and expo build) an .apk and install directly.

do you get what was the issue I am facing it now ?

[derekt38]

i still face this issue when i using expo router appoarch and i could see the splash screen in ios simulator and android simulator but i could not see the splash screen for both production build in the real devices ? Any idea for fixing it?
I am using Expo SDK 49.0.8

[Nantris]

This is still an issue. Actually, it's worse than ever.

[MobileMon]

you must install both

expo-system-ui and expo-splash-screen

I'm not sure why i need to install both even though i dont use expo-splash-screen. but otherwise it doesn't work so just install both

and then at the top of app.ts

import * as SystemUI from "expo-system-ui";

SystemUI.setBackgroundColorAsync("transparent");

[Meshuggahat]

you must install both

expo-system-ui and expo-splash-screen

I'm not sure why i need to install both even though i dont use expo-splash-screen. but otherwise it doesn't work so just install both

and then at the top of app.ts

import * as SystemUI from "expo-system-ui";

SystemUI.setBackgroundColorAsync("transparent");

This changed the color of the screen between splash and app. It is black now.

[Nantris]

If you write your code carefully the white screen will not appear. You may need to manually handle when the SplashScreen shows and hides. It's a pain but it's not a bug.

[TheoBreaux]

I am continually getting a white screen after the splash screen. The app never loads. It just remains white the entire time.

[Nantris]

@TheoBreaux that's a different problem entirely.

Also, an update, I have seen this issue occur again so, I'm back to thinking it's a bug.

[alexwolf22]

I'm getting the same issue.

When I run the app on simulator with an EAS development build with dev client running on android + IOS the app works fine. After the splash screen the app shows the first screen.

When a create an internal distribution EAS build and run the app on an actual IOS/Android device after the splash screen it is a blank white screen.

I setup sentry, and checked the app logs via Xcode/Android Studio, and there is nothing showing about the app crashing or an error.

I have flex-1 (Nativewind) /flex: 1 applied in my root view/component in my App.tsx file.

<QueryClientProvider client={queryClient}>
      <View className="flex-1" onLayout={onLayoutRootView}>
        <StatusBar style="auto" />
        <RootNavigator appReady={fontsLoaded} />
      </View>
    </QueryClientProvider>

Doing SystemUI.setBackgroundColorAsync('transparent'); did not work and just set the whole background color black instead of white.

What have been done to resolve this?

[mtayyab03]

For me that was dependency issue , remove the unused dependencies and also check the syntax of stack navigation its updated. And last one to imoport font file don’t use font libraray. These things solve my issue .Sent from my iPhoneOn 12-Jun-2024, at 6:04 AM, Alexander Wolf ***@***.***> wrote: I'm getting the same issue. When I run the app on simulator with an EAS development build with dev client running on android + IOS the app works fine. After the splash screen the app shows the first screen. When a create an internal distribution EAS build and run the app on an actual IOS/Android device after the splash screen it is a blank white screen. I setup sentry, and checked the app logs via Xcode/Android Studio, and there is nothing showing about the app crashing or an error. I have flex-1 (Nativewind) /flex: 1 applied in my root view/component in my App.tsx file. <QueryClientProvider client={queryClient}> <View className="flex-1" onLayout={onLayoutRootView}> <StatusBar style="auto" /> <RootNavigator appReady={fontsLoaded} /> </View> </QueryClientProvider> Doing SystemUI.setBackgroundColorAsync('transparent'); did not work and just set the whole background color black instead of white. What have been done to resolve this? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[alexwolf22]

I figured out my issue with the white screen. I was using Nativewind and my styles weren;t being applied for a silly reason.

I had tailwind.config.js in my .gitignore file which expo uses for it's .expo ignore; I think the auto .gitignore lib I used added it there =/

So during the build process it wasn't on the expo server, and babel wasn't running for nativewind.