React Native starter project

A quick guide on how to set up a starter project so you don’t have to deal with the installation and setup of libraries you always need.

This article is a work in progress and will be updated shortly. Currently, we have setup:

Does this sound familiar. You have a great idea that you want to test out. After a while of programming, you realise how much time is going to take before you have the basics set up. You lose your interest and decide to continue working on the project some other time.

Well if you are like me, this has happened to you more than once. I decided enough is enough it’s time to deal with this problem once and for all. Let’s create a starter project which has everything you need to start developing your idea right away. So what do we need? We need some sort of navigation and state management. Let’s also add .svg picture support, Typescript and encrypted storage for securing login tokens.

There is no need to reinvent the wheel here, let us use react-native init to initialise our project. It creates a basic working application that has one home screen.

2. Add a TypeScript config file. Create a tsconfig.json at the root of your project:

3. Create a jest.config.js file to configure Jest to use TypeScript

How a React Native project should be structured is a hot debate that has been going since its first release. There was some interest in adapting common architecture patterns, like MVC (Model — View — Controller), that didn’t make much sense at the end and increased the complexity of an application without significant benefits.

What I like to do is a basic project structure consisting of folders: “assets”, “components”, “redux”, “screens” and “utils”. The names together with what the folders contain is self-explanatory but for those that are just starting here is a brief explanation:

To install React Navigation run the following command:

Now that we have installed everything related to navigation let’s write some code. I’m not going to go into detail and explain how React Navigation works and what parts of the code mean. There are more detailed articles out there.

In the following snippet, you can see how we imported “Home screen” and then created a “HomeStack” and main “Navigator”. You can add multiple screens to the HomeStack or create a separate stack for login/registration screens.

I suggest that you create your own screen template that contains everything that you might need or like to use (class components for example instead of functional components)

If you are interested in learning more about adding support for SVG images you can check out this article.

To add support for SVG images run the following command:

Just installing a transformer by itself will not automatically transform SVG images to PNGs when building the project. We need a way to tell the compiler to transform the images. We do this by adding or modifying our metro.config file.

If we try to import an SVG file into a TSX file we will get an error. This is an indication that the project is missing a declaration file.

Open your declaration.d.ts file or create it and add support for SVG files. This way you won’t get errors when import SVG images into a TypeScript file.

If you are interested in learning more about different possibilities for securely storing data you can check out this article.

What information should be stored permanently on the phone depends on each use case. What we can say with certainty is that if we have a login functionality build into our application we have to store some information about the authenticated user. This usually includes a user ID, user email/username and a token or ID used for communicating with the back-end. This way our backend knows that the user was already authenticated.

Related posts:

CBD is booming almost everywhere in the world. Whether it’s epilepsy, depression, or physical pain: numerous people report almost miraculous healing experiences through cannabidiol (CBD). Christian…

Terms and Conditions.. I’m open for any kind of commissions in the wording area. If you’re doubtful, please do ask me because I’m open for any kind of discussion!.

The big announcement is the Comma Three, a $2199 aftermarket product that provides high-level lane keeping and cruise control to a wide variety of vehicles. I purchased the original Comma several…