React Native Final Steps

You built a new reactive native app and are all set to get it rolling by making it available in the app market. What are the final steps to take note of before pitching it to the next level?

We are presenting you with a checklist to cross-check before making your react native app shipped out to the app/play stores.

Here are the final steps to follow before shipping your React Native app:

• Remove console.logs
• Remove your images 
• Remove default android permissions 
• Enable ProGuard and Hermes engine
• Quality Assurance through test executions 
• Evaluate startup speed for performance issues 
• Secure your app
• Reenable ATS

Now let us discuss the final steps of React Native app in detail:

Remove console logs

Not removing console logs can slow down your React Native app. Therefore you need to scrub out all the console logs. You can either find or replace, but some of those console logs were created after a long time and can support useful debugging. You might feel like keeping them in your code, but it is best to eliminate it from production builds. 

What are the steps involved in removing the console logs? We provide you with an official way and an unofficial way of removing your console logs. No matter which way you choose, the important thing is to remove the logs and eliminate hold-ups in your production build. 

Here is how you remove the console logs:

The official way:

The React Native app documents suggest using babel transform (npm ibabel-plugin-transform-remove-console–save-dev). Then you have to create a .babelrc to remove them all from your code. This will eliminate all the console logs from the production package. 

The unofficial way:

When you are in the Dev phase, the Dev variable can be utilised to mute logs. It is a simple approach and can provide granular control. The unofficial way has the advantage of using the original log function for something useful. For example, you can reassign the log handler to some 3rd party analytics reporting tool. You should assess ‘usefulness’ of your logs and only then should it be redirected or scrapped.

Remove your images:

Even if you have an automatic asset optimisation system in place, let us make 100% sure that the images are either removed or resized to optimise your package size. Subject your images for visual inspection and verification. This resizing and deletion of images is one of the easiest and fun parts of the final steps involved in shipping your app.

Images are the easy-to-go source of any app. Make sure you minimise and optimise the images using optimizable assets like PDF, AI models etc.

Scale up the performance of your UI by resizing images for app optimisation:

Remove default android permissions:

Your React Native app has certain permissions by default. As you built your app, it will have the following default Android permissions:

• Internet
• System alert
• Read phone state
• Read and write external storage
• Licenses

The React Native documents suggest removing these permissions as these are not explicitly listed. It is probably best to remove some of these included permissions.

Enable the ProGuard and Hermes engine

ProGuard and Hermes improve the performance of your app, provided you execute extensive testing.

ProGuard

Optimise, and shrink your Android build by turning on ProGuard. On enabling ProGuard, you must run automated tests to ensure there are no issues. It is important to run the correct ProGuard for fixing new issues. This is a configuration under the release section and is testable in your Android releases. Concoct your Android device with ProGuard to ensure that everything works finely.

Hermes

Improve your startup and byte code using Hermes. Hermes can sometimes get incompatible with your app, but it is good to experiment with it. It is quite easy to turn it on.

Quality Assurance through test executions

Development without testing is unrealistic. In prod, you will come across something no matter how good the application is, which will only turn it into a more perfectualised app. Make certain every aspect of the working of your app before the release and upgrade the app with what you missed in the next stage of dev.

Identify the strong spots and sore spots of the app in different perspectives through QA testing, which will result in perfectualising your app. 

If you turn on ProGuard and Hermes, and adjust permissions, it is important to make a thorough walk-through of each module and screen. Automated tests will help you get deeper into the application. While doing walk-throughs, make sure to turn on the Perf Monitor from your developer’s menu. If you encounter any issues in the Perf Monitor, then you have a problem to solve with profiling. If your app has a 3rd party service provider involved, it is best to make sure  that everything is updating and hitting the production rightly.

It is better to walk-through the app by adding/creating production as possible despite walk-through in staging.

You can have the following walk-throughs for ensuring the integrability of your app:

• Min and Max Walk-throughs 
• Internet Issues Walk-through 
• Accessibility Walk-throughs

Evaluate startup speed for performance issues

While writing codes, the entire JavaScript bundle should be loaded before starting the app, unless you have enabled Hermes. The critical components of your app or if your app has plenty of screens, all the codes need to be loaded before starting it. During the final rollout, this is a very important measure to ensure the performance of your app.

Take note of the following points:

• Check on bundle size
• Gather inline requisites
• Check APK size

Secure your app:

On reaching this stage, we can be quite sure that your app has undergone multiple testing phases and is ready to roll out to the app market. Now we have one critical step to pass which is securing your app.

We are positive that you have App Center or Firebase Crashlytics to alert you regarding app crashes that risk users’ experiences. Hence, to know what app crashes look like is very important.

Your apps will have the elegant outside element, but if there is a production crash, the users are going to be furious and that will be the end of it! The app icon should be clickable by the users and should be persuasive in nature. By securing your app, we mean to make your app appealing to the end-users.

Do a proper search in your code to find the probable areas where issues could happen and patch them with remedies that the user will not see.

Will you believe it if we say it is better to let the user know if there is something wrong?

Yes! For this, you can run some arbitrary code in the library, and if the error was at JavaScript level and not the Native level, you can display a nice UI apologizing. If the error is Native, you can run some JavaScripts, but don’t generate any UI reports.

Enable ATS:

ATS blocks can tamper with the minimum security specifications. React Native projects a builtin by default and hence can read bundles only. Before shipping the app, this exception should be removed. The most unfortunate as[ect of this is you will have to start developing all over again. If you need the easier way, flip this off by simply outing it back with ‘undo’.

Conclusion:

You have reached the end of the blog which means you have a reference document to understand the basics of final steps involved in shipping a React Native app. Just in case if you need the advice of an expert professional to guide you through the process of building, testing, or shipping React Native app or any other technology-supported app, Webdura is always a call away! For your React Native needs, we have the most resilient and effectual approaches and infrastructure.