status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
react-native/ReactAndroid
History
Kevin Leung 65e4e674fc Android subpixel text (#19043) 
Summary:
<!--
  Required: Write your motivation here.
  If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->

Fixes inconsistency in custom font rendering in android. See explanation below.

<!--
  Required: Write your test plan here. If you changed any code, please provide us with
  clear instructions on how you verified your changes work. Bonus points for screenshots and videos!
-->

I tested the following on my physical device (Sony Z5C) and on Android emulator on Mac.
The test app contains various fonts in the AvenirNext family, which are added to the app as `.ttf` format.

Note that the character "thickness" is inconsistent. Some characters looks thicker than other. See the screenshots below as an example:
- Looks thicker: right half of the `g` and `&` as in "Region & Language" (list-view screen)
- Looks thicker: `w` as in `Change Password` (list-view screen)
- Looks vertically compressed: `a` and `e` as in "Message" in the bottom bar (list-view screen)
- Looks thicker: `A`, `N`, `V`, `v` (paragraph screen)
- Looks thinner: `i` (paragraph screen), it leaves extra space on its right hand side

![screenshot_20180427-151129](https://user-images.githubusercontent.com/1103788/39350754-ae9fafe2-4a31-11e8-8835-97280783bb95.png)
![screenshot_20180427-151419](https://user-images.githubusercontent.com/1103788/39350755-aecc9bba-4a31-11e8-8128-2d230f003dfa.png)

Every characters has consistent "weight" and looks nice:

![screenshot_20180427-150835](https://user-images.githubusercontent.com/1103788/39350753-ae698728-4a31-11e8-8a55-4e161c559b95.png)
![screenshot_20180427-151639](https://user-images.githubusercontent.com/1103788/39350756-aef95d44-4a31-11e8-820b-1a7dee77fabe.png)

<!--
  Does this PR require a documentation change?
  Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->

None

<!--
  Required.
  Help reviewers and the release process by writing your own release notes. See below for an example.
-->

[ANDROID] [ENHANCEMENT] [CustomStyleSpan] - Enable subpixel text rendering

<!--
  **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

    CATEGORY
  [----------]      TYPE
  [ CLI      ] [-------------]    LOCATION
  [ DOCS     ] [ BREAKING    ] [-------------]
  [ GENERAL  ] [ BUGFIX      ] [ {Component} ]
  [ INTERNAL ] [ ENHANCEMENT ] [ {Filename}  ]
  [ IOS      ] [ FEATURE     ] [ {Directory} ]   |-----------|
  [ ANDROID  ] [ MINOR       ] [ {Framework} ] - | {Message} |
  [----------] [-------------] [-------------]   |-----------|

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Pull Request resolved: https://github.com/facebook/react-native/pull/19043

Differential Revision: D10008155

Pulled By: hramos

fbshipit-source-id: 7fe9bb0f9be80380947ff80eac522e3cfd6b22cf
 		2018-09-24 02:03:31 -07:00
..
libs Bump Android Support Library to 27.1.1 (#20586) 2018-08-20 18:08:52 -07:00
src Android subpixel text (#19043) 2018-09-24 02:03:31 -07:00
.npmignore
…
DevExperience.md
…
README.md Fixing link to Android build guide. 2018-05-27 15:17:55 -07:00
build.gradle Use Android SDK 27 in React Native 2018-09-20 07:56:23 -07:00
gradle.properties Consolidate native dependencies versions (#20742) 2018-09-13 15:49:00 -07:00
proguard-rules.pro Remove TextLayoutBuilder from ReactAndroid dependency (#20600) 2018-08-22 13:48:53 -07:00
release.gradle Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00

README.md

Building React Native for Android

See the docs on the website.

Running tests

When you submit a pull request CircleCI will automatically run all tests. To run tests locally, see Testing.