Color and font

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.

Exercise 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>.

Show example 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' }
});

Test yourself

Match each property to its value

color

'tomato'
fontSize

18
fontWeight

'bold'
backgroundColor

'white'
Which property makes text bold?
```
<Text style={{ ???: 'bold' }}>Important</Text>
```
- fontStyle
- bold
- fontWeight
- textBold
Show answer

fontWeight — 'bold' makes the text bold.

Write the fontWeight property

<Text style={{ fontSize: 16,____: 'bold' }}>Title</Text>

Show answer

<Text style={{ fontSize: 16,fontWeight: 'bold' }}>Title</Text>

Next lesson: Margin and padding

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies