React Native on Android, changing app name, package name and version code
Tags: reactnative, android, mobile
Published: 2022-09-23 03:50:15

<p>There are things one may need to change in the release build for Android.
Things like <code>App Name</code> are a case here. Suppose you start developing by initializing to a generic <code>App Name</code> and at the time of release one need to change to the actual <code>App Name</code>. The same goes for <code>package name</code>, which is visible in <code>Google Play Store</code> and as well in the <code>App details</code> of the Android phone. 
<span class="more"></span></p>

<h3>Generate with correct names</h3>

<p>Before we move forward and change things in the final version of the app. There is a way to fix this from the beginning. Generate an <code>react native</code> app with a proper package name with the command<span class="widont">&nbsp;</span>below.</p>

<pre><code>react-native init MyAwesome -package "com.name.app"</code></pre>

<p>But however if at all you have initialized the app<span class="widont">&nbsp;</span>as  </p>

<pre><code>react-native init RnApp</code></pre>

<p>then the option remains to hack things in the<span class="widont">&nbsp;</span>end.</p>

<p>So read on.</p>

<h3>App Name</h3>

<p>Lets start with <code>App Name</code>. This is the name that's visible in user's screen. To change this name, you have to change it in <code>strings.xml</code>.</p>

<p>Full path is </p>

<pre><code>android/app/src/main/res/values/strings.xml</code></pre>

<p>and the entry<span class="widont">&nbsp;</span>is </p>

<pre><code>&lt;string name="app_name"&gt;My Android App&lt;/string&gt;</code></pre>

<h3>Package name</h3>

<p>This is shown in the <code>Play Store</code> and the details in <code>About App</code> of your Android device. This should say something like <code>com.myapp</code> or <code>com.company.appname</code> or something<span class="widont">&nbsp;</span>similar. </p>

<p>To change this, you have to edit four<span class="widont">&nbsp;</span>files. </p>

<ul>
<li>android/app/src/main/java/com/reactNativeSampleApp/MainActivity.java</li>
<li>android/app/src/main/java/com/reactNativeSampleApp/MainApplication.java</li>
<li>android/app/src/main/AndroidManifest.xml ( optional as per my experience<span class="widont">&nbsp;</span>)</li>
<li>android/app/build.gradle</li>
</ul>

<p>The first two Java files have the package name as something like<span class="widont">&nbsp;</span>below.</p>

<pre><code>package com.ReactNativeApp;</code></pre>

<p>Change it to your desired package<span class="widont">&nbsp;</span>name.</p>

<pre><code>package com.myComp.MyApp;</code></pre>

<p>At this point it should be required to make the physical changes to the Java files in the proper package. But somehow it does not work! Rather it breaks the build. Just keep in mind, that we have changed the <code>package</code> names and that should reflect in the actual package. In case the builds break, you know where to<span class="widont">&nbsp;</span>find.</p>

<h3>Version Code</h3>

<p>This is a number which Google Play store recognizes and does not allow uploading another <span class="caps">APK</span> having the same value. Just think of this as build number. The same build can not be uploaded twice. So the point is every time, you make a build or release-apk, you must have a different number or more specifically incremental number. If your first version of the application has a version code of 5, then the second version must have a version code which is more than<span class="widont">&nbsp;</span>5. </p>

<p>Along with version code, you might need to update the <code>version name</code> also. Which is the version number of your application and visible in Google Play<span class="widont">&nbsp;</span>Store. </p>

<p>While <code>version code</code> is used by <code>Play Store</code> to manage your <span class="caps">APK</span>, <code>version name</code> is used by <code>Play Store</code> to notify user that an update to your app is<span class="widont">&nbsp;</span>available.</p>

<p>To change these two values, you need to<span class="widont">&nbsp;</span>edit </p>

<ul>
<li>android/app/build.gradle</li>
<li>android/app/src/main/AndroidManifest.xml (optional as per my experience<span class="widont">&nbsp;</span>)</li>
</ul>

<p>These settings are taken from <code>build.gradle</code> while making a build with <code>gradle</code> but for the purpose of sanity, it's better to change in both of the files<span class="widont">&nbsp;</span>above. </p>

<h3>Making the release build</h3>

<p>Finally making a release build is done from inside the <code>android</code> folder of the <code>React Native</code> application. The commands are as<span class="widont">&nbsp;</span>below.</p>

<pre><code>./gradlew clean
./gradlew assembleRelease</code></pre>

<p>Done</p>