Styling Components
Learn the fundamentals of styling in React Native, including Stylesheets and Flex Box
Start
Styling Components
Lesson 1 of 1
- 1Visual 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, …
- 2With 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…
- 3In 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…
- 4You 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…
- 5There 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…
- 6Using 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…
- 7Flexbox 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…