Icons not loading correctly react-native-vector-icons

Question

I am using React-Native to build an application. I went on FlatIcon to get some custom icons, which I uploaded to IcoMoon and followed the installation steps to properly implement them on react-native.

The problem is the result I am getting is completely different to what I installed.

This the Icon I am getting on the application:

But I should be getting this result:

CustomIcon.js

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig);

Home.js

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import CustomIcon from '../helpers/CustomIcon';

export default class Home extends React.Component {

  render() {
    return (
      <ScrollView>
        <CustomIcon name="eco-fuel" size={80}  />
      </ScrollView>
    );
  }
}

As you can see, it has no colour and the layout is very different. I tried with other icons, but got same results.

Answer 1

I found an alternative to getting my required result. It still doesn't solve the problem of why react-native-vector-icons does not show the correct icon layout/colour.

Instead of using icons, I downloaded the .png from IcoMoon, which was 1-2kb each instead of the svg files which were 3-4kb each.

I created a CustomIcon.js

import React from 'react';
import {Image} from 'react-native'

export default CustomIcon = name => {
  switch (name) {
    case 'coal':
      return <Image source={require('../resources/assests/icons/coal.png')} />;
    case 'gas':
      return <Image source={require('../resources/assests/icons/eco-fuel.png')} />;
    case 'imports':
      return <Image source={require('../resources/assests/icons/electric-tower.png')} />;
    case 'hydro':
      return <Image source={require('../resources/assests/icons/hydroelectric-power.png')} />;
    case 'biomass':
      return <Image source={require('../resources/assests/icons/natural-product.png')} />;
    case 'nuclear':
      return <Image source={require('../resources/assests/icons/nuclear-energy.png')} />;
    case 'other':
      return <Image source={require('../../resources/assests/icons/power-plant.png')} />;
    case 'solar':
      return <Image source={require('../resources/assests/icons/solar-energy.png')} />;
    case 'wind':
      return <Image source={require('../resources/assests/icons/wind-energy.png')} />;
    default:
      return 'none';
  }
}

As you can see, this would take some time if you had a lot more images.

getting the images Home.js

import React, { Component } from 'react';
import {  ScrollView } from 'react-native';
import {ListItem } from 'react-native-elements';
import CustomIcon from '../helpers/CustomIcon';

export default class Home extends Component {
  render() {
        return (
            <ScrollView >
            {myList.map((l, i) => (
                <ListItem
                    leftAvatar={CustomIcon(l.name)} // CustomIcon(name)
                    key={i}
                    title={this.Capitalize(l.name)}
                    bottomDivider
                />
            ))}
            </ScrollView>
        )
    }
}

You can create an Icon component and pass it props to make your own Icons too. But as I am only using avatar this is good enough to have a function. But can be greatly improved.