Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Matt Ruiz
Matt Ruiz

Posted on

     

Structuring a React Native project

Hola!

This document goes over coding conventions followed throughout theTHT 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 foundthis 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 foundhere.

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 modeExit 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 thetext/ 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 insrc/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 aclientSlice.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 modeExit 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 readingthis post by Osifo.

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

Happy coding!

Top comments(5)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
handipriyono profile image
Brian jacob
  • Pronouns
    Brian
  • Joined

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...

CollapseExpand
 
matthewzruiz profile image
Matt Ruiz
Head coder for Pencil Bible, Amplinks, and others.
  • Joined

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

CollapseExpand
 
lexpeee profile image
Elex
Software Engineer from PH
  • Location
    Philippines
  • Joined

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!

CollapseExpand
 
matthewzruiz profile image
Matt Ruiz
Head coder for Pencil Bible, Amplinks, and others.
  • Joined

Hola hola!

Glad you found some use out of it.

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

CollapseExpand
 
lexpeee profile image
Elex
Software Engineer from PH
  • Location
    Philippines
  • Joined

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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Head coder for Pencil Bible, Amplinks, and others.
  • Joined

More fromMatt Ruiz

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp