All icons throw `Icon with name "____" not found within the provided set.`

[CodeSpent]

Issue with using the Icon component. No icons seem to exist by name, but the SVGs are provided in the assets directory.

I have tried using a react-native link multiple times to no avail.

Here is the usage:

import React, { Component } from "react";

import { NavigationBar, Icon, Title, Text } from "@shoutem/ui";
import * as Font from "expo-font";
export default class App extends Component {
  state = {
    fontsAreLoaded: false,
  };

  async _loadFonts() {
    await Font.loadAsync({
      Rubik: require("./assets/fonts/Rubik-Regular.ttf"),
      "Rubik-Black": require("./assets/fonts/Rubik-Black.ttf"),
      "Rubik-BlackItalic": require("./assets/fonts/Rubik-BlackItalic.ttf"),
      "Rubik-Bold": require("./assets/fonts/Rubik-Bold.ttf"),
      "Rubik-BoldItalic": require("./assets/fonts/Rubik-BoldItalic.ttf"),
      "Rubik-Italic": require("./assets/fonts/Rubik-Italic.ttf"),
      "Rubik-Light": require("./assets/fonts/Rubik-Light.ttf"),
      "Rubik-LightItalic": require("./assets/fonts/Rubik-LightItalic.ttf"),
      "Rubik-Medium": require("./assets/fonts/Rubik-Medium.ttf"),
      "Rubik-MediumItalic": require("./assets/fonts/Rubik-MediumItalic.ttf"),
      "Rubik-Regular": require("./assets/fonts/Rubik-Regular.ttf"),
      "rubicon-icon-font": require("./assets/fonts/rubicon-icon-font.ttf"),
    });

    this.setState({ fontsAreLoaded: true });
  }

  async componentDidMount() {
    this._loadFonts();
  }
  render() {
    if (this.state.fontsAreLoaded) {
      return (
        <NavigationBar
          centerComponent={<Title>RoomEase</Title>}
          rightComponent={<Icon name="left-arrow" />}
        ></NavigationBar>
      );
    } else {
      return null;
    }
  }
}

I assumed it may have something to do with fonts, but then realized the Icon component is just loading those SVGs, but somehow not able to find any?

[kevinchristianto]

I have the same issue, I'm using Shoutem UI 4.4.4 and React Native 0.64.2. Any icons I'm trying to use always throw me a warning message telling that the icon is not provided within the icon set, but the icon I use are listed on the documentation.

[IAmRC1]

Using "@shoutem/ui": "^4.4.8", and getting same issue with sidebar icon. Wanted to try out this library and got stuck in the first component itself

[diegogurgel]

For now, I needed to combine this configuration with my current metro.config.js to solve the issue. Here's my final metro configuration

const { getDefaultConfig } = require('metro-config');

const blacklist = require('metro-config/src/defaults/exclusionList');
module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      experimentalImportSupport: false,
      inlineRequires: true,
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
      blacklistRE: blacklist([
        /node_modules\/.*\/node_modules\/react-native\/.*/,
      ]),

    },
  };
})();