How to add a button with icons in React Native?

Sometimes, we want to add a button with icons in React Native.

In this article, we’ll look at how to add a button with icons in React Native.

How to add a button with icons in React Native?

To add a button with icons in React Native, we can use the react-native-elements package to add the icon.

To install it, we run npm i react-native-elements.

Then we write:

import * as React from 'react';
import { View, TouchableHighlight, Text } from 'react-native';
import { Icon } from 'react-native-elements';

export default function App() {
  return (
    <View>
      <TouchableHighlight onPress={() => {}}>
        <View style={{ flexDirection: 'row' }}>
          <Icon name="rowing" />
          <Text>row</Text>
        </View>
      </TouchableHighlight>
    </View>
  );
}

to add a TouchableHighlight to provide the highlight effect for the button.

Then we add the button content in the View.

We make the Icon and Text display side by side with flexDirection set to 'row'.

Then we add the Icon and Text inside the View.

Conclusion

To add a button with icons in React Native, we can use the react-native-elements package to add the icon.

To install it, we run npm i react-native-elements.