React native icons - react-native

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

Do you have "Build settings" -> "Header Search Paths" -> "$(SRCROOT)/node_modules/react-native/React" recursive?
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

For using icons in react native, there are many libraries available, react-native-vector-icons is one of them, it is very easy to use.
just follow 2 steps, first you have to install library,
then you have to link it also, to use it in your project.
Run this command for installing library
npm install react-native-vector-icons --save
Run this command for linking library
react-native link react-native-vector-icons
How to use this library
You can use any directory showed in the image, each directory has a lots of icons in it, now you have to choose which directory has a best icon for you...
For finding best directory for you, I will recommend you, simply visit this link:
Find best icon for your app
On this website simply search the name of icon you are lookig for,
You will get matching icons in all directories, you can simply remember the name of your selected icon, and use it in your app...
suppose I search arrow on this link, and I selected arrowsalt from AntDesign directory and want to use it in my App.
import Icon from 'react-native-vector-icons/AntDesign';
if you want to use FontAwesome, then simply replace AntDesign with FontAwesome, or the name of directory you want to use.
e.g import Icon from 'react-native-vector-icons/DirectoryName';
And use icon like this.
<Icon name="arrowsalt" size={30} color="blue" />
For further details Visit this link
Reference:
https://openbase.com/js/react-native-vector-icons/documentation
https://aboutreact.com/react-native-vector-icons/
https://oblador.github.io/react-native-vector-icons/

Answer 8

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 9

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 10

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 11

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 .