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

Answer 3

Did you import file node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit/ionicons.ttf to your project?

Answer 4

Use React Native Package Manager : https://github.com/rnpm/rnpm

$ npm install rnpm -g Running

Installing dependency:

If you want to install a dependency and link it in one run:

$ rnpm install react-native-icons Linking dependency:

If you already have some installed (but not linked) modules, run:

$ rnpm link

Answer 5

1. Do you have "Build settings" -> "Header Search Paths" -> "$(SRCROOT)/node_modules/react-native/React" recursive?
2. Did you include icon fonts to "Build phases" -> "Copy Bundle Resources" in your Main project?

Answer 6

So in my project, I access the Icons through this code: let { Icon, } = require('react-native-icons');

Although I never had issues using FontAwesome icons, I had issues using Material Icons. You can also check out react-native-vector-icons.

Answer 7

try

rnpm link // If you installed module

Also

npm install module-name

and after execute

rnpm link

restart services..

This code relink automatic your modules.

Work to me. Thanks.

Answer 8

you can also try with native-base library. it provide tag it is easy and simple to use any icon which can be use with mobile devices.

follow this link for more information on native base icon. http://nativebase.io/docs/v2.0.0/components#icon

follow this link for more information on list of icon. https://ionicframework.com/docs/v2/ionicons/

ex.

<Icon name='ios-list'  style={style.icon} />

Answer 9

Step 1: Install react-native-elements

yarn add react-native-elements
# or with npm
npm i react-native-elements --save

Step 2: Install react-native-vector-icons

If you have already installed react-native-vector-icons as a dependency for your project you can skip this step. Otherwise run the following command:

# yarn
yarn add react-native-vector-icons
# or with npm
npm i --save react-native-vector-icons

# link
react-native link react-native-vector-icons

and after this just simply use them in your project like

import { Icon } from 'react-native-elements';

class IonBeer extends React.Component {
  render() {
    return (
         <Icon
          name='md-beer'
          type='ionicon'
          color='#887700'
          size=150
        />
    );
  }
}

and then simply use it like.

<IonBeer/>

any where you want

Answer 10

For Icon you can use react-native vector icon . It comprises of various icon that we can use in your project for a native look .

for more you can have a look https://github.com/oblador/react-native-vector-icons.

For more native components you can have a look at nativebase.io .It's an awesome library for UI in react native .