React Native

Ever wished you could update your app’s features or fix bugs without waiting for app store approvals? With over-the-air (OTA) updates, you can! OTA updates let you push new JavaScript code and assets directly to your React Native app, so users get the latest changes instantly. In this friendly guide, we’ll walk you through setting up OTA updates using Expo Updates with Expo SDK 51, which works beautifully with React Native 0.75.4. Whether you’re new to React Native or just curious about OTA, this tutorial has you covered—no prior experience needed. Want a head start? Check out prebuilt templates with OTA support at [Instamobile](https:&#x2F;&#x2F;instamobile.io?ref=dpblog) or [Dopebase](https:&#x2F;&#x2F;dopebase.com).

By the end, you’ll have a React Native app ready to roll out updates seamlessly to iOS and Android users, with separate setups for staging and production environments. Let’s dive in!

---

## Prerequisites

Before we get started, make sure you have these tools ready:

- **Node.js** (v20.x or later, LTS recommended): Grab it from [nodejs.org](https:&#x2F;&#x2F;nodejs.org).
- **npm** (v10.x or later, comes with Node.js).
- **Expo CLI**: Our go-to for easy React Native 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). You’ll need Xcode 16+ (iOS 18 SDK) to meet App Store requirements.
- A code editor like **VS Code**.
- **Git**: For version control and managing your code.

Got everything? Awesome—let’s set up your project!

---

## Step 1: Create Your React Native Project

Let’s kick things off by setting up a fresh React Native project with Expo.

1. Install Expo CLI globally to make project setup a breeze:
   &#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;
   Choose the **blank (TypeScript)** template for a modern, type-safe setup. Expo SDK 51 powers this project, working smoothly with React Native 0.75.4.

3. Navigate to your project folder:
   &#96;&#96;&#96;bash
   cd MyApp
   &#96;&#96;&#96;

4. Add the &#96;expo-updates&#96; package for OTA magic:
   &#96;&#96;&#96;bash
   npm install expo-updates@0.25.25
   &#96;&#96;&#96;

5. Test your setup to make sure everything’s working:
   &#96;&#96;&#96;bash
   npx expo start
   &#96;&#96;&#96;
   Press &#96;a&#96; for Android or &#96;i&#96; for iOS (macOS only) to launch the app on an emulator or device. You should see a simple welcome screen.

**Summary**: You’ve set up a new React Native project with Expo SDK 51 and added &#96;expo-updates&#96; to enable OTA updates.

---

## Step 2: Set Up Expo Updates

Now that your project is ready, let’s configure Expo Updates to handle OTA updates. This step connects your app to Expo’s cloud service, so you can push updates directly to users.

#### Project Configuration

1. Update &#96;app.json&#96; to enable OTA updates:
   &#96;&#96;&#96;json
   {
     &quot;expo&quot;: {
       &quot;updates&quot;: {
         &quot;enabled&quot;: true,
         &quot;url&quot;: &quot;https:&#x2F;&#x2F;u.expo.dev&#x2F;your-project-id&quot;,
         &quot;checkAutomatically&quot;: &quot;ON_LOAD&quot;,
         &quot;fallbackToCacheTimeout&quot;: 0
       },
       &quot;ios&quot;: {
         &quot;bundleIdentifier&quot;: &quot;com.myapp.app&quot;
       },
       &quot;android&quot;: {
         &quot;package&quot;: &quot;com.myapp.app&quot;
       }
     }
   }
   &#96;&#96;&#96;
   You’ll get your &#96;project-id&#96; in Step 3 when we set up EAS (Expo Application Services).

2. For bare workflows, link &#96;expo-updates&#96;:
   - **iOS**: Run &#96;npx pod-install&#96; to set up CocoaPods dependencies.
   - **Android**: Add the following to &#96;android&#x2F;app&#x2F;build.gradle&#96;:
     &#96;&#96;&#96;gradle
     apply from: &quot;..&#x2F;..&#x2F;node_modules&#x2F;expo-updates&#x2F;expo-updates.gradle&quot;
     &#96;&#96;&#96;

3. Add update-checking logic to &#96;src&#x2F;App.tsx&#96;:
   &#96;&#96;&#96;typescript
   import { useEffect } from &#x27;react&#x27;;
   import { View, Text } from &#x27;react-native&#x27;;
   import * as Updates from &#x27;expo-updates&#x27;;

   export default function App() {
     useEffect(() =&gt; {
       const checkForUpdates = async () =&gt; {
         try {
           const update = await Updates.checkForUpdateAsync();
           if (update.isAvailable) {
             await Updates.fetchUpdateAsync();
             await Updates.reloadAsync();
           }
         } catch (e) {
           console.error(&#x27;Update check failed:&#x27;, e);
         }
       };
       checkForUpdates();
     }, []);

     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;
   This code checks for new updates when the app starts, downloads them, and reloads the app to apply them.

#### iOS Configuration

1. Open &#96;ios&#x2F;MyApp.xcworkspace&#96; in Xcode and confirm &#96;ExpoUpdates&#96; is linked in the Pods target.
2. Add the &#96;EXUpdatesURL&#96; key to &#96;Info.plist&#96; with the value &#96;https:&#x2F;&#x2F;u.expo.dev&#x2F;your-project-id&#96;.
3. Ensure the app’s bundle identifier matches &#96;app.json&#96;.

#### Android Configuration

1. Update &#96;android&#x2F;app&#x2F;src&#x2F;main&#x2F;res&#x2F;values&#x2F;strings.xml&#96;:
   &#96;&#96;&#96;xml
   &lt;resources&gt;
     &lt;string name=&quot;expo_updates_url&quot;&gt;https:&#x2F;&#x2F;u.expo.dev&#x2F;your-project-id&lt;&#x2F;string&gt;
   &lt;&#x2F;resources&gt;
   &#96;&#96;&#96;
2. Ensure &#96;MainApplication.java&#96; includes &#96;expo-updates&#96;:
   &#96;&#96;&#96;java
   import expo.modules.updates.UpdatesPackage;

   public class MainApplication extends Application implements ReactApplication {
     private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
       @Override
       protected List&lt;ReactPackage&gt; getPackages() {
         return Arrays.asList(
           new MainReactPackage(),
           new UpdatesPackage()
         );
       }
     };
   }
   &#96;&#96;&#96;

**Summary**: You’ve configured Expo Updates in your app, setting up the foundation for OTA updates. Next, we’ll connect to EAS to manage those updates.

---

## Step 3: Connect to EAS for OTA Updates

With your app configured, let’s hook it up to Expo Application Services (EAS), the cloud platform that powers OTA updates by hosting your JavaScript bundles.

1. Log in to Expo:
   &#96;&#96;&#96;bash
   eas login
   &#96;&#96;&#96;
   Follow the browser prompt to authenticate your account.

2. Set up EAS for your project:
   &#96;&#96;&#96;bash
   eas build:configure
   &#96;&#96;&#96;
   This creates an &#96;eas.json&#96; file:
   &#96;&#96;&#96;json
   {
     &quot;build&quot;: {
       &quot;development&quot;: {
         &quot;developmentClient&quot;: true,
         &quot;distribution&quot;: &quot;internal&quot;
       },
       &quot;preview&quot;: {
         &quot;distribution&quot;: &quot;internal&quot;
       },
       &quot;production&quot;: {}
     }
   }
   &#96;&#96;&#96;

3. Initialize OTA updates:
   &#96;&#96;&#96;bash
   eas update:configure
   &#96;&#96;&#96;
   This generates a project ID, which you’ll add to &#96;app.json&#96; under &#96;updates.url&#96;.

4. Build your app to test OTA compatibility:
   &#96;&#96;&#96;bash
   eas build --profile preview --platform all
   &#96;&#96;&#96;
   This creates iOS and Android binaries ready for OTA updates.

**Summary**: You’ve connected your app to EAS, setting up the cloud infrastructure to deliver OTA updates. Now, let’s try pushing your first update!

---

## Step 4: Deploy Your First OTA Update

Now that your app is linked to EAS, let’s deploy an update to see OTA in action.

1. Make a small tweak to your app, like updating the welcome message in &#96;src&#x2F;App.tsx&#96;:
   &#96;&#96;&#96;typescript
   &lt;Text&gt;Welcome to MyApp! (Updated)&lt;&#x2F;Text&gt;
   &#96;&#96;&#96;

2. Publish the update to the production branch:
   &#96;&#96;&#96;bash
   eas update --branch production
   &#96;&#96;&#96;
   This uploads your new JavaScript bundle to EAS.

3. Test the update:
   - Run your app in preview or production mode (avoid Expo Go, as it may interfere with updates).
   - Close and reopen the app to download the update.
   - Check that the updated message appears.

4. For a staging environment, publish to a separate branch:
   &#96;&#96;&#96;bash
   eas update --branch staging
   &#96;&#96;&#96;
   Use the EAS dashboard to manage branches or roll back updates if needed.

**Summary**: You’ve successfully deployed an OTA update, and your app now reflects the latest changes without an app store submission.

---

## Step 5: Set Up Staging and Production Environments

To keep things organized, let’s configure separate OTA updates for staging and production environments, so you can test changes safely before going live.

1. Create a dynamic &#96;app.config.ts&#96; for environment-specific settings:
   &#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;,
     slug: &#x27;myapp&#x27;,
     updates: {
       enabled: true,
       url: &#96;https:&#x2F;&#x2F;u.expo.dev&#x2F;your-project-id&#96;,
       checkAutomatically: &#x27;ON_LOAD&#x27;,
       fallbackToCacheTimeout: 0,
     },
     ios: {
       bundleIdentifier: process.env.APP_ENV === &#x27;staging&#x27; ? &#x27;com.myapp.staging&#x27; : &#x27;com.myapp.app&#x27;,
     },
     android: {
       package: process.env.APP_ENV === &#x27;staging&#x27; ? &#x27;com.myapp.staging&#x27; : &#x27;com.myapp.app&#x27;,
     },
   });
   &#96;&#96;&#96;

2. Build for each environment:
   - **Staging**: &#96;eas build --profile preview --platform all&#96;
   - **Production**: &#96;eas build --profile production --platform all&#96;

3. Publish updates for each environment:
   &#96;&#96;&#96;bash
   APP_ENV=staging eas update --branch staging
   APP_ENV=production eas update --branch production
   &#96;&#96;&#96;

4. Test the environments:
   - Install the staging build and verify the staging branch updates.
   - Install the production build and confirm the production branch updates.

**Summary**: You’ve set up separate staging and production environments, allowing safe testing of updates before they reach all users.

---

## Step 6: Enhance Your OTA Workflow

With your OTA system up and running, let’s explore ways to make it even better.

- **Rollbacks**: If an update goes wrong, revert it using the EAS dashboard or CLI:
  &#96;&#96;&#96;bash
  eas update:rollback --branch production
  &#96;&#96;&#96;
- **A&#x2F;B Testing**: Create branches like &#96;experiment-a&#96; and &#96;experiment-b&#96; to test new features with different user groups.
- **Analytics**: Add &#96;expo-analytics&#96; to track how users interact with updates and catch errors early.
- **Optimize Updates**: Keep update sizes small by excluding unused assets and using code-splitting techniques.

**Summary**: Enhance your OTA setup with rollbacks, A&#x2F;B testing, analytics, and optimization for a smooth and reliable update process.

---

## Troubleshooting Tips

- **Updates Not Loading**: Ensure you’re not in debug mode, as it skips OTA updates. Test with preview or production builds.
- **iOS Issues**: Verify the &#96;EXUpdatesURL&#96; in &#96;Info.plist&#96; matches your EAS project ID.
- **Android Problems**: Check &#96;expo-updates&#96; linking in &#96;android&#x2F;app&#x2F;build.gradle&#96; and confirm &#96;expo_updates_url&#96; is set in &#96;strings.xml&#96;.
- **EAS Setup Errors**: If &#96;eas update:configure&#96; fails, manually check &#96;eas.json&#96; and your project ID.

---

## Conclusion

You’ve built a React Native app with OTA updates using Expo Updates and Expo SDK 51, making it easy to push new features and fixes to iOS and Android users instantly. With separate staging and production environments, you’re ready to test and deploy like a pro. Want to speed things up? Explore prebuilt templates with OTA support at [Instamobile](https:&#x2F;&#x2F;instamobile.io) or [Dopebase](https:&#x2F;&#x2F;dopebase.com). For more advanced features, check out [Expo’s documentation](https:&#x2F;&#x2F;docs.expo.dev) or join the React Native community at [reactnative.dev](https:&#x2F;&#x2F;reactnative.dev).

## 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
- [docs.expo.dev](https:&#x2F;&#x2F;docs.expo.dev) - Expo SDK and EAS documentation

Configuring Over-the-Air Updates in React Native with Expo Updates

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

Configuring App Icons and Splash Screens in React Native

Building a Game with React Native and Axmol Engine

Building a Chat Application with React Native and Firebase

Building a Food Delivery App with React Native and Firebase

## Introduction

In 2025, the demand for mobile apps continues to surge as users seek seamless experiences across devices. For businesses with existing web applications, migrating to mobile using React Native offers a cost-effective, efficient solution. React Native, now at version 0.75, enables developers to reuse web app logic while delivering native performance on iOS and Android. This guide walks you through the process of turning a web app into a mobile app using React Native, leveraging the latest tools and practices. Plus, discover how [Dopebase](https:&#x2F;&#x2F;dopebase.com) templates can accelerate your migration with pre-built, production-ready solutions.

## Why Migrate to React Native in 2025?

React Native remains a top choice for cross-platform development due to:
- **Performance Boosts**: The Hermes engine, now default in React Native 0.75 and Expo SDK 51+, optimizes startup times and memory usage, ideal for web-to-mobile transitions.
- **Code Reusability**: Share up to 80% of your JavaScript codebase from web (e.g., React) with minimal adjustments.
- **Modern Ecosystem**: Integration with TypeScript, React Navigation 7, and Reanimated 3 ensures a future-proof stack.
- **Community Support**: Active updates and a robust plugin ecosystem keep React Native relevant for startups and enterprises.

## Prerequisites

Before starting, ensure you have:
- Node.js 20.x (LTS) and npm 10.x installed.
- React Native CLI or Expo 51 (latest as of 2025) set up.
- A web app built with React 18.x (or a similar framework like Next.js).
- Basic knowledge of JavaScript&#x2F;TypeScript and mobile development concepts.

## Step-by-Step Migration Process

### 1. Assess Your Web App

#### What to Evaluate
- **Component Structure**: Identify reusable React components (e.g., buttons, forms).
- **State Management**: Check if you use Context API, Redux Toolkit, or Zustand.
- **APIs and Data**: Ensure your REST or GraphQL endpoints are mobile-friendly (e.g., handle offline data with WorkManager).
- **UI&#x2F;UX**: Note web-specific styles (e.g., CSS) that need adaptation for mobile screens.

#### Action
- Document your app’s architecture and list components for reuse. Use tools like Bit to extract reusable UI components.

### 2. Set Up a New React Native Project

#### Using React Native CLI
1. Initialize a new project:
   &#96;&#96;&#96;bash
   npx react-native@0.75 init MobileApp --template react-native-template-typescript
   &#96;&#96;&#96;
2. Navigate to the project:
   &#96;&#96;&#96;bash
   cd MobileApp
   &#96;&#96;&#96;

#### Using Expo (Recommended for Simplicity)
1. Create a project:
   &#96;&#96;&#96;bash
   npx create-expo-app@latest MobileApp --template blank-typescript
   &#96;&#96;&#96;
2. Start the app:
   &#96;&#96;&#96;bash
   npx expo start
   &#96;&#96;&#96;
- **Hermes Compatibility**: No extra configuration is needed in &#96;app.json&#96; for Expo 51+ as Hermes is enabled by default:
  &#96;&#96;&#96;json
  &quot;expo&quot;: {
    &quot;jsEngine&quot;: &quot;hermes&quot;
  }
  &#96;&#96;&#96;

#### Why Expo?
Expo 51 simplifies native module integration and includes Hermes, reducing setup time. [Dopebase](https:&#x2F;&#x2F;instamobile.io) offers Expo-compatible templates to jumpstart this step.

### 3. Migrate Reusable Code

#### Transfer Components
- Copy reusable React components (e.g., &#96;Button&#96;, &#96;Input&#96;) from your web app to the &#96;src&#x2F;components&#96; folder.
- Update imports to use React Native’s core components (e.g., replace &#96;div&#96; with &#96;View&#96;, &#96;span&#96; with &#96;Text&#96;).
- Example:
  &#96;&#96;&#96;tsx
  &#x2F;&#x2F; Web: src&#x2F;components&#x2F;Button.js
  import React from &#x27;react&#x27;;
  import &#x27;.&#x2F;Button.css&#x27;;

  const Button = ({ children, onClick }) =&gt; (
    &lt;button className=&quot;btn&quot; onClick={onClick}&gt;{children}&lt;&#x2F;button&gt;
  );

  &#x2F;&#x2F; Mobile: src&#x2F;components&#x2F;Button.tsx
  import React from &#x27;react&#x27;;
  import { TouchableOpacity, Text, StyleSheet } from &#x27;react-native&#x27;;

  const Button = ({ children, onClick }) =&gt; (
    &lt;TouchableOpacity style={styles.button} onPress={onClick} accessible={true}&gt;
      &lt;Text style={styles.text}&gt;{children}&lt;&#x2F;Text&gt;
    &lt;&#x2F;TouchableOpacity&gt;
  );

  const styles = StyleSheet.create({
    button: { padding: 10, backgroundColor: &#x27;#007AFF&#x27;, minWidth: 48, minHeight: 48 }, &#x2F;&#x2F; 48x48 touch target for accessibility
    text: { color: &#x27;#fff&#x27;, textAlign: &#x27;center&#x27; },
  });

  export default Button;
  &#96;&#96;&#96;

#### Adapt State Management
- **Context API**: Migrate directly with minor adjustments for mobile lifecycle events.
- **Redux Toolkit**: Install &#96;@reduxjs&#x2F;toolkit&#96; and &#96;react-redux&#96;:
  &#96;&#96;&#96;bash
  npm install @reduxjs&#x2F;toolkit react-redux
  &#96;&#96;&#96;
  Configure a store and reuse reducers from your web app.
- **Zustand**: Works out of the box with no platform-specific issues. Continue using your stores as-is if they’re not tightly coupled to DOM APIs. Example:
  &#96;&#96;&#96;tsx
  import create from &#x27;zustand&#x27;;

  const useStore = create((set) =&gt; ({
    count: 0,
    increment: () =&gt; set((state) =&gt; ({ count: state.count + 1 })),
  }));

  export default useStore;
  &#96;&#96;&#96;

### 4. Handle Styling and Layout

#### Replace CSS with StyleSheet
- Convert web CSS to React Native’s &#96;StyleSheet&#96;. Use flexbox for responsive layouts:
  &#96;&#96;&#96;tsx
  import { StyleSheet } from &#x27;react-native&#x27;;

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: &#x27;center&#x27;,
      alignItems: &#x27;center&#x27;,
      padding: 20,
    },
  });
  &#96;&#96;&#96;

#### Use Tailwind CSS (Optional)
- Integrate &#96;react-native-tailwindcss&#96; for a web-like styling experience:
  &#96;&#96;&#96;bash
  npm install react-native-tailwindcss
  &#96;&#96;&#96;
- Example:
  &#96;&#96;&#96;tsx
  import tw from &#x27;react-native-tailwindcss&#x27;;

  const App = () =&gt; &lt;View style={tw&#96;flex-1 justify-center items-center bg-gray-100&#96;}&gt;Hello&lt;&#x2F;View&gt;;
  &#96;&#96;&#96;

#### Accessibility Note
Ensure touch targets are at least 48x48 dp for accessibility, as required by React Native guidelines. Adjust button styles accordingly (see example above).

### 5. Implement Navigation

#### Use React Navigation 7
1. Install dependencies:
   &#96;&#96;&#96;bash
   npm install @react-navigation&#x2F;native @react-navigation&#x2F;native-stack
   npx expo install react-native-screens react-native-safe-area-context
   &#96;&#96;&#96;
2. Set up a stack navigator:
   &#96;&#96;&#96;tsx
   import { NavigationContainer } from &#x27;@react-navigation&#x2F;native&#x27;;
   import { createNativeStackNavigator } from &#x27;@react-navigation&#x2F;native-stack&#x27;;

   const Stack = createNativeStackNavigator();

   const App = () =&gt; (
     &lt;NavigationContainer&gt;
       &lt;Stack.Navigator initialRouteName=&quot;Home&quot;&gt;
         &lt;Stack.Screen name=&quot;Home&quot; component={HomeScreen} &#x2F;&gt;
         &lt;Stack.Screen name=&quot;Details&quot; component={DetailsScreen} &#x2F;&gt;
       &lt;&#x2F;Stack.Navigator&gt;
     &lt;&#x2F;NavigationContainer&gt;
   );

   export default App;
   &#96;&#96;&#96;

#### Deep Linking (Optional)
If your web app uses routing, set up deep linking:
&#96;&#96;&#96;tsx
&lt;NavigationContainer linking={linking}&gt;
  &lt;Stack.Navigator&gt;
    &lt;Stack.Screen name=&quot;Home&quot; component={HomeScreen} &#x2F;&gt;
  &lt;&#x2F;Stack.Navigator&gt;
&lt;&#x2F;NavigationContainer&gt;

const linking = {
  prefixes: [&#x27;yourapp:&#x2F;&#x2F;&#x27;],
  config: { screens: { Home: &#x27;&#x27; } },
};
&#96;&#96;&#96;

### 6. Test and Optimize

#### Run on Emulators
- For Android:
  &#96;&#96;&#96;bash
  npx react-native run-android
  &#96;&#96;&#96;
- For iOS:
  &#96;&#96;&#96;bash
  npx react-native run-ios
  &#96;&#96;&#96;

#### Optimize with Hermes
- Hermes is enabled by default in React Native 0.75. Verify in &#96;android&#x2F;app&#x2F;build.gradle&#96;:
  &#96;&#96;&#96;gradle
  project.ext.react = [
    enableHermes: true,
  ]
  &#96;&#96;&#96;

#### Debugging
- **React Native CLI**: Use Flipper for real-time debugging:
  &#96;&#96;&#96;bash
  npm install --save-dev @react-native-community&#x2F;flipper
  &#96;&#96;&#96;
- **Expo**: Flipper isn’t supported out-of-the-box. Use Expo DevTools, or integrate Sentry&#x2F;LogRocket manually:
  &#96;&#96;&#96;bash
  npm install @sentry&#x2F;react-native
  &#96;&#96;&#96;

### 7. Deploy to App Stores

#### For React Native CLI
- Android: Create a signed APK&#x2F;AAB:
  &#96;&#96;&#96;bash
  cd android &amp;&amp; .&#x2F;gradlew bundleRelease
  &#96;&#96;&#96;
- iOS: Archive in Xcode and submit via App Store Connect.

#### For Expo Managed Workflow
- Use EAS Build:
  &#96;&#96;&#96;bash
  npx eas build --platform android
  npx eas build --platform ios
  &#96;&#96;&#96;
- Alternatively, with classic Expo build:
  &#96;&#96;&#96;bash
  npx expo build:android
  npx expo build:ios
  &#96;&#96;&#96;

#### Dopebase Templates
[Dopebase](https:&#x2F;&#x2F;dopebase.com) provides pre-configured templates with CI&#x2F;CD setups (e.g., Fastlane) to streamline deployment. Check [instamobile.io](https:&#x2F;&#x2F;instamobile.io) for React Native options.

## Best Practices for 2025

- **Leverage TypeScript**: Use TypeScript for type safety across web and mobile codebases.
- **Optimize Images**: Use &#96;react-native-fast-image&#96; for efficient loading. Additionally:
  - Integrate &#96;react-native-svg&#96; for scalable vector graphics:
    &#96;&#96;&#96;bash
    npm install react-native-svg
    &#96;&#96;&#96;
  - Load images from CDNs like Cloudinary for dynamic content.
- **Enable Dark Mode**: Implement theming with &#96;Appearance&#96; API:
  &#96;&#96;&#96;tsx
  import { useColorScheme } from &#x27;react-native&#x27;;

  const App = () =&gt; {
    const colorScheme = useColorScheme();
    const theme = colorScheme === &#x27;dark&#x27; ? darkStyles : lightStyles;
    return &lt;View style={theme.container} &#x2F;&gt;;
  };
  &#96;&#96;&#96;
- **Platform-Specific Behaviors**: Use &#96;expo-device&#96; to detect device capabilities:
  &#96;&#96;&#96;bash
  npm install expo-device
  &#96;&#96;&#96;
  &#96;&#96;&#96;tsx
  import * as Device from &#x27;expo-device&#x27;;

  if (Device.osName === &#x27;iOS&#x27;) { &#x2F;* iOS-specific logic *&#x2F; }
  &#96;&#96;&#96;
- **Consistent Layouts**: Use &#96;react-native-responsive-dimensions&#96; for adaptive designs:
  &#96;&#96;&#96;bash
  npm install react-native-responsive-dimensions
  &#96;&#96;&#96;

## Conclusion

Migrating a web app to mobile with React Native in 2025 is a strategic move to reach wider audiences with minimal rework. By reusing your React components, adopting modern tools like Hermes, React Navigation 7, and optimizing for accessibility and performance, you can launch a native app efficiently. For a head start, [Dopebase](https:&#x2F;&#x2F;dopebase.com) offers production-ready templates at [instamobile.io](https:&#x2F;&#x2F;instamobile.io) and [instaflutter.com](https:&#x2F;&#x2F;instaflutter.com), tailored for React Native and Flutter. Follow us on [X](https:&#x2F;&#x2F;x.com&#x2F;instamobileio) or [Facebook](https:&#x2F;&#x2F;www.facebook.com&#x2F;dopebase001) for more migration tips and join our community to share your journey!

## Hashtags
#Dopebase #MobileApps #ReactNative #WebToMobile #AppDevelopment #Expo #Hermes #TypeScript #ReactNavigation #Flutter #Tech2025


## Additional Resources
- [dopebase.com](https:&#x2F;&#x2F;dopebase.com) - Mobile app development resources and templates
- [instamobile.io](https:&#x2F;&#x2F;instamobile.io) - Explore our production-ready React Native templates
- [instaflutter.com](https:&#x2F;&#x2F;instaflutter.com) - Check out our Flutter templates for cross-platform development
- [iosapptemplates.com](https:&#x2F;&#x2F;iosapptemplates.com) - Premium iOS app templates for quick development

Turning a Web App into Mobile: Migrating to React Native

## Introduction

Metro bundler errors can stop your React Native development in its tracks. Issues like &quot;Unable to resolve module&quot; or &quot;Metro server not starting&quot; are common and frustrating.

This step-by-step tutorial will guide you through fixing the most frequent Metro bundler errors, explaining their causes and solutions in a beginner-friendly way.

## Prerequisites

Before we start, make sure you have:

* Node.js version 18.18 or later
* React Native CLI or Expo CLI
* A code editor (VS Code recommended)
* Terminal access

## Common Metro Bundler Errors and How to Fix Them

### 1. Unable to Resolve Module Error

#### What Causes It?

This error happens when Metro can’t find a module, often due to:

* Incorrect file paths in import statements.
* Missing or uninstalled dependencies in &#96;node_modules&#96;.
* Corrupted Metro cache.

#### How to Fix It

**Step 1: Clear Metro Cache**

&#96;&#96;&#96;bash
npx react-native start --reset-cache
&#96;&#96;&#96;

**Step 2: Install Dependencies**

&#96;&#96;&#96;bash
npm install
# or if using Yarn
yarn install
&#96;&#96;&#96;

**Step 3: Check Your Import Paths** Make sure your imports match the actual file locations:

&#96;&#96;&#96;javascript
&#x2F;&#x2F; ✅ Correct
import MyComponent from &#x27;.&#x2F;src&#x2F;components&#x2F;MyComponent&#x27;;

&#x2F;&#x2F; ❌ Wrong - check the path is correct
import MyComponent from &#x27;.&#x2F;components&#x2F;MyComponent&#x27;;
&#96;&#96;&#96;

**Step 4: Clean Rebuild**

&#96;&#96;&#96;bash
# Delete node_modules and lock files
rm -rf node_modules package-lock.json

# Reinstall everything
npm install

# Rebuild your app
npx react-native run-android
# or
npx react-native run-ios
&#96;&#96;&#96;

#### Pro Tip

With [Dopebase’s React Native templates](https:&#x2F;&#x2F;instamobile.io), dependencies are pre-configured, so you avoid module resolution errors. Download a template and start coding without setup hassles!

### 2. Metro Server Won&#x27;t Start

#### Why This Happens

The Metro server fails to start because:

* Port 8081 is already in use
* Missing or wrong Metro configuration

#### How to Fix It

**Step 1: Check for Port Conflicts**

&#96;&#96;&#96;bash
# On macOS&#x2F;Linux
lsof -i :8081

# On Windows
netstat -ano | findstr :8081
&#96;&#96;&#96;

If you see a process using port 8081, kill it:

&#96;&#96;&#96;bash
# macOS&#x2F;Linux
kill -9 &lt;PID&gt;

# Windows
taskkill &#x2F;PID &lt;PID&gt; &#x2F;F

# Or use a different port
npx react-native start --port 8082
&#96;&#96;&#96;

**Step 2: Check Metro Configuration** Create or update &#96;metro.config.js&#96; in your project root:

&#96;&#96;&#96;javascript
const { getDefaultConfig, mergeConfig } = require(&#x27;@react-native&#x2F;metro-config&#x27;);

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);
&#96;&#96;&#96;

**Step 3: Restart Metro**

&#96;&#96;&#96;bash
# Stop Metro (Ctrl+C)
# Then start it again
npx react-native start
&#96;&#96;&#96;

### 3. Metro Bundler General Errors

#### Why This Happens

Usually caused by:

* Code syntax errors
* Incompatible dependency versions

#### Steps to Fix


1. **Check Error Logs**:
   * Look at the Metro terminal output for details (e.g., file name and line number).
   * Open the mentioned file in your code editor and fix syntax errors.
2. **Update Dependencies**:
   * Check for outdated packages:

     &#96;&#96;&#96;bash
     npm outdated
     &#96;&#96;&#96;

     or

     &#96;&#96;&#96;bash
     yarn outdated
     &#96;&#96;&#96;
   * Update dependencies carefully, referring to React Native’s [compatibility matrix](https:&#x2F;&#x2F;docs.contentsquare.com&#x2F;en&#x2F;react-native&#x2F;compatibility&#x2F;).
3. **Clean and Rebuild**:
   * For Android:

     &#96;&#96;&#96;bash
     cd android &amp;&amp; .&#x2F;gradlew clean
     cd ..
     npx react-native run-android
     &#96;&#96;&#96;
   * For iOS:
     * Clean the build and dependencies:

       &#96;&#96;&#96;bash
       cd ios
       rm -rf Pods Podfile.lock
       pod install
       cd ..
       npx react-native run-ios
       &#96;&#96;&#96;
     * Or delete the &#96;build&#96; folder and Xcode derived data:

       &#96;&#96;&#96;bash
       rm -rf ios&#x2F;build
       rm -rf ~&#x2F;Library&#x2F;Developer&#x2F;Xcode&#x2F;DerivedData
       npx react-native run-ios
       &#96;&#96;&#96;

### 4. Cache and Module Resolution Issues

#### Why This Happens

Metro gets confused about finding modules because:

* Old cache files from previous builds
* Corrupted cache
* File system issues

#### How to Fix It

**Step 1: Complete Cache Reset**

&#96;&#96;&#96;bash
# Clear Metro cache
npx react-native start --reset-cache

# Clear npm cache
npm cache clean --force

# Clear Yarn cache (if using Yarn)
yarn cache clean
&#96;&#96;&#96;

**Step 2: Reset node_modules**

&#96;&#96;&#96;bash
# Remove everything and reinstall
rm -rf node_modules package-lock.json
npm install
&#96;&#96;&#96;

**Step 3: Reset Watchman (macOS)**

&#96;&#96;&#96;bash
# Install watchman if not installed
brew install watchman

# Reset watchman
watchman watch-del-all
&#96;&#96;&#96;

## Additional Tips

### Get More Debug Information

&#96;&#96;&#96;bash
# See detailed error messages
npx react-native start --verbose
&#96;&#96;&#96;

### Platform-Specific Checks

* **iOS**: Update Xcode and iOS simulators
* **Android**: Check Android SDK is properly configured
* **macOS**: Use Homebrew to manage Node.js versions

### Environment Setup

* Check your &#96;.env&#96; files
* Set &#96;ANDROID_HOME&#96; and &#96;JAVA_HOME&#96; properly (for Android)
* Install Xcode command line tools (for iOS)

## Best Practices to Prevent Metro Bundler Errors

* **Use Expo for Simpler Setup**:
  * If you’re new to React Native, Expo simplifies Metro configuration. Try Dopebase’s Expo-compatible templates at [instamobile.io](https:&#x2F;&#x2F;instamobile.io).
* **Clear Cache Regularly**:
  * Add this command to your workflow:

    &#96;&#96;&#96;bash
    npx react-native start --reset-cache
    &#96;&#96;&#96;
* **Automate Dependency Management**:
  * Use tools like &#96;npm-check-updates&#96;:

    &#96;&#96;&#96;bash
    npx npm-check-updates -u
    npm install
    &#96;&#96;&#96;
* **Leverage Dopebase Templates**:
  * Save hours with our pre-configured React Native apps, which include optimized Metro bundlers and dependencies.

## Conclusion

Fixing Metro bundler errors doesn’t have to be a headache. By following these steps, you can resolve common issues and get back to coding. For a faster start, [Dopebase](https:&#x2F;&#x2F;dopebase.com) offers production-ready React Native templates that eliminate setup errors. Explore our templates at [instamobile.io](https:&#x2F;&#x2F;instamobile.io) for React Native or [instaflutter.com](https:&#x2F;&#x2F;instaflutter.com) for Flutter. Join our community on [Facebook](https:&#x2F;&#x2F;www.facebook.com&#x2F;dopebase001) or follow us on [X (Twitter)](https:&#x2F;&#x2F;x.com&#x2F;instamobileio) for more tips and tutorials!

## Additional Resources

* [dopebase.com](https:&#x2F;&#x2F;dopebase.com) - Mobile app development resources and templates
* [instamobile.io](https:&#x2F;&#x2F;instamobile.io) - Explore our production-ready React Native templates
* [instaflutter.com](https:&#x2F;&#x2F;instaflutter.com) - Check out our Flutter templates for cross-platform development
* [iosapptemplates.com](https:&#x2F;&#x2F;iosapptemplates.com) - Premium iOS app templates for quick development

&#x5C;


How to Fix React Native Metro Bundler Errors: A Step-by-Step Tutorial

The React Native team has been hard at work on a groundbreaking overhaul, culminating in what’s now known as the New Architecture. By 2024, this innovative update has proven its prowess, powering production apps at Meta. Explore how the New Architecture elevates the React Native development experience, delivering unmatched performance and efficiency.

#### Understanding the New Architecture

The New Architecture represents a complete redesign of React Native&#x27;s core internals, aimed at improving performance and developer experience. It encompasses both a new framework architecture and a commitment to open-source development.

#### Key Features and Improvements


1. **Synchronous Layout and Effects**
   * In the legacy architecture, layout adjustments often relied on the &#96;onLayout&#96; event, which could lead to visible rendering issues due to asynchronous updates. The New Architecture addresses this by providing synchronous access to layout information, ensuring smoother transitions and eliminating intermediate states during layout adjustments.

   **Example:** Rendering a tooltip is now more seamless, with immediate updates that avoid flickering and delays.
2. **Support for Concurrent Rendering and Modern React Features**
   * The New Architecture supports concurrent rendering, a feature introduced in React 18, allowing developers to use modern React APIs like &#96;Suspense&#96; and &#96;Transitions&#96;. These features enhance app performance and bring React Native closer in line with web development practices.

   **Example:** &#96;startTransition&#96; enables prioritization of critical UI updates, ensuring that essential interactions remain responsive even as lower-priority updates are processed in the background.
3. **Fast JavaScript&#x2F;Native Interfacing with JSI**
   * One of the most significant advancements in the New Architecture is the replacement of the asynchronous JavaScript-to-native bridge with the JavaScript Interface (JSI). JSI allows direct communication between JavaScript and native components, reducing overhead and improving performance.

   **Example:** The VisionCamera library now processes video frames in real time with minimal latency, showcasing the efficiency of JSI in handling high-volume data tasks.

#### Transitioning to the New Architecture

As of React Conf 2024, the New Architecture is in Beta, making it almost ready for widespread use. The React Native team advises developers to wait for the official release before fully adopting it to ensure the best experience. However, it is recommended to start planning for migration and to test compatibility with the New Architecture if you maintain a React Native library.

Developers interested in exploring the New Architecture can find detailed instructions and support in the React Native working group, which offers guidance and updates on the new system.

### Conclusion

The New Architecture in React Native represents a major advancement in mobile app development, offering improved performance, smoother user experiences, and better alignment with modern React practices. Although it is still in Beta, preparing for its adoption can help developers take full advantage of its benefits when it officially becomes the standard.

For more information and to get started with the New Architecture, check out the React Native working group and stay updated on the latest developments.

React Native

Configuring Over-the-Air Updates in React Native with Expo Updates

Configuring App Icons and Splash Screens in React Native

Building a Game with React Native and Axmol Engine

Building a Chat Application with React Native and Firebase

Building a Food Delivery App with React Native and Firebase

Turning a Web App into Mobile: Migrating to React Native

How to Fix React Native Metro Bundler Errors: A Step-by-Step Tutorial

Exploring the New React Native Architecture

About

Legal

Products

Resources