Touchable Opacity breaks centering

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

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',
},
});