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

<p>To change the app name in a React Native project, you&rsquo;ll need to make adjustments both in the code and possibly in the configuration files. Here&rsquo;s a step-by-step guide on how to do it:</p> <ol> <li>Change the Display Name (Visible Name):</li> <li>To change the display name of your app that appears on the user&rsquo;s device, you typically need to modify the&nbsp;<code>app.json</code>&nbsp;or&nbsp;<code>package.json</code>&nbsp;file. Look for the&nbsp;<code>&quot;name&quot;</code>&nbsp;or&nbsp;<code>&quot;displayName&quot;</code>&nbsp;field and update it with your desired app name.</li> <li>Example&nbsp;<code>app.json</code>:</li> </ol> <pre> { &quot;name&quot;: &quot;OldAppName&quot;, &quot;displayName&quot;: &quot;NewAppName&quot;, // ... other configurations }</pre> <h1>In Android:</h1> <p>To change the app name in react native first go to your project folder and open this path in VScode,<br /> <code>android/app/src/main/res/values/string.xml</code><br /> Now you can easily change the app name in the string tag.<br /> For example:<br /> <code>&lt;string name=&quot;app_name&quot;&gt;YOUR_APP_NAME&lt;/string&gt;</code></p> <p>After changing the app name, uninstall the previous app from your device and run these commands:<br /> <code>$ cd android<br /> $ ./gradlew clean<br /> $ cd ..<br /> $ react-native run-android</code></p> <h1>For IOS:</h1> <p>Open info.plist, change the value after the key to your app name. Eg.<br /> <code>&lt;key&gt;CFBundleDisplayName&lt;/key&gt;<br /> &lt;string&gt;My New App Name&lt;/string&gt;</code><br /> Now uninstall the previous app from your device. Run<br /> <code>$ npm install<br /> $ pod install</code><br /> Now simply, you can install the new app on your device.<br /> Or you can also change the app name from Xcode.<br /> Go to Xcode, open your project in Xcode, and find the targets tab. Select your project and change the hostname with your app name.</p> <h1><strong>Update the Code References</strong>:</h1> <p>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.</p> <p><a href="https://hemanthkollanur.medium.com/how-to-change-rename-the-app-name-in-react-native-in-android-and-ios-7486653b3362">Click Here</a></p>
Tags: Code iOS Android