I started working with React-Native slightly more than an year ago and through this time I developed several projects that hit both stores and during this period I picked up the essential tools and tips which in my opinion would boost and improve the productivity and the quality of the end product.

I’m not going to describe the entire process of something like “How to start using React-Native” or “Why A is better than B” , instead I’m focusing on people who already have some experience working with this technology and who can decide or research on their own whether to use these tips or not.

Integrated Development Environment (IDE)

“A brown mug next to a MacBook with lines of code on its screen” by Artem Sapegin on Unsplash

It’s all starts with an IDE inside of which you’re going to spend most of your time writing you code. First, I started working with VS Code due to its free price tag and it was fine and enough for the beginning just to explore the possibilities of React-Native, but after awhile, when I started working with a projects outside of my sandbox, it became clear to me that it grabs much of my time for the tasks which should have been done in a moment of time. And I decided to look for something else and stumbled upon WebStorm. For its price tag it of 80$/year it gives next (some of many) features:

Flawless GIT integration

Fast search within the project’s files

Works perfectly with TypeScript (I’m going to talk about it next)

Highly customizable

Has built-in work with the NPM scripts

Has a lot of plug-ins to help you

TypeScript

For a beginner (and for everyone else IMO) it’s essential to use TypeScript instead of JavaScript. It will save you countless amount of hours which you could possible spend by looking for the place in you code which sets you variable’s value to undefined or some other type. Also there will be tsconfig with tslint which will give your code a better look and order and in some cases might increase the performance. Briefly, here are the main reasons to use TypeScript over JavaScript:

Strong typization

Performance optimizations

Brings the order to code

React-Navigation + Redux

Built-in RN navigation works fine for small projects with several pages but for bigger ones it’s better to use react-navigation due to its customization and the community which gives a lot of efforts to make it even better. After using it for some time you’re going to use it in every project of yours. The pros of using it:

Already implemented tabs, drawer and stack components with actions

Customization

Redux is created for the handling of the data with which you operate during the life cycle of apps. It’s going to be hard to comprehend it for a beginner but it’s worth it. I was lucky enough to have a mentor who showed me mistakes and explained to me how to understand it, but even without one, it takes up to two projects to understand the concepts and know how to operate them.

Warnings

“Red and white barricades near a construction site in Chicago” by Matthew Hamilton on Unsplash

While writing your code, you might see some warnings in IDE, Chrome Debugging Tools or directly at the bottom of the smartphone/emulator screen where it will pop-up in a yellow message box. Always pay high attention to them and solve the issues at which they point. By doing this you’ll avoid memory leaks and performance issues.

Check your code on different platforms and different versions

The way you app is going to behave on iOS might be different from what you could have expected from the app’s Android version. There are also cases when some specific version of the OS might give you troubles with components. Try to test on physical devices, if it’s not possible then do it with emulators. Here’s the list of devices and OSs which I check on my apps mostly with the reasons why I do it:

iPhone X — because of its unique screen

iOS 8 and IOS 11 — entry and the latest version of the system

Android 5.0 — it has several issues with the render

Android < 5.0 — due to its render and lack of shadows

iPads and Android tablets — due to their compatibility and UI differences

Have issues with external components? Check issues first

“A focused man working on a sticker-covered laptop in a coffee shop” by Tim Gouw on Unsplash

If you found that the external component is having some troubles with rendering, calculating or something else. Then the very first thing which you should do is to check whether someone already solved your problem or maybe the problem is well known. If you found a solution, the best approach would be to make a PR but in cases when you can’t wait, you always can create a file with a function which is going to be called after the components installation (post install fix at the package.json).