React native icons

Question

Somebody try to use react-native-icons? I follow this steps:

• npm install react-native-icons@latest --save
• In XCode, in the project navigator right click Libraries ➜ Add Files to [your project's name]
• Go to node_modules ➜ react-native-icons➜ ios and add ReactNativeIcons.xcodeproj
• Add libReactNativeIcons.a (from 'Products' under ReactNativeIcons.xcodeproj) to your project's Build Phases ➜ Link Binary With Libraries phase
• Add the font files you want to use into the Copy Bundle Resources build phase of your project (click the '+' and click 'Add Other...' then choose the font files from node_modules/react-native-icons/ios/Libraries/FontAwesomeKit). Run your project (Cmd+R)

My Code

var React = require('react-native');
var Icon = require('FAKIconImage');
var { AppRegistry, StyleSheet, Text, View} = React;

class BringgersApp extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return(
      <View style={styles.container}>        
        <Text style={styles.welcome}>
          Welcome to Bringgers!          
        </Text>
        <Icon
          name='ion|beer'
          size={150}
          color='#887700'
          style={styles.beer} />       
      </View>
    )
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

React.AppRegistry.registerComponent('BringgersApp', function() { return BringgersApp });

After I build, he says the file doesn't exist...

Font file doesn't exist

I clean the DerivedData and try to build many times, but doesn't work.

Answer 1

Steps to install and usage Ionicons, FontAwesome and Entypo font Icons in react-native.

First you need to install using following command.

react-native install react-native-vector-icons

Then Required to Link:

react-native link react-native-vector-icons

Import font package files to your page:

import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Entypo from 'react-native-vector-icons/Entypo';

Usage Example:

<View>
    <Text>Ionicons Icons</Text>
    <Icon name='md-bicycle' />

    <Text>FontAwesome Icons</Text>
    <FontAwesome name='trophy' />

    <Text>Entypo Icons</Text>
    <Entypo name='aircraft' />
</View>

If you want to see list of available icons, you can look in this directory:

Ionicons:

\node_modules\react-native-vector-icons\glyphmaps\Ionicons.json

FontAwesome:

\node_modules\react-native-vector-icons\glyphmaps\FontAwesome.json

Entypo:

\node_modules\react-native-vector-icons\glyphmaps\Entypo.json 

Giving you my apps screenshot.

Answer 2

First things first,

• the maintainer of react-native-iconshimself points to the newer & maintained react-native-vector-icons
• Apparently as of now the rnpm project has been merged into react-native.

In other words, your life can be as easy as typing

react-native install react-native-vector-icons
react-native link react-native-vector-icons

And you may be good to go*)

*) at least it worked on my machine