contentContainerStyle
- React Native course
- Beginner
- Lesson 61/116
- 5 min
Learn content styling with contentContainerStyle.
What is contentContainerStyle for?
contentContainerStyle styles the inner wrapper that holds the scrolling content. It separates the outer shell of ScrollView from its content: the outer shell is styled with style, the content with contentContainerStyle.
The most common use is adding padding. For example contentContainerStyle={'{ padding: 16 }'} pulls all content 16 units in from the edges; the scrollbar no longer touches the screen border.
To center an empty state message, you also set flex: 1 and justifyContent: 'center' here. This split makes later tweaks easier.
padding gives content room
When you give contentContainerStyle a padding, the content pulls in from the edges. A single value applies to all sides: padding: 16.
For top and bottom only, write paddingVertical: 24. For right and left only there is paddingHorizontal: 12. These create header or footer gaps in a list layout.
Because gap is not yet fully supported on every platform in list layouts, you can give spacing with marginBottom. That keeps equal gaps between rows.
Practice Write a ScrollView with padded content
Write a <ScrollView> and give its content padding: 16. Add four <Text> rows inside. Export the App function.
Starter code
import { ScrollView, Text } from 'react-native';
// write the padded ScrollView hereSample solution
function App() {
return (
<ScrollView contentContainerStyle={{ padding: 16 }}>
<Text>Row one</Text>
<Text>Row two</Text>
<Text>Row three</Text>
<Text>Row four</Text>
</ScrollView>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 style vs contentContainerStyle
| Term | Meaning |
|---|---|
style |
Styles the outer shell |
contentContainerStyle |
Styles the inner wrapper |
padding |
Content margin |
flex: 1 |
Expands the content |
2 Which prop for content padding?
- contentContainerStyle
- showsVerticalScrollIndicator
- keyboardShouldPersistTaps
- style Correct answer
Explanation: contentContainerStyle styles the inner content wrapper.
3 Add content padding
import { ScrollView, Text } from 'react-native';
function App() {
return (
<ScrollView
____={{ padding: 16 }}>
<Text>Heading</Text>
</ScrollView>
);
}import { ScrollView, Text } from 'react-native';
function App() {
return (
<ScrollView
contentContainerStyle={{ padding: 16 }}>
<Text>Heading</Text>
</ScrollView>
);
}Explanation: contentContainerStyle applies padding to the content.