Skip to content

Code style guidelines

Kinga Wigurska-Bąk edited this page Sep 16, 2019 · 2 revisions

Guides

Usage of components

Try not to use React Native / React Native Elements components directly in your screens. Use custom wrapper components with initial styling already applied. You can find some components already developed in the src/components directory. Having this additional layer can help you later if for example you'd like to change fontFamily of all texts - instead of refactoring every View, you can change only single Component. This can also help with missing properties in TypeScript definition files - you can extend definitions like it is done in Button component.

Vector Icons

This project has already included react-native-vector-icons with only MaterialCommunityIcons enabled. You can always add more icon fontfaces, like FontAwesome or others.

Styling

Make sure to adjust shared styles defined in src/styles, including color palette file and typography to your needs. Try to avoid modifying ready components in favor of modifying variable files.

Currently, some components like navigation bar or buttons look slighty different on Android and iOS. This is intentional by design. It allows the app to look more like part of the operating system, but thanks to unique color palette, font faces and layout it still can look unique.

Images

Instead of using standard Image component from React Native, use more performant component from react-native-fast-image library, which is already included in the project.

Testing

You can find various scenarios in unit tests for this project. Every bit of code has an unit test to meet the requirement of 100% coverage for branches, functions, lines and statements. To ensure highest possible coverage percentage,you can use istanbul ignore comments. Sometimes you can find istanbul ignore else comment, even if there's no else branch. It is needed to provide best branches coverage as described here.

Clone this wiki locally