React-native-vector-icons: Can't not use custom vector icon with IcoMoon

[dieunt]

Hi, I'm making my custom vector icon using IcoMoon website.
After download the zip file from IcoMoon, i got a selection.json and i put it in my react native project.
My code something like this:

myfont.js

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

myfile.js

import {Actions, ActionConst} from 'react-native-router-flux';
import React, { Component } from 'react';
import {StyleSheet} from 'react-native';
import {Footer, FooterTab, Button} from 'native-base';

import myfont from './myfont';

module.exports = React.createClass({
     render() {
         return(
                <FooterTab theme={theme}>
                     <Button >
                         My Text
                         <myfont name="ico_myfont" />
                     </Button>
                 </FooterTab>
         )
     }
})

In xCode, i'm also put myfont.ttf in to Resource folder.

But when run, React Native has an warning like this, and my icon didn't show.

YellowBox.js:69 Possible Unhandled Promise Rejection (id: 0):
Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:98469:32
    at Array.map (native)
    at Footer.renderFooter (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:98402:16)
    at Footer.render (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:98482:6)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:18771:13
    at measureLifeCyclePerf (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:18052:8)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:18770:19)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:18797:24)
    at ReactCompositeComponentWrapper.performInitialMount (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:18339:22)
    at ReactCompositeComponentWrapper.mountComponent (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:18235:13)

Any idea, please?

Thank you.

[oblador]

Looks like an error coming from the native-base Footer component. Try posting the issue there 👍

[iiitmahesh]

@dieunt Did u solved that issue, I have a same problem???

[dieunt]

@iiitmahesh yes, i just add id for each ListItem.
<View id={thumb}></View>

[1fabiopereira]

I've a similar problem, but the error message is Cannot read property 'name' of undefined.

[EdwinJDiaz]

Same problem here:

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

and can not find my icon

I import it like that
import CustomIcon from "../../commons/customIcon/CustomIcon.js";

[Gregoirevda]

Icomoon generated json is not adding the properties object on each icon anymore...

[mirhat]

@EdwinJDiaz I know this was a long time ago, but did you solve this issue?