Touchable Opacity breaks centering - react-native

Question

I am trying to style a NavBar for an app with a logo in the center and the back button on the left. I gotten pretty far in centering the logo and button horizontally. However, when I set a align-items:'center' attribute, it seems to break with Touchable Opacity. Is there a way I can center my components vertically and horizontally?
ex. |<- LOGO |
import React,{ Component } from 'react';
import { StyleSheet, View, Image, Text } from 'react-native';
import { colors } from '../../utils/theme';
import { widthScale, heightScale } from '../../utils/responsive';
import {TouchableOpacity}from 'react-native';
const logo = require('../../assets/images/logo.png');
const prev = require('../../assets/images/baseline-arrow_back-24px.png');
class NavBar extends Component{
constructor(props) {
super(props);
}
render(){
return(
<View style ={styles.nav}
<TouchableOpacity style= {styles.prev} onPress={handleClick()}>
<Image source={prev} />
</TouchableOpacity>
<Image style={styles.logo} source={logo} />
<Image source={prev} style={styles.tex} />
</View>
);
}
}
export default NavBar;
const styles = StyleSheet.create({
nav: {
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: colors.tertiary,
width: widthScale('100%'),
height: heightScale('2%'),
paddingVertical: heightScale('4%'),
borderBottomWidth: 2,
borderWidth: 1,
flexWrap : 'wrap',
borderColor: 'green',
flex:1
},
logo: {
justifyContent: 'center',
alignItems:'center',
borderWidth: 1,
borderColor: 'blue'
},
info: {
justifyContent: 'center',
},
prev:{
borderRadius: 10,
borderWidth: 1,
borderColor: 'red',
alignItems:'center',
},
tex:{
borderRadius: 10,
borderWidth: 1,
borderColor: 'orange',
justifyContent: 'space-between',
alignItems:'center',
opacity: 0,
}
});
1. Without Touchable Buttons align-items: center, justify-content: center
2. With Touchable Buttons just justify-content: space-between
3. With Touchable Buttons justify-content: space-between and align-items: center

Answer 1

enter code here<SafeAreaView style={styles.maincontent}>
<View style={styles.toolbar}>
<TouchableOpacity style={{ justifyContent: 'center', }} activeOpacity={0.4} onPress={() => Actions.pop()}>
<Image source={{ uri: 'ic_arrow_back_gris_24dp' }} style={styles.back_img} />
</TouchableOpacity>
<Image source={{uri : 'logo'}} style={styles.back_txt}
/>
</View>
</SafeAreaView>
style :
maincontent: {
height: '100%',
width: '100%',
flexDirection: 'column',
backgroundColor: '#f1f1f1',
padding: 10
},
toolbar: {
backgroundColor: '#FFFFFF',
height: 50,
width: '100%',
flexDirection: 'row',
borderRadius: 3,
marginBottom: 10
},
back_img: {
height: 24,
width: 24,
justifyContent: 'center',
alignSelf: 'center',
marginLeft: 10,
padding: 4
},
back_txt: {
color: '#808080',
justifyContent: 'center',
alignSelf: 'center',
marginLeft: '13%',
fontSize: 14,
width: '65%'
},

Answer 2

It seems like the Touchable Opacity was stretching to fill space. By wrapping the Touchable Opacity in a View and limiting the width of that view, the styling worked as intended.
<View style={styles.nav}>
<View style={styles.toolbar}>
<TouchableOpacity style={{ justifyContent: 'nav'}} activeOpacity={0.4} onPress={this.props.prev}>
<Image source={prev} style={styles.back_img} />
</TouchableOpacity>
</View>
<Image source={logo} style={styles.back_txt}
/>
<Image source={prev} style={styles.tex} />
</View>
styles:
const styles = StyleSheet.create({
nav: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems:'center',
backgroundColor: colors.tertiary,
width: widthScale('100%'),
height: heightScale('2%'),
paddingVertical: heightScale('4%'),
borderBottomWidth: 2,
flexWrap : 'wrap',
},
tex:{
justifyContent: 'center',
alignItems:'center',
opacity: 0,
width: widthScale('10%')
},
toolbar: {
flexDirection: 'row',
alignItems: 'center',
width: widthScale('10%')
},
back_img: {
justifyContent: 'center',
alignSelf: 'center',
aspectRatio:1.5,
},
back_txt: {
justifyContent: 'center',
alignSelf: 'center',
},
});