React-Native Align Issue - css

Question

I just want the Icon to be on the left and the text to be on center.
I have this structure:
<View style={styles.mainContainer}>
<Error screen={screen}/>
<View style={styles.headerContainer}>
{back &&
<Icon
raised
name='arrow-back'
onPress={ onBackPress }
containerStyle={styles.back}/>
}
<Text style={styles.header}>{ title }</Text>
</View>
<View style={styles.contentContainer}>
{ children }
</View>
</View>
Kinda like this:
-> MainContainer
--> HeaderContainer
----> Back button
----> Title
mainContainer: {
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'flex-start'
},
headerContainer: {
flex: 1,
padding: 10,
flexDirection: 'row',
// ommited for clarity
},
back: {
alignSelf: 'flex-start'
},
header: {
fontSize: 24,
alignSelf: 'center'
},
But it doesnt work as it produces:
I also tried adding in HeaderContainer:
justifyContent: 'space-between',
and a blank <View />, but the result is not good:
As you can see, it's not centered really.
Edit Produces:
It's not really centered, because we put an imaginary thrid element. Can we do it with only two elemets? One in start and other on center?
Why is it not posible?

Answer 1

Try the following:
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<View style={{ flex: 1 }}>
{leftContent}
</View>
<View style={{ flex: 1, alignItems: 'center' }}>
{centerContent}
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
{rightContent}
</View>
</View>
Don't forget to set textAlign: 'center' if center component is <Text> or textAlign: 'right' if the right component is Text.

Answer 2

Put your Icon and text in separate Views and asign a flex to it something like this
<View style={styles.mainContainer}>
<Error screen={screen}/>
<View style={styles.headerContainer}>
<View style={{flex:.3,alignSelf:'flex-start}}>
{back &&
<Icon
raised
name='arrow-back'
onPress={ onBackPress }
containerStyle={styles.back}/>
}
</View>
<View style={{flex:.7,alignSelf:'flex-end',alignItems:'center'}}>
<Text style={styles.header}>{ title }</Text>
</View>
</View>
<View style={styles.contentContainer}>
{ children }
</View>
</View>
I think it shoud fix the problem