entria / react-native-fontawesome Goto Github PK
View Code? Open in Web Editor NEWReact Native Font Awesome Icons
License: MIT License
React Native Font Awesome Icons
License: MIT License
follow this: react-native-share/react-native-share#288
Where is the FontAwesome.ttf? Without adding this file to the project library wouldn't work?
Would be great if the NPM Package was updated with the last modifications and fixes.
Currently we don't have any tests in this repo
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!
Can this be used in an Expo project?
Thanks,
Alvaro
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.
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.
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'
As requested by
https://twitter.com/CatiaFilipaS/status/870340913909968896
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).
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 :)
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
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'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?
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 publish
ed (yet) ?
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
In IOS 14 it Display Question marks in.
import FontAwesome, { SolidIcons } from 'react-native-fontawesome';
<FontAwesome icon={SolidIcons.tachometerAlt} />
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.
The version of React Native in the sample project is outdated and needs to be updated to the last version.
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
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>
);
}
}
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?
follow this: react-native-share/react-native-share#288
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.
please add typescript definitions
follow this: react-native-share/react-native-share#288
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
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
Any chance you could update this to v5? Thanks.
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!
Most icons are not displaying e.g
<Text style={{margin: 10, fontSize: 45, textAlign: 'center'}}><FontAwesome>{Icons.chevronCircleLeft}</FontAwesome></Text>
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
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)
It's working on IOS, but the font is not loading on Android. Am I doing something wrong?
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.
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.
Add cicle.yml file so anyone can publish releases to NPM automatically
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;
}>;
I got an error "Unrecognized font family "FontAwesome", after the adding library to the project. How is possible to fix that?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.