Table of Contents

• App Configuration
  • How to run
  • VS Settings
  • ENVs
  • Structure
  • Naming Conventions
• Theming
• Navigation

Users Mobile App

This project was bootstrapped with

npx react-native@latest init UsersApp

How to run

From your terminal run:

yarn
cd ios && pod install

After that from project root run:

yarn start

Recommended VS Settings

Expand...

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    "eslint.alwaysShowStatus": true,
    "eslint.format.enable": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.formatOnSave": true,
  
    "[typescriptreact]": {
        "editor.formatOnSave": false
    },
    "[javascript]": {
        "editor.formatOnSave": false
    }
  }

ENVs

The app just one env for testing purposes:

• .env

Structure

App's entry point is index.tsx which point to /src/App.tsx. The folders structure inside src/ is the following:

• assets (for images etc)
• components (holding each component in its folder)
• hooks (for custom hooks)
• httpclient (for state management & queries)
• navigation (navigation related components)
• screens (each screen in its own folder)
• theming (theme related files & provider)
• types (global types here)
• utils (helper functions)

Naming conventions

• Components will be named with capitalized letters. (Letter case-separated)
• Styles are kept in separate files (but same folder) and named as screen-name.style.ts or ComponentName.style.ts
• Screens follow the format of kebab-case: first-screen.tsx
• Functions follow the format of lower camelCase: onSendButtonClicked().
• Variables depending on the purpose can be named simply in lower camelCase or snake_case.
• Arrays should be in SCREAMING_SNAKE_CASE

const MY_ARRAY = [];
const usersApp = '';
const weekly_pay = hours_worked * hourly_pay_rate;

Theming

Since we are using styled-components, there is a Theme provider created that encapsulated the whole app. And based on the light or dark theme, we have the lightTheme.ts and darkTheme.ts with different colors. Example of usage in a styled component:

export const Title = styled.Text`
  color: ${props => props.theme.colors.primary};
  font-size: 48px;
  font-family: ${Fonts.MavenProBold};
`;

Fonts, Sizes and Constants are also there used for general/global usage.

Navigation

Using react-navigation v6. The main navigator, the root navigator has only the bottom tabs navigator in it. Each bottom item is its own stack navigator that can include other screens.

RootNavigator
  BottomTabsNavigator
    FirstStackNavigator
      ScreenA
...