style prop

Learn to style components with the style prop.

style prop

In React Native you style a component with the style prop. The value is a JavaScript object written with double curly braces: <Text style={{ color: 'red' }}>Hi</Text>.

Important difference from CSS: property names are written in camelCase. Not font-size but fontSize, not background-color but backgroundColor. String values go in quotes: 'red', while numbers can stay bare: 16.

Common style properties

A few core properties cover most needs. color sets text color, fontSize the point size, backgroundColor the background. padding adds inner space, margin adds outer space.

All accept a number or a string. { padding: 12 } is a pixel number; { color: 'tomato' } is a string. Values are written without a unit because React Native assumes pixels.

Exercise Write a red title

The Title component is empty. Return a <Text> with an inline style object: { color: 'red' }. The text should be Title.

Show example solution

import React from 'react';
import { Text } from 'react-native';

export default function Title() {
  return <Text style={{ color: 'red' }}>Title</Text>;
}

Test yourself

Which is a valid inline style?
```
<Text ??? >Hi</Text>
```
- style={{ color: 'red' }}
- style={ color: 'red' }
- style=(color: 'red')
- style:[ color: 'red' ]
Show answer

style={{ color: 'red' }} — style takes an object; an inline object uses double curly braces.

Complete the inline style

<Text style={{____}}>Hi</Text>

Show answer

<Text style={{color: 'red'}}>Hi</Text>

Match each property to its job

color

Text color
fontSize

Point size
backgroundColor

Background color
padding

Inner space

Next lesson: StyleSheet.create

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies