React Native TypeScript Boilerplate –  There’s a lot on the internet about developers sharing boilerplates to make it easier to build React Native apps. Some use the CLI template repository, and some are in the form of the npm library. It doesn’t matter. Here I will discuss the types of react native boilerplate. It’s pretty rare for React Native to be typescript-based, and I can see that quite a few need this typescript-based React Native.

At the end of the article, I will show you how to use it and also a link to the library and GitHub repository.

Best React Native Typescript Boilerplate

TypeScript is a JavaScript-based programming language that adds strong-typing features and has classic OOP programming concepts. It will make it easier for developers to create quite complex applications. Sometimes, people say that typescript is annoying because we have to check and provide the types of all the variables and functions we have created.

But there are benefits to typescript itself. In every variable or function we create, we must add a type or interface, which in short, represents the variables/parameters that we make based on their type. It’s strict-based, so if you’ve declared a type and added a different value or parameter to the type you previously created, typescript will tell you if you’re wrong and throw an error.

React Native TypeScript Redux Boilerplate

React Native Typescript boilerplate with redux

That’s useful so that it won’t be a bug in the future. Well, that’s a glimpse of typescript. Back to React Native Boilerplate, I have just made a typescript-based React Native Boilerplate, and like the previous React Native Boilerplate, this is very basic, which is needed to create a React Native Boilerplate. So that in the future, if you build your app from scratch and use this react native boilerplate, you can add the libraries you need.

Checklist for React-Native Boilerplate TypeScript

Here I will review it again. What do you need to make a react native boilerplate?

  • Navigation: It serves to navigate between screens. The most popular is react-navigation.
  • State Management: what is popular here is the redux toolkit. You can also use MOBX or Zustand.
  • React hooks: React provides react hooks that make managing the lifecycle easier. For additional hooks in the fetch API, there’s also react-query that you can also use.
  • React Native icon: icon is an essential thing in making an application. Without the icon, the application will feel like a blank newspaper. So I recommend using the react native vector icon, or you can also use your local icon.

Luckily, the React Native Boilerplate I will share with you already covers the basics needed to build a React Native app. The versions of all the libraries are up to date, so you don’t have to worry.

React native TypeScript boilerplate with redux toolkit React native TypeScript boilerplate with Redux toolkit

Installation and How to Use React Native Typescript boilerplate

For this current version of this typeScript boilerplate ( v0.0.12 ), Make sure your cocoapods version is >= 1.11.2  and also ruby version = 2.7.5.

In the first step, just run the code below:

npx react-native init MyAppName --template @handidev/react-native-typescript-boilerplate

As a note, replace the word MyAppName with the application name you want.

Next, after everything is successful, the next step is to run the React Native application based on the platform you choose.
for the iOS version, run:

yarn ios

For the Android version, run:

yarn android

Yes, it’s that simple. If you have any problems with the installation, don’t hesitate to contact me on Github.

Link to library react-native-typescript-boilerplate NPM: https://www.npmjs.com/package/@handidev/react-native-typescript-boilerplate

Link to react-native typescript boilerplate GitHub repository: https://github.com/handi-dev/react-native-typescript-boilerplate

read also: React Native Boilerplate – javascript version