Menu
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?
907
If you want to add onPress prop to the image, then you have to use the TouchableOpacity component of React Native. Touchable Opacity has onPress prop and you can embed the Image component inside it. In the following example, we show an alert when the image is pressed.
To bind onPress with an argument in React Native, we can create a function that returns the onPress handler function. to add a Button with the onPress prop set to the function that we get after we call onPress with 'hello' .
Adding Image Let us create a new folder img inside the src folder. We will add our image (myImage. png) inside this folder. We will show images on the home screen.
Approach One: Using React Native ImageBackground right from the react-native library and pass the desired styling and source image. Approach Two: Building a custom Background image component which will act flawlessly as a full width background image using a React Native Image and View.
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>
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>
20
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
24
I solved my issue by using "TouchableWithoutFeedback"
<TouchableWithoutFeedback
onPress={() => {
this.moveToAddNewCustomer()}
}}
>
<Image
style={styles.newImage}
// resizeMode="contain"
source={require("~/assets/images/test123.png")}
/>
</TouchableWithoutFeedback>```
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
