React Native
contentContainerStyle
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.
Exercise Write a ScrollView with padded content
Write a <ScrollView> and give its content padding: 16. Add four <Text> rows inside. Export the App function.
Show example 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;
Test yourself
-
style vs contentContainerStyle
- style
- Styles the outer shell
- contentContainerStyle
- Styles the inner wrapper
- padding
- Content margin
- flex: 1
- Expands the content
-
Which prop for content padding?
- contentContainerStyle
- showsVerticalScrollIndicator
- keyboardShouldPersistTaps
- style
Show answer
style — contentContainerStyle styles the inner content wrapper.
-
Add content padding
import { ScrollView, Text } from 'react-native';
function App() {
return (
<ScrollView
____={{ padding: 16 }}>
<Text>Heading</Text>
</ScrollView>
);
}
Show answer
import { ScrollView, Text } from 'react-native';
function App() {
return (
<ScrollView
contentContainerStyle={{ padding: 16 }}>
<Text>Heading</Text>
</ScrollView>
);
}
Next lesson: onScroll
