Are you tired of seeing that annoying white or black screen flash before your React Native app’s splash screen appears? You’re not alone! This is a common issue that many developers face, and the good news is it’s completely fixable. In this guide, I’ll show you exactly how to eliminate that unwanted screen flash and create a smooth, professional app launch experience.
Why Does This Happen? Understanding the Problem
Before we dive into the solution, let me explain what’s causing this issue. When your React Native app starts up, there’s a brief moment where the system shows a default background color (usually white or black) before your custom splash screen kicks in. This happens because:
- App initialization delay: Your app needs time to load JavaScript and mount components
- Default system behavior: Android and iOS show default backgrounds during app startup
- Timing mismatch: The splash screen configuration isn’t perfectly synchronized with app launch
The result? Users see an ugly flash that makes your app look unprofessional and slow.
What We’ll Fix Today
In this guide, I’ll show you how to:
- Eliminate the white/black screen flash
- Create a seamless splash screen experience
- Configure proper Android manifest and styles
- Set up custom background drawables
- Optimize for both Android and iOS
Step 1: Configure Your Android Manifest
First, let’s update your `android/app/src/main/AndroidManifest.xml` file. This is where we tell Android how to handle your app’s launch behavior.
File to edit: android/app/src/main/AndroidManifest.xml
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme"> // add theme hereWhat this does: The `android:theme=”@style/AppTheme”` line tells Android to use our custom theme instead of the default one, which will eliminate the white screen flash.
Step 2: Create Custom Background Drawable
Next, we need to create a custom background that will show immediately when your app launches.
File to create: `android/app/src/main/res/drawable/background_splash.xml`
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/white_color" />
<item>
<bitmap
android:gravity="center"
android:src="@drawable/code_with_atul_logo" />
</item>
</layer-list>What this does: This creates a layered background with your logo centered on a white background. The `layer-list` ensures your logo appears exactly where you want it.
Step 3: Define Your Color Scheme
Now let’s set up the colors that will be used throughout your splash screen.
File to edit: `android/app/src/main/res/values/colors.xml`
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="white_color">#ffffff</color> <!-- Your desired background color -->
</resources>What this does: Defines the exact colors for your splash screen. The `white_color` color will be used for the status bar and main background color.
Step 4: Create Custom App Theme
This is the most important step! We’ll create a custom theme that eliminates the white screen flash.
File to edit: `android/app/src/main/res/values/styles.xml`
<resources>
<!-- Main app theme - opaque for orientation control -->
<style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light">
<item name="android:windowIsTranslucent">true</item>
<!-- Set a custom background color -->
<item name="android:windowBackground">@drawable/background_splash</item>
<!-- Status bar color -->
<item name="android:statusBarColor">@color/white_color</item>
<!-- Hide the default splash screen icon on Android 12+ -->
<item name="android:windowSplashScreenAnimatedIcon">@android:color/transparent</item>
<item name="android:windowSplashScreenIconBackgroundColor">@android:color/transparent</item>
<item name="android:windowSplashScreenBrandingImage">@android:color/transparent</item>
</style>
</resources>What each line does
- `android:windowIsTranslucent=”true”`: Prevents the default white background from showing
- `android:windowBackground=”@drawable/background_splash”`: Uses our custom background immediately
- `android:statusBarColor=”@color/white_color”`: Matches the status bar to your background
- The last three lines disable Android 12
+default splash screen behavior that could interfere
Step 5: Ensure Your Logo is in Place
Make sure your logo file exists at `android/app/src/main/res/drawable/code_with_atul.png`. This should be a high-quality PNG image that looks crisp on all screen densities.
Pro tip: Consider creating different sizes for different screen densities:
- drawable-mdpi/ for 1x
- drawable-hdpi/ for 1.5x
- drawable-xhdpi/ for 2x
- drawable-xxhdpi/ for 3x
Step 6: Test Your Changes
After making all these changes:
- Clean your build: cd android ./gradlew clean
- Rebuild your app: npx react-native run-android
- Test the launch experience : you should now see your logo immediately without any white or black flash.
Common Issues and Solutions
Issue: Still seeing a flash ?
Make sure you’ve cleaned and rebuilt your project. Sometimes Android caches the old theme.
Issue: Logo appears too small or large ?
Adjust the `android:gravity=”center”` in your drawable XML or create properly sized logo variants.
Issue: Status bar color doesn’t match ?
Verify that `@color/splash_background` in your styles.xml matches the background color in your drawable.
Why This Solution Works
The key to eliminating the white screen flash is the combination of:
- Custom theme application in AndroidManifest.xml
- Immediate background setting via android:windowBackground
- Transparency control with android:windowIsTranslucent=”true”
- Proper color coordination between background and status bar
This approach ensures that from the very first frame, Android shows your custom background instead of the default white or black screen.
Final Thoughts
Fixing the white/black screen flash before your splash screen is one of those small details that makes a big difference in user experience. Your users will notice the professional, polished feel of your app from the very first moment they launch it.
The solution I’ve outlined above addresses the root cause of the problem by taking control of the app’s launch behavior at the Android system level. No more waiting for JavaScript to load before showing your beautiful splash screen!
Remember, the key is in the details – make sure all your file paths are correct, clean your builds after changes, and test on real devices. With these steps, you’ll have a splash screen that appears instantly and looks professional every time.
Happy coding! š
Have you tried this solution? Let me know in the comments if you’re still experiencing issues or if you’ve found additional optimizations that work for your app!