CODEWITHSUNDEEP
reactjsimagenative
Gage Briggs
Gage Briggs

Reputation: 11

Click on image in React Native

I am working on an app that uses images and when the image is clicked, a new random image from a folder is to display. This is in React Native. I have no clue how to do it or where to go to get more information. Here is the code.

      <Image
        style={{ 
          width: 300,
          height: 300,
        }}
        source={
          require('./cards/card.png')
        }
      />

Upvotes: 1

Views: 10286

Answers (2)

Mahesh
Mahesh

Reputation: 804

Pressable is another option.
You can check React documentation here. https://reactnative.dev/docs/pressable

<Pressable onPress={onPressFunction}>
      <Image
        style={{ 
          width: 300,
          height: 300,
        }}
        source={
          require('./cards/card.png')
        }
      />
</Pressable>

Upvotes: 2

edhi.uchiha
edhi.uchiha

Reputation: 364

You can wrap your <Image /> component with TouchableOpacity other Touchable component. And make the image source dynamic using props or state.

For instance :

Your state

const [imageUri, setImageUri] = useState('')

const handlePress = () => {
   // some logic random the image
}

Your component


<TouchableOpacity onPress={handlePress}>
    <Image source={{
          uri: imageUri
        }}/>
<TouchableOpacity>

Reference: https://reactnative.dev/docs/touchableopacity

Upvotes: 1

Related Questions