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
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
- 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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory