React Native Folder Structure with React Navigation & Redux

In the next 10 minutes, I will showcase how I manage the react-native folder structure. Let’s create and run a react native project first.

1. Create a New React Native Project
   • npx react-native init MyProject
2. Running React Native App
   • react-native start
3. Start your application
   • react-native run-ios
   • react-native run-android
4. Create src folder in root directory
   • api
     • urls.js – to store all endpoints
     • package.json – defining name
     • api.js – XHR class
     • auth.js – Login/Register API requests
     • dashboard.js – All other API requests
     • index.js – importing all js files
   • assets
     • images
   • components
     • shared – this folder has all shared components (usually functional components)
     • index.js – export all shared components
     • package.json – defining name
   • containers – this folder has all the main components
     • index.js – export all containers
     • package.json – defining name
   • navigation
     • index.js
     • package.json
     • drawernavigation.js
   • redux
     • store.js
     • actions
     • reducers