style

Styling

React Native provides easy styling of components with a set of style properties. These properties looks like the CSS ones, but unlike CSS there is no cascading behaviour.

Some style variables are located in /app/styles/index.ts and /app/styles/common/styles.ts that you are free to use.

These style constants are not consistent, use them with care. We plan to clean this up.

In addition to this, some UI component are provided to make styling easier.

How to style your components

Until now, we've been using the glamorous-native npm package for styling components. Now, this package is deprecated and we plan to go back to styling the way React Native documentation tells.

Style of typography

A set of surcharged <Text> components are available in /app/ui/text.ts. Use <Text> everywhere you want to use text, as it includes default text formatting. This component accepts style properties as regular props, and the style prop to let you make text that looks however you want.

You can use some overloaded texts components in the same way:

• font-style : TextItalic
• font-weight: TextBold, TextLight, TextSemiBold
• combination of these : TextBoldItalic, TextLightItalic, TextSemiBoldItalic
• titles : TextH1
• links: TextLink

Note : when you use nested Text components, do not use the ones described before. Instead, use the nested variations of these :

• normal or custom text: NestedText
• font-style : NestedTextItalic
• font-weight: NestedTextBold, NestedTextLight, NestedTextSemiBold
• combination of these : NestedTextBoldItalic, NestedTextLightItalic, NestedTextSemiBoldItalic
• links: NestedTextLink

The NestedText* variation does simply not include the default text style that can cause style conflicts.