Using icons with React Native - mostpros1/repository GitHub Wiki

In the App folder enter the following commands in this order.

npm install react-native-paper

npm install react-native-vector-icons

Enter the following code in the file where the icons will be placed, as an example we will be using the fictional App.js:

import React from "react";
import { StyleSheet } from "react-native";
import { Provider as PaperProvider } from "react-native-paper";
import Icon from "@expo/vector-icons/MaterialIcons";

(If you are using another library, do not forget to change the name "MaterialIcons" to the name of your respective library of choice.)

To begin using React Native Paper, we need to wrap our entire application with the PaperProvider. This ensures that the necessary props are passed down the tree of your application.

This is shown below:

  return (
    <PaperProvider>
      <SafeAreaView>

       </SafeAreaView>
    </PaperProvider>
  );

Use this list to find all available icons.

https://oblador.github.io/react-native-vector-icons/

To add your icon of choice add the following code to your project.

<Icon name="name"/>

If you want to add styling, do the following.

For example.

<Icon name="name" size={25} color="white" />

For further information, try your luck at: https://blog.codemagic.io/how-to-build-react-native-ui-app-with-material-ui/