Color and font
- React Native course
- Beginner
- Lesson 32/116
- 4 min
Learn color, fontSize and fontWeight.
Color and font
Three properties shape how text looks. color sets the letter color, fontSize the point size, fontWeight the thickness. For example { color: 'navy', fontSize: 18, fontWeight: 'bold' } gives dark navy, 18 point, bold text.
Colors use English names ('tomato', 'steelblue') or hex codes ('#ff5733'). fontWeight accepts strings ('bold', 'normal') or numbers (400–900); 700 counts as bold.
Color formats
React Native accepts colors in three forms. English name: 'tomato', 'navy'. Hex: '#ff5733' or short '#f53'. Numeric rgb: 'rgb(255, 87, 51)'.
For transparency use rgba: 'rgba(255, 87, 51, 0.5)' gives a half-transparent red. The fourth value is an alpha channel between 0 and 1; 0 is fully transparent, 1 is fully opaque. Color names are written lowercase.
Practice Write the style file
Fill the empty StyleSheet.create block. Define a style named title with color: 'navy', fontSize: 20, fontWeight: 'bold'. The component returns <Text style={styles.title}>Title</Text>.
Starter code
import React from 'react';
import { Text, StyleSheet } from 'react-native';
export default function Title() {
return <Text>Title</Text>;
}
const styles = StyleSheet.create({
// Add the title style here
});Sample solution
import React from 'react';
import { Text, StyleSheet } from 'react-native';
export default function Title() {
return <Text style={styles.title}>Title</Text>;
}
const styles = StyleSheet.create({
title: { color: 'navy', fontSize: 20, fontWeight: 'bold' }
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match each property to its value
| Term | Meaning |
|---|---|
color |
'tomato' |
fontSize |
18 |
fontWeight |
'bold' |
backgroundColor |
'white' |
2 Which property makes text bold?
<Text style={{ ???: 'bold' }}>Important</Text>- fontStyle
- bold
- fontWeight Correct answer
- textBold
Explanation: 'bold' makes the text bold.
3 Write the fontWeight property
<Text style={{ fontSize: 16,____: 'bold' }}>Title</Text><Text style={{ fontSize: 16,fontWeight: 'bold' }}>Title</Text>Explanation: 'bold' makes the text bold.