Align back button in the left and text in the center - react-native

Question

I want to put the string 'example' in the middle of the header.
Code:
<View style={viewStyle}>
<ImageButton
imageUrl={require('./assets/icons/Back-25.png')}
onPress={props.onPressPhone}
/>
<Text>{props.headerText}</Text>
</View>
viewStyle:
backgroundColor: 'white',
alignItems: 'center',
height: 60,
paddingTop: 15,
shadowColor: '#000000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.2,
elevation: 2,
position: 'relative',
flexDirection: 'row',
justifyContent: 'space-between',
Image Button style:
alignSelf: 'center',

Answer 1

One way to do this is to use a same-size empty .png image on the other side, and space-between in your header styling:
<View style={ styles.header }>
<Button style={{left: 10}} onPress={ () => this.handlePress() }>
<Image source={ require('../images/arrow_back.png') } style={{ width: 50, height: 50 }} />
</Button>
<Text style={styles.header_text} >{this.props.title}</Text>
<Button style={{right: 10}}>
<Image source={ require('../images/no_image.png') } style={{ width: 50, height: 50 }} />
</Button>
</View>
and
header: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
width: width,
backgroundColor: '#09146d',
},
...a bit kludgy, but it has worked for me. Alternatively, you could divide up the header with flex-based views, using flexDirection: 'row' :
<View style={ styles.header }>
<View style={{flex: 1}}>
//Button in here
</View>
<View style={{alignItems: 'center', flex: 6}}>
//Text in here
</View>
<View style={{flex: 1}}>
//Nothing in here
</View>
</View>
Good luck!

Answer 2

Expand on kwishnu's flex idea:
flex: 1; will always allocate only 1/3rd of the width to the title. So use flex: 1 1 auto; instead to allow the title to expand into all available space.
add min-width: fit-content; to the back button (so that the title will never cover the back button).
Add bonus styling in the case where the title is really, really long
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="header" style="display: flex;">
<span style="flex: 1; background: aqua; min-width: fit-content;">Back Button</span>
<span style="flex: 1 1 auto; text-align: center; background: beige;">Edit title to see behaviour whien title is very long</span>
<span style="flex: 1; background:red;"></span>
</div>