How to Include Icon Button in React Native

Icons are the most important element of user interaction. It not only makes the app attractive but also makes it more user-friendly.

It also helps for a better user experience. Buttons with icons are more interactive than a button that contains only text.

This article will show how we can implement a button with icons in a React-Native app. We will discuss the topic most deeply by using necessary examples and explanations.

Implement a Button With Icons in React Native

Our example below illustrates how we can create a basic icon button in the React-Native app. Our code will be as follows:

// Importing necessary packages
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Button, Image, Text, View, Alert} from 'react-native';
import { IconButton, Colors } from 'react-native-paper';

// Our main function
export default function App() {
  return (  // Creating a button with a simple action
    <View style={styles.container}>
      <IconButton
         icon="login"
         size={25}
         onPress={() => Alert.alert('Button clicked !!!')}
      />

    </View>
  );

}

// Providing some style to our simple app.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 50,
  },
});

We already commanded the purpose of all necessary lines regarding the steps shared above in the example.

The example above created the icon button using the <IconButton /> tag. Inside it, we specified the icon name icon="login", icon size size={25} and a simple action to the icon button onPress={() => Alert.alert('Button clicked !!!')}, and that’s it.

Now when running the above example code, you will get the below output on your screen.

Output:

Remember you may need to install the react-native-paper and import the package to your React-Native project.

Please note that the example code shared above is created in React Native, and we used the Expo-CLI to run the app.