Essential Tools for Improving React Native Development

React Native is a framework with a very strong developer community. During the last year, there was an evolutionary growth of a large variety of tools and libraries, making the development of React Native apps a lot easier and a lot more comfortable.

Besides the tools and libraries developed especially for React Native, you can also use a lot of things in the plain React ecosystem. This is because most of these things are compatible with the JavaScript/React part of any React Native app.

Being aware of the best tools and libraries and how to use them is really useful because it saves you a lot of time and can greatly improve the quality of your code and product.

Especially when you are working on bigger projects, some tools are an absolute must-have to ensure good collaboration in a bigger team.

In this chapter, you will learn about the following topics:

• How to improve code quality with type safety, linters...

Technical requirements

To be able to run the code in this chapter, you have to set up the following things:

• A working React Native environment (https://reactnative.dev/docs/environment-setup) – React Native CLI Quickstart

Improving code quality with type safety, linters, and code formatters

As already mentioned in Chapter 2, Understanding the Essentials of JavaScript and TypeScript, it is necessary to use typed JavaScript alongside some tools to ensure a certain level of quality in bigger projects.

In the following section, you will learn how to do this. Let’s start with type safety using TypeScript or Flow.

Ensuring type safety with TypeScript or Flow

Type safety is standard in most programming languages such as Java or C#, and this is for good reason. In contrast, JavaScript is dynamically typed. This is because of the history of JavaScript. Remember, JavaScript was created as a scripting language to write small chunks of code very quickly. For this scenario, dynamic typing is fine, but when a project grows, static typing with all its advantages is a must-have.

Using typed JavaScript creates some overhead for creating your types at the beginning, but it gives you a lot of advantages...

Using boilerplate solutions

Boilerplate solutions make it easy to set up a project with a solid architecture. This can be very helpful, but you should be aware of the trade-offs that come with these boilerplate solutions. Additionally, you should know exactly what you want because there are completely different solutions out there.

First, a boilerplate solution in this context is everything that creates code for you to start without having to configure everything on your own. This can be anything, from a simple template that has built-in TypeScript support but nothing else to a complete CLI solution that brings you solutions for navigation, state management, fonts, animations, connection, and more such as the Ignite CLI by Infinite Red.

Because there is such a wide range of what a boilerplate solution consists of, it’s hard to make general assumptions about them. Nevertheless, what can be said is that the more that is packed into the boilerplate solution, the bigger...

Finding and using high-quality UI libraries

UI libraries provide a predefined UI for the most common use cases. There are a lot of different UI libraries you can use for your project. But some are better than others. This section not only names the most popular ones, but it also gives you an idea of what you must look for when doing your own research.

A good UI library should meet the following criteria:

• Well maintained: As with all libraries, it has to be well maintained. This means there are multiple contributors, there is good code quality, and there are regular releases. This is important to ensure that future version upgrades of React Native are supported.
• Component-based: A React Native UI library should provide a set of components, which you can use out of the box.
• Theming: The library should include theming options and be easily adaptable to your colors, fonts, paddings, and margins.
• Type declarations: A good UI library should have type declarations...

Using Storybook for React Native

Storybook is very popular in the plain React world. It is a tool that renders all your components in predefined states, so you can have a look at them without having to start your real app and navigate to the location where they are used.

With Storybook, you write stories, which are then packed into a storybook. Each of these stories contains a component. It also defines the location within the storybook. The following code example shows what a story can look like:

import {PrimaryButton} from '@components/PrimaryButton;
export default {
  title: 'components/PrimaryButton,
      component: PrimaryButton,
};
export const Standard = args => (
  <PrimaryButton {...args} />
);
Standard.args = {
  text: 'Primary Button',
      size: 'large',
          color: 'orange...

Summary

In this chapter, you learned about useful tools for increasing code quality, catching the most common errors automatically, and speeding up the project setup along with the development process. You understood why type definitions are important and how to use ESLint and prettier to ensure your code meets certain criteria.

Additionally, you got to know the most popular React Native boilerplate solutions to start a project, and you learned what advantages and trade-offs each of these solutions have. At the end of the chapter, you learned about Storybook for React Native, how to use it, and in which scenarios it is a useful tool.

After learning about all these useful tools, it is time to dive deeper into large-scale projects. In the next chapter, you will learn how to set up and maintain a project structure, which will work for large-scale projects. Additionally, you will learn what options you have, to share code between different platforms, and which of these solutions...