style prop
- React Native course
- Beginner
- Lesson 30/116
- 4 min
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.
Practice Write a red title
The Title component is empty. Return a <Text> with an inline style object: { color: 'red' }. The text should be Title.
Starter code
import React from 'react';
import { Text } from 'react-native';
export default function Title() {
// Style the Text with red color
return null;
}Sample solution
import React from 'react';
import { Text } from 'react-native';
export default function Title() {
return <Text style={{ color: 'red' }}>Title</Text>;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is a valid inline style?
<Text ??? >Hi</Text>- style={{ color: 'red' }} Correct answer
- style={ color: 'red' }
- style=(color: 'red')
- style:[ color: 'red' ]
Explanation: style takes an object; an inline object uses double curly braces.
2 Complete the inline style
<Text style={{____}}>Hi</Text><Text style={{color: 'red'}}>Hi</Text>Explanation: The color property takes the string value 'red'.
3 Match each property to its job
| Term | Meaning |
|---|---|
color |
Text color |
fontSize |
Point size |
backgroundColor |
Background color |
padding |
Inner space |