Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Supporting custom fonts the Android Way #19736

Closed
dulmandakh opened this issue Jun 15, 2018 · 9 comments
Closed

Supporting custom fonts the Android Way #19736

dulmandakh opened this issue Jun 15, 2018 · 9 comments
Labels
Contributor A React Native contributor. Partner Platform: Android Android applications. Resolution: Locked This issue was locked by the bot. Type: Discussion Long running discussion.

Comments

@dulmandakh
Copy link
Contributor

dulmandakh commented Jun 15, 2018

For Discussion

Android SDK 26 introduced easy way to support custom fonts, where users define font family using XML and use it with ResourcesCompat.getFont(context, R.font.myfont). Read https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml

Current React Native support for custom fonts on Android implemented in ReactFontManager and CustomStyleSpan, and it's hard to use font weights other than bold and regular (normal), like medium, light etc. To use custom font weights on Android, I have to specify font file name without extension in fontFamily of style, which breaks iOS apps. Therefore, I check the platform in JS to support both Android and iOS, and set fontFamily and fontWeight accordingly.

Adding support for Android Way seemed trivial with fallback to old way.

  1. check if font resource is exists
  2. if exists, get resource id and get typeface using ResourcesCompat.getFont(context, )
  3. else fallback to old way (ReactFontManager)

But, font styling of Text in Android implemented in ReactBaseTextShadowNode, which have no access to context. So, I think support custom fonts the Android Way will require refactoring of Text and decide if RN will support the OLD WAY.

Please consider this for FabricUIManager

CC: @hramos @mdvacca

@dulmandakh
Copy link
Contributor Author

We might implement a way to request font download using native module, which would greatly enhance developer and user experience. https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts

@ryanwhitney
Copy link

ryanwhitney commented Jul 25, 2018

Is there currently any way to reference fonts in android by their appropriate weight, beyond normal/bold? (i.e. not by putting the weight in FontFamily.)

@hramos
Copy link
Contributor

hramos commented Aug 21, 2018

@dulmandakh now that we have https://github.com/react-native-community/discussions-and-proposals in place, perhaps that's a better place for this type of discussion?

@vjsingh
Copy link

vjsingh commented Nov 12, 2018

It appears to me that any font-weight on android above '400' just gives bold text. Looking for a way to support in-between font weights of 500 or 600.

@fallenner
Copy link

after RN 0.57.4 android, The font has become thicker !! why??

@hramos hramos added Core Team and removed Core Team labels Feb 1, 2019
@hramos hramos added Partner Contributor A React Native contributor. and removed Core Team labels Mar 8, 2019
@cpojer
Copy link
Contributor

cpojer commented Mar 19, 2019

Thanks for sending a PR for this @dulmandakh, this feature is currently landing in #23865 so I'm gonna close this issue.

@cpojer cpojer closed this as completed Mar 19, 2019
@chrisbobbe
Copy link

Just a note to say that #23865 was reverted in eb40b09, so maybe this issue should be reopened.

@dulmandakh
Copy link
Contributor Author

it's landed in another PR and commit :D

@chrisbobbe
Copy link

Ooh, nice! For posterity, it looks like that PR was #24595 and the commit was fd6386a.

@facebook facebook locked as resolved and limited conversation to collaborators Mar 19, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 19, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Contributor A React Native contributor. Partner Platform: Android Android applications. Resolution: Locked This issue was locked by the bot. Type: Discussion Long running discussion.
Projects
None yet
Development

No branches or pull requests

8 participants