79723915

Date: 2025-08-03 09:36:57
Score: 0.5
Natty:
Report link

To vertically center the image + description block only in the space below the title, you just need to make sure that:

  1. the wrapper that contains the content (contentWrapper) has flex: 1, so it takes all the remaining space below the header, and

  2. 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,
}
Reasons:
  • Contains signature (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Low reputation (0.5):
Posted by: Conta