react-native how to add image and onpress into touchable

Question

I have touchable in react native, inside touchable I have image and on press like this

 <TouchableHighlight >
  <Image style={styles.imagestyle}
  source={require('./ic_action_name.png')} />
  onPress={() => this.moveToAddNewCustomer()}>
 </TouchableHighlight>

When I tried to run the app, I got this error

React.Childeren.only expected to receive a single React element child

How to fix this?

Answer 1

You need to do it like this:

<TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
    <Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableHighlight>

or

<TouchableOpacity onPress={()=>this.moveToAddNewCustomer()}>
    <Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableOpacity>

Answer 2

if

TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
    <Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableHighlight>

didn't work, you should put ur image in a <view>

Answer 3

By default there is no click or events that attached with any of the Views in react native like react.js. There are mainly two Views specifically designed for handling touch events. They are TouchableOpacity and TouchableHighlight. You can resolve your issue by wrapping your Image component with TouchableOpacity or TouchableHighlight.

<TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
    <Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableHighlight>

https://reactnative.dev/docs/touchablehighlight

https://reactnative.dev/docs/touchableopacity

Answer 4

I solved my issue by using "TouchableWithoutFeedback"

<TouchableWithoutFeedback
        onPress={() => {
           this.moveToAddNewCustomer()}
        }}
      >
        <Image
          style={styles.newImage}
          // resizeMode="contain"
          source={require("~/assets/images/test123.png")}
        />
      </TouchableWithoutFeedback>```