A framework for building native macOS apps with React.
Перейти к файлу
Adam Comella 70826dbafc iOS: Support inline view truncation (#21456)
Summary:
If text is truncated and an inline view appears after the truncation point, the user should not see the inline view. Instead, we have a bug such that the inline view is always visible at the end of the visible text.

This commit fixes this by marking the inline view as hidden if it appears after the truncation point.

This appears to be a regression. React Native used to have logic similar to what this commit is adding: 1e2a924ba6/Libraries/Text/RCTShadowText.m (L186-L192)

**Before fix**

Inline view (blue square) is visible even though it appears after the truncation point:

![image](https://user-images.githubusercontent.com/199935/46382038-d3a71200-c65d-11e8-8179-2ce4aad8d010.png)

The full text being rendered was:

```
<Text numberOfLines={1}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</Text>
```

**After fix**

Inline view is properly truncated:

![image](https://user-images.githubusercontent.com/199935/46382067-fdf8cf80-c65d-11e8-84ea-e2b71c229dae.png)

**Test Plan**

Tested that the inline view is hidden if it appears after the truncation point when `numberOfLines` is 1 and 2. Similarly, verified that the inline view is visible if it appears before the truncation point.

**Release Notes**

[IOS] [BUGFIX] [Text] - Fix case where inline view is visible even though it should have been truncated

Adam Comella
Microsoft Corp.
Pull Request resolved: https://github.com/facebook/react-native/pull/21456

Differential Revision: D10182991

Pulled By: shergin

fbshipit-source-id: a5bddddb1bb8672b61d4feaa04013a92c8224155
2018-11-20 00:11:56 -08:00
.circleci bump buck to 2018.10.29.01. fixes Android CI (#22049) 2018-10-31 21:42:36 -07:00
.github Make PR template consistent with Changelog (#22117) 2018-11-04 11:29:52 -08:00
ContainerShip Fix linting issues (#22062) 2018-11-01 14:29:16 -07:00
IntegrationTests Fix inline styles in IntegrationTests (#22165) 2018-11-06 13:50:57 -08:00
Libraries iOS: Support inline view truncation (#21456) 2018-11-20 00:11:56 -08:00
RNTester Replace global.alert use to fix eslint warnings (#22184) 2018-11-19 18:10:33 -08:00
React iOS: Support inline view truncation (#21456) 2018-11-20 00:11:56 -08:00
ReactAndroid Fix padding for Text Views in Fabric 2018-11-17 02:27:20 -08:00
ReactCommon Implement layout constraint when measuring text 2018-11-17 02:27:20 -08:00
android-jsc RN: Missing Copyright Headers 2018-10-31 01:37:26 -07:00
bots Make PR template consistent with Changelog (#22117) 2018-11-04 11:29:52 -08:00
flow Prettify remaining unprettified files (#21327) 2018-09-25 19:50:08 -07:00
flow-github Update React Native OSS Yarn and Gradle caches 2018-11-13 18:57:26 -08:00
gradle/wrapper fix gradle wrapper issue (#19976) 2018-08-08 15:03:01 -07:00
jest Back out "reapply TextInput es6 conversion with fixes, attemps to fix" 2018-11-16 14:50:23 -08:00
keystores Use fb_native_wrapper for all targets 2018-10-31 11:47:42 -07:00
lib Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
local-cli Flow v0.86.0 in xplat/js 2018-11-16 10:43:16 -08:00
react-native-cli Fix rn-cli linting issues (#22099) 2018-11-04 21:11:58 -08:00
react-native-git-upgrade Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
scripts Remove unused variables (#22097) 2018-11-04 10:41:46 -08:00
third-party-podspecs RN: Missing Copyright Headers 2018-10-31 01:37:26 -07:00
tools/build_defs RN: Missing Copyright Headers 2018-10-31 01:37:26 -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 editorconfig: Set indent_size for BUCK files to 4 (#21554) 2018-10-08 23:17:38 -07:00
.eslintignore Split out docs to their own repo 2017-12-05 13:02:54 -08:00
.eslintrc Add no-dupe-class-members to RN ESLint fonfig 2018-10-26 12:28:49 -07:00
.flowconfig Flow v0.86.0 in xplat/js 2018-11-16 10:43:16 -08:00
.flowconfig.android Flow v0.86.0 in xplat/js 2018-11-16 10:43:16 -08: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 Fix npm commands in DockerTests.md (#21758) 2018-10-12 14:43:40 -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 Update links & Add Code of Conduct (#21296) 2018-09-24 13:53:48 -07:00
React.podspec Upgrade folly to v2018.10.22.00 for iOS (#21976) 2018-10-29 12:13:11 -07:00
Releases.md Fix typo in Releases.md (#20487) 2018-08-01 07:16:56 -07:00
appveyor.yml bump Android NDK to r17c (#21628) 2018-10-11 22:08:37 -07:00
build.gradle gradle repo priority (#22041) 2018-10-31 14:32:38 -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 Flow v0.86.0 in xplat/js 2018-11-16 10:43:16 -08:00
react.gradle Fix incorrect merged asset path with flavor for Android Gradle Plugin 3.2. (#21782) 2018-10-31 05:29:13 -07:00
rn-cli.config.js Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
rn-get-polyfills.js Remove global babelHelpers and regenerator (#21283) 2018-09-26 10:03:05 -07:00
runXcodeTests.sh Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
settings.gradle add x86_64 arm64-v8a support. Fixes #2814 (#18754) 2018-09-24 11:32:56 -07:00
setupBabel.js Update copyright headers to yearless format 2018-09-11 15:33:07 -07:00
yarn.lock Flow v0.86.0 in xplat/js 2018-11-16 10:43:16 -08: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.