White screen between splash screen and app

Hello everybody!
I am working on Expo 3 months and it is a great framework for use. But I have one small but nervous thing. My app shows white screen between splash screen and app. I didn’t pay any attention to this, but it looks like a bug. I already update to 24 version of Expo and it should be fixed. I tried to build a standalone app in iOS but it is the same. Can you help me to solve this bug?
This is my app.json

{
“expo”: {
“sdkVersion”: “24.0.0”,
“name”: “myApp”,
“slug”: “myapp”,
“orientation”: “portrait”,
“primaryColor”: “#193156”,
“icon”: “assets/icons/app-icon.png”,
“notification”: {
“icon”: “./src/static/logo_pb.png”,
“color”: “#FFFFFF
},
“ios”: {
“bundleIdentifier”: “com.me.myapp”,
“loadJSInBackgroundExperimental”: true
},
“android”: {
“package”: “com.me.myapp”,
“versionCode”: 6
},
“splash”: {
“backgroundColor”: “#193156”,
“image”: “assets/splash.png”,
“resizeMode”: “cover”
},
“androidStatusBar”: {
“backgroundColor”: “#0b1d3a”,
“barStyle”: “light-content”
},
“assetBundlePatterns”: [
“./src/static/**”
]
}
}

hi there! make sure that the initial content that you’re rendering in your app is not too expensive to render. for example, if you only render an empty view with a colored background, you will notice that there is no white screen between splash and the app. the problem becomes when the app takes a significant amount of time to display anything on the screen for the first render

Yes I am rendering via react-navigation 5 screens in Stack Navigator. So how can I optimize this one?

without seeing all of the code and playing with it myself there’s no way i can give you any exact advice (just add the “optimize” prop! haha), instead i can only recommend that you defer rendering some things that are rendered right away. for example, maybe for the first screen you mount, rather than rendering it right away you show a loading indicator and then render it a few hundred milliseconds after. if you are rendering ‘5 screens’ right away, then just render one. if you have a tab navigator, make sure it uses the lazy prop

Ok thank you! I will try solve it

I solved it with AppLoading :slight_smile:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.