React native Flexbox center ignoring previous item - flexbox

Question

I'm creating a custom "Navigation bar" for my app and I need the following layout:
| ================================== |
| ICON TWO LINES TEXT |
| TWO LINES TEXT |
| ================================== |
The two <Text> fields should be at the center of the status bar and the icon on the right
That's how it looks like now:
Current layout
and in the inspector its how it looks
View inspector
as you can see the text is at the center of his space, but I want to be at the center of the entire component.
That's the code right now:
const styles = {
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#64619b',
height: 64,
paddingTop: 10,
},
title: {
color: 'white',
fontSize: 17,
},
belowTitle: {
color: 'white',
fontSize: 20,
fontWeight: 'bold',
},
backButton: {
width: 32,
height: 32,
alignSelf: 'center',
marginLeft: 16,
},
textContainer: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
};
class NavigatorHeader extends React.Component {
render() {
return <View style={[styles.container, this.props.style]}>
<TouchableOpacity onPress={this.onBackPress.bind(this)}>
<Icon name="ion|ios-arrow-back" size={32} color="white" style={styles.backButton} />
</TouchableOpacity>
<View style={styles.textContainer}>
<Text style={styles.title}>{this.props.title}</Text>
{this.props.belowTitle && <Text style={styles.belowTitle}>{this.props.belowTitle}</Text>}
</View>
</View>;
}
}

Answer 1

You could handle this by making it three views across. Put you button in the left, text in the center and then leave the right one empty. Then do "flex: 0.25" for the left and right then put "flex: 0.5" for the center. You can of course increase or decrease the two sides just make sure the center is whatever is left to get to 1.0