React Native – Styling

There are a couple of ways to style your elements in React Native.

You can use the style property to add the styles inline. However, this is not the best practice because it can be hard to read the code.

In this chapter, we will use the Stylesheet for styling.

Container Component

In this section, we will simplify our container component from our previous chapter.

App.js

Presentational Component

In the example given below, we will import the StyleSheet.

At the bottom of the file, we will create our stylesheet and assign it to the styles constant. Note that our styles are in camelCase and we do not use px or % for styling.

To apply styles to our text, we need to add style = {styles.myText} property to the Text element.