Styling

Download react-native eBook

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.

Related Examples

Stats

73 Contributors: 3
Monday, June 19, 2017
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook