Summary
This command line help you create your React Native project in a easy and useful structure by creating components and screens in separate folders in order to distinguish between them. It also make it easier to create navigations for your screens without writing a single line of code.
The following project structure is used by this command:
- JavaScript
- TypeScript
src/
├── components
│ ├── comp-one
│ │ ├── __tests__
│ │ │ └── index.spec.jsx
│ │ ├── index.jsx
│ │ └── styles.js
│ ├── comp-two
│ │ ├── __tests__
│ │ │ └── index.spec.jsx
│ │ ├── index.jsx
│ │ └── styles.js
│ └── folder
│ └── comp-three
│ ├── __tests__
│ │ └── index.spec.jsx
│ ├── index.jsx
│ └── styles.js
├── redux
│ ├── actions
│ │ └── general
│ │ └── index.js
│ ├── index.js
│ └── reducers
│ ├── general
│ │ └── index.js
│ └── index.js
└── screens
├── folder
│ ├── navigation.jsx
│ ├── screen-four
│ │ ├── __tests__
│ │ │ └── index.spec.jsx
│ │ ├── index.jsx
│ │ └── styles.js
│ └── screen-three
│ ├── __tests__
│ │ └── index.spec.jsx
│ ├── index.jsx
│ └── styles.js
├── navigation.jsx
├── screen-one
│ ├── __tests__
│ │ └── index.spec.jsx
│ ├── index.jsx
│ └── styles.js
└── screen-two
├── __tests__
│ └── index.spec.jsx
├── index.jsx
└── styles.js
src/
├── components
│ ├── comp-one
│ │ ├── __tests__
│ │ │ └── index.spec.tsx
│ │ ├── index.tsx
│ │ └── styles.ts
│ ├── comp-two
│ │ ├── __tests__
│ │ │ └── index.spec.tsx
│ │ ├── index.tsx
│ │ └── styles.ts
│ └── folder
│ └── comp-three
│ ├── __tests__
│ │ └── index.spec.tsx
│ ├── index.tsx
│ └── styles.ts
├── redux
│ ├── actions
│ │ └── general
│ │ └── index.ts
│ ├── index.ts
│ └── reducers
│ ├── general
│ │ └── index.ts
│ └── index.ts
└── screens
├── folder
│ ├── navigation.tsx
│ ├── screen-four
│ │ ├── __tests__
│ │ │ └── index.spec.tsx
│ │ ├── index.tsx
│ │ └── styles.ts
│ └── screen-three
│ ├── __tests__
│ │ └── index.spec.tsx
│ ├── index.tsx
│ └── styles.ts
├── navigation.tsx
├── screen-one
│ ├── __tests__
│ │ └── index.spec.tsx
│ ├── index.tsx
│ └── styles.ts
└── screen-two
├── __tests__
│ └── index.spec.tsx
├── index.tsx
└── styles.ts
As you can see above, the
src
folder is the folder that resides at the root of your React Native project and under this folder, you will find thecomponents
folder which contains all the shared components that are used through out the screen. Thescreens
folder contains the app's screens that can uses some of the shared components above it.In each component you will find
index.tsx
that contains the componentsJSX.Element
syntaxes, andstyles.ts
that contains the styles for that component.In each screen you will find
index.tsx
that contains theJSX.Element
syntaxes, andstyles.ts
that contains the screen's styles andfunctions
folder which will contain the screen's specific functions.Each screen can use one of the shared components that are defined in
components
folder, and you can pass the functions to those components hence there is notfunctions
folder under a component subfolder.For the
screens
part you can findnavigation.tsx
files that shows the relation between the screens that resides in the same folder. For example, thenavigation.tsx
under thescreens
folder represent a stack navigation betweenfolder
andscreen-one
andscreen-two
. As for thenavigation.tsx
file under thefolder
folder is represent a drawer navigation betweenscreen-three
andscreen-four
.In both the
components
andscreens
folders, you can find__tests__
folder that contains the tests for the component or screen.As for the
redux
folder you can see there isindex.ts
which contain the redux store, andactions
andreducers
folders are next to it so you can find only things that are related to redux in one single place.This command line can write code in both JavaScript and TypeScript. By default it will use the used language for your React Native project and of course you can override the used language using one of its options.
You can override the usage of the default behavior of this command line by modifying the
rnhc.config.json
file (more details can be found here).