Structuring a React Native project

Hola!

This document goes over coding conventions followed throughout the THT Projects. Here 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 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.

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

We always utilize the following libraries:

• react-navigation
• redux
• react-native-keyboard-aware-scroll-view
• react-native-modal
• react-native-safe-area-context

Project Structure

  - 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 post by Osifo.

P.S. I stream React Native development (and day-to-day operations of THT) on Twitch M-F

Happy coding!