title: Image with TouchableOpacity onpress not working in react native
body: <p>I am new to react native development. In my application in one screen I have image click. So i have taken image inside touchable opacity and wrote onpress method to that touchable opacity. But onpress is not working. But i have written the same code to another image, but this one is working.</p>
  
  <p>This is the code</p>
  
  <pre><code>mport React, {Component} from 'react';
  import {Text, View,TouchableHighlight,TouchableOpacity,StyleSheet,StatusBar,Image} from 'react-native';
  
  export default class Profile extends Component {
  
      static navigationOptions = ({ navigation }) =&gt; {
        return {
          title: `Welcome`,
          header: null,
        }
      };
  
      render() {
        const { state, navigate } = this.props.navigation;
        return (
          &lt;View style={styles.MainContainer}&gt;
          &lt;StatusBar
            barStyle="light-content"
            backgroundColor="#2f5597"
          /&gt;
               &lt;View style={{backgroundColor: "#fff",padding: 10}}&gt;
                   &lt;Image source={require('../../app/images/ic_visa.png')} style={{marginLeft: -10}}&gt;&lt;/Image&gt;
                   &lt;TouchableOpacity  onPress={() =&gt; this.backArrow()} style={styles.signoutContainer}&gt; 
                      &lt;Image source={require('../../app/images/ic_Signout.png')} style={styles.signOutImage}&gt;&lt;/Image&gt;
                   &lt;/TouchableOpacity&gt;
               &lt;/View&gt;
  
               &lt;View style={{backgroundColor: "#2f5597",flexDirection: 'row',alignItems: 'center'}}&gt;
                  &lt;TouchableOpacity onPress={() =&gt; this.backArrow()} style={{padding: 12.5,justifyContent: 'center',alignItems: 'center', backgroundColor:"#2f5597"}}&gt;
                     &lt;Image source={require('../../app/images/ic_arrow_white.png')} style={{justifyContent: 'flex-start',alignSelf: 'center',alignContent: 'center'}}&gt;&lt;/Image&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;Text style={{padding: 10,color:'#fff', backgroundColor:"#2f5597", fontSize: 18,fontWeight: "bold", paddingLeft: 5,alignSelf: 'center'}}&gt;Confirm payment&lt;/Text&gt;
                  &lt;View style={styles.signoutContainer}&gt; 
                      &lt;Text style={{color: '#fff',alignSelf: 'flex-end',marginRight: 30}}&gt;743509-001&lt;/Text&gt;
                   &lt;/View&gt;
               &lt;/View&gt;
  
               &lt;View style={{flexDirection: 'row', marginLeft: 30, marginTop: 30}}&gt;
                 &lt;Image source={require('../../app/images/ic_right.png')} style={{height: 48, width: 56}}&gt;&lt;/Image&gt;
                 &lt;Text style={{alignSelf: 'center',fontSize: 20,color: '#000',marginLeft: 10}}&gt;Payment Successful&lt;/Text&gt;
               &lt;/View&gt;
               &lt;Text style={{marginLeft: 30,marginTop: 10,color: '#000',fontSize: 14}}&gt;Thank you for your payment.&lt;/Text&gt;
               &lt;Text style={{marginLeft: 30,marginTop: 10,color: '#000',fontSize: 14,textAlign: "justify", marginRight: 30}}&gt;This page serves as your receipt and provides you with the confirmation number ****** that can be used for further reference. &lt;/Text&gt;
  
            &lt;View style={styles.buttonContainer}&gt;
              &lt;TouchableHighlight
                onPress={this.login}
                style={[styles.btn]}&gt;
                &lt;Text style={{color: 'white'}}&gt;MAKE ANOTHER PAYMENT&lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
            &lt;/View&gt;
  
          &lt;/View&gt;
        );
      }
      login=()=&gt;{
        console.log('Hi button click');
        alert("make another payment......");
      }
      backArrow=()=&gt;{
        // alert("Go to account list......");
        this.props.navigation.goBack();
      }
    }
  
  
    const styles = StyleSheet.create({
  
      MainContainer :{
           backgroundColor: "#fff",
           // Setting up View inside content in Vertically center.
             justifyContent: 'center',
             flex:1,
             margin: 0
           },
           signoutContainer: {
            flex: 1,  
            justifyContent: 'flex-end',
            alignItems: 'center'
           },
           numberContainer: {
            flex: 1,  
            justifyContent: 'flex-end',
            alignItems: 'center',
            backgroundColor: '#fff000'
           },
           signOutImage:{
            alignSelf: 'flex-end',
            width: 35,
            height: 35,
           },
           buttonContainer: {
            flex: 1,
            backgroundColor: '#FFF',
           },
  
           btn:{
             alignSelf: 'stretch',
             borderRadius: 6,
             backgroundColor: '#2f5597',
             padding: 10,
             marginTop: 30,
             marginLeft: 30,
             marginRight: 30,
             alignItems: 'center',
           }
    });
  </code></pre>
  
  <p>This is the screenshot of above code.</p>
  
  <p><a href="https://i.stack.imgur.com/r0nJV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/r0nJV.png" alt="enter image description here"></a></p>
  
  <p>Here left arrow image click working fine. I have written same onprees to that grey image. But grey image click not working. Here i tried both ways but not working.</p>
  
  <pre><code>onPress={() =&gt; this.backArrow()}
  onPress={this.login}
  </code></pre>
  
  <p>So please guide me how to solve this issue. Thanks In Advance..</p>