Giter Site home page Giter Site logo

react-native-fontawesome's Introduction

react-native-fontawesome

React Native Fontawesome Icons

npm version npm downloads

Benefits

  • No bloatware, one package with one iconset, nothing more nothing less
  • Full set of FontAwesome Icons properly updated
  • Insanely fast with minimal memory footprint
  • Uses the OS to render icons, for best in class performance (refer to performance note bellow)

Installation process

Using yarn

npm i -g yarn

yarn add react-native-fontawesome

Using npm

npm i --save react-native-fontawesome

This module uses Font Awesome version 5.9.0. There is no need to link binaries just import the package and include the Font File in your project.

This package will not download Font Awesome for you. You have to manually download the font files (Click here to get the right files) and put it into your working folder.

Follow this guides for adding FontAwesome.ttf to your projects:

Adding Custom Fonts to A React Native Application for IOS

Custom Fonts in React Native for Android

Usage

import FontAwesome, { SolidIcons, RegularIcons, BrandIcons } from 'react-native-fontawesome';

...
render() {
  return (
    <View>
        <FontAwesome icon={SolidIcons.smile} />
        <FontAwesome icon={RegularIcons.smileWink} />
        <FontAwesome icon={BrandIcons.github} />
    </View>
  );
},

Note on hyphens

Javascript don't accept hyphens as valid object names hence all hyphens were removed and names converted to camel case.

Example: th-large becomes thLarge

You can parse the name if you want, like this:

import { parseIconName } from 'react-native-fontawesome';

const validIcon = parseIconFromClassName('fas fa-chevron-left') // will be parsed to chevronLeft

// So anywhere you would have used Icons.chevronLeft (or some other icon name) 
// you can now just use the returned value directly (validIcon in this example).  
// The function parseIconName internally returns an BrandIcons[parsedIconName] or SolidIcons[parsedIconName] or RegularIcons[parsedIconName] result.
// So you can use like that:

<FontAwesome style={{fontSize: 32}} icon={validIcon}>

You can use that in some cases when you store the icon from web in you database and then you use dynamically in your mobile.

Styling

You can apply styles directly into the FontAwesome RN component by just passing a style as you do in a <Text> component.

<FontAwesome style={{fontSize: 32}} icon={BrandIcons.github}>

Click here to get the right font-files.

Warning!

Font Awesome have some paid icons and the link above is for downloading the free icons set. So if you choose some icon from our list, and this icon does not show properly, check if the icon that you choose is a paid one before open a issue. In this case, you must buy the PRO icons set in the Font Awesome's PRO website. In case you are using a paid icon, and you are using a paid icon set that you already bough, you must pass a pro property to the icon, like this:

<FontAwesome icon={RegularIcons.exclamationTriangle} pro={true}>

Why this is fast, and uses almost no extra memory

This package uses the Text element to render Icons. The Text element delegates to the OS the render process of the icons based on the Font file. Both IOS and Android render fonts amazingly fast with little memory overhead. In essence FontAwesome.ttf will be used by the OS to render icons and will benefit of years of native software improvement as well hardware acceleration.

Do you want to create a Custom Font with your Icons?

Take a look on this https://github.com/entria/font-generator, it will generate a TTF font to be used much like this package

Sample project

In this repository you'll find a sample/ folder that contains a working sample project, tested on both, Android and IOS. You can see here how to build and run the application

react-native-fontawesome's People

Contributors

a-shleifman avatar arnebr avatar calebkelly97 avatar grobmeier avatar guilherme6191 avatar jgcmarins avatar kristerkari avatar leandrosimoes avatar lucasbento avatar manntis avatar nirpeled avatar rodrigooler avatar rturk avatar sharplet avatar sibelius avatar tombailey avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-fontawesome's Issues

FontAwesome.ttf

Where is the FontAwesome.ttf? Without adding this file to the project library wouldn't work?

Wrong TS types.

Hi, this module is cool. But types are a bit off.

Current types are missing icon prop (it says that Icon has same props as Text):

declare module "react-native-fontawesome" {
  import React from "react";
  import { TextProperties } from "react-native";
  export { SolidIcons, RegularIcons, BrandIcons, parseIconFromClassName } from "react-native-fontawesome/FontAwesomeIcons";
  const Icon: React.ComponentClass<TextProperties>;
  export default Icon;
}

It might be an error on my end though. Just asking for confirmation.

Workaround:

import _FontAwesome from 'react-native-fontawesome';
const FontAwesome = (_FontAwesome as unknown) as React.ComponentClass<TextProperties & {
  icon: string;
  pro: boolean;
}>;

Some Icons not dispaying

Most icons are not displaying e.g
<Text style={{margin: 10, fontSize: 45, textAlign: 'center'}}><FontAwesome>{Icons.chevronCircleLeft}</FontAwesome></Text>

fontWeight causes crash on Android

While this is not a real issue with this package, It might be worth noting this in the ReadMe:

Setting fontWeight (to 'bold' in my case) causes the Icons to crash on android (but works on iOS).

IconTypes aren't actually available

I'd like to use IconTypes for the branding styles of my icons. I'm using version 5.7.0, however, when I look at the node_modules/Icons file, I don't see any IconTypes object getting exported. I've uninstalled and reinstalled with no luck. Any idea why this might be happening?

Please release a new version

The current tagged 6.0 release doesn't work with FontAwesome 5.4.1 on iOS without forcing the type property to any of the names.

This is already fixed in the latest commit to master e828bf5

Can't make it work on Android

It's working on IOS, but the font is not loading on Android. Am I doing something wrong?

  • I am using the 4.7.0 that README says

Here's my directory:
image

Since it's working in IOS, it's not an implementation problem, more like other weird stuff with the fonts?

My button on android:

image

My button on IOS:

image

PS: I tried renaming all fonts to:

image

Still... not working.

6.0.1 Icons with matching names do not show regular font

When upgrading to 6.0.1, if I try to use icons that have the same name between the regular and solid fonts, the icon always defaults to the solid font. Ex:

<FontAwesome type={IconTypes.FAR}>{Icons.circle}</FontAwesome>

and

<FontAwesome type={IconTypes.FAS}>{Icons.circle}</FontAwesome>

both show solid circles, even with the correct fonts installed in iOS (I have not tested Android). This is making some of the Regular icons inaccessible using this package.

Heavy Displaying Problem

fontawesomeall

I am only getting less than the half of all Icons displayed (see attatchment).
Is that normal? Or am I doing something wrong?

Thank you for your help in Advance

Missing index.d.ts in npm repo

I can clearly see the index.d.ts file in the git repository, but it seems not to be available when downloading the npm package, nor is it referenced in package.json.
Maybe it has not been npm published (yet) ?

Upgraded to 6.0.1 and icons turned into question marks

I just upgraded to 6.0.1, I downloaded the extra set of files, like fa-brands-400.eot and .tff etc etc

Ran react-native link react-native-fontawesome

closed simulator and react-native run-ios

I am trying to use the Twitter, Twitch and Discord icons. Twitter and Twitch were working just fine before the update, now they are all showing up as question marks.

I went to look at the references/dependencies in Xcode and everything is there just fine. Any ideas?

Thanks in advanced!

Pro rather than free?

How do we setup with the Pro pack, rather than just free?

FAR: Platform.OS === 'ios' ? 'FontAwesome5FreeRegular' : 'fa_regular_400',
FAS: Platform.OS === 'ios' ? 'FontAwesome5FreeSolid' : 'fa_solid_900',
FAB: Platform.OS === 'ios' ? 'FontAwesome5BrandsRegular' : 'fa_brands_400'

Icon is rendering broken.

Hey guys, In my android, Icon is rendering broken. My react-native version is 0.44.0
Take a look at screen shot. - The one before Learn - text

font-bug

iOS Font names are incorrect in 6.0.0 package

The font names are incorrect in the 6.0.0 package. The following should be renamed for iOS only.

fa_brands_400 -> FontAwesome5BrandsRegular
fa_regular_400 -> FontAwesome5FreeRegular
fa_solid_900 -> FontAwesome5FreeSolid

const IconTypes = {
  FAR: Platform.OS == 'ios' ? 'FontAwesome5FreeRegular' :'fa_regular_400',
  FAS: Platform.OS == 'ios' ? 'FontAwesome5FreeSolid' : 'fa_solid_900',
  FAB: Platform.OS == 'ios' ? 'FontAwesome5BrandsRegular' :'fa_brands_400'
}

Unless you use a font editor there is no way to change the name of the fonts in the .ttf this needs to be fixed on the .js level for convenient use.

Not working on Android

Try this now,

  • init new react-native project --> react-native init FaExample

  • see that project is running properly --> react-native run-android

  • close bundle screen (cmd) and delete app on your device

start to follow instructions on readme.md :

  • add npm --> npm i --save react-native-fontawesome

  • create mentioned directory on root of project, you will see --> FaExample/assets/fonts

image

  • add "rnpm" command to your package.json -->

image

  • download fontawesome files from link in readme.md

  • open rar and navigate to "webfonts" file

  • copy files "fa-brands-400.ttf, fa-regular-400.ttf, fa-solid-900.ttf" to FaExample/assets/fonts as mentioned

  • run link command and see purple output lines--> react-native link

  • copy first sample code from readme.md and paste in App.js --->

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import FontAwesome, { Icons } from 'react-native-fontawesome';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        <Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>
          <FontAwesome>{Icons.chevronLeft}</FontAwesome>
          Text
      </Text>

      </View>
    );
  }
}

  • run app again --> react-native run-android

so you will see the most amazing icon, crossed box,

image

isn't it beautiful

so what is this?
what we made wrong?
or you know, What is wrong with YOUR CODE?

Font Family Issue

iOS uses the PostScript name of the font. The Postscript name is changed in the Font Awesome 5.9 and the PostScript name is now FontAwesome5Free-Solid

Screen Shot 2019-08-07 at 11 16 16 AM

Screen Shot 2019-08-07 at 11 16 44 AM

Screen Shot 2019-08-07 at 11 18 46 AM

Please update NPM JS Readme

Hey @rturk,
can you please update the NPM JS Readme :)
That would be awesome for beginners to better get started with the awesome libary.

Greetings,
Arne

Red screen error when trying to use lib

Hi I have a function that takes a parameter named description and returns the following:

return (
        <View style={ Styles.cardGroupHeader }>
          <Text style={ Styles.cardGroupHeaderText }>No { description }</Text>
          <Text>
            <FontAwesome>{ Icons.chevronRight }</FontAwesome>
          </Text>
        </View>
    );

When I run my code I get a red screen error with the following error message:
Layout: -1 < 0

If I remove

<Text>
  <FontAwesome>{ Icons.chevronRight }</FontAwesome>
</Text>

The code works fine.

Any ideas on how to solve it? I only imported the package and tried to use the component.
I haven't followed the instructions of this link https://medium.com/@gattermeier/custom-fonts-in-react-native-for-android-b8a331a7d2a7

Are those steps required?

Thanks

Library searching for fonts with underscores in name, rather than default dashes.

Over the past while, I've been experiencing an issue that it seems a number of other users are having as well. Essentially, when I install everything and run, the app won't render fontawesome and shows Question marks or X's instead.

It seems that, in newer versions of Font Awesome, fonts are named 'fa-regular-400.ttf" (Using dashes), and I think the issues people are having might be stemming from this.

After messing around for a bit, I've found out that the library is searching for font files with underscores (Eg. 'fa_regular_400'), instead of the default filenames with dashes (Eg. 'fa-regular-400'), which causes it to not load the font correctly. After renaming the files and relinking, everything worked perfectly.

I'm not sure if this is a bug or possibly a configuration issue. But regardless, I thought I'd post this here to help anyone who may be having similar issues, and let the devs know in case this is a bug.

Display Question marks in Ios 14

In IOS 14 it Display Question marks in.
import FontAwesome, { SolidIcons } from 'react-native-fontawesome';
<FontAwesome icon={SolidIcons.tachometerAlt} />

Add Tests

Currently we don't have any tests in this repo

  • Add Tests
  • Coverage report

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.