How to add image and onPress into touchable with React Native?

Sometimes, we want to add image and onPress into touchable with React Native.

In this article, we’ll look at how to add image and onPress into touchable with React Native.

How to add image and onPress into touchable with React Native?

To add image and onPress into touchable with React Native, we can set the onPress prop on the TouchableHighlight and put the Image the TouchableHighlight.

For instance, we write:

import * as React from 'react';
import { Image, TouchableHighlight, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View>
      <TouchableHighlight onPress={() => console.log('pressed')}>
        <Image
          source={{ uri: 'https://picsum.photos/200/300' }}
          style={{ height: 300, width: 200 }}
        />
      </TouchableHighlight>
    </View>
  );
}

to set onPress to a function that logs 'pressed'.

And we put the Image inside.

Asa a result, we see 'pressed' logged when we click on the image.

Conclusion

To add image and onPress into touchable with React Native, we can set the onPress prop on the TouchableHighlight and put the Image the TouchableHighlight.