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
Summary:
@public
This fixes an issue with the containerBackgroundColor property of `<Text>` nodes, where containerBackgroundColor was being overridden by the backgroundColor. I also fixed up the example so that it demonstrates the feature more clearly.
Test Plan:
* Check UIExplorer text example
* Run Catalyst snapshot tests and check MAdMan, Groups
Summary:
ActivityIndicator was forwarding all of its props except `style` to the inner native view. This meant that onLayout would report a zero-sized frame that was relative to the wrapper view instead of the parent of the ActivityIndicator.
This diff adds `onLayout` to the wrapper view instead of the native view.
In general, all components that forward props need to be audited in this manner.
Closes https://github.com/facebook/react-native/pull/1292
Github Author: James Ide <ide@jameside.com>
Test Plan: `<ActivityIndicator onLayout={...} />` reports the size of the spinner plus a position relative to its parent view.
Summary:
Some of the RCTTextView properties weren't set up correctly which would cause bugs when you'd set a property and then unset it, trying to revert to the default. This requires reading the default value from the dummy view instance, but some of these properties didn't have getters which was causing issues.
Fixes#1174
Closes https://github.com/facebook/react-native/pull/1175
Github Author: James Ide <ide@jameside.com>
Test Plan: Create a `<TextInput multiline={true}>` component. Give it a style with `color: 'blue'`, and then on the next render pass remove the style. No more red box.
Summary:
@public
{D1953613} added an optimization that allowed for shadow nodes that are not
backed by views, but didn't actually work robustly in the remove case because
the indices can get out of sync. That diff also started returning nil for raw
text nodes, which triggered this bug and broke "see more" functionality in the
`FBTextWithEntities` and `ExpandingText` components, leading to crashes in the
Groups app.
This diff fixes the issue by simply returning `UIView` placeholders again.
Slight perf/ memory cost but no more crashes and there should be no other
adverse affects.
We'll need to think up something more clever in order to properly support `nil`
views in the future, probably something that uses the shadow hierarchy to build
the View hierarchy, rather than mirroring identical commands to both - see
#1102.
Test Plan:
- TextUpdateTest fails without native changes, now passes with them.
- ExpandingText example no longer crashes.
- See More in Groups app no longer crashes.
Summary:
@nicklockwood - Could I get a review of this?
Just took `RCTTextField` and ported it from `UITextField` to `UITextView` as you mentioned in another discussion, and removed any `UITextField` specific attributes.
- How do you think this should behave when there are subviews?
- Do you know how we can respond to the `UIControlEventEditingDidEndOnExit` event to respond to submit? Because `UITextView` isn't a `UIControl` we can't just use `addTarget` with `UIControlEventEditingDidEndOnExit`.
- Any other feedback?
Still going to look over the `UITextView` docs in more detail and make sure we expose all important options, and add it to the UIExplorer example, just putting this out here for feedback.
Closes https://github.com/facebook/react-native/pull/991
Github Author: Brent Vatne <brent.vatne@madriska.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Fixes#979.
Previously, a Text whose width is determined automatically (as opposed to set by a container) would position the text incorrectly after an update to the text *if* the text's width did not change (i.e., when changing only digits in a font with tabular numbers).
Every time RCTShadowText's RCTMeasure runs, it sets the text container's size to be the maximum allowed size for the text. When RCTText's drawRect is called later, it relied on layoutSubviews having been called to set the text container's size back to the proper width. But if RCTMeasure returned the same dimensions as last time, then RCTText's frame wasn't reset and so layoutSubviews was never re-called. With this change, we set the textContainer's size each time we draw the text.
We could also fix this by using a different NSTextContainer instance in RCTMeasure. Not sure what the pros and cons of that are.
Closes https://github.com/facebook/react-native/pull/989
Github Author: Ben Alpert <balpert@fb.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Also fix RCTShadowText export name.
Closes https://github.com/facebook/react-native/pull/857
Github Author: "Dr. Kibitz" <info@drkibitz.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
For a very simple view I was observing that the text background was black and had to manually be set to transparent. This ensures that text nodes have a transparent background by default.
Closes https://github.com/facebook/react-native/pull/256
Github Author: James Ide <ide@jameside.com>
Test Plan:
This example component no longer renders what looks like a black block, and instead displays legible text.
var Example = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text>hello</Text>
</View>
);
},
});
var styles = StyleSheet.create({
container: {
flex: 1,
},
};
James Ide
Nick Lockwood
Tadeu Zagallo
Alex Akers
Vladislav Alexeev
Martin Konicek
Spencer Ahrens
Kevin Gozali
LYK
KJlmfe
chaceliang
Christopher Chedeau
Krzysztof Magiera
Georgiy Kassabli
Ben Alpert
Vladimir Kurchatkin
Brent Vatne
Dr. Kibitz
guru inamdar
