entria / react-native-fontawesome Goto Github PK

please add typescript definitions

Fonts are either showing as a box with cross or some Chinese characters.

I have put my .ttf files in assets/fonts folder and run react-native link command.

• IOS example
• Android Example

Please release a new version as right now latest is 5.7.0 and Text props are not included.

I have to install a patch using github commit.

Can this be used in an Expo project?

Thanks,
Alvaro

follow this: react-native-share/react-native-share#288

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.

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!

follow this: react-native-share/react-native-share#288

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

This is stuck with my personal account, need to migrate this to Entria Org so we can move faster

https://stackoverflow.com/questions/43007471/how-to-migrate-npm-package-to-an-organization-scope

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;
}>;

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

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'

Currently we don't have any tests in this repo

• Add Tests
• Coverage report

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

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

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

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

• 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,

isn't it beautiful

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

Any chance you could update this to v5? Thanks.

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

I got an error "Unrecognized font family "FontAwesome", after the adding library to the project. How is possible to fix that?

follow this: react-native-share/react-native-share#288

Currently Icons are typed to be a generic string. Typescript can be used to generate proper type definitions from FontAwesomeIcons.js.

See discussion here:
#30 (comment)

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

I published my project and when I open it on iphone and android the icons are not visualized. Should I add the icons to the project?
attached image

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:

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

My button on android:

My button on IOS:

PS: I tried renaming all fonts to:

Still... not working.

Would be great if the NPM Package was updated with the last modifications and fixes.

I wonder how much effort will it take to support animating an icon, similar to using the "fa-spin" class for spinner icons - examples at http://fontawesome.io/examples/#animated

I'd love to help out with this :)

As requested by
https://twitter.com/CatiaFilipaS/status/870340913909968896

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

Thanks for the addon. I was looking for something like this.
Just a small 🐛 👇

<FontAwesome> key</FontAwesome> should be <FontAwesome>key</FontAwesome>
The bug does not allow to use white space with a name of the key and fails silently if added accidently.
One simple solution would be to add .trim() at {Icons[children.trim()]}

Cheers

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?

The version of React Native in the sample project is outdated and needs to be updated to the last version.

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.

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

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.

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) ?

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).

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

Why does /rturk/react-native-fontawesome redirect here and why does /entria/react-native-fontawesome have version 6.0.0 vs 7.0.0? After coming here I figured 6 was the lastest version and I've been debugging a problem for days!

Font Awesome recently added support for 'Duotone' icons. These are for Pro use only, but it'd still be good to support it in this package.

IconTypes is not working in react native. It gives the following error Can't resolve symbol IconTypes

Add cicle.yml file so anyone can publish releases to NPM automatically