Code styleguide

General

Avoid magic numbers or strings

Use constants for special numbers.

- arr.slice(0, 14);
+ arr.slice(0, MAX_EXPOSURE_DAYS);

Note: Array index 0 is not special, and well understood.

Prefer switch statements

When a piece of logic can branch in more than 3 directions, use a switch statement.

switch(val) {
  case 1:
    break;
  case 2:
    break;
  case 3:
    break;
  default:
    break;
}

Modules

Prefer named exports

Named exports have slightly better developer ergonomics in IDEs. The IDE can read the named export in files across the project even if you have not imported it before.

export const MY_CONST = 1234;
export class MyClass {}

Imports will always use consistent names. Names can be overridden with as, if needed.

import {MyClass} from './MyClass';
import {MY_CONST as CONST} from './MyClass';

The exception to this is React Components themselves where we prefer default exports.

import React from 'react'
import { View, StyleSheet } from 'react-native'

const MyComponent = () => { ... 

const styles = StyleSheet.create({ ...

export default MyComponent

React components (general)

Use functional components

export const MyComponent = () => {
  return <View />;
}

Use object spread assignment

This will clearly express inputs and outputs.

export const MyComponent = ({navigation, label}) => {
  return <View onPress={() => navigation.foo()}>{label}</View>;
}

Prefer hooks

Hooks will keep your components concise.

export const MyComponent = () => {
  const [message, setMessage] = useState('hello');

  return <Text>{message}</Text>;
}

Common components

Use Typography

Use <Typography> as it applies RTL language support.