React Native Expo boilerplate

Hello, My self Bhavesh Daswani I am a full stack developer having 3 years of experience and I am working on tech stack like React Native, React, Laravel, Nodejs.
Today I will talk about React native Expo Boilerplate.
What is Boilerplate.
Boilerplate means the initial setup you need to start your project. let me give you an example to better understand it. we create a new project from expo init project_name. It gives us a folder structure with a bare minimum setup with packages like react,react-native and expo but for our project to kick start, we need extra libraries like react-navigation, react-native-safe-area, etc. These types of libraries are required for each project. Then another thing is required is project structure, In each new project we have to setup a folder structure like each new screen will go in screen folder, reusable component will go in the component folder and much more. These setups are required for each new project, so generally, these requirements are termed as boilerplate.
Why we need boilerplate
For now, we have understand what is boilerplate. Let's understand its importance. Boilerplate give you a pre define architecture, so you don't have to reinvent the wheel again and again for each new project. It make developer life easy. Everyone has heard about create-react-app what it does, it provide a boiler plate for new react app, it setup all for us like babel, webpack everything, we as a developer just need to worry about the project and we are free from initial setup burden.
React Native Expo boilerplate
Let me introduce to mine react native expo boilerplate which I use in each new react-native expo project.
This includes common use to packages like:
- react-navigation
- react-navigation-stack
- react-navigation-drawer
- react-native-gesture-handler
- react-native-safe-area-view
- react-native-safe-area-context
- react-native-reanimated
The above are the additional libraries I added along provided by expo init
It contains folder structure as below
- Screen folder: It will contain files related to screen like LoginScreen.js,Homescreen.js etc
- Component Folder: where I put the reusable component. The component that is being used in multiple screens.
- UI folder: It belongs inside the component folder, it contains UI(User Interface) components like font-related component. I put my font, button level component in this folder
- Constants folder: It will contain constant files like colors.js (this file contain app main color, secondary color etc.) etc. Those things which are constants are put in this folder
- assets/fonts folder: It contains app fonts. The .ttf,.otf like fonts are placed in this folder
- assets/images: it contains static images that will be used inside app. One point to note the image used as static images should be 1x, 2x,3x format, react-native automatically handle it for both Android and ios. We do not have to worry xdpi, mdpi,hdpi like things react native will manage for us
This boilerplate contain two other main things the RootComponent, Custom Navigation header
- RootComponent: This component would be root component of each screen. This component provide safe area view to screen in both android and ios
- Custom Navigation header: Navigation header provided by react-navigation library is cool but customizing it is difficult for me, so I made my custom header which is compatible with both ios and android.
How to use React Native Boiler Plate
This boilerplate targets lates expo sdk version that is expo sdk 35.
When you start new project you do not need to do expo init just clone my repo from GitHub and then do npm install / yarn install and your boilerplate is ready, enjoy coding react native expo project. No hassle for initial setup.
Github Link: https://github.com/bhaveshdaswani93/react-native-expo-boilerplate
