DEV Community 👩‍💻👨‍💻

Aynur
Aynur

Posted on

Prepare React Native app for release

Sometimes it can be overwhelming to remember all the details you should go through on the way to release an application. To remove this burden follow this guide step-by-step.

Steps

  • App name
  • Rename bundle ID
  • Versioning
  • Icons
  • Proguard
  • Git tag

App name

For projects that weren't created with a proper name this is a necessary step - you must rename the project's name. There are two ways to do it. The easiest is with the library react-native-rename, it'll automatically change the old name to a new one for both platforms. The other way is for real nuts, change the name manually through the search of your project.

Be smart, pick the library and use this line.

npx react-native-rename "New app name"
Enter fullscreen mode Exit fullscreen mode

Rename bundle ID

For iOS you also can change the bundle ID with the same library.

npx react-native-rename -b com.yourCompany.yourApp
Enter fullscreen mode Exit fullscreen mode

Versioning

Libraries make our lives easier. This time react-native-version helps us. Instead of rewriting versions everywhere painstakingly, use one command to forget about a headache.

react-native-version --never-amend
Enter fullscreen mode Exit fullscreen mode

Icons

Generate the pack of icons for Android and iOS here and unpack it.

  • Android

Go to the folder /android/app/src/main/res.

And replace all the folders with generated ones. They'll change the default icons to new but simultaneously delete rounded ones. To fix that, open Android Studio, wait until the project and its assets get loaded, then create a new asset and set up your rounded icons like this.

Image description

Image description

  • iOS

Open the /ios folder with XCode. On the left sidebar choose: App -> Image.

Image description

Then click on AppIcon and drag and drop generated icons to its places based on the size.

Proguard

Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using.

To enable Proguard, edit android/app/build.gradle:

def enableProguardInReleaseBuilds = true
Enter fullscreen mode Exit fullscreen mode

Git versioning

Add a tag for the version on release branch.

git tag -a v1.0 -m “We are live!“
git push --tags
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

🌚 Life is too short to browse without dark mode