How do you use icons in a React Native Elements Header object?

Issue

I went through all the set up steps at https://reactnativeelements.com/docs and am just trying to do a simple Header following their example.

If I click the "Copy Code" button in their playground, it gives me this:

import * as React from "react";
import { Header, Icon } from "@rneui/base";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default () => {
  return (
    <Header
      backgroundImageStyle={{}}
      barStyle="default"
      centerComponent={{
        text: "MY TITLE",
        style: { color: "#fff" }
      }}
      centerContainerStyle={{}}
      containerStyle={{ width: 350 }}
      leftComponent={{ icon: "menu", color: "#fff" }}
      leftContainerStyle={{}}
      linearGradientProps={{}}
      placement="center"
      rightComponent={{ icon: "home", color: "#fff" }}
      rightContainerStyle={{}}
      statusBarProps={{}}
    />
  );
}

When I do that in my app, though, it shows question marks for the icons:

Their set up docs do include this step for manual linking:

react-native link react-native-vector-icons

which I can't do because react-native no longer supports it.

But I don't know what's going wrong here. Any help would be appreciated.

If it helps, these are my dependencies in my package.json:

    "@rneui/base": "^4.0.0-rc.6",
    "@rneui/themed": "^4.0.0-rc.6",
    "react": "18.0.0",
    "react-native": "0.69.4",
    "react-native-asset": "^2.0.1",
    "react-native-gesture-handler": "^2.6.0",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-safe-area-context": "^4.3.3",
    "react-native-vector-icons": "^9.2.0"

Solution

For Android, I just had to follow the installation instructions at the Github repo for react-native-vector-icons here. (You might think that's obvious, but the docs for react-native-elements just have you do a yarn/npm install of react-native-vector-icons and act like that's enough to get you up and running.)

They had me add this to the android/app/build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

and then rebuild the app.

For iOS it's more complicated. You need to use XCode and manually copy over the fonts, and then update some files. The directions are at that link above. But they're not quite accurate because they have you add fonts to the Build Phases > Copy Bundle Resources thing in XCode. (In my case, I didn't manually have to add them. They were already there.) However, running the code gave me an error "multiple commands produce" these .ttf file.

The solution to that was to go back to Build Phases > Copy Bundle Resources and manually delete all the icon .ttf files listed there, as per this article.

Everything is working now. It's stupid it's this complicated though

Answered By - Reagankm