Whether you're building first time or rebranding or releasing an update, knowing how to change your React Native app's name, version, and icons is essential. This guide will walk you through the steps for both Android and iOS platforms.

Prerequisites

• A React Native project set up and running.

• Basic understanding of React Native project structure.

• Image files for your new app icons (follow platform-specific size guidelines).

1. Changing the App Name

• App Display Name (Visible on the device):

  • Android:

    • Open android/app/src/main/res/values/strings.xml

    • Modify the app_name string: <string name="app_name">Your New App Name</string>

  • iOS

    • Open ios/ProjectName/Info.plist

    • Modify the CFBundleDisplayName: <key>CFBundleDisplayName</key><string>Your New App Name</string>

• Internal Project Name (Technical Name):

  • app.json or package.json:

    • Look for the "name" field and update it.

2. Changing App Version

• Android

  • Open android/app/build.gradle

  • Locate versionCode (an integer, increments with major updates)

  • Locate versionName (a string, what users see)

• iOS

  • Open ios/ProjectName/Info.plist

  • Find CFBundleShortVersionString (marketing version, e.g., "1.2.0")

  • Find CFBundleVersion (build number, technical)

3. Changing App Icons

• Tools:

  • A manual approach – replace image files directly in the project folders.

  • Automated tools – consider using a tool like Image Asset Studio in Android Studio or an online icon generator. These help ensure the correct sizes and formats.

• Steps

  • Android

    • Replace relevant image files within android/app/src/main/res/mipmap-* folders (different densities).

  • iOS:

    • Use an Asset Catalog (Xcode): Open the project in Xcode, find the Assets Catalog, drag your new icons into the appropriate slots.

Important Notes:

• Clean and Rebuild: After making changes, it's often necessary to clean and rebuild your project:

  • npx react-native clean (or the equivalent in your build system)

  • npx react-native run-android or npx react-native run-ios

• Linked Assets: If you've used react-native link in the past, you might need to run it again to ensure icons update correctly.

Additional Considerations:

• Platform-Specific Guidelines: Both Apple and Google have detailed guidelines for app icons. Adhere to these for optimal results.

• Testing: Always test thoroughly after making these changes to ensure everything displays as expected.

Let me know if you want a more in-depth explanation of any specific part of the process!