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:
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: {
???
}
});
