How to Make Icons Pressable in React Native

Icons are the lifeblood of a mobile application’s user experience. By making icons pressable, app design takes on a dynamic new dimension, enabling users to delve into the app’s offerings and explore its features.

In this blog post let’s learn how to make the icons pressable in React Native. We use react native vector icons library to display icons.

I am not covering the installation and the initial setup of react native vector icons. You can get all details from how to use react native vector icons tutorial.

The Icon component of react native vector icons has many useful props. You can use its onPress prop to make the icon clickable.

See the following code.

import {View} from 'react-native';
import React from 'react';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

function App() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Icon
        name="home"
        size={30}
        color="red"
        onPress={() => console.log('pressed')}
      />
    </View>
  );
}

export default App;

That’s how to make the icon pressable in react native. I hope this tutorial is helpful for you.