Summary:
Motivation:
----------
This is one of the more sought after feature requests for RN:
react-native.canny.io/feature-requests/p/add-speed-attribute-to-scrollto
This PR adds the support to add a "duration" whenever using "scrollTo" or "scrollToEnd" with
a scrollView. Currently this only exists for Android as the iOS implementation will be somewhat more involved.
This PR is also backwards compatible and does not yet deprecate the "animated" boolean. It may not make sense to ever deprecate "animated", as it could be the flag that is used when devs want the system default duration (which is 250ms for Android). I'm not sure what it is for iOS. It would simplify things to remove "animated", though.
Pull Request resolved: https://github.com/facebook/react-native/pull/22884
Differential Revision: D13860038
Pulled By: cpojer
fbshipit-source-id: f06751d063a33d7046241c95348b6abbb327d36f
Summary:
On Android `textTransform` breaks other styles applied to the text. It seems related to the usage of `ReplacementSpan` which allows drawing the text manually but seems to throw away some changes made by other span applied to the text.
To fix it I removed the usage of `ReplacementSpan` and simply transform the text before appending it to the `Spannable` string. To make sure textTransform is inherited correctly I added it to TextAttributes which handles this.
Pull Request resolved: https://github.com/facebook/react-native/pull/22670
Differential Revision: D13494819
Pulled By: cpojer
fbshipit-source-id: 1c69591084aa906c2d3b10153b354d39c0936340
Summary:
Equivalent of this iOS PR: https://github.com/facebook/react-native/pull/20915
Motivation:
----------
Whenever a user changes the system font size to its maximum allowable setting, React Native apps that allow font scaling can become unusable because the text gets too big. Experimenting with a native app like iMessage on iOS, the font size used for non-body text (e.g. header, navigational elements) is capped while the body text (e.g. text in the message bubbles) is allowed to grow.
This PR introduces a new prop on `<Text>` and `<TextInput>` called `maxFontSizeMultiplier`. This enables devs to set the maximum allowed text scale factor on a Text/TextInput. The default is 0 which means no limit.
Pull Request resolved: https://github.com/facebook/react-native/pull/23069
Differential Revision: D13748513
Pulled By: mdvacca
fbshipit-source-id: 8dd5d6d97bf79387d9a2236fa2e586ccb01afde9
Summary: Eager load classes used by Fabric. This is a temporary change that will be reverted in the near future
Reviewed By: shergin
Differential Revision: D13747454
fbshipit-source-id: 8ceb21f51982bcfcaa005dcc2ad9b457f7211795
Summary:
For certain style props, each time any style prop changed, the previous version of the style would remain. For example, if you passed `"underline"` for `textDecorationLine` on a `TextInput` and then later passed `undefined` for `textDecorationLine`, the underline would remain.
We solved this problem before in https://github.com/facebook/react-native/commit/de586bfa186289114974674bc2aece462f40393e. The fix was to use `manageSpans` to remove the old spans we added before adding the new spans. However, that fix hardcoded the list of spans to remove. Every span type that was introduced since that commit is affected by this bug:
- CustomLetterSpacingSpan
- CustomLineHeightSpan
- CustomTextTransformSpan
- ShadowStyleSpan
- StrikethroughSpan
- UnderlineSpan
- TextInlineImageSpan
The reason this bug was reintroduced is `ReactBaseTextShadowNode` is responsible for adding spans and `ReactEditText` is responsible for removing spans. These classes fell out of sync.
This fix attempts a more robust solution. Every span that React Native adds to text now implements the `ReactSpan` interface. `manageSpans` deletes all spans that React Native adds by targeting the ones that implement `ReactSpan`. `ReactBaseTextShadowNode.SetSpanOperation` has been updated so that it's a compiler error to add a span that doesn't implement `ReactSpan`.
Pull Request resolved: https://github.com/facebook/react-native/pull/22994
Differential Revision: D13727580
Pulled By: mdvacca
fbshipit-source-id: 07b2eb08832efafb6c2806aa3329f0e9466b09fb
Summary:
Changelog:
----------
[Android] [Fixed] - Fix Picker.onValueChange sometimes not fired due to race condition. Fixes#15556
Root Cause:
------------
Please check my code snippet at https://snack.expo.io/kudochien/android-picker-issue
and try to select different items on Picker to see if console.log() hit.
If calling setState() with some latency, e.g. setTimeout() or changes from redux,
the second time changing picker item on UI, the onValueChange() will be not fired.
The root cause comes from the `forceUpdate` in PickerAndroid.android.js.
If user's setState() update comes after forceUpdate(), the flow will be:
1. First time select picker item
2. onValueChange + forceUpdate
3. user's setState() + componentDidUpdate + setNativeProps({ selected: ... })
4. mSuppressNextEvent = true
5. Second time select picker item
6. Since mSuppressNextEvent is true, the onValueChange will not be fired.
Solution:
---------
Like other controlled components, disable change listener during setup values from JS.
Android Spinner `setSelection(int position)` is asynchronous call, i.e. will fire onItemSelected in next run loop and is not suitable for us.
`setSelection(int position, boolean animate)`, however, is synchronous call which I used.
Some more references about setSelection:
https://stackoverflow.com/a/43512925/2590265http://androidxref.com/8.1.0_r33/xref/frameworks/base/core/java/android/widget/AbsSpinner.java#276
The two arguments version will use `setSelectionInt()` which set mBlockLayoutRequests as true to prevent onItemSelected call from next layout().
I also moved the setOnItemSelectedListener() call after onLayout to prevent onValueChange() during intialization.
Pull Request resolved: https://github.com/facebook/react-native/pull/22821
Differential Revision: D13731979
Pulled By: cpojer
fbshipit-source-id: e06bd9aa62463b66c8f3fd7214485898d5375054
Summary:
iOS's `allowFontScaling` example was copied to Android. Also, I added a case illustrating that `allowFontScaling` gets inherited in nested `<Text>` scenarios. This tests the bug fix from #22917. This nested case was added to both iOS and Android.
Also, moved the comment in `TextAttributes.java` from the top of the file to the top of the class definition as requested in #22917.
Pull Request resolved: https://github.com/facebook/react-native/pull/22991
Differential Revision: D13671380
Pulled By: cpojer
fbshipit-source-id: a8aae4f051c76391e33bdbd6bdc80aff9b7de5cd
Summary:
If you set `letterSpacing` on an outer text and then set `fontSize` on an inner text, the wrong `letterSpacing` will be rendered.
Here's an example:
```
<Text style={{ fontSize: 10, letterSpacing: 10 }}>
<Text style={{ fontSize: 20 }}>Some text</Text>
</Text>
```
`fontSize` affects letter spacing. In this case, the bug is that setting `fontSize` to `20` doesn't cause the letter spacing to be recalculated.
Notice that the logic for applying letter spacing only applies it if the node has a different value for `getEffectiveLetterSpacing()` than its parent. The problem is that `getEffectiveLetterSpacing()` doesn't represent the final letter spacing value -- it doesn't take `fontSize` into account. Consequently, it sometimes incorrectly skips applying letter spacing as illustrated above.
The fix is to ensure `getEffectiveLetterSpacing()` represents the final rendered letter spacing value. To do this, some of the letter spacing calculation code was moved from `CustomLetterSpacingSpan` to `getEffectiveLetterSpacing()`.
Pull Request resolved: https://github.com/facebook/react-native/pull/22993
Differential Revision: D13671505
Pulled By: cpojer
fbshipit-source-id: 400f36d3fd71ab7cb6cba8508baa71f2973f8f0e
Summary:
Currently, the `TextInput's` placeholder is always sized as though `allowFontScaling` is `true`.
Note that `allowFontScaling` works fine for the content of the `TextInput`. The reason is that we set the font size in two places: in the shadow node and in the Android view. The shadow node logic determines the size of the content and the Android view logic determines the size of the placeholder. The handler for the `allowFontScaling` prop is only present in the shadow node logic. Consequently, the Android view logic always uses the default value of `true` for the `allowFontScaling` prop.
The fix is to add logic for handling the `allowFontScaling` prop to the Android view.
It would be great if we could handle all text props in one spot instead of duplicating code between the shadow node and the Android view. That would eliminate this whole class of bugs. However, I don't have enough familiarity with the history of this code to know how hard that would be or if it's even possible.
Fixes#18827.
Pull Request resolved: https://github.com/facebook/react-native/pull/22992
Differential Revision: D13671400
Pulled By: cpojer
fbshipit-source-id: 40bae3cfb0ca6298e91a81c05211538935f5a0e8
Summary:
Purpose
----------
This commit fixes a bug and prepares us for adding support for the `maxContentSizeMultiplier` prop (it's currently only supported on iOS).
Details
----------
Today we don't explicitly track inheritance of text props. Instead we rely on `SpannableStringBuilder` to handle this for us. Consider this example:
```
<Text style={{fontSize: 10}}>
<Text style={{letterSpacing: 5}}>
...
</Text>
</Text>
```
In today's implementation, the inner text doesn't know about `fontSize` (i.e. its `mFontSize` instance variable is `Float.NaN`). But everything works properly because the outer `Text` told `SpannableStringBuilder` to apply the font size across the entire string of text.
However, today's approach breaks down when computing the value to apply to the `SpannableStringBuilder` depends on multiple props. Suppose that RN Android supported the `maxContentSizeMultiplier` prop. Then calculating the font size to apply to the `SpannableStringBuilder` would involve both the `fontSize` prop and the `maxContentSizeMultiplier` prop. If `fontSize` was set on an outer `Text` and `maxContentSizeMultiplier` was set on an inner `Text` then the inner `Text` wouldn't be able to calculate the font size to apply to the `SpannableStringBuilder` because the outer `Text's` `fontSize` prop isn't available to it.
The `TextAttributes` class solves this problem. Every `Text` has a `TextAttributes` instance which stores its text props. During rendering, a child's `TextAttributes` is combined with its parent's and handed down the tree. In this way, during rendering a `Text` has access to the relevant text props from itself and its ancestors.
This design is inspired by the [`RCTTextAttributes`](https://github.com/facebook/react-native/blob/7197aa026b6d262faa8f4dc6bb3e591f860cdc95/Libraries/Text/RCTTextAttributes.m) class from RN iOS.
Bug Fix
----------
This refactoring happens to fix a bug. Today, when setting `fontSize` on nested Text, `allowFontScaling` is always treated as though it is true regardless of the value on the root `Text`. For example, the following snippets should render "hello" identically, Instead, the bottom snippet renders "hello" as though `allowFontScaling` is true.
```
<Text allowFontScaling={false} style={{fontSize: 50}}>hello</Text>
<Text allowFontScaling={false}><Text style={{fontSize: 50}}>hello</Text></Text>
```
(The repro assumes you've increased your device's font setting so that the font size multiplier is not 1.0.)
Introducing the `TextAttributes` class fixed this. It forced us to think about how inheritance should work for `allowFontScaling`. In the new implementation, `Text` components use the value of `allowFontScaling` from the outermost `Text` component. This matches the behavior on iOS (the `allowFontScaling` prop gets ignored on virtual text nodes because it doesn't appear [in this list](https://github.com/facebook/react-native/blob/3749da13127cb7455d533cb2bc5f2cf37470c0c7/Libraries/Text/Text.js#L266-L269).)
Pull Request resolved: https://github.com/facebook/react-native/pull/22917
Reviewed By: mdvacca
Differential Revision: D13630235
Pulled By: shergin
fbshipit-source-id: e58f458de4fc3cdcbec49c8e0509da51966ef93c
Summary:
Prior to this change, when you passed text to `TextInput` via the `value` or `defaultValue` props, React Native didn't apply any of the styles in `buildSpannedFromShadowNode` to the text. This is because `spannedFromShadowNode` appends `value` after calling `buildSpannedFromShadowNode`. Many styles worked because their logic is included in both `buildSpannedFromShadowNode` and `ReactTextInputManager`. However, some only appear in `buildSpannedFromShadowNode` such as `textDecorationLine` (it would be good to understand why we need to duplicate styling logic in `buildSpannedFromShadowNode` & `ReactTextInputManager` and to know whether `ReactTextInputManager` should be handling `textDecorationLine`).
Also, this commit improves consistency between iOS and Android if you specify both `value` and children on a `TextInput`. Prior to this, iOS concatenated the strings such that the `value` prop came before the children whereas Android put the children before the `value` prop. Now Android matches iOS's behavior and puts the `value` prop before the children.
These appear to be regressions. The `value` prop used to be appended before calling `buildSpannedFromShadowNode` (this behavior appears to have been changed by accident in https://github.com/facebook/react-native/commit/80027ce6dba1b632b080dc17a08b9f904d649217#diff-4f5947f2fe0381c4a6373a30e596b8c3).
The fix is to append the `value` prop before calling `buildSpannedFromShadowNode`. Additionally, we have to expose a new `start` parameter on `buildSpannedFromShadowNode` so that we can tell it to include the text from the `value` prop in the range that it styles. Without this, the start of the styled text would be immediately after `value` because `value` is appended before calling `buildSpannedFromShadowNode`
Pull Request resolved: https://github.com/facebook/react-native/pull/22461
Reviewed By: mdvacca
Differential Revision: D13282065
Pulled By: shergin
fbshipit-source-id: 4c99094741441cf54cdec0075bfd08ff7d889e66
Summary: Add a catch statement for NPE around ViewGroup's dispatchDraw and log it
Reviewed By: mdvacca
Differential Revision: D13554441
fbshipit-source-id: a94d3db71678e17ef6bcda46689a069b85e460c5
Summary: Catch `IllegalArgumentException: ReactViewPager.onTouchEvent` and ignore it (but log something) to work around this known bug in the Android SDK per https://github.com/chrisbanes/PhotoView/issues/31#issuecomment-19803926. Note that `onInterceptTouchEvent()` is already doing the same thing.
Reviewed By: yungsters
Differential Revision: D13550425
fbshipit-source-id: 9fa3a7a0ca0cd95aafa3bcae6a59e0d1e690b564
Summary: Adds a workaround to `ReactTextView` for a crash that happens in `getOffsetForHorizontal`: https://issuetracker.google.com/issues/113348914
Reviewed By: mdvacca
Differential Revision: D13548917
fbshipit-source-id: 1c346283cd036c88d60a4b10890ade46c7e80eca
Summary: easy diff to auto format ReactWebViewManager using our current java code guidelines
Reviewed By: fkgozali
Differential Revision: D13425320
fbshipit-source-id: e59407751c324896e9d6aea8a356949e7cadccaa
Summary:
This diff exposes a new prop for WebView in Android to disable HardwareAcceleration.
Disabling hardware acceleration is sometimes required to workaround chromium bugs: https://bugs.chromium.org/p/chromium/issues/detail?id=501901
Reviewed By: fkgozali
Differential Revision: D13425243
fbshipit-source-id: e3cd53c72d01f74624b60834496f3cc44076b6b5
Summary:
This diff disables the StateListAnimator for the ReactSlider component in Android 6 and 7
This is this is a hack to prevent T37452851 and https://github.com/facebook/react-native/issues/9979
Reviewed By: yungsters
Differential Revision: D13404685
fbshipit-source-id: d4c4f8796664c890f6a6b3502d3493370e17c300
Summary:
This fixes app crashes on opening android search assistant when a RN modal is visible. The root cause is that ViewGroup.dispatchProvideStructure() method uses the private variable 'mChildren' to access the children of a view group instead of the publicApi.
This fixes the top crash for the react_MarketplaceProductDetailsNonIPadRoute route.
This also fixes github issues:
https://github.com/facebook/react-native/issues/15932https://github.com/facebook/react-native/issues/13201https://github.com/facebook/react-native/issues/15440
that were closed without a fix
Reviewed By: PeteTheHeat
Differential Revision: D13375993
fbshipit-source-id: d603cb4ef65a423c63a6ef2b51235702c7dbffcb
Summary:
This diff fixes a bug that produces TouchEvents on text to stop working after a react state has happened.
An easy way to reproduce this is opening a YellowBox, minimizing it and trying to open it again
Reviewed By: shergin
Differential Revision: D13198663
fbshipit-source-id: 19b08818bbff8014ab8227b3db1119edc4193389
Summary: Set the default text radius to 0 so that text shadows aren't applied to every text node
Reviewed By: mdvacca
Differential Revision: D13027589
fbshipit-source-id: 4f7386059ac1654b8f77dddf9eb1b772f6049e23
Summary:
This diff changes the method to calculate the hash of an AttributedString (removing shadowNode and parentShadowNode from it).
This is necessary becuase otherwise hashcode of clonned parent keep changing in every state change, when the text doesnt change
With this change we are able to cache spannables in android properly
Reviewed By: shergin
Differential Revision: D13189110
fbshipit-source-id: c1f7372809ce98a5b4d091485cc15281a4ab5e1e
Summary: This diff adds support to cache the Spannable objects that are created during measure() and updateLocalData() for text
Reviewed By: shergin
Differential Revision: D13188599
fbshipit-source-id: 6547d8ce2bb8b1dfb3c91e64facff3ba0cd97472
Summary: This diff fixes re-measures of a text component result of a change of state. For details of the bug see: T36838266
Reviewed By: shergin
Differential Revision: D13188601
fbshipit-source-id: ea9a889540f600d4e4e788105d5fa22e6cd5448c
Summary: This diff refactors the types used when Yoga requires to measure the size of a View in C++
Reviewed By: shergin
Differential Revision: D13124086
fbshipit-source-id: 89dfe80bb41b4fb2eaba84af630d52ef2509b1e1
Summary: This diff extends Text View to support not only paddingLeft, paddingRight, etc but also padding props.
Reviewed By: shergin
Differential Revision: D13111433
fbshipit-source-id: 3b0efe8468f20a5ffaf31e3f1f180e96a5409865
Summary: This diff adds support for layout constraint when measuring text
Reviewed By: shergin
Differential Revision: D13111434
fbshipit-source-id: 0c8689e9ac8ce2281b03386f275d2a8e034f88d8
Summary:
resizeMode applies to Image.defaultSource, because depending on screen resolution sometimes we see padding around defaultSource image while source loading. Now we can control scale of both source and defaultSource.
Changelog:
----------
[Android] [Fixed] - Image.resizeMode will apply to defaultSource, enhanced user experience. Previously, resizeMode didn't applied to defaultSource, therefore depending on screen resolution sometimes we see padding around defaultSource image while source loading.
Pull Request resolved: https://github.com/facebook/react-native/pull/22216
Differential Revision: D13088220
Pulled By: mdvacca
fbshipit-source-id: 92c66cf6228f3b7666b9ef2404d034f0005b5234
Summary:
This is a safe workaround to an issue in Android P: https://issuetracker.google.com/issues/112385925
It is based on a fact that even though `fling` receive a wrong sign in `velocityY`, `mOnScrollDispatchHelper.getYFlingVelocity()` still returns a fling direction.
Fixes#19434
Pull Request resolved: https://github.com/facebook/react-native/pull/21117
Differential Revision: D13082740
Pulled By: hramos
fbshipit-source-id: 1b28586d2c7bdcae4a111d3cead4a0455cebb99a
Summary: Trivial diff to include copyright header into ContextUtils class
Reviewed By: achen1
Differential Revision: D13001556
fbshipit-source-id: 439f25647a094485381637ea2b59f62962b9c1ac
Summary: Using strings to refer to Native Modules and View Managers in ReactPackages are prone to error. The compiler replaces the constants with the actual strings anyway, so using constants gives us better type safety
Reviewed By: achen1
Differential Revision: D12843649
fbshipit-source-id: 7a7c6c854c8689193f40df92dc8426a3b37f82c8
Summary: The first argument to `View.MeasureSpec.makeMeasureSpec` should be positive, but was being passed WRAP_CONTENT, which is negative. This diff fixes that.
Reviewed By: achen1
Differential Revision: D6601683
fbshipit-source-id: 6d8499830f7b6da40848bab77d5ddbbb8a6fe44f
Summary: This diff fixes an IllegalArgumentException when dismissing ReactModalHostView. I wasn't able to reproduce this error because this is likely created by a race condition.
Reviewed By: axe-fb
Differential Revision: D12916787
fbshipit-source-id: b071ffc4c251f2a613bb1270de005def56818376
Summary:
With this, we send the correct x position when using center or right aligned text. In order to accomplish this though, we have to pass the text alignment into the Layout object that we create.
Also update RNTester to allow us to try different alignments.
Reviewed By: sahrens
Differential Revision: D10316494
fbshipit-source-id: 11c7d2a59e636528f12211168acb46f16b54a126
Summary:
Original PR: https://github.com/facebook/react-native/pull/21340
The original PR fixed a bug with border radius on Android 7.0, but caused a new bug where no `ReactART` components would render if they were nested within a View with border radius set.
Differential Revision: D10409352
fbshipit-source-id: 0b4e36ae9d4c3bc2f4884a43909f8efdeeb41b74
Summary:
The end-of-scrollable-range offset was not clipped before the nearestOffset calculation causing the ScrollView to not snap to the end of the view when the width of the ScrollView was not an exact multiple of snapToInterval.
Addresses https://github.com/facebook/react-native/issues/21116#issuecomment-427944838
Reviewed By: yungsters
Differential Revision: D10248545
fbshipit-source-id: 2bdc94ea0a9d9f063769f2c5da4c33d4872b1db2
Summary: This diff enables the onPress event for TextViews that render RawText
Reviewed By: shergin
Differential Revision: D10222183
fbshipit-source-id: 4b6a6ad548286453f7dd3a14a5e4ee453a55b923
Summary: Simplifying our OSS enums (remove private variables and methods) so that redex can more easily optimize them for us.
Reviewed By: achen1, Feng23
Differential Revision: D9812796
fbshipit-source-id: 11a8272db41ff04399d1cdf366e28ddf1b07b7be
Summary:
update creation logic for text shadow: allow shadows with zero offset when the radius is nonzero
(?should we also add a check to drop the node as a no-op when color.alpha == 0 ?)
Reviewed By: yungsters
Differential Revision: D10017778
fbshipit-source-id: 0168ac6db5ad22a5d7eb32dcd184aede361d6651
Summary:
This change adds getter for overflow attribute in ReactViewGroup class. Overflow setting can affect how view children are drawn but also how hit testing behaves when receiving touch. Exposing this setting makes it possible for gesture-handler library to implement proper hit testing that takes into account overflow property of a view.
Pull Request resolved: https://github.com/facebook/react-native/pull/21398
Differential Revision: D10105398
Pulled By: shergin
fbshipit-source-id: 15ae2b31be3bf80e7e1d28b87ce4474af0f486f5
Summary:
On Android N (API 24) rounded corners rendering has issues in case scale factor is set for the view.
Pull Request resolved: https://github.com/facebook/react-native/pull/21340
Differential Revision: D10084318
Pulled By: hramos
fbshipit-source-id: 53ae5a32b96cc7ee7eba084330682239d8beb85d
Summary:
Support for `overflow: visible` was recently added to Android ScrollView.
However, it didn't account for `overflow: scroll` and changed the behavior, causing content to render
when before it would be clipped.
Reviewed By: achen1
Differential Revision: D10036807
fbshipit-source-id: e44a79b18eecbc7d64621f7cf5d800a00a121b13
Summary: There hasn't been any reports of overflow issues since the last issue was fixed in v183 (July 30th). Let's remove this flag
Reviewed By: yungsters
Differential Revision: D10020006
fbshipit-source-id: 593c7d2c2bef5f0bd60d5de1941cd58f7fd6ccc7
Summary:
The snapToOffsets changes improved the flinging algorithm for snapToInterval/snapToOffsets but actually broke it for pagingEnabled because it's meant to only scroll one page at a time.
First, I just brough back the old algorithm, but noticed that it has a bunch of issues (e.g. #20155). So, I tried to improve the algorithm to make sure it uses the proper target offset prediction using the same physics model that Android uses for it's normal scrolling but still be limited to one page scrolls.
This resolves#21116.
Reviewed By: shergin
Differential Revision: D9945017
fbshipit-source-id: be7d4dfd1140f4c4d32bad93a03812dc80286069
Summary:
ScrollView always clipping children on Android even when `overflow: visible` was specified.
This change just omits the clipping during draw if `overflow: visible` is passed in.
The default is not changed (from hidden to visible) in case there is a performance impact.
Android now matches iOS in behavior. This helps with issue #21116 and resolves#14416.
Reviewed By: shergin
Differential Revision: D9952096
fbshipit-source-id: 367afe33ee7ff0fdc5aa1074d239883aa289888a
Kevin Gozali
Michał Osadnik
Janic Duplessis
Jyrno Ader
Adam Comella
Dulmandakh
David Vacca
Kudo Chien
Luna Wei
Tim Yung
Krzysztof Sroka
Nicolas Gallagher
Igor Mandrigin
Ram N
Mehdi Mulani
Jonathan Lee
Oleg Lokhvitsky
Emily Janzer
Timothy Kukulski
Krzysztof Magiera
Sergei Dryganets
Matias Colotto
Andrew Chen (Eng)