DEV Community

Matt Ruiz
Matt Ruiz

Posted on

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:

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
Enter fullscreen mode Exit fullscreen mode

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,
  },
});

Enter fullscreen mode Exit fullscreen mode

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!

Discussion (5)

Collapse
handipriyono profile image
Handi Priyono

Thanks for sharing!. if you wanna use boilerplate instead of creating folder one by one and installing the libaries too.. you can use react native boilerplate here -> dev.to/handipriyono/react-native-b...

Collapse
matthewzruiz profile image
Matt Ruiz Author

Thanks for sharing!

For new devs, I would recommend installing one by one to memorize the installation process for each of them since they're so common.

We use boilerplates internally though

Collapse
lexpeee profile image
Elex

This is awesome! I just started studying react-native, and I feel lost with finding the right file architecture, libraries and stuff. Glad that I came across your post. Thanks for sharing!

Collapse
matthewzruiz profile image
Matt Ruiz Author

Hola hola!

Glad you found some use out of it.

Please lmk if there are any other topics you're interested in!

Collapse
lexpeee profile image
Elex

Sure! Any way we can connect soon? Just followed you on twitter a few hours ago. :D