title: OnPress not working inside Touchable Opacity
body: <p>I am building a mobile app on react-native! Recently I build my own header component for every page. Here is the code of my Header component. I have two icons inside that component. But unfortunately these buttons are not working at all!!</p>
  
  <pre><code>import React, {Component} from 'react';
  import { 
      Text, 
      View, 
      Image, 
    Dimensions,
    TouchableOpacity
  } from 'react-native';
  
  import Icon from 'react-native-vector-icons/Ionicons';
  
  import Styles from './Styles';
  
  export default class ChatHead extends Component {
    constructor(props) {
        super(props);
  
        this.state = {
        }
    }
  
    render(){
      console.log(this.props.headerText, this.props);
      if(this.props.headerText.length &gt; 16){
        name = this.props.headerText.substr(0, 16);
        name += "..."; 
      }
      else name = this.props.headerText;
  
      return(
        &lt;View style={Styles.viewStyle}&gt;
          &lt;Text style={Styles.nameStyle}&gt;{name}&lt;/Text&gt;
  
          &lt;TouchableOpacity 
            style={Styles.audioCallButton}
            onPress={() =&gt; console.log("Audio Button Pressed")}
          &gt;
            &lt;Icon name={'md-call'} size={25} color="white" align='right'/&gt;
          &lt;/TouchableOpacity&gt;
  
          &lt;TouchableOpacity 
            style={Styles.videoCallButton}
            onPress={() =&gt; console.log("Video Button Pressed")}
          &gt;
            &lt;Icon name={'ios-videocam'} size={28} color="white" align='right'/&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  };
  </code></pre>
  
  <blockquote>
    <p>onPress is not responding at all!</p>
  </blockquote>