-
Notifications
You must be signed in to change notification settings - Fork 285
Code styleguide
Use constants for numbers
- arr.slice(0, 14);
+ arr.slice(0, MAX_EXPOSURE_DAYS);
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.
Default exports are not easily discovered and lead to inconsistent names.
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';
export const MyComponent = () => {
return <View />;
}
This will clearly express inputs and outputs.
export const MyComponent = ({navigation, label}) => {
return <View onPress={() => navigation.foo()}>{label}</View>;
}
This will help the IDE infer types
/**
* @param {{
* navigation: Navigation;
* label: string;
* }} param0
*/
export const MyComponent = ({navigation, label}) => {
return ...;
}
<View>
- {getSpecialViewStuff(label, color)}
+ <SpecialViewStuff label={label} color={color} />
</View>
Hooks will keep your components concise.
export const MyComponent = () => {
const [message, setMessage] = useState('hello');
return <Text>{message}</Text>;
}
Write custom hooks, with tests, to keep components small and reactive
export const MyComponent = () => {
// example, not a real hook
const [state, enable, disable] = useLocationTrackingState()
return (
<Text onPress={() => disable()}>
{state === ENABLED ? 'Enabled': 'Disabled'}
</Text>
);
}
Wrap your views with <Theme>
to ensure correctly colored text, backgrounds (and eventually buttons and inputs). <Theme>
tags can be nested, they will change all children's colors.
<Theme use="default" setBackground>
<Typography>Violet on light violet background</Theme>
<Typography secondary>Light violet</Theme>
<Theme use="charcoal" setBackground>{/* charcoal background with white text */}</Theme>
</Theme>
Use <Typography>
where possible. It assigns text color, size and line heigth.
<Typography monospace>Regular color, monospace, regular size (18px/24px)</Theme>
<Typography secondary use="body3">Muted color, smaller text (15px/24px)</Theme>
{/* styles for spacing are allowed */}
<Typography style={{paddingVertical: 8}}>Extra spacing</Theme>