Best Practice to make project structure – React Native

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

Related Posts:

  1. why do I get react-native command not found error on windows pc?
  2. React Native version mismatch
  3. com.android.builder.testing.api.DeviceException: No connected devices
  4. React native ERROR Packager can’t listen on port 8081
  5. How to create side menu with react-native?
  6. App iOS stuck on blank white screen when build release React Native
  7. What is the difference between React Native and React?
  8. What is the best project structure for a Python application?
  9. Error Running React Native App From Terminal (iOS)
  10. React Native: this.setState is not a function
  11. SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag
  12. adb server is out of date. killing
  13. What is prevState in ReactJS? [duplicate]
  14. react-native: command not found
  15. React Navigation back() and goBack() not working
  16. Timers in React Native (this.setTimeout)
  17. mkdir’s “-p” option
  18. When to use useImperativeHandle, useLayoutEffect, and useDebugValue
  19. Is using async componentDidMount() good?
  20. TypeError: Invalid attempt to spread non-iterable instance
  21. How to clear react-native cache?
  22. React Native: Possible unhandled promise rejection
  23. Why am I getting Warning: Functions are not valid as a React child?
  24. Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of `ListView`
  25. Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of `ListView`
  26. Unable to Resolve Module in React Native App
  27. Print: Entry, “:CFBundleIdentifier”, Does Not Exist
  28. Failed to find Build Tools revision 23.0.1
  29. ReactNative: how to center text?
  30. React Native: JAVA_HOME is not set and no ‘java’ command could be found in your PATH
  31. ReactJS: Maximum update depth exceeded error
  32. Unable to load script from assets index.android.bundle on windows
  33. What is the meaning of ‘No bundle URL present’ in react-native?
  34. Flexbox float right
  35. Must use destructuring props assignment
  36. “React.Children.only expected to receive a single React element child” error when putting and in a
  37. react-native error: module does not exist in module map

Leave a Comment