A framework for building native apps with React. http://facebook.github.io/react-native/
Go to file
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
.circleci Deploy to npm on tagged commits only (#21250) 2018-09-22 09:16:58 -07:00
.github Add test case suggestion to PR template 2018-09-20 17:47:52 -07:00
ContainerShip Use Android SDK 27 in React Native 2018-09-20 07:56:23 -07:00
IntegrationTests Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
Libraries Picker: Remove PropTypes (#21281) 2018-09-23 22:50:40 -07:00
RNTester Use Android SDK 27 in React Native 2018-09-20 07:56:23 -07:00
React Debug only code were leaking into release builds on iOS. (#21232) 2018-09-20 17:47:52 -07:00
ReactAndroid Android subpixel text (#19043) 2018-09-24 02:03:31 -07:00
ReactCommon Add support for ActivityIndicator component 2018-09-19 08:03:20 -07:00
bots Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
flow Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
flow-github Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
gradle/wrapper fix gradle wrapper issue (#19976) 2018-08-08 15:03:01 -07:00
jest Use babel runtime instead of relying on global babelHelpers and regenerator (#198) 2018-09-21 16:17:40 -07:00
keystores Apply auto-formatter for BUCK files in fbandroid. 2017-02-27 14:04:56 -08:00
lib Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
local-cli Use Android SDK 27 in React Native 2018-09-20 07:56:23 -07:00
react-native-cli Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
react-native-git-upgrade Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
scripts Deploy to npm on tagged commits only (#21250) 2018-09-22 09:16:58 -07:00
third-party-podspecs Updated the glog library version from 0.3.4 to 0.3.5 (#20811) 2018-08-23 14:17:18 -07:00
tools/build_defs/oss Format bzl files with new buildifier 2018-09-11 17:17:33 -07:00
.buckconfig Use Android SDK 27 in React Native 2018-09-20 07:56:23 -07:00
.buckjavaargs limiting BUCK's memory for CI 2016-02-01 10:49:33 -08:00
.editorconfig Fix indent of .gradle files 2016-10-19 16:58:36 -07:00
.eslintignore Split out docs to their own repo 2017-12-05 13:02:54 -08:00
.eslintrc Initial Detox E2E iOS configuration to be run on RNTester (#20235) 2018-07-30 14:31:24 -07:00
.flowconfig Upgrade xplat/js to Flow v0.81 2018-09-18 13:47:57 -07:00
.flowconfig.android Upgrade xplat/js to Flow v0.81 2018-09-18 13:47:57 -07:00
.gitattributes Added a .gitattributes file, ensuring that Bash script source files (gradlew and 2015-10-13 23:10:39 -04:00
.gitignore Check Flow and run basic packager tests using open source RN config 2018-08-09 16:17:40 -07:00
.npmignore Update .npmignore to include generated bundle file 2017-02-03 11:43:31 -08:00
.nvmrc Add .nvmrc + fix node version for eslint 5 compat (#20109) 2018-07-31 02:34:16 -07:00
CODE_OF_CONDUCT.md Update repo documentation to match other Facebook projects 2018-09-10 18:02:26 -07:00
CONTRIBUTING.md Update repo documentation to match other Facebook projects 2018-09-10 18:02:26 -07:00
DockerTests.md Typo in DockerTests.md (#20009) 2018-07-02 20:32:07 -07:00
Jenkinsfile Container Testing Updates 2017-04-12 16:31:35 -07:00
LICENSE Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
LICENSE-docs More licenses 2015-03-24 19:59:10 -07:00
README.md Fix formatting in README.md (#21186) 2018-09-18 21:17:48 -07:00
React.podspec Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
Releases.md Fix typo in Releases.md (#20487) 2018-08-01 07:16:56 -07:00
appveyor.yml Use Android SDK 27 in React Native 2018-09-20 07:56:23 -07:00
build.gradle Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
cli.js Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
gradlew fix gradle wrapper issue (#19976) 2018-08-08 15:03:01 -07:00
gradlew.bat Add missing copyright headers (#21000) 2018-09-07 13:17:38 -07:00
jest-preset.json Fix jest snapshot testing on windows 2018-05-31 12:58:05 -07:00
package.json React: Upgrade to react-devtools@^3.4.0 2018-09-21 14:02:52 -07:00
react.gradle Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
rn-cli.config.js Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
rn-get-polyfills.js Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
runXcodeTests.sh Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
settings.gradle Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
setupBabel.js Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
yarn.lock fix ci path problem on Windows (#21203) 2018-09-19 10:47:41 -07:00

README.md

React Native · Circle CI Status Build status npm version PRs Welcome

Learn once, write anywhere: Build mobile apps with React.

See the official React Native website for an introduction to React Native.


Requirements

Supported target operating systems are >= Android 4.1 (API 16) and >= iOS 9.0. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS by default (tools like Expo can be used to get around this).

Building your first React Native app

Follow the Getting Started guide. The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:

How React Native works

React Native lets you build mobile apps using JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C, Java, Kotlin, or Swift. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state.

React Native combines smoothly with components written in Objective-C, Java, Kotlin, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.

The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

Full documentation

The full documentation for React Native can be found on our website. The source for the React Native documentation and website is hosted on a separate repo, https://github.com/facebook/react-native-website.

The React Native documentation only discusses the components, APIs, and topics specific to React Native (React on iOS and Android). For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.

Join the React Native community

See the CONTRIBUTING file for how to help out.

License

React Native is MIT licensed, as found in the LICENSE file.

React Native documentation is Creative Commons licensed, as found in the LICENSE-docs file.