To vertically center the image + description block only in the space below the title, you just need to make sure that:
the wrapper that contains the content (contentWrapper
) has flex: 1
, so it takes all the remaining space below the header, and
you use justifyContent: 'center'
to center its children vertically inside that space.
In your code you were already almost there — the only missing piece is that the title container above must not grow (so it doesn’t steal space), while the content wrapper must grow.
<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>
Now make sure the styles look like this:
titleContainer: {
// DON'T add flex here, or it will take unnecessary space
paddingTop: 40, // your fixed top offset
paddingBottom: 20,
},
contentWrapper: {
flex: 1, // <– grows to fill the rest of the slide
justifyContent: 'center', // <– vertical centering
alignItems: 'center',
paddingHorizontal: 20,
}