DEV Community: Tarang patel

React Native App Bloat: Why Your App is Too Big and How to Fix It

Tarang patel — Wed, 09 Sep 2026 16:23:05 +0000

You've built an amazing React Native app, performance is snappy, and your UI is gorgeous. But then you see the APK/AAB size: 80MB+. Ouch.

That number is more than just a number. It's a silent killer of your install rates, a drag on your user experience on slow networks, and a major factor in uninstalls, especially for Android users.

In production, every megabyte costs you users.

We're going through 9 battle-tested, production-ready techniques to get your app down to a lean, mean, install-machine without sacrificing a single feature. Let's fix this.

Why App Size Matters in Production

Before diving into solutions, let's understand the real-world impact:

Lower install conversion on Play Store
Slower downloads on poor networks
Higher uninstall rates
Users avoiding updates due to storage constraints

Common Reasons React Native Apps Are Large

Unoptimized assets (images, fonts, videos)
Unused native dependencies
Debug code shipped in production
Large JavaScript bundles
Multiple CPU architectures bundled together
Duplicate libraries from poor dependency management

Let's fix them one by one.

1. Enable Proguard & R8 (Android)

Many production apps ship with unused Java/Kotlin code.

Enable R8 (Recommended)

In android/gradle.properties:

android.enableR8=true

In android/app/build.gradle:

minifyEnabled true
shrinkResources true

Benefits

Removes unused classes
Shrinks bytecode
Reduces APK/AAB size significantly

Typical reduction: 5–20 MB

2. Use Android App Bundles (AAB)

If you're still shipping APKs, you're already losing.

Switch to AAB

cd android
./gradlew bundleRelease

Why AAB helps

Delivers only required resources per device
Splits by ABI, density, and language

Size reduction: 20–40% for Android users

3. Reduce Native Architectures (ABI Splits)

By default, React Native includes all CPU architectures.

Enable ABI splits

In android/app/build.gradle:

splits {
    abi {
        enable true
        reset()
        include "armeabi-v7a", "arm64-v8a"
        universalApk false
    }
}

4. Optimize Images & Assets

Common Mistake

Shipping raw PNGs straight from design tools.

Best Practices

Use WebP instead of PNG/JPEG
Compress images using tools like:
- TinyPNG
- ImageOptim
Avoid bundling unused images

For icons

Prefer vector icons
Remove unused glyphs from icon fonts

Savings: Huge in image-heavy apps

5. Remove Unused Dependencies

Production apps accumulate dead dependencies over time.

Audit dependencies

npm ls

Ask:

Is this library still used?
Is it worth the native size cost?

Common heavy libraries

Multiple date libraries
Redundant UI libraries
Analytics SDKs added "just in case"

Savings: Varies, but often significant

6. Disable Debug & Dev Tools in Production

Make sure these are not shipped:

React DevTools
Flipper
Console logs
Debug-only native code

Disable Flipper (Android)

debugImplementation "com.facebook.flipper:flipper"
releaseImplementation ""

Savings: Several MBs + runtime benefits

7. Enable Hermes Engine

Hermes is a game changer for both performance and size.

Enable Hermes

In android/app/build.gradle:

enableHermes: true

Benefits

Smaller JS bundle
Faster startup
Lower memory usage

Savings: 5–10 MB

8. Reduce JavaScript Bundle Size

Techniques

Code splitting
Lazy loading screens
Remove unused imports
Avoid large utility libraries

Example

Instead of importing the entire Lodash package:

import _ from 'lodash';

Use only the function you need:

import debounce from 'lodash/debounce';

Smaller JS = faster app + smaller binary

9. Fonts: The Silent App Size Killer

Common Issue

Bundling entire font families for a few characters.

Fix

Use only required font weights
Subset fonts
Remove unused custom fonts

Savings: 1–5 MB

Conclusion

Reducing app size isn't a one-time task; it's a continuous production discipline.

Teams that actively monitor app size:

Ship faster updates
Improve user trust
Increase install rates
Reduce churn

If you treat app size as a first-class metric, your React Native app will scale better in the real world.

A Complete CI CD Pipeline for React Native

Tarang patel — Sun, 06 Sep 2026 01:12:43 +0000

> A production-grade setup covering pre-commit checks, automated builds, and store deployment via GitHub Actions and Fastlane.

Pre-commit Hooks

yarn add -D husky lint-staged prettier
yarn husky init

Before every commit, lint-staged runs three quick jobs on the changed files:

removeConsoleLogs.js removes stray console.log calls.
Prettier formats the code.
ESLint fixes what it can automatically.

`package.json`

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "node scripts/removeConsoleLogs.js",
      "prettier --write",
      "eslint --fix"
    ]
  }
}

`scripts/removeConsoleLogs.js`

const fs = require('fs');

const file = process.argv[2];
const original = fs.readFileSync(file, 'utf8');

const cleaned = original.replace(
  /^\s*console\.(log|debug|info)\([^)]*\);?\s*$/gm,
  ''
);

if (cleaned !== original) {
  fs.writeFileSync(file, cleaned);
}

`.husky/pre-commit`

npx lint-staged

Fastlane

Fastlane wraps your build commands into lanes, so local and CI runs stay identical.

Set it up per platform (android/fastlane and ios/fastlane):

echo "gem 'fastlane'" >> Gemfile
bundle install

cd android && bundle exec fastlane init && cd ..
cd ios && bundle exec fastlane init && cd ..

iOS Appfile

Appfile keeps your identifiers out of the Fastfile.

Variable	Description
`DEVELOPER_APP_IDENTIFIER`	Your app's Bundle ID — in Xcode, select your project and open the General tab.
`FASTLANE_APPLE_ID`	The email used to access your Apple ID.
`APP_STORE_CONNECT_TEAM_ID`	Shown next to your name under Users and Access in App Store Connect.
`DEVELOPER_PORTAL_TEAM_ID`	Your Team ID from the Apple Developer portal under Membership.

`ios/fastlane/Appfile`

app_identifier(ENV["DEVELOPER_APP_IDENTIFIER"])
apple_id(ENV["FASTLANE_APPLE_ID"])
itc_team_id(ENV["APP_STORE_CONNECT_TEAM_ID"])
team_id(ENV["DEVELOPER_PORTAL_TEAM_ID"])

Android Appfile

For Android, json_key_file is your Play Console service account key.

Play Console setup

Go to Play Console → API access.
Create a service account in Google Cloud Console.
Download its JSON key.
Grant it Release apps to testing tracks back in Play Console.

`android/fastlane/Appfile`

json_key_file("<path-to-play-console-service-account>.json")
package_name("com.yourcompany.app")

iOS Certificates with `match`

Certificates with match store your distribution certificate and provisioning profile encrypted in a private Git repository, so CI can pull them instead of relying on your local keychain.

Variable	Description
`MATCH_PASSWORD`	Password used to retrieve certificates from GitHub. You choose this yourself; `match init` will prompt you for it along with your repository URL.
`GIT_AUTHORIZATION`	Also referred to as the Git authorization token. Create one using the appropriate guide, then format it as `username:token`.

cd ios

bundle exec fastlane match init
# Creates ios/fastlane/Matchfile

bundle exec fastlane match appstore
# Syncs App Store certificate + profile

Check the official documentation for more details.

Android Fastfile

The following environment variables are used for Android signing:

Variable	Description
`ANDROID_KEYSTORE_FILE`	Path to your existing release `.jks`/`.keystore` file. If you need a new one, run the command below.
`ANDROID_KEYSTORE_ALIAS`	The `-alias` used when generating the keystore.
`ANDROID_KEYSTORE_PASSWORD`	The password you set when generating the keystore.

To generate a new keystore if needed:

keytool -genkeypair -v \
  -keystore your_keystore.jks \
  -keyalg RSA \
  -keysize 2048 \
  -validity 10000 \
  -alias your_alias

`android/fastlane/Fastfile`

default_platform(:android)

platform :android do
  desc 'Submit a new build to Play Store'

  lane :deploy_to_play_store do
    # Bump versionCode/versionName in build.gradle
    # so every release is versioned automatically
    increment_version_code(gradle_file_path: "app/build.gradle")
    increment_version_name(
      gradle_file_path: "app/build.gradle",
      bump_type: "patch"
    )

    # Build a signed release .aab using the keystore secrets
    gradle(
      task: 'clean bundleRelease',
      project_dir: './android',
      properties: {
        "android.injected.signing.store.file" => ENV['ANDROID_KEYSTORE_FILE'],
        "android.injected.signing.store.password" => ENV['ANDROID_KEYSTORE_PASSWORD'],
        "android.injected.signing.key.alias" => ENV['ANDROID_KEYSTORE_ALIAS'],
        "android.injected.signing.key.password" => ENV['ANDROID_KEYSTORE_PASSWORD']
      }
    )

    # Upload the .aab to Play Store as a draft on the production track
    upload_to_play_store(
      track: 'production',
      release_status: "draft",
      aab: File.absolute_path(
        '../android/app/build/outputs/bundle/release/app-release.aab'
      )
    )
  end
end

iOS Fastfile

The iOS Fastfile:

Sets up a temporary CI keychain.
Pulls certificates via match.
Builds the app.
Ships it to TestFlight.

Environment variables

Variable	Description
`TEMP_KEYCHAIN_USER`	Any name you pick — only used to create a throwaway keychain in CI.
`TEMP_KEYCHAIN_PASSWORD`	Any password you pick — only used to create a throwaway keychain in CI.
`APPLE_KEY_ID`	From App Store Connect → Users and Access → Integrations → Keys.
`APPLE_ISSUER_ID`	The Issuer ID shown at the top of the App Store Connect API Keys page.
`APPLE_KEY_CONTENT`	The private key file (`.p8`) downloaded when creating the API key. Open it in a text editor and copy the full `-----BEGIN/END PRIVATE KEY-----` content.
`DEVELOPER_APP_ID`	Your app's numeric Apple ID — in App Store Connect under App Information.
`PROVISIONING_PROFILE_SPECIFIER`	Match `AppStore <DEVELOPER_APP_IDENTIFIER>` — the profile name `match` creates for you.

`ios/fastlane/Fastfile`

default_platform(:ios)

def ensure_temp_keychain(name, password)
  delete_keychain(name: name) if File.exist?(
    File.expand_path("~/Library/Keychains/#{name}-db")
  )

  create_keychain(
    name: name,
    password: password,
    unlock: false,
    timeout: 0
  )
end

platform :ios do
  desc "Submit a new build to App Store"

  lane :deploy_to_app_store do
    # Bump the version number in Info.plist
    # so every release is versioned automatically
    increment_version_number(bump_type: "patch")

    # Create a clean, temporary keychain for CI to store certs in
    ensure_temp_keychain(
      ENV["TEMP_KEYCHAIN_USER"],
      ENV["TEMP_KEYCHAIN_PASSWORD"]
    )

    # Authenticate with App Store Connect using an API key
    # (no Apple ID prompt in CI)
    api_key = app_store_connect_api_key(
      key_id: ENV["APPLE_KEY_ID"],
      issuer_id: ENV["APPLE_ISSUER_ID"],
      key_content: ENV["APPLE_KEY_CONTENT"],
      duration: 1200,
      in_house: false
    )

    # Pull the distribution cert + provisioning profile
    # from the match git repo
    match(
      type: 'appstore',
      app_identifier: ENV["DEVELOPER_APP_IDENTIFIER"],
      git_basic_authorization: Base64.strict_encode64(
        ENV["GIT_AUTHORIZATION"]
      ),
      readonly: true,
      keychain_name: ENV["TEMP_KEYCHAIN_USER"],
      keychain_password: ENV["TEMP_KEYCHAIN_PASSWORD"],
      api_key: api_key
    )

    # Build the signed .ipa
    ipa = gym(
      configuration: "Release",
      export_xcargs: "-allowProvisioningUpdates",
      workspace: 'YourApp.xcworkspace',
      scheme: "YourApp Release",
      export_method: "app-store",
      export_options: {
        provisioningProfiles: {
          ENV["DEVELOPER_APP_ID"] => ENV["PROVISIONING_PROFILE_SPECIFIER"]
        }
      }
    )

    # Ship the build to TestFlight for internal testers
    pilot(
      apple_id: ENV["DEVELOPER_APP_ID"],
      app_identifier: ENV["DEVELOPER_APP_IDENTIFIER"],
      distribute_external: false,
      notify_external_testers: true,
      uses_non_exempt_encryption: false,
      ipa: ipa,
      skip_waiting_for_build_processing: true
    )
  end
end

Test Locally

Android

cd android && bundle exec fastlane deploy_to_play_store

iOS

cd ios && bundle exec fastlane deploy_to_app_store

GitHub Actions

One workflow, one file.

Lint and test first; deploy jobs only fire on master, once those checks pass.

Add all the environment variables from the Fastlane setup as secrets under:

Settings → Secrets and variables → Actions

`.github/workflows/mobile-pipeline.yml`

name: Mobile Build Pipeline

# Runs on every PR targeting master
on:
  pull_request:
    branches: [master]

jobs:
  # Lints and tests the JS/TS code — gatekeeper for both deploy jobs below
  lint-and-test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'yarn'

      - run: yarn install --frozen-lockfile
      - run: yarn lint
      - run: yarn test --watchAll=false

  # Builds and ships the Android app to Play Store
  # — only runs if lint-and-test passes
  deploy-android:
    needs: lint-and-test
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'yarn'

      - run: yarn install --frozen-lockfile

      - uses: actions/setup-java@v4
        with:
          distribution: 'temurin'
          java-version: '17' # needed to build with Gradle

      - uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.3'
          bundler-cache: true # Fastlane runs on Ruby

      - run: cd android && bundle exec fastlane deploy_to_play_store
        # bumps version, builds, uploads

    env:
      ANDROID_KEYSTORE_FILE: ${{ secrets.ANDROID_KEYSTORE_FILE }}
      ANDROID_KEYSTORE_PASSWORD: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}
      ANDROID_KEYSTORE_ALIAS: ${{ secrets.ANDROID_KEYSTORE_ALIAS }}

  # Builds and ships the iOS app to TestFlight
  # — only runs if lint-and-test passes
  deploy-ios:
    needs: lint-and-test
    runs-on: macos-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'yarn'

      - run: yarn install --frozen-lockfile

      - run: cd ios && pod install
        # installs native iOS dependencies

      - uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.3'
          bundler-cache: true # Fastlane runs on Ruby

      - run: cd ios && bundle exec fastlane deploy_to_app_store
        # bumps version, signs, builds, ships

    env:
      APPLE_KEY_ID: ${{ secrets.APPLE_KEY_ID }}
      APPLE_ISSUER_ID: ${{ secrets.APPLE_ISSUER_ID }}
      APPLE_KEY_CONTENT: ${{ secrets.APPLE_KEY_CONTENT }}
      MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}
      GIT_AUTHORIZATION: ${{ secrets.GIT_AUTHORIZATION }}
      TEMP_KEYCHAIN_USER: ${{ secrets.TEMP_KEYCHAIN_USER }}
      TEMP_KEYCHAIN_PASSWORD: ${{ secrets.TEMP_KEYCHAIN_PASSWORD }}

Conclusion

With pre-commit hooks, Fastlane, and GitHub Actions wired together, every merge to master is linted, tested, versioned, and shipped — no manual steps, no missed builds.

Dynamic App Icon In React Native

Tarang patel — Wed, 02 Sep 2026 13:40:26 +0000

Have you ever noticed apps changing their launcher icons during holidays, special events, or promotional campaigns? A shopping application might switch to a festive holiday icon during Christmas, a sports app might brand itself for the World Cup, or a finance tool might offer an exclusive sleek icon for premium subscribers. The most impressive aspect of this mechanism is that users do not need to download an app update from the App Store or Google Play Store. The app simply toggles its active icon to another asset already bundled within the installation package.

In this comprehensive guide, we will explore what dynamic app icons are, why they are beneficial for user engagement, how native platforms support them, and a complete step-by-step technical implementation in React Native using the react-native-change-icon library.

What Are Dynamic App Icons?

Dynamic app icons allow an application to switch between multiple app icons that are already pre-bundled within the compiled build. Instead of releasing a full software update every time you want to refresh your branding, you programmatically instruct the host operating system (iOS or Android) to enable a different predefined icon asset.

THE WARDROBE ANALOGY

Think of dynamic icons like having several shirts in your wardrobe. You don't buy a brand-new shirt every single morning—you simply choose a different one from your existing collection depending on the occasion. Dynamic app icons operate on the exact same principle.

Why Use Dynamic App Icons?

Seasonal Themes: Refresh your app's look for holidays such as Christmas, Halloween, New Year, Diwali, or Black Friday to keep the app feeling timely and active.
Promotions & Campaigns: Promote limited-time events, flash sales, or badge discounts (e.g., "50% OFF") directly on the home screen without demanding an update.
Premium Personalization: Provide paid subscribers or VIP users with exclusive, high-end app icons as a reward, enhancing perceived product value.
Special Brand Events: Align icon visuals with real-time milestones like product launches, major sports tournaments, or company anniversaries.

How Does It Work Under the Hood?

While React Native does not natively expose dynamic icon APIs directly out of the box, both Android and iOS offer native OS-level capabilities to handle icon swapping:

iOS (CFBundleAlternateIcons): iOS allows developers to define primary and alternate icons in the Info.plist file. The system uses UIApplication.shared.setAlternateIconName() to switch icons dynamically at runtime.
Android (Activity Aliases): Android achieves icon changing through <activity-alias> declarations in AndroidManifest.xml. Each alias points to the main MainActivity but specifies a different android:icon asset. The native module enables one alias while disabling the others using PackageManager.setComponentEnabledSetting().

Step-by-Step Implementation in React Native

We will use the popular react-native-change-icon library, which provides a clean JavaScript bridge over native iOS and Android icon APIs.

Step 1: Install the Library

Add the library to your React Native project using your preferred package manager:

# Using npm
npm install react-native-change-icon

# Or using Yarn
yarn add react-native-change-icon

# For iOS CocoaPods
cd ios && pod install && cd ..

Step 2: Prepare Your App Icon Assets

Because dynamic icons cannot be downloaded over the network at runtime, all icon variants must be created and bundled before compiling the app. Create all necessary dimensions for iOS (AppIcon sets) and Android (mipmap folders) for each variant:

Default Icon: Standard primary app icon
Christmas Icon: Holiday variant
Dark Icon: Dark mode / AMOLED theme icon
Premium Icon: Exclusive icon for paid members
Sale Icon: Promotional variant

Step 3: Configure iOS (`Info.plist`)

Declare all alternate icons in your iOS project's Info.plist file under the CFBundleAlternateIcons dictionary key. Ensure the string names match the asset file names in Xcode:

<key>CFBundleIcons</key>
<dict>
    <key>CFBundleAlternateIcons</key>
    <dict>
        <key>Christmas</key>
        <dict>
            <key>CFBundleIconFiles</key>
            <array>
                <string>ChristmasIcon</string>
            </array>
            <key>UIPrerenderedIcon</key>
            <false/>
        </dict>
        <key>Dark</key>
        <dict>
            <key>CFBundleIconFiles</key>
            <array>
                <string>DarkIcon</string>
            </array>
        </dict>
    </dict>
</dict>

Step 4: Configure Android (`AndroidManifest.xml`)

In android/app/src/main/AndroidManifest.xml, define an <activity-alias> for each alternate icon. Each alias targets MainActivity:

<!-- Main Launcher Activity -->
<activity
    android:name=".MainActivity"
    android:exported="true">
</activity>

<!-- Alternate Icon Alias: Christmas -->
<activity-alias
    android:name=".ChristmasAlias"
    android:enabled="false"
    android:icon="@mipmap/ic_launcher_christmas"
    android:targetActivity=".MainActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity-alias>

Step 5 & 6: Import & Change Icons Programmatically

Import the module into your JavaScript / TypeScript code and invoke the changeIcon method:

import ChangeIcon from "react-native-change-icon";

// Switch to Christmas icon
const enableChristmasIcon = async () => {
  try {
    const response = await ChangeIcon.changeIcon("Christmas");
    console.log("Icon changed successfully:", response);
  } catch (error) {
    console.error("Failed to change icon:", error);
  }
};

// Revert back to Default Icon
const resetToDefaultIcon = async () => {
  await ChangeIcon.changeIcon(); // Passing empty parameter resets to default
};

Step 7: Tying Icon Swapping to Application Logic

Dynamically triggering icon updates based on state, context, or runtime properties gives this feature its power:

// Dynamic logic switch example
const updateAppIcon = async (user, theme, isHoliday) => {
  if (isHoliday) {
    await ChangeIcon.changeIcon("Christmas");
  } else if (user.isPremium) {
    await ChangeIcon.changeIcon("Premium");
  } else if (theme === "dark") {
    await ChangeIcon.changeIcon("Dark");
  } else {
    await ChangeIcon.changeIcon(); // Default
  }
};

Step 8: Remote Management via Firebase Remote Config

Combining dynamic app icons with Firebase Remote Config (or any remote feature flagging service) allows total over-the-air branding control:

import remoteConfig from "@react-native-firebase/remote-config";
import ChangeIcon from "react-native-change-icon";

const syncRemoteIcon = async () => {
  await remoteConfig().fetchAndActivate();
  const remoteIconName = remoteConfig().getString("app_icon_key");

  // Get current active icon to prevent unnecessary re-swaps
  const currentIcon = await ChangeIcon.getIcon();

  if (remoteIconName && remoteIconName !== currentIcon) {
    await ChangeIcon.changeIcon(remoteIconName);
  }
};

KEY ADVANTAGE

Updating the app_icon_key parameter in the Firebase console instantaneously shifts the app icon for all targeted users the next time their app fetches configuration—zero store reviews or updates required!

Important Caveats & Best Practices

Pre-bundled Requirement: Dynamic icon updates are limited strictly to assets compiled into the app binary. You cannot download image URLs at runtime and set them as icons.
Avoid Rapid Swapping: Changing app icons too frequently can confuse users who are searching for your app on their home screen. Reserve icon changes for meaningful events, holidays, or explicit user settings.
Platform Differences & OS Alerts: iOS often displays a native system prompt informing the user that the app icon has changed. Android may briefly close or refresh the launcher task when an activity-alias is toggled.
Brand Consistency: Maintain key brand elements (like logo silhouettes or core colors) across all custom icons so users can still identify your app instantly.
Thorough Testing: Test every alternate icon configuration across both platforms on physical devices. Verify persistence after app restarts and phone reboots.

Conclusion

Dynamic app icons offer a refined, impactful way to keep your React Native app fresh, engaging, and context-aware. By combining pre-bundled native icon assets with react-native-change-icon and remote configuration services, you gain full control over your app's home screen presence—delivering timely visual experiences without forcing users through app store update cycles.

Deep Linking in React Native

Tarang patel — Tue, 25 Aug 2026 04:41:47 +0000

A Complete Mobile Developer Guide to Schemes, Universal Links, App Links, and Navigation Deep linking looks trivial in a hello-world demo. You add a custom scheme, tap a link, the app pops open—magic!

Then your marketing team runs an email campaign, a user taps a link in Gmail on iOS, it opens Safari with a 404 error instead of your app, and you spend your Friday evening reading Apple’s apple-app-site-association docs trying to figure out why.

KEY TAKEAWAY: Deep linking is 80% OS/server configuration and 20% React Native code. Here is how deep linking actually works, why links break, and how to set them up cleanly using modern React Native patterns.

1. The 3 Types of Deep Links

Before opening Xcode or Android Studio, clarify what you are building:

Custom Schemes (myapp://path): Simple setup. Works great for inter-app handoffs (like OAuth callbacks or Stripe returns). Problem: If the app isn't installed, the link breaks. Worse, email clients like Gmail routinely strip custom schemes.

Universal Links (iOS) & App Links (Android): Standard https:// URLs that open your app directly if installed. If not installed, they fall back smoothly to your website.

Deferred Deep Links: Tapping a link sends the user to the App Store, and after they install it, your app still lands them on the specific screen they initially tapped. Operating systems don't handle this out-of-the-box; you need tools like Branch.io or custom fingerprinted landing pages.

2. Server-Side Setup: Proving Domain Ownership

To use https:// links, both iOS and Android require you to host a static JSON file on your web domain. This proves to the OS that your app actually owns yourdomain.com.
iOS: apple-app-site-association (AASA)
Host this file at https://yourdomain.com/.well-known/apple-app-site-association
CRITICAL NOTE: No json extension in the file name! Ensure it is served with Content-Type: application/json.

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "A1B2C3D4E5.com.yourcompany.yourapp",
        "paths": ["/products/*", "/profile/*"]
      }
    ]
  }
}

Note: Replace A1B2C3D4E5 with your Apple Team ID and com.yourcompany.yourapp with your Bundle Identifier.

Android: assetlinks.json
Host this file at https://yourdomain.com/.well-known/assetlinks.json

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.yourcompany.yourapp",
      "sha256_cert_fingerprints": [
        "14:6D:E9:7C:..."
      ]
    }
  }
]

To get your SHA256 fingerprint, run:

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

3. Configuring Native Code

iOS Setup

In Xcode, select your app target → Signing & Capabilities → + Capability → Associated Domains.
Add your domain prefixed with applinks: (e.g., applinks:yourdomain.com).
Open AppDelegate.mm (or AppDelegate.swift) and make sure React Native's RCTLinkingManager receives incoming URLs:

// AppDelegate.swift
import React

override func application(
  _ app: UIApplication,
  open url: URL,
  options: [UIApplication.OpenURLOptionsKey : Any] = [:]
) -> Bool {
  return RCTLinkingManager.application(app, open: url, options: options)
}

// Required for Universal Links
override func application(
  _ application: UIApplication,
  continue userActivity: NSUserActivity,
  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
) -> Bool {
  return RCTLinkingManager.application(
    application, 
    continue: userActivity, 
    restorationHandler: restorationHandler
  )
}

Android Setup

Inside android/app/src/main/AndroidManifest.xml, update your MainActivity with an intent filter. Notice android:autoVerify="true"—this tells Android to fetch your assetlinks.json upon app installation.

<activity
  android:name=".MainActivity"
  android:launchMode="singleTask"
  android:exportExported="true">

  <!-- Custom Scheme -->
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" />
  </intent-filter>

  <!-- App Links -->
  <intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="yourdomain.com" />
  </intent-filter>
</activity>

4. Handling Links in React Native

If you are using React Navigation, deep link mapping is practically built-in. Define a linking configuration and pass it to your NavigationContainer.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';

const linking = {
  prefixes: ['myapp://', 'https://yourdomain.com'],
  config: {
    screens: {
      Home: 'home',
      ProductDetails: {
        path: 'products/:id',
        parse: {
          id: (id: string) => `prod_${id}`,
        },
      },
      NotFound: '*',
    },
  },
};

export default function App() {
  return (
    <NavigationContainer linking={linking} fallback={<LoadingSpinner />}>
      {/* Your Stack / Navigator */}
    </NavigationContainer>
  );
}

Manual Handling (Bare React Native Linking API)

If you aren't using React Navigation or need to parse custom logic before opening a screen:

import { useEffect } from 'react';
import { Linking } from 'react-native';

export function useDeepLinking() {
  useEffect(() => {
    // 1. App was closed and opened via deep link
    Linking.getInitialURL().then((url) => {
      if (url) handleUrl(url);
    });

    // 2. App was running in background/foreground
    const subscription = Linking.addEventListener('url', ({ url }) => {
      handleUrl(url);
    });

    return () => subscription.remove();
  }, []);

  const handleUrl = (url: string) => {
    console.log('Incoming URL:', url);
    // Parse query params or path logic here
  };
}

5. Testing & Debugging

TESTING TIP: Don't test by typing URLs directly into Safari/Chrome address bars! Browsers assume you are trying to visit a web page and won't trigger the OS handoff.
Instead paste a link on notes & press it. OR

iOS Simulator

Run this from your terminal while the simulator is running:

xcrun simctl openurl booted "myapp://products/42"
# Or test universal links:
xcrun simctl openurl booted https://yourdomain.com/products/42

Android Emulator / Real Device

adb shell am start -W -a android.intent.action.VIEW \
  -d "https://yourdomain.com/products/42" com.yourcompany.yourapp

Troubleshooting Checklist

App opens Safari instead of opening the app: Check if your apple-app-site-association file is returning a 200 OK with application/json headers. Apple caches this file heavily on installation; reinstall the app after making changes.
Android App Links failing: Run adb shell pm get-app-links com.yourcompany.yourapp. If status says legacy or failed, your assetlinks.json SHA256 fingerprint doesn't match your app's signing key.
Link wrapped by Email Tracking Services: SendGrid/Mailchimp rewrite URLs for click tracking. This breaks Universal Links because the domain changes to the tracker's domain. Enable SSL click tracking on a dedicated subdomain or configure domain-proxying in SendGrid.

Conclusion: Get It Right Before Launches

Deep linking isn't about writing complex React Native logic—it’s about getting the OS handshakes and domain verification right.
If you take away three rules from this guide:
Always use Universal/App Links for public-facing URLs and keep custom schemes strictly for internal or OAuth callbacks.
Double-check your server headers—Apple and Android won't verify your domain if your JSON files return the wrong Content-Type or redirect.
Test early via CLI, not browser URL bars, and build a staging test link setup into your CI pipeline.

DEV Community: Tarang patel

React Native App Bloat: Why Your App is Too Big and How to Fix It

Why App Size Matters in Production

Common Reasons React Native Apps Are Large

1. Enable Proguard & R8 (Android)

Enable R8 (Recommended)

Benefits

2. Use Android App Bundles (AAB)

Switch to AAB

Why AAB helps

3. Reduce Native Architectures (ABI Splits)

Enable ABI splits

4. Optimize Images & Assets

Common Mistake

Best Practices

For icons

5. Remove Unused Dependencies

Audit dependencies

Common heavy libraries

6. Disable Debug & Dev Tools in Production

Disable Flipper (Android)

7. Enable Hermes Engine

Enable Hermes

Benefits

8. Reduce JavaScript Bundle Size

Techniques

Example

9. Fonts: The Silent App Size Killer

Common Issue

Fix

Conclusion

A Complete CI CD Pipeline for React Native

Pre-commit Hooks

package.json

scripts/removeConsoleLogs.js

.husky/pre-commit

Fastlane

iOS Appfile

ios/fastlane/Appfile

Android Appfile

Play Console setup

android/fastlane/Appfile

iOS Certificates with match

Android Fastfile

android/fastlane/Fastfile

iOS Fastfile

Environment variables

ios/fastlane/Fastfile

Test Locally

Android

iOS

GitHub Actions

.github/workflows/mobile-pipeline.yml

Conclusion

Dynamic App Icon In React Native

What Are Dynamic App Icons?

Why Use Dynamic App Icons?

How Does It Work Under the Hood?

Step-by-Step Implementation in React Native

Step 1: Install the Library

Step 2: Prepare Your App Icon Assets

Step 3: Configure iOS (Info.plist)

Step 4: Configure Android (AndroidManifest.xml)

Step 5 & 6: Import & Change Icons Programmatically

Step 7: Tying Icon Swapping to Application Logic

Step 8: Remote Management via Firebase Remote Config

Important Caveats & Best Practices

Conclusion

Deep Linking in React Native

1. The 3 Types of Deep Links

2. Server-Side Setup: Proving Domain Ownership

3. Configuring Native Code

iOS Setup

Android Setup

4. Handling Links in React Native

Manual Handling (Bare React Native Linking API)

5. Testing & Debugging

iOS Simulator

Android Emulator / Real Device

Troubleshooting Checklist

`package.json`

`scripts/removeConsoleLogs.js`

`.husky/pre-commit`

`ios/fastlane/Appfile`

`android/fastlane/Appfile`

iOS Certificates with `match`

`android/fastlane/Fastfile`

`ios/fastlane/Fastfile`

`.github/workflows/mobile-pipeline.yml`

Step 3: Configure iOS (`Info.plist`)

Step 4: Configure Android (`AndroidManifest.xml`)