In this article, I will go over an example project structure you can use for your React Native projects. This of couse my opinion so feel free to tweak the structure to your needs/preferences.
#Project Structure
.
โโโ android
โโโ app.json
โโโ App.tsx
โโโ babel.config.js
โโโ .buckconfig
โโโ CHANGELOG.md
โโโ CODE_OF_CONDUCT.md
โโโ CONTRIBUTING.md
โโโ docs
โโโ doczrc.js
โโโ .eslintrc.js
โโโ gatsby-node.js
โโโ .gitignore
โโโ .gitlab
โโโ .gitlab-ci.yml
โโโ .history
โโโ images
โโโ index.d.ts
โโโ index.js
โโโ ios
โโโ jest.config.js
โโโ LICENSE
โโโ metro.config.js
โโโ __mocks__
โโโ node_modules
โโโ package.json
โโโ prettier.config.js
โโโ public
โโโ react-native.config.js
โโโ README.md
โโโ src
โโโ __tests__
โโโ tsconfig.json
โโโ util
โโโ .watchmanconfig
โโโ yarn.lock
#Configs
Let's briefly go over the various config files used in this project.
Note: Not all of this will be relevant for your project. You can use the ones relevant to your project.
app.json
: Used by React Native contains the name of your app..buckconfig
: Used to speed up builds plus more.babel.config.js
: The config used by Babel, which transpile our code into compliant ES5, so we can use all the newest and greatest features from JavaScript. I think one of the best babel plugins you can use is the babel-module-resolver so we have cleaner imports more info here.doczrc.js
: The config is used by Docz, which is used to create a website from Markdown files, the config is used to set the theme and the order of the sidebar..eslintrc.js
: I use eslint as my linter of choice. This is the config used to set up all the various options. Including relevant config to use with Typescript and Prettier.gatsby-node.js
: Docz uses Gatsby "behind the scenes", you only need this file if you intend to use Docz.jest.config.js
: Since this is a React Native project I also use Jest. A test runner created by Facebook. This file is used to set up various bits of config such as allowing me to use the same module import resolution and using it with Typescript (babel-jest).metro.config.js
: Metro is a React Native javascript bundler.package.json
: The file use to manage dependencies and build scripts.prettier.config.js
: The config for the Prettier code formatter.react-native.config.js
: As of React Native 0.60 you use this file to allow you to import custom fonts and assets into your React Native project.tsconfig.json
: Since I am using Typescript this is the required config for Typescript..watchmanconfig
: Is a file watcher used for hot reloading.yarn.lock
: Not quite config but used by package.json.
The following config files, app.json
, .buckconfig
, metro.config.js
, .watchmanconfig
, were unchanged after creating the project. Using the following command:
npx react-native init AwesomeTSProject --template react-native-template-typescript
#Testing
For testing, I have the following two folders:
#Mocks
The __mocks__
folder. Used to mock out various third party modules and functions. Here is an example:
.
โโโ bugsnag-react-native.js
โโโ @react-native-community
โ โโโ cameraroll.js
โโโ react-native-image-picker.js
โโโ react-native-navigation-bar-color.js
โโโ react-native-permissions.js
โโโ react-native-share-extension.js
โโโ react-native-share.js
โโโ react-native-snackbar.js
โโโ rn-fetch-blob.js
Where bugsnag-react-native.js
looks something like the following:
module.exports = {
Configuration: jest.fn(),
Client: jest.fn(() => ({ notify: jest.fn() })),
};
#Tests
The __tests__
folder contains all of my tests. The structure matches the structure of the src
folder.
So it's easier to find tests. Some people prefer to keep their tests in the same folder as their components. They will also
keep their storybook config in the component folder, so everything related to that component exists in that folder. However
I prefer to keep my tests separate to my source code.
.
โโโ set upTests.ts
โโโ src
โโโ actions
โ โโโ Snackbar.test.ts
โ โโโ Steganography
โโโ components
โ โโโ AboutList.test.tsx
โ โโโ AppHeader.test.tsx
โ โโโ ImageMessage.test.tsx
โ โโโ ImageProgress.test.tsx
โ โโโ MainHeader.test.tsx
โ โโโ MarkdownModal.test.tsx
โ โโโ Modal.test.tsx
โโโ views
โโโ Home
โโโ Settings
#Documentation
The following files/folders are used to document the project.
docs
: Contains the markdown files used by the Docz website.public
: Used to contain some static files used by Docz such as favicons.README.md
: The first page the user will see when visiting the repo.CHANGELOG.md
: The changes to the project in the Keepachangelog format.CODE_OF_CONDUCT.md
: How to "behave within" the project.CONTRIBUTING.md
: How to contribute to the project, helping users getting started with this project.images
: Used to store the original SVG images converted to PNGs.
#Gitlab / Git
This project is available on Gitlab, so here are the specific files related to git/Gitlab:
.gitlab
: Contains templates for merge requests and issues..gitlab-ci.yml
: Is the CI file, which defines what jobs are run on Gitlab CI..gitignore
: Used by git to determine what files to ignore, when committing changes. Generated from gitignore.io
#.gitlab
Taking a closer look at the .gitlab
folder you can see the different templates I have:
.
โโโ issue_templates
โ โโโ bug.md
โ โโโ feature.md
โ โโโ question.md
โโโ merge_request_templates
โโโ merge_request.md
โโโ release.md
If someone creates a new issue using the bug
template, they will get the following template to edit when
raising their issue. Making it easier for others to give the relevant information required to resolve the
issue.
---
name: "๐ Bug"
---
# Bug Report
## Current Behaviour
<!-- What is the current behaviour -->
# ...
#Source Code
Now onto the more interesting part of this project.
android
: All the specific native code for Android. You will only need to edit this if you need to write Android specific code in Java/Kotlin or edit the way your application is built.ios
: Same as above except for IOS.
#src
Now most of the code related to this project exists within the src/
folder.
.
โโโ actions
โ โโโ Bugsnag
โ โโโ Share
โ โโโ Snackbar
โ โโโ Steganography
โโโ assets
โ โโโ fonts
โ โโโ images
โโโ components
โโโ AboutList
โ โโโ AboutList.tsx
โ โโโ index.ts
โ โโโ ImageMessage
โ โโโ ImageProgress
โ โโโ IntroSlider
โ โโโ Loader
โ โโโ Logo
โ โโโ MarkdownModal
โ โโโ Modal
โ โโโ PhotoAlbumList
โโโ constants
โ โโโ colors.ts
โ โโโ fonts.ts
โ โโโ themes.ts
โ โโโ types.ts
โโโ data
โโโ providers
โโโ views
โโโ Home
โโโ MainApp.tsx
โโโ Setting
โโโ Settings.tsx
actions
: Contains actions such as a snack bar which can be shown.assets
: Static assets such as images and fonts.components
: Components typically will be used by multiple views. Each component has its own folder.constants
: Used to store colours, common types and fonts.data
: (JSON) data used by the components.providers
: React contexts, which will be consumed by other components to store state.views
: The different pages the users will see. Since settings and home have sub-pages those, exist within those folders.
That's it, that my "basic" structure I've used for a React Native project.