How to change/rename the app name in react-native(in android and IOS):

React Native series

To change the app name in a React Native project, you’ll need to make adjustments both in the code and possibly in the configuration files. Here’s a step-by-step guide on how to do it:

1. Change the Display Name (Visible Name):
2. To change the display name of your app that appears on the user’s device, you typically need to modify the app.json or package.json file. Look for the "name" or "displayName" field and update it with your desired app name.
3. Example app.json:

{
  "name": "OldAppName",
  "displayName": "NewAppName",
  // ... other configurations
}

In Android:

To change the app name in react native first go to your project folder and open this path in VScode,
android/app/src/main/res/values/string.xml
Now you can easily change the app name in the string tag.
For example:
<string name="app_name">YOUR_APP_NAME</string>

After changing the app name, uninstall the previous app from your device and run these commands:
$ cd android
$ ./gradlew clean
$ cd ..
$ react-native run-android

For IOS:

Open info.plist, change the value after the key to your app name. Eg.
<key>CFBundleDisplayName</key>
<string>My New App Name</string>
Now uninstall the previous app from your device. Run
$ npm install
$ pod install
Now simply, you can install the new app on your device.
Or you can also change the app name from Xcode.
Go to Xcode, open your project in Xcode, and find the targets tab. Select your project and change the hostname with your app name.

Update the Code References:

After changing the display name, you might need to update any code references to the old app name. This includes places where you might have used the app name as a string, for example, in headers, titles, or links.

Clear Cache and Rebuild:

To ensure that the changes take effect, it’s a good idea to clear the build cache and rebuild your app. You can do this by running the following commands in your project directory:

npx react-native start — reset-cache
npx react-native run-android
npx react-native run-ios

Remember:-

that making these changes might also affect other parts of your app, such as deep linking or push notification settings, especially if you’re using the app name in those contexts. Be sure to thoroughly test your app after making these changes to catch any potential issues.

Collect your merchants here