If you have worked with React Boilerplate before you probably know how much time it saves you when getting started with a big project. Not only at the start of a project, react boilerplate also comes in handy when you are in the middle of development. It makes writing repetitive codes easier by providing you with it's own CLI tools to generate boilerplate codes.

I started working on a React Native project recently and thought to my self why there was no similar thing for React Native, to the best of my knowledge. So I decided to migrate some of the things we knew on React Boilerplate and React Boilerplate CRA Template to a separate react native template.

Disclaimer: Current version of the template might not be too optimal for production builds.

The template takes some part of the original react boilerplates like the component and slice generators, redux toolkit setup and redux saga. It also adds react native specific CLI tools like App Icon setters and Splash screen logo setters.

The template comes by default with the tools listed below :

• Redux Toolkit
• React Navigation
• React Native Splash Screen
• Redux Saga
• Reselect

Note: This blog assumes that you are familiar with react-native and the CLI tool provided by react-native.

Setting up the template

Getting started with the template is fairly easy. There are only a few number of steps as listed down below.

Note: using YARN over NPM is recommend when using this template.

1. Create react native app by providingreact-native typescript-boilerplate as a template.

npx react-native myapp --template https://github.com/abdulhamidOumer/react-native-typescript-boilerplate.git

2. Get into the generated app's directory and explore the code and features.

cd myapp
yarn start

3. Get started by setting your app icon or splash screen icon.

yarn set

This command is used to set native related assets for your app. One pain point of working with react native is generating app icons with their corresponding platform size guidelines. By using this command you will be able to generate both Android and IOS app icons as well as splash screen icons based on the platform recommended size guideline just from one picture. Pictures that you want to use as app icon or as a splash screen logo need to be inside src/assets/images.

4. Optional - Initiate husky pre-commit hooks

yarn init-husky

This command will initiate a new git repository for your project if it doesn't exist currently and sets up husky so you can utilize pre commit and push hooks.

Full documentation for the current version is available on GitBook. Any kind of contribution is always welcome and appreciated as I am getting started with the project there is still a lot to be done. Full code available on Github

📖 GitBook

🚀 Github