Layout & Styling - Moistbobo/React-Native-Guidelines GitHub Wiki

Layout

Use a combination of flexbox, margins, and padding to build layouts. Avoid using absolute positions as it may cause issues with scaling across different screen dimensions.

Resources

Flexbox Froggy

  • Provides a good primer to how to use flexbox. While the style properties are in css, the concept carries over the react-native.

Styling

Avoid using global styles. While global styles makes sense for web applications, they are not as effective in mobile applications due to the variation of pages. Every page is better off having their own style. If a style is used repeatedly, it may be a better idea to create a standalone component that uses said style instead. (Global variables for color and font related styles are acceptable, however).