Table of Contents

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

Credex Mobile App

This project was bootstrapped with

npx react-native@latest init Credex

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

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)
• translations (translations logic & jsons)
• 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 credexApp = '';
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
      ScreenB
    SecondStackNavigator
      ScreenC
      ScreenD
...

Tasks

• Fetching with react-query 10 alerts from weather API, since it doesn't have pagination, or limit query, or end/start time queries don't work properly also.
• For the 10 alerts, we are waiting the promises for all to fetch a random blurred image.
• UI for weather main page.
• Fetch alert by id.
• UI for the details of the alert.
• Promise all for each affected zone from each alert to be able to show the name.
• Description & Intruction are limited to two rows, and animated to expand/collapse on click.
• Top image from the alert details page, has the longpress + drag & drop handlers logic so it can be moved anywhere in that screen.
• Loaders for both pages to wait for the API results.
• Error handling for both pages.

Todos

• Improve UI
• Use react-native-fast-image for better performance.
• API with pagination so we can implement proper infinite scroll list with an expected performant behaviour.
• Splashscreen & app icon
• More to come...