Best Practice to make project structure - React Native [closed]

Question

I created new react native project as per client requirement.I have knowledge and yet not any project done so please give me any project structure how to build this project.

Or give me any git hub link

Thanks

Answer 1

In your scenario, you can make your own folder structure or I have some example which I follow by myself.

type vs feature

Separating by type means that we organise files by their type. If it is a component, there are container and presentational files. If it is Redux, there are action, reducer, and store files. If it is view, there are JavaScript, HTML, and CSS files.

src
  app
    api
    assets
    redux
        actions
        reducers
        store
    components
    containers
    navigation
    styles
    utilities

src/

All the files are inside this base component.

api/

This folder contains logic related to external API communications, it includes:

• constants.js - where all required static values are stored.

• helper.js - for storing reusable logic.

• individual feature files — Each feature file contains api communication logic for a particular feature.

assets/

Just as the name implies, this houses static files (e.g images) used in the application.

redux/

This holds all the redux files if you are using react-redux for managing state. Inside redux folder you have actions, reducers, store which can easily manage your redux files

• redux/actions

All the action files which are using around redux goes here.

• redux/reducers

All the reducers which are using around redux goes here.

• redux/store

You can put your store inside this redux store folder.

components/

Shared components used across features are placed in this directory. An example of such (as shown above) is the layout component, which is used to wrap the application components and determine its overall layout.

containers/

You can put you all screen-based components inside here (Eg - SplashScreen, HomeScreen).

navigation/

You project base navigation goes here. You can create stack navigator and export it to your application.

styles/

If you have global styles defined in your project you can put it over here like colors, font styles like things.

utilites/

You can put utils files over here.

Note: This structure is based on my experience. You can create your own structure once you done with more experience

Refere these links also

https://medium.com/the-andela-way/how-to-structure-a-react-native-app-for-scale-a29194cd33fc

https://www.freecodecamp.org/news/how-to-structure-your-project-and-manage-static-resources-in-react-native-6f4cfc947d92/

https://github.com/asimolmez/react-native-folder-structure

https://github.com/thecodingmachine/react-native-boilerplate