react-native Styling

30% OFF - 9th Anniversary discount on Entity Framework Extensions until December 15 with code: ZZZANNIVERSARY9

Introduction

Styles are defined within a JSON object with similar styling attribute names like in CSS. Such an object can either be put inline in the style prop of a component or it can be passed to the function StyleSheet.create(StyleObject) and be stored in a variable for shorter inline access by using a selector name for it similar to a class in CSS.

Syntax

  • <Component style={styleFromStyleSheet} />
  • <Component style={styleObject} />
  • <Component style={[style1,style2]} />

Remarks

Most React Native styles are their CSS forms, but in camel case. So, text-decoration becomes textDecoration.

Unlike in CSS, styles do not get inherited. If you want child components to inherit a certain style, you must explicitly provide it to the child. This means that you cannot set a font family for an entire View.
The one exception to this is the Text component: nested Texts inherit their parent styles.



Got any react-native Question?