Dev conventions

Naming

• Folder naming: Lower camelCase, e.g. notFound
• Components naming: Upper CamelCase, e.g. NotFoundScreen

Code conventions

• ES6 syntax is preferred e.g. const ExampleFunction:React.FC = (parameter: string) => {} instead of function ExampleFunction(parameter:string) {}

Workflow

• Always update Trello board and push changes to your branch regularly when you are working so others can follow your work.
• All PR's goes directly to the main branch.
• Merging is done by the author of the PR.
• Two types of branches:
  • feature/feature-description: All additions and improvements to the code base, except critical bug fixes.
  • fix/bug-description: Critical bug fixes only.
• Branch naming: kebab-case

Styling

• Theme is based on GitHub's design system Primer with some custom modifications. Please use this if you want to modify colors/styling.
• Common styles defined in theme folder. Styling conventions is inspired by this guide.
• Use Expo Icons library and FontAwesome 5 for icons.
• Use common style conventions, colors, spacing etc. See definitions in the styles folder.
• Create stylesheets in same file as the component, at the end!
• Avoid inline styling.

File structure

├── assets
│   ├── fonts
│   ├── images
├── components
│   ├── ExampleComponent.tsx
├── screens
│   ├── auth
│   │   ├── LoginScreen.tsx
│   │   ├── SignUpScreen.tsx
│   ├── notFound
│   │   ├── NotFoundScreen.tsx
│   ├── exampleScreen1
│   │   ├── ExampleScreen1.tsx
│   ├── exampleScreen2
│   │   ├── ExampleScreen2.tsx
├── theme
│   ├── buttons.ts
│   ├── colors.ts
├── navigation
│   ├── index.tsx
│   ├── BottomTabNavigator.tsx
└── App.tsx (entry point)