App icons and splash screens are essential for branding and user experience in React Native applications. The app icon represents your app on a user’s device, while the splash screen ensures a polished loading experience during startup. This guide provides a step-by-step process to configure app icons and splash screens for iOS and Android using Expo SDK 51 and &#96;react-native-bootsplash@5.0.1&#96;, compatible with React Native 0.75.4. It assumes basic knowledge of JavaScript and React Native, with no prior native configuration experience required. For prebuilt solutions, explore templates at [Instamobile](https:&#x2F;&#x2F;instamobile.io) or [Dopebase](https:&#x2F;&#x2F;dopebase.com).

By the end, you’ll have a React Native app with a custom app icon and splash screen, optimized for development, staging, and production environments on both platforms.

---

## Prerequisites

Before starting, ensure you have the following installed:

- **Node.js** (v20.x or later, LTS recommended): Download from [nodejs.org](https:&#x2F;&#x2F;nodejs.org).
- **npm** (v10.x or later, included with Node.js).
- **Expo CLI**: For streamlined React Native project setup.
- **Android Studio** (2024.3.2 or later): For Android development, with Android SDK 35 and NDK r25+.
- **Xcode** (16+): For iOS development (macOS only). iOS builds require Xcode 16+ (iOS 18 SDK) to comply with App Store submission requirements after April 24, 2025.
- A code editor like **VS Code**.
- **Git**: For cloning repositories or managing code.
- A **1024x1024 PNG image** for the app icon and a **2000x2000 PNG image** for the splash screen (transparent background recommended).

---

## Step 1: Set Up the React Native Project

1. Install Expo CLI globally to simplify React Native development:
   &#96;&#96;&#96;bash
   npm install -g expo-cli
   &#96;&#96;&#96;

2. Create a new project called &#96;MyApp&#96;:
   &#96;&#96;&#96;bash
   expo init MyApp
   &#96;&#96;&#96;
   Select the **blank (TypeScript)** template for a type-safe setup. Expo SDK 51 supports React Native 0.75.4 with the New Architecture enabled.

3. Navigate to the project directory:
   &#96;&#96;&#96;bash
   cd MyApp
   &#96;&#96;&#96;

4. Install &#96;react-native-bootsplash&#96; for splash screen management:
   &#96;&#96;&#96;bash
   npm install react-native-bootsplash@5.0.1
   &#96;&#96;&#96;

5. Update &#96;app.json&#96; to exclude incompatible dependencies:
   &#96;&#96;&#96;json
   {
     &quot;expo&quot;: {
       &quot;install&quot;: {
         &quot;exclude&quot;: [&quot;react-native-reanimated@~3.10.0&quot;]
       }
     }
   }
   &#96;&#96;&#96;

**Summary**: This step sets up a new React Native project with Expo SDK 51 and installs &#96;react-native-bootsplash&#96; for splash screen configuration.

---

## Step 2: Configure the App Icon

App icons must be 1024x1024 PNG images without rounded corners or transparency, as the operating system applies masking. Expo CLI and EAS Build simplify icon generation, but manual steps are provided for bare workflows.

#### iOS Configuration

1. Create a 1024x1024 PNG icon using tools like [App Icon Generator](https:&#x2F;&#x2F;appicon.co). Save it as &#96;icon.png&#96; in &#96;assets&#x2F;images&#96;. Optionally, create dark mode variants (&#96;icon-dark.png&#96;).
2. Update &#96;app.json&#96; to specify the icon:
   &#96;&#96;&#96;json
   {
     &quot;expo&quot;: {
       &quot;icon&quot;: &quot;.&#x2F;assets&#x2F;images&#x2F;icon.png&quot;,
       &quot;ios&quot;: {
         &quot;icon&quot;: {
           &quot;any&quot;: &quot;.&#x2F;assets&#x2F;images&#x2F;icon.png&quot;,
           &quot;dark&quot;: &quot;.&#x2F;assets&#x2F;images&#x2F;icon-dark.png&quot;
         }
       }
     }
   }
   &#96;&#96;&#96;
   EAS Build generates all required icon sizes (e.g., 180x180, 120x120).
3. For bare workflows, open &#96;ios&#x2F;MyApp.xcworkspace&#96; in Xcode, navigate to &#96;Images.xcassets&#96; &gt; &#96;AppIcon&#96;, and drag &#96;icon.png&#96; into the appropriate slots.

#### Android Configuration

1. Use the same 1024x1024 PNG icon, optionally creating adaptive icon layers (foreground and background) in Android Studio’s Image Asset Studio.
2. Update &#96;app.json&#96;:
   &#96;&#96;&#96;json
   {
     &quot;expo&quot;: {
       &quot;icon&quot;: &quot;.&#x2F;assets&#x2F;images&#x2F;icon.png&quot;,
       &quot;android&quot;: {
         &quot;adaptiveIcon&quot;: {
           &quot;foregroundImage&quot;: &quot;.&#x2F;assets&#x2F;images&#x2F;icon-foreground.png&quot;,
           &quot;backgroundColor&quot;: &quot;#ffffff&quot;
         }
       }
     }
   }
   &#96;&#96;&#96;
   EAS Build generates all required sizes (e.g., &#96;mipmap-mdpi&#96;, &#96;mipmap-xhdpi&#96;).
3. For bare workflows, copy icons to &#96;android&#x2F;app&#x2F;src&#x2F;main&#x2F;res&#x2F;mipmap-*&#96; folders and update &#96;android&#x2F;app&#x2F;src&#x2F;main&#x2F;AndroidManifest.xml&#96;:
   &#96;&#96;&#96;xml
   &lt;application
     android:icon=&quot;@mipmap&#x2F;ic_launcher&quot;
     android:roundIcon=&quot;@mipmap&#x2F;ic_launcher_round&quot;&gt;
   &#96;&#96;&#96;

**Summary**: App icons are configured in &#96;app.json&#96; for Expo-managed projects or manually in Xcode and Android resource folders for bare workflows, ensuring platform-specific compatibility.

---

## Step 3: Configure the Splash Screen

Splash screens display during app startup and should feature a centered logo on a solid background for fast loading. The &#96;react-native-bootsplash&#96; library provides robust control for both platforms.

#### Prepare the Splash Screen Image

Create a 2000x2000 PNG image with a transparent background, ensuring no critical elements are near the edges to account for safe areas. Save it as &#96;splash-icon.png&#96; in &#96;assets&#x2F;images&#96;. Use tools like [Figma](https:&#x2F;&#x2F;www.figma.com) for design consistency.

#### iOS Configuration

1. Generate splash screen assets:
   &#96;&#96;&#96;bash
   npx react-native generate-bootsplash assets&#x2F;images&#x2F;splash-icon.png &#x5C;
     --platforms=ios &#x5C;
     --background=#ffffff &#x5C;
     --logo-width=200
   &#96;&#96;&#96;
   This creates &#96;BootSplash.storyboard&#96; and assets in &#96;ios&#x2F;MyApp&#x2F;Images.xcassets&#96;.
2. Update &#96;app.json&#96;:
   &#96;&#96;&#96;json
   {
     &quot;expo&quot;: {
       &quot;splash&quot;: {
         &quot;image&quot;: &quot;.&#x2F;assets&#x2F;images&#x2F;splash-icon.png&quot;,
         &quot;backgroundColor&quot;: &quot;#ffffff&quot;,
         &quot;resizeMode&quot;: &quot;contain&quot;,
         &quot;dark&quot;: {
           &quot;image&quot;: &quot;.&#x2F;assets&#x2F;images&#x2F;splash-icon-dark.png&quot;,
           &quot;backgroundColor&quot;: &quot;#000000&quot;
         }
       }
     }
   }
   &#96;&#96;&#96;
3. For bare workflows, open &#96;BootSplash.storyboard&#96; in Xcode, add an &#96;ImageView&#96; with &#96;splash-icon&#96; from &#96;Images.xcassets&#96;, set &#96;Content Mode&#96; to &#96;Aspect Fit&#96;, and center it using constraints. Update &#96;Info.plist&#96; to set &#96;UILaunchStoryboardName&#96; to &#96;BootSplash&#96;.
4. Update &#96;ios&#x2F;MyApp&#x2F;AppDelegate.mm&#96; to initialize the splash screen:
   &#96;&#96;&#96;objc
   #import &quot;AppDelegate.h&quot;
   #import &lt;React&#x2F;RCTBundleURLProvider.h&gt;
   #import &lt;React&#x2F;RCTRootView.h&gt;
   #import &quot;RNSplashScreen.h&quot;

   @implementation AppDelegate

   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
     RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
     RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@&quot;MyApp&quot; initialProperties:nil];
     rootView.backgroundColor = [UIColor whiteColor];
     self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
     UIViewController *rootViewController = [UIViewController new];
     rootViewController.view = rootView;
     self.window.rootViewController = rootViewController;
     [self.window makeKeyAndVisible];
     [RNSplashScreen show];
     return YES;
   }
   @end
   &#96;&#96;&#96;

#### Android Configuration

1. Generate splash screen assets:
   &#96;&#96;&#96;bash
   npx react-native generate-bootsplash assets&#x2F;images&#x2F;splash-icon.png &#x5C;
     --platforms=android &#x5C;
     --background=#ffffff &#x5C;
     --logo-width=200
   &#96;&#96;&#96;
   This generates assets in &#96;android&#x2F;app&#x2F;src&#x2F;main&#x2F;res&#x2F;drawable&#96; and a &#96;BootSplash&#96; theme.
2. Update &#96;android&#x2F;app&#x2F;src&#x2F;main&#x2F;res&#x2F;layout&#x2F;launch_screen.xml&#96;:
   &#96;&#96;&#96;xml
   &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
   &lt;RelativeLayout xmlns:android=&quot;http:&#x2F;&#x2F;schemas.android.com&#x2F;apk&#x2F;res&#x2F;android&quot;
     android:layout_width=&quot;match_parent&quot;
     android:layout_height=&quot;match_parent&quot;&gt;
     &lt;ImageView
       android:layout_width=&quot;match_parent&quot;
       android:layout_height=&quot;match_parent&quot;
       android:src=&quot;@drawable&#x2F;bootsplash_logo&quot;
       android:scaleType=&quot;centerCrop&quot; &#x2F;&gt;
   &lt;&#x2F;RelativeLayout&gt;
   &#96;&#96;&#96;
3. Update &#96;android&#x2F;app&#x2F;src&#x2F;main&#x2F;AndroidManifest.xml&#96;:
   &#96;&#96;&#96;xml
   &lt;manifest xmlns:android=&quot;http:&#x2F;&#x2F;schemas.android.com&#x2F;apk&#x2F;res&#x2F;android&quot;&gt;
     &lt;application
       android:name=&quot;.MainApplication&quot;
       android:label=&quot;@string&#x2F;app_name&quot;
       android:icon=&quot;@mipmap&#x2F;ic_launcher&quot;
       android:roundIcon=&quot;@mipmap&#x2F;ic_launcher_round&quot;
       android:allowBackup=&quot;false&quot;
       android:theme=&quot;@style&#x2F;AppTheme&quot;&gt;
       &lt;activity
         android:name=&quot;.SplashActivity&quot;
         android:theme=&quot;@style&#x2F;BootTheme&quot;
         android:label=&quot;@string&#x2F;app_name&quot;&gt;
         &lt;intent-filter&gt;
           &lt;action android:name=&quot;android.intent.action.MAIN&quot; &#x2F;&gt;
           &lt;category android:name=&quot;android.intent.category.LAUNCHER&quot; &#x2F;&gt;
         &lt;&#x2F;intent-filter&gt;
       &lt;&#x2F;activity&gt;
       &lt;activity
         android:name=&quot;.MainActivity&quot;
         android:label=&quot;@string&#x2F;app_name&quot;
         android:configChanges=&quot;keyboard|keyboardHidden|orientation|screenSize&quot;
         android:windowSoftInputMode=&quot;adjustResize&quot;
         android:exported=&quot;true&quot; &#x2F;&gt;
     &lt;&#x2F;application&gt;
   &lt;&#x2F;manifest&gt;
   &#96;&#96;&#96;
4. Update &#96;android&#x2F;app&#x2F;src&#x2F;main&#x2F;java&#x2F;com&#x2F;myapp&#x2F;MainActivity.java&#96;:
   &#96;&#96;&#96;java
   package com.myapp;
   import com.facebook.react.ReactActivity;
   import android.os.Bundle;
   import com.zoontek.rnbootsplash.RNBootSplash;

   public class MainActivity extends ReactActivity {
     @Override
     protected void onCreate(Bundle savedInstanceState) {
       RNBootSplash.init(this, R.style.BootTheme);
       super.onCreate(savedInstanceState);
     }
   }
   &#96;&#96;&#96;

#### Hide Splash Screen

Update &#96;src&#x2F;App.tsx&#96; to hide the splash screen after loading:
&#96;&#96;&#96;typescript
import { useEffect } from &#x27;react&#x27;;
import { View, Text } from &#x27;react-native&#x27;;
import SplashScreen from &#x27;react-native-bootsplash&#x27;;

export default function App() {
  useEffect(() =&gt; {
    const init = async () =&gt; {
      await new Promise(resolve =&gt; setTimeout(resolve, 2000)); &#x2F;&#x2F; Simulate loading
      await SplashScreen.hide({ fade: true });
    };
    init();
  }, []);

  return (
    &lt;View style={{ flex: 1, justifyContent: &#x27;center&#x27;, alignItems: &#x27;center&#x27; }}&gt;
      &lt;Text&gt;Welcome to MyApp!&lt;&#x2F;Text&gt;
    &lt;&#x2F;View&gt;
  );
}
&#96;&#96;&#96;

**Summary**: Splash screens are configured using &#96;react-native-bootsplash&#96; and &#96;app.json&#96; for Expo, or manually with storyboards and layouts for bare workflows, ensuring a smooth startup experience.

---

## Step 4: Configure Staging and Production Environments

To distinguish staging and production builds, use unique icons and splash screens for each environment.

1. Update &#96;app.config.ts&#96; for dynamic configuration:
   &#96;&#96;&#96;typescript
   import { ConfigContext, ExpoConfig } from &#x27;expo&#x2F;config&#x27;;

   export default ({ config }: ConfigContext): ExpoConfig =&gt; ({
     ...config,
     name: process.env.APP_ENV === &#x27;staging&#x27; ? &#x27;MyApp Staging&#x27; : &#x27;MyApp&#x27;,
     icon: process.env.APP_ENV === &#x27;staging&#x27; ? &#x27;.&#x2F;assets&#x2F;images&#x2F;icon-staging.png&#x27; : &#x27;.&#x2F;assets&#x2F;images&#x2F;icon.png&#x27;,
     splash: {
       image: process.env.APP_ENV === &#x27;staging&#x27; ? &#x27;.&#x2F;assets&#x2F;images&#x2F;splash-icon-staging.png&#x27; : &#x27;.&#x2F;assets&#x2F;images&#x2F;splash-icon.png&#x27;,
       backgroundColor: &#x27;#ffffff&#x27;,
       resizeMode: &#x27;contain&#x27;,
     },
   });
   &#96;&#96;&#96;

2. **iOS Configuration**:
   - In Xcode, duplicate the app target (&#96;MyApp&#96; → &#96;MyApp-Staging&#96;).
   - Create separate &#96;Images.xcassets&#96; folders for each target (e.g., &#96;Images-Staging.xcassets&#96;).
   - Add unique icons and splash images for each environment.
   - Update &#96;Info.plist&#96; for each target to reference the correct &#96;BootSplash&#96; storyboard.

3. **Android Configuration**:
   - In &#96;android&#x2F;app&#x2F;build.gradle&#96;, define product flavors:
     &#96;&#96;&#96;gradle
     android {
       flavorDimensions &quot;default&quot;
       productFlavors {
         staging {
           dimension &quot;default&quot;
           applicationIdSuffix &quot;.staging&quot;
           resValue &quot;string&quot;, &quot;app_name&quot;, &quot;MyApp Staging&quot;
         }
         production {
           dimension &quot;default&quot;
           resValue &quot;string&quot;, &quot;app_name&quot;, &quot;MyApp&quot;
         }
       }
     }
     &#96;&#96;&#96;
   - Create separate resource folders (e.g., &#96;android&#x2F;app&#x2F;src&#x2F;staging&#x2F;res&#x2F;drawable&#96;, &#96;android&#x2F;app&#x2F;src&#x2F;production&#x2F;res&#x2F;drawable&#96;) with unique icons and splash images.

**Summary**: Environment-specific icons and splash screens are configured using &#96;app.config.ts&#96; for Expo or separate targets&#x2F;flavors for bare workflows, enabling clear differentiation between staging and production.

---

## Step 5: Build and Test

1. Generate native projects:
   &#96;&#96;&#96;bash
   npx expo prebuild
   &#96;&#96;&#96;

2. Build for iOS:
   &#96;&#96;&#96;bash
   npx expo run:ios
   &#96;&#96;&#96;

3. Build for Android:
   &#96;&#96;&#96;bash
   npx expo run:android
   &#96;&#96;&#96;
   Use preview or production builds to test splash screens, as Expo Go may override custom configurations.

4. Test staging vs. production:
   - For iOS, select the &#96;MyApp-Staging&#96; target in Xcode.
   - For Android, run &#96;gradlew assembleStagingDebug&#96; or &#96;assembleProductionRelease&#96;.
   - Verify that the correct icons and splash screens appear for each environment.

**Summary**: Build and test the app to ensure icons and splash screens display correctly across platforms and environments, using EAS Build for Expo or native tools for bare workflows.

---

## Step 6: Enhance and Optimize

- Use &#96;expo-dynamic-app-icon&#96; to change icons programmatically for testing or branding.
- Integrate &#96;expo-custom-assets&#96; for animated splash screens, as detailed in Expo documentation.
- Optimize splash screen duration by preloading assets (e.g., fonts, APIs) in &#96;App.tsx&#96;.
- Ensure icons are simple and splash screens are minimal to avoid visual clutter. Test on multiple devices for proper scaling.

**Summary**: Enhance the app with dynamic icons, animations, and optimized loading to improve user experience and maintainability.

---

## Troubleshooting Tips

- **iOS Caching Issues**: Clear derived data (&#96;rm -rf ~&#x2F;Library&#x2F;Developer&#x2F;Xcode&#x2F;DerivedData&#96;) if icons or splash screens don’t update.
- **Android Scaling Issues**: Use &#96;centerCrop&#96; or &#96;centerInside&#96; in &#96;launch_screen.xml&#96; to prevent distortion across devices.
- **Library Linking**: Run &#96;npx pod-install&#96; for iOS or sync Gradle for Android if &#96;react-native-bootsplash&#96; fails.
- **Expo Build Issues**: Ensure &#96;app.json&#96; or &#96;app.config.ts&#96; is correctly formatted and EAS Build is configured.

---

## Conclusion

You’ve configured app icons and splash screens for a React Native app using Expo SDK 51 and &#96;react-native-bootsplash@5.0.1&#96;, ensuring compatibility with React Native 0.75.4. The setup supports iOS 18 SDK (Xcode 16+) and Android SDK 35, with distinct configurations for staging and production environments. For faster development, explore prebuilt templates at [Instamobile](https:&#x2F;&#x2F;instamobile.io) or [Dopebase](https:&#x2F;&#x2F;dopebase.com), which include production-ready icon and splash screen setups. Refer to [Expo’s documentation](https:&#x2F;&#x2F;docs.expo.dev) and [react-native-bootsplash](https:&#x2F;&#x2F;github.com&#x2F;zoontek&#x2F;react-native-bootsplash) for advanced features like animations.

## Additional Resources
- [dopebase.com](https:&#x2F;&#x2F;dopebase.com) - Mobile app development resources and templates
- [instamobile.io](https:&#x2F;&#x2F;instamobile.io) - Production-ready React Native templates
- [instaflutter.com](https:&#x2F;&#x2F;instaflutter.com) - Flutter templates for cross-platform development
- [reactnative.dev](https:&#x2F;&#x2F;reactnative.dev) - Official React Native documentation
- [appicon.co](https:&#x2F;&#x2F;appicon.co) - Tool for generating app icons and splash screens

Step-by-step guide to configuring app icons and splash screens in React Native for iOS and Android using Expo SDK 51 and react-native-bootsplash for seamless branding.

Configuring App Icons and Splash Screens in React Native

About

Legal

Products

Resources

Category:

Tags: