I'm building an intro slider in React Native using a horizontal FlatList. Each slide consists of:
- A title aligned at the top of the slide
- An image and description block that should be verticallycentered in the remaining space below the title.
The problem is that the image and description block stay aligned at the top instead of centering vertically, even though I've applied flex: 1 and justifyContent: 'center' to their container.
<FlatList data={slides} horizontal pagingEnabled renderItem={({ item }) => (<View style={[styles.slide, { width }]}><View style={styles.titleContainer}><Text style={styles.title}>{item.title}</Text></View><View style={styles.contentWrapper}><item.SlideImage style={styles.image} /><Text style={styles.desc}>{item.descr}</Text></View></View> )}/>const styles = StyleSheet.create({ slide: { flex: 1, alignItems: 'center', flexDirection: 'column', // justifyContent: 'center', // removed to keep title at top }, titleContainer: { height: 60, justifyContent: 'center', alignItems: 'center', }, contentWrapper: { flex: 1, justifyContent: 'center', // intended to center vertically alignItems: 'center', width: '100%', paddingHorizontal: 20, }, title: { fontSize: 26, fontWeight: '700', textAlign: 'center' }, image: { width: 300, height: 300 }, desc: { fontSize: 16, textAlign: 'center', marginTop: 12, color: '#555', lineHeight: 22 },});I’ve tried several things:
Removing justifyContent: 'center' from slide to keep the title at thetop,
Using flexGrow: 1 instead of flex: 1 on contentWrapper,
Setting fixed height or height: '100%' on the slide container,
Making sure the image has fixed width and height.
Outline debugging:
BLUE: container
RED: slide
GREEN: contentWrapper
Still, the content inside contentWrapper stays stuck at the top and won’t center vertically.
Why doesn’t the contentWrapper take all the available vertical space to center its children? How can I fix this layout issue?