How to center one child vertically in multi child parent view in React Native

Viewed 3764

I have a view A (View - Image) which is a parent to B (Text) and C (Text). I want B Text to always be vertically and horizontally centered in A. The problem with using alignItems: 'center', justifyContent: 'center' on the container A is that it considers the combined height of B and C, then centers them vertically based on their combined height. I simply want B centered inside A, and I want C to be aligned on the bottom.

  • B must always be vertically aligned center, regardless of it's height or the length of text that B contains.
  • C must always be aligned to the bottom of container A.

Here is a visual of what I'm trying to get:

enter image description here

And some code as an example:

<View style={styles.viewA}>
    <Text style={styles.textB}>
      I should be vertically centered in A, regardles of my size or the size / place of C.
    </Text>
    <Text style={styles.TextC}>
      I should be on the bottom of A
    </Text>
</View>

const styles = StyleSheet.create({
  viewA: {
    height: 360,
    width: 360,
    alignItems: 'center', // doesn't work
    justifyContent: 'center', // doesn't work
    ???: ???
  },
  viewB: {
    ???
  },
  viewC: {
    ???
  }
});
1 Answers
Related