Key Concepts

Review core concepts you need to learn to master this subject


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. 1
    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, …
  2. 2
    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…
  3. 3
    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…
  4. 4
    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…
  5. 5
    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…
  6. 6
    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…
  7. 7
    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…
  8. 8
    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 …

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo