title: Touchable Opacity breaks centering
body: <p>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 <code>align-items:'center'</code> attribute, it seems to break with Touchable Opacity. Is there a way I can center my components vertically and horizontally?</p>
  
  <p>ex. |&lt;-         LOGO          |</p>
  
  <pre><code>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(
        &lt;View style ={styles.nav}
          &lt;TouchableOpacity style= {styles.prev}  onPress={handleClick()}&gt;
                 &lt;Image  source={prev} /&gt;
              &lt;/TouchableOpacity&gt; 
            &lt;Image style={styles.logo} source={logo} /&gt;
         &lt;Image  source={prev} style={styles.tex} /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  
  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,
    }
  });
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/kVmwv.png" rel="nofollow noreferrer">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</a></p>