Styling Components

Learn the fundamentals of styling in React Native, including Stylesheets and Flex Box

Start

Key Concepts

Review core concepts you need to learn to master this subject

StyleSheet

style Property

Using StyleSheet Definitions

Dynamic Styling

Flex in React Native

flexDirection

justifyContent

Dimensions in React Native

`StyleSheet`

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  paragraph: {
    fontSize: 16,
  },
  label: {
    fontSize: 11,   
    textTransform: 'uppercase'
  }
});

<Text style={styles.paragraph}>My paragraph</Text>
<Text style={styles.label}>My label</Text>

StyleSheet is an abstraction that replaces CSS by accepting CSS styling rules using a two-dimensional JavaScript object.

Styling Components

Lesson 1 of 1

1
Styling in Expo and React Native
Visual design is more than just nice colors and grid layouts. A good design can draw the user’s attention to the most important information on the page, suggest interactions that they can perform, …
Start
2
StyleSheets
With Expo and React Native, we have to define styling using a plain JavaScript object because of the lack of CSS. In previous exercises, you may have used inline JavaScript objects for each compone…
Start
3
Combining Styles
In the previous exercise, we used the StyleSheet API to reuse styling rules and improve the readability of our components. Besides these benefits, one of the biggest drawbacks is that the styling i…
Start
4
Width and Height
You might have noticed that Expo and React Native don’t always use units, like pixels (px), when setting dimensions or font sizes. That’s because using pixels in mobile apps will cause a lot of dev…
Start
5
Flex (box)
There are a lot of different screen sizes and shapes for mobile apps. The screens can also “change shape” by rotating the device. It’s important to make your app responsive because of these changin…
Start
6
Flex Direction
Using flexbox has other benefits besides giving you full control over how the available space is distributed – we can also control the direction of the children elements within the flexbox. The def…
Start
7
Flex Justify Content
Flexbox also allows us to control how the child elements are positioned within our parent flexbox. The property to control this aspect is the justifyContent property. We have already used the cente…
Start
8
Review
Great job! We’ve covered the fundamentals of styling in Expo and React Native, including: * Inline styling with the style property * Refactoring inline styles with StyleSheet.create * Dynamically …
Start