React Native - Project Structure

[jaredkove]

What you would like to change/add

I'd like to standardise our project structure for RN applications, and secondarily create a boilerplate to enforce/make this easy to adhere to.

Comment with the most upvotes that contains a valid RN project structure wins.
Vote closes COB Wednesday 25th

Why you would like to change/add this

Too hard to onboard developers to projects when the structure is different every time.

Examples

Open to suggestions on this, but there are discussions to be had over where styles are kept, multiple files instead of single files for interfaces, prop definitions etc etc etc.

Probably submitting a tree/screenshot of project directory would be the easiest way.

Checklist

• I have checked that this is not a duplicate issue.

[jameswilddev]

Aspects which spring to mind immediately:

• Exclude node_modules, build artefacts from source control (reduces diff noise considerably).
• Include package.json.lock to ensure exact package versions installed.
• Include Renovate or similar to automatically raise PRs when dependencies update.
• Include code style configuration for common IDEs (example https://github.com/jameswilddev/junk-kit/blob/master/.vscode/settings.json) (reduces diff noise more than anything - a lot missing from this, you'd probably want proper linting).
• Include build task configuration for common IDEs (example https://github.com/jameswilddev/junk-kit/blob/master/.vscode/tasks.json) (one-click install of dependencies and start of build with tests watching for changes).
• All source code in src. Build artefacts in dist.
• All file names lower case and snake_case to match Node conventions (node_modules for example).

[dextermb]

Since I've been doing a ton of React Native work I've come up with my own structure that all of my applications tend to follow. It works well.

Overview:

Excludes:

.vscode/
.code/
.idea/
node_modules/

.env
app.json

Exclude the app.json and include example.app.json

File/Directory names:

File/Directory names should always be lowercase and hyphenated.

text.js
text-input.js

Structure:

src/
  -- styles/
    -- components/
    -- pages/
    -- themes/
    -- defaults.js
    -- colors.js
  -- components/
  -- screens/
  -- providers/
  -- services/

• styles is used to keep all the styles in a single place
  • components are where the styles for each component kept
  • pages are where page specific styles are kept (such as changing button styles for a single screen)
  • themes are where multi-page specific styles are kept when it's not worth baking them into the component styles
  • defaults.js is where styles such as typography, alignment and spacing are kept
  • colors.js is where colors are kept and used throughout the app
• components is used to keep all the components in a single place
• screens is used to keep all the screens in a single place
• providers is used to keep all the providers in a single place
• services is used to keep all the providers in a single place

Components:

src/
  -- components/
    -- card/
      -- job.js
    -- card.js

When structuring components I tend to have a base class (such as Card) and build upon it (such as JobCard). I structure it in a way to try and make the imports readable.

import Card from '../components/card'
import JobCard from '../components/card/job'

---

There's much more to be discussed on the contents and structure of each file. But that's for another thread.

[jameswilddev]

@dextermb All looks good, though I'm not sure why .vscode is excluded; without it, you can't configure build tasks, etc.

Also: where do artefacts go?

[dextermb]

Also: where do artefacts go?

What do you mean by this?

[jameswilddev]

I've not worked with React Native much or for a long time, I seemed to remember it produced a build artefact, am I mistaken?

[dextermb]

I've not worked with React Native much or for a long time, I seemed to remember it produced a build artefact, am I mistaken?

These are stored on the Expo account whichever the build is ran on. We have a Langley Foxall Expo account, to try and centralize everything, so you'd be able to get them from there.

They should definitely not be included in Git.

[jameswilddev]

Absolutely; if there's any artefacts created during development they should be excluded (can't see them listed above).

[dextermb]

Absolutely; if there's any artefacts created during development they should be excluded (can't see them listed above).

I didn't list them above because they shouldn't be downloaded into the project directory to begin with

[jameswilddev]

As long as it doesn't create them during local development that's all good 👍

[DivineOmega]

It would probably be worth creating a GitHub template repository for this structure that we could use as the basis for new React Native apps.

I do not believe npm offers anything similar to composer's create-project. Do correct me if I am wrong here.

[jameswilddev]

I've not seen anything for boiler plating; I believe that the "ng" tool used to create Angular applications is something they've made themselves.

[dextermb]

It would probably be worth creating a GitHub template repository for this structure that we could use as the basis for new React Native apps.

👍

I do not believe npm offers anything similar to composer's create-project. Do correct me if I am wrong here.

I believe you can pass an initializer or template into npm init