Skip to content

Dev conventions

Siri Mykland edited this page Jan 7, 2021 · 27 revisions

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.
    • bug/bug-description: Critical bug fixes only.
  • Branch naming: kebab-case

Styling

  • Common styles defined in theme folder. Styling conventions is inspired by this guide.
  • 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.
  • Use Expo Icons library and FontAwesome 5 for icons.

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)
Clone this wiki locally