Summary: public
This diff fixes the jumpy scrolling for multiline `<TextInput>` when using nested `<Text>` components to implement rich text highlighting.
The fix is to disable scrolling on the underlying UITextView, and nest it inside another UIScrollView that we control.
Reviewed By: ericvicenti, tadeuzagallo
Differential Revision: D2674670
fb-gh-sync-id: bacee3ae485523cc26ca8102b714e081df230629
Summary: public
Open-sourced the onSelectionChange event for RCTTextView, and also added onSelectionChange support for RCTTextField.
Reviewed By: javache
Differential Revision: D2647541
fb-gh-sync-id: ab0ab37f5f087e708a199461ffc33231a47d2133
Summary: public
It is now possible to display and edit rich text inside a multiline `<textInput>` by nesting a `<Text>` node inside it.
Note that this doesn't yet provide everything needed to build a full rich text editor (as there is no facility to capture or control the selected text range, or insert/remove text) but it does make it possible to apply token-based styling to text as the user types.
See the 'Attributed text' example in the UIExplorer > TextInput demo for details.
Reviewed By: javache
Differential Revision: D2622493
fb-gh-sync-id: b6bc9a46005322c806934541966460edccb59e70
Summary: * allowFontScaling false was still changing lineHeight as if it were true
fixes#2783
Closes https://github.com/facebook/react-native/pull/3840
Reviewed By: svcscm
Differential Revision: D2615710
Pulled By: nicklockwood
fb-gh-sync-id: 7e4205c58967640762deb5837ecaa2dde236782c
Summary: The default value (to retain current behavior) is set to `true`. Setting the value to `false` will prevent the textField from blurring but still fire the `onSubmitEditing` callback. However, the `onEndEditing` callback will not be fired.
Addresses issue: https://github.com/facebook/react-native/issues/2129
Closes https://github.com/facebook/react-native/pull/2149
Reviewed By: svcscm
Differential Revision: D2619822
Pulled By: nicklockwood
fb-gh-sync-id: 9a61152892f4afb5c6c53e7b38dffae13bc7e13f
Summary: public
Do not set a default backgroundColor of white when top-level RCTShadowText has
backgroundColor == nil.
Reviewed By: nicklockwood
Differential Revision: D2605636
fb-gh-sync-id: f2076d302e7ed574f7804080ccc80db1c9b9401c
Summary: public
Added opacity property to RCTShadowText, and use it to adjust the alpha
color component of nested text nodes when collapsing the RCTShadowText tree
into an NSAttributedString. The opacity is propagated down the tree,
multiplying the aggregate with the current node's opacity at each step. Also,
foreground and background colors are propagated down the tree so that in case
a node has an opacity style but no colors, the ancestor's colors can be used
when adjusting the alpha components.
Reviewed By: nicklockwood
Differential Revision: D2600402
fb-gh-sync-id: 2adb7b598b0a73c984bb2edaab545c02ab911c6b
Summary: public
Added lightweight genarics annotations to make the code more readable and help the compiler catch bugs.
Fixed some type bugs and improved bridge validation in a few places.
Reviewed By: javache
Differential Revision: D2600189
fb-gh-sync-id: f81e22f2cdc107bf8d0b15deec6d5b83aacc5b56
Summary: There is no point in returning empty block here. It's a tiny bit wasteful and prevents us from knowing if there are any UI updates.
Depends on D2571122 (not really).
public
Reviewed By: jspahrsummers
Differential Revision: D2571137
fb-gh-sync-id: 4a872f33f05eaf2d858009aa04ea89feaa23576c
Summary: Partially fixes#3316 by addressing 16 linter warnings:
- Strings should be singlequote
- Missing semicolon
Travis build jobs 1.1 through 1.4 complete successfully. 1.5 fails through what appears to be an unrelated issue on master.
Closes https://github.com/facebook/react-native/pull/3332
Reviewed By: @svcscm
Differential Revision: D2531718
Pulled By: @javache
fb-gh-sync-id: ca22fbeac5fe3b4f725775a72f21b6dd7a75d94b
Summary: Corrected computation of RCText element height with padding (padding was counted twice).
See also issue #2466.
Closes https://github.com/facebook/react-native/pull/2838
Reviewed By: @svcscm
Differential Revision: D2535924
Pulled By: @nicklockwood
fb-gh-sync-id: b9527803c0a5a6eed1db7e37c98b628750ab2045
Summary: @public
This diff implements inline image support for <Text> nodes. Images are specified using <Image> tags, however all properties of the image are currently ignored apart from the source (including width/height styles).
Images are loaded asyncronously, and will trigger a text re-layout when they have loaded.
Reviewed By: @javache
Differential Revision: D2507725
fb-gh-sync-id: 59d0696d00a1bc531915cc35242a16b2dec96e85
Summary:
Now that UITextViews have a delegate, they consume the "tap to scroll to top" gesture. This diff restores the original behavior of letting the top-level scroll view (if any) scroll to top instead.
I tried exposing scrollsToTop as a prop and was semi-successful in that I could turn scroll-to-top on and off for the top-level scroll view scroll, but the text view itself would never scroll to top. So instead of exposing it as a prop, this diff sets scrollsToTop always to NO, which is how TextInput behaved previously.
Closes https://github.com/facebook/react-native/pull/2333
Github Author: James Ide <ide@jameside.com>
Summary:
With a multiline TextInput, the text is initially rendered correctly but once you try to edit it, the cursor slides off the top of the view and out of its bounds. Also if the TextInput is scrollable, you can scroll the text out of the bounds of the view, which looks buggy unless you clip the overflow. This occurs because the top content inset is applied to the RCTTextView instead of the UITextView's text container.
This diff fixes both bugs by applying the vertical insets to the UITextView's textContainerInset instead of the RCTTextView's frame (which is a wrapper around a real UITextView).
The left inset is still applied to the frame because there is a bug with the text rendering when the left textContainerInset is negative: the initial text doesn't show up until you focus the text view. The bug doesn't occur when setting the right textContainerInset, so I apply this workaround to only the left inset.
Closes https://github.com/facebook/react-native/pull/2297
Github Author: James Ide <ide@jameside.com>
Summary:
Our events all follow a common pattern, so there's no good reason why the configuration should be so verbose. This diff eliminates that redundancy, and gives us the freedom to simplify the underlying mechanism in future without further churning the call sites.
Summary:
Dynamic Text Sizes for Text component.
Text gains new prop - allowFontScaling (false by default).
There is also AccessibilityManager module that allows you to tune multipliers per each content size category.
Summary:
Previously the text highlight overlay did not take padding into account in its positioning, so it would be misaligned for padded text. This fixes that.
Summary:
This diff implements highlighting of tapped text subranges for the iOS `<Text>` component, styled to match how iOS webkit views highlight links (translucent grey overlay with rounded corners).
Highlighting is enabled by default for any `<Text>` component which has an onPress handler. To disable the highlight, add `suppressHighlighting={true}` to the component props.
Summary:
This introduces event counts to make sure JS doesn't set out of date values on
native text inputs, which can cause dropped characters and can mess with
autocomplete, and obviates the need for the input buffering which added lag and
complexity to the component. Made sure to test simulated super-slow JS text
event processing to make sure characters aren't dropped, as well as typing
obviously correctable words and making sure autocomplete works as expected.
TextInput is now a controlled input by default without causing any issues for
most cases, so I removed the `controlled` prop.
Fixes selection state jumping by restoring it after setting new text values, so
highlighting the middle of some text in the new ReWrite example and hitting
space will replace that selection with an underscore and keep the cursor at a
sensible position as expected, instead of jumping to the end.
Ads `maxLength` prop to support the most commonly needed syncronous behavior:
preventing the user from typing too many characters. It can also be used to
prevent users from continuing to type after entering special characters by
changing it to the current length after a regex match. Made sure to verify it
works well with pasted input (including in the middle of existing text),
truncating it and collapsing the selection the same way it does on the web.
Fixes bug in TextEventsExample where it wouldn't show the submit and end events,
even though there were firing correctly.
Summary:
Dynamic Text Sizes for Text component.
Text gains new prop - allowFontScaling (true by default).
There is also AccessibilityManager module that allows you to tune multipliers per each content size category, but predefined multipliers are there.
This could potentially break some apps so please test carefully.
Summary:
Get the system font instead of Helvetica programmatically and add a virtual fontName called "System" that defaults to whatever the current system font is.
#1611
Closes https://github.com/facebook/react-native/pull/1635
Github Author: LYK <dalinaum@gmail.com>
Summary:
Remove layout-only views. Works by checking properties against a list of known properties that only affect layout. The `RCTShadowView` hierarchy still has a 1:1 correlation with the JS nodes.
This works by adjusting the tags and indices in `manageChildren`. For example, if JS told us to insert tag 1 at index 0 and tag 1 is layout-only with children whose tags are 2 and 3, we adjust it so we insert tags 2 and 3 at indices 0 and 1. This keeps changes out of `RCTView` and `RCTScrollView`. In order to simplify this logic, view moves are now processed as view removals followed by additions. A move from index 0 to 1 is recorded as a removal of view at indices 0 and 1 and an insertion of tags 1 and 2 at indices 0 and 1. Of course, the remaining indices have to be offset to take account for this.
The `collapsible` attribute is a bit of a hack to force `RCTScrollView` to always have one child. This was easier than rethinking out the logic there, but we could change this later.
Summary:
Remove layout-only views. Works by checking properties against a list of known properties that only affect layout. The `RCTShadowView` hierarchy still has a 1:1 correlation with the JS nodes.
This works by adjusting the tags and indices in `manageChildren`. For example, if JS told us to insert tag 1 at index 0 and tag 1 is layout-only with children whose tags are 2 and 3, we adjust it so we insert tags 2 and 3 at indices 0 and 1. This keeps changes out of `RCTView` and `RCTScrollView`. In order to simplify this logic, view moves are now processed as view removals followed by additions. A move from index 0 to 1 is recorded as a removal of view at indices 0 and 1 and an insertion of tags 1 and 2 at indices 0 and 1. Of course, the remaining indices have to be offset to take account for this.
The `collapsible` attribute is a bit of a hack to force `RCTScrollView` to always have one child. This was easier than rethinking out the logic there, but we could change this later.
@public
Test Plan: There are tests in `RCTUIManagerTests.m` that test the tag- and index-manipulation logic works. There are various scenarios including add-only, remove-only, and move. In addition, two scenario tests verify that the optimization works by checking the number of views and shadow views after various situations happen.
Summary:
@public
I've increased the warning levels in the OSS frameworks, which caught a bunch of minor issues. I also fixed some new errors in Xcode 7 relating to designated initializers and TLS security.
Test Plan:
* Test the sample apps and make sure they still work.
* Run tests.
Summary:
@public
setFrame:forRootView: wasn't triggering a batch update, which is required to trigger text update. This meant text wasn't re-displayed after a rotate, only after a touch.
I also found a bug that meant we weren't caching textStorage as much as we could be. Fixed that too.
Test Plan:
* Test <Text> example in UIExplorer and ensure it lays out on rotate.
* Test <Timers> example and verify text is still updating
* Products shouldn't be affected as they have separate text implementation