Structuring a React Native project
Tags: typescript, reactnative, redux, reactnavigation
Published: 2022-05-23 01:07:06

Hola! 

This document goes over coding conventions followed throughout the [THT](https://www.trouthousetech.com/projects) Projects. [Here](https://github.com/trouthouse-tech/react-native-starter-project/tree/main/template) is a repo that we've used to get our projects started.

_Note: I Googled back in 2019 looking for a good project structure and found [this](https://medium.com/the-andela-way/how-to-structure-a-react-native-app-for-scale-a29194cd33fc) one. The below info was inspired by that article._

Our mobile projects are primarily built with React Native, TypeScript, and Firebase. They are created by using the following command which can be found [here](https://reactnative.dev/docs/typescript).

`npx react-native init MyApp --template react-native-template-typescript`

We always utilize the following libraries:

- [react-navigation](url)
- [redux](url)
- [react-native-keyboard-aware-scroll-view]()
- [react-native-modal](url)
- [react-native-safe-area-context](url)

## Project Structure

```MyProjectRoot
  - android/
  - assets/
  - ios/
  - src/
    - api/
    - components/
      - text/
        - Header.tsx
        - HeaderTwo.tsx
        - HeaderThree.tsx
        - Body.tsx
        - Title.tsx
        - Subtitle.tsx
    - navigation/
      - main/
        - index.ts
      - onboarding/
        - index.ts
      - RootNavigator.tsx
    - screens/
      - onboarding/
        - Splash.tsx
        - Loading.tsx
        - Login.tsx
        - SignUp.tsx
        - ForgetPassword.tsx
      - messages/
        - MessagesList.tsx
        - Chat.tsx
      - profile/
    - services/
      - Lessons.ts
      - Students.ts
      - Instructors.ts
    - store/
      - userSlice.ts
      - lessonsSlice.ts
      - store.ts
      - types.ts
    - styles/
      - colors.ts
      - fonts.ts
      - forms.ts
      - utils.ts
      - index.ts
    - utils/
      - formatters.ts
      - icons.tsx
```

## Project Structure Explained

**_assets/_**
- Static/placeholder images/icons/videos used throughout the project

**_src/api/_**
- Service layer functions such as CRUD operations and REST API calls

**_src/components/_**
- Commonly used buttons, inputs, modals, text, util components, and etc
- These components can have access to the redux store and do not need to be stateless components
- Using the `text/` components across the application will help maintain a consistent theme and cut out a lot of repeated styling.

**_src/navigation/_**
- Most projects utilize tab navigation with React Navigation. Each tab consists of a stack navigator which, in turn, consists of x screens. 
- Sometimes, a screen is itself a stack, therefore opening the possibility of having nested stack navigators. 

**_src/screens/_**
- The sub-folders here are often identical in structure to the src/navigation/ sub-folders. 
 - For instance, if the src/navigation/ folder has three sub-folders home, messaging, and profile (which may represent tabs) it is safe to bet that the same sub-folders would be found within the src/screens/ folder. 
 - Within these folders, you would find all components/pages/screens that pertain to the navigation stack. 
 - Sometimes, you may find modals in here if they are not repeated throughout the application. 

**_src/services/_**
- Functions that abstract away database logic such as createDocument, updateDocument, and etc that can be found within the src/api/ folder. These functions can be something like startLesson, createUser, and etc which call the CRUD functions in `src/api`

**_src/store/_**
- Redux-related logic for updating the redux store. 
- We create a new slice for each piece of data we're working with.
 - For instance, we would have a `clientSlice.ts`, `usersSlice.ts`, `gamesSlice.ts`, `currentGameSlice.ts`, and etc.

## Component Structure

All of our components follow the functional component structure and contain the styles within the same file. Please note the spacing of characters, lines, and etc.
```
import {Colors, Fonts, Utils} from './styles'

type Props = {
  myProp: string;
};

const MyComponent = (props: Props) => {
  // Note that props is unwrapped so that we can use myProp instead of props.myProp
  const {myProp} = props;

  return (
    <Text style={styles.myText}>{myProp}</Text>
  );
}

const styles = StyleSheet.create({
  myText: {
    color: Colors.Blue,
    fontSize: Fonts.large
    maxWidth: Utils.DEVICE_WIDTH / 2,
  },
});

```

## Closing
I hope this helps some of you folks just getting started on the RN space. Once again, a lot of the above was based off of reading [this](https://medium.com/the-andela-way/how-to-structure-a-react-native-app-for-scale-a29194cd33fc) post by Osifo.

_P.S. I stream React Native development (and day-to-day operations of THT) on [Twitch](ttps://www.twitch.tv/trouthousetech) M-F_

Happy coding!