How to make a simple boiler plate In React Native for beginners

Zain Ahmed
3 min readNov 22, 2020

let say you are nob to React Native and want to become a pro in it, but i say no one is pro or you can say full developer in React Native because developer always learn , but also i can say you can be a next high paid developer if you focus and practice more and more to become a good/best developer

here are one core step to become a good developer , let say you want to build a boiler plate for React Native applications where you can use this boiler plate for most of the application so you don’t need to setup again and again for any new app you just have to make a copy and start from basic ,

first of all Application Folder Structure,

What i follow and learn i will deliver here

create a “src” folder in application on root and all of the other folders will be create in it

Src folder

let see what folder contain what

1. Screens : This folder contain all Screens/Views like home, login, registration, profile etc

2. Config : This contain many files some of them are 1. Contants.js in which we will define those variable or you can say those thing which will use all over the application like , font size, font color, font family, bg color, border, shadow, and etc. 2. Theme.js this file contain theme for application like if application is in dark mode then color bg, color, font color, and other things and vise versa. 3. ApiRoutes.js this file contain the apis routes like https:/domainname/api/route for application.

3. Navigation : This folder contain some file like Auth.js, UnAurizedRoute.js AuthrizedRoute.js. Auth contain the main these two stack route (Authorized and Unauthorized). authorized route file contain all the stack screens which are can’t access without user authentication token, unauthorized route file contain all the stack screens which are accessible for publish users.

4. Redux : This folder contain your redux store for application , Store file contain redux store configuration , action contain all the file for actions , redux folder contain all the file for redux store.

5. Components : This folder contain those components which are reusable in whole application like , Button, Heading, Header, Icons, Loader and etc

6. .env : This file contain all the sensitive keys which use in application like some secrete third party keys, e.g Agora.ai auth key

7. Util: This folder contain all those function that use on different points like i we have first name and last name of user and want to display the full name so instead of doing this “firstName + lastName” in every required component we can create a custom function which will return the combine full name , same with date, etc

i hope it will help you for your React Native initial stage learning , do follow my pages , Like Share Comment and Subscribe

https://www.youtube.com/channel/UCkaoWtBz6ioLbNwRzIco5Yg

--

--

Zain Ahmed

Hi I am Zain Ahmed Software Engineer with passionate about try different technologies and try some cool staff, I create Blogs/Content on different platform.