Skip to content

ashu777/React_Native_Folder_Structure

Repository files navigation

React Native Folder Structure:

Folder Structure in React Native

Steps For Folder Structure

SRC :

> Create a Folder Called src, where we should place our codes.

> Create a File Called react-native.config.js, where we should Place codes to connect the user defined fonts with android and ios.

ASSETS :

> Create a Folder called assets inside src

> Create a Folder called fonts inside assets and put all the font files inside it. e.g.=> Poppins-Black.ttf

> Create a Folder called images inside assets and put all the image files inside it.

AXIOS :

> Create a Folder called axios inside src .

> Create a File called Api.tsx inside axios and put all the codes with base url inside it.

> Create a File called ServerRequest.tsx inside axios and put all the api end points with methods inside it.

COMPONENTS,NAVIGATION & SCREENS :

> Create a Folder called components inside src and put all the customised component codes inside it.

For e.g.=> Customised Button, Card, RadioGroup etc.

> Create a Folder called navigation inside src and put all the navigation related codes inside it.

> Create a Folder called screens inside src and put all the screens codes inside it.

THEME :

> Create a Folder called theme inside src .

> Create a File called Color.tsx inside theme and put all the color name and codes inside it.

> Create a File called Dimension.tsx inside theme and put all the Dimension related codes inside it.

> Create a File called Fonts.tsx inside theme and declare the fonts with the required names inside it.

> Create a File called Strings inside theme and put all the Strings inside it.

UTILS :

> Create a Folder called utils inside src.

> Create a Folder called localstorage inside utils and put the codes For storing in local/within app inside it.

> Create a Folder called validator inside utils and put the Validation rules inside it.

For e.g.=> rules for email, mobile etc .

> Create a File called ErrorHandler.tsx inside utils and put all the Customized error messages inside it.

)Folder-1 Folder-2