Commit Graph

307 Commits

Author SHA1 Message Date
Pieter De Baets 370bbd705b Fix ScrollView blurring TextInput when changing focus between inputs
Summary:
On some platforms, when two inputs are in a scrollview, trying to switch focus to another textinput doesn't work and requires two taps. This is because from `_handleTouchEnd` we blur the currently focused input, even if that input had only just become focused from the same touch event. Instead, only blur when the event did not target the current textinput.

Changelog: [Android][Fixed] TextInputs may not get focused when switching inputs in a ScrollView

Reviewed By: jehartzog

Differential Revision: D40159333

fbshipit-source-id: 388f85dff5ac8f24d7e2590e887635391c52d72f
2022-10-07 07:20:33 -07:00
Tim Yung 494c47360f RN: Sort Imports via ESLint
Summary:
Applies the autofix from the newly introduced `lint/sort-imports` ESLint rule.

Changelog:
[Internal]

Reviewed By: cortinico, skinsshark

Differential Revision: D39907798

fbshipit-source-id: 17f5f11b08a5b4bb66286816b78eb26e07e829b8
2022-09-30 14:28:48 -07:00
Vic 7f061f8651 Refactor: removed duplicated words in comments (#34807)
Summary:
Found and removed duplicates of the word "the" in comments.

## Changelog

[Internal] [Removed] – Removed duplicates of the word "the" in comments.

Pull Request resolved: https://github.com/facebook/react-native/pull/34807

Test Plan: Not applicable.

Reviewed By: yungsters, cipolleschi

Differential Revision: D39880587

fbshipit-source-id: b7277aa70604902929903c31ab69d4c532f2667a
2022-09-28 09:08:27 -07:00
Rubén Norte 460153fc33 Restore fix for ScrollView error on iOS
Summary:
Changelog: [internal]

This brings back a fix for ScrollView on iOS that we removed because we thought it was no longer necessary, but it actually is.

Reviewed By: jacdebug

Differential Revision: D39382967

fbshipit-source-id: f052b4fb899f4e60e8c530990caf07344a907c43
2022-09-09 09:16:24 -07:00
Rubén Norte 4d04b1d4c8 Remove last direct references to utilities in Paper from react-native
Summary:
Changelog: [internal]

This replaces all direct references to the `ReactNative` module (which is the Paper renderer) to `RendererProxy` which would select between Paper and Fabric correctly.

The implementation of these functions is exactly the same right now.

As per the removal of the fix for T55744311 in `ScrollView`, I verified this doesn't cause any issues in the screen where it failed before.

Reviewed By: javache

Differential Revision: D39270691

fbshipit-source-id: 03882748fe4b754b9a2c5e9d4c4f003b94ed49ef
2022-09-08 11:12:06 -07:00
Rubén Norte 699dabb2e3 Use findNodeHandle from RendererProxy instead of Paper in usages within the react-native package
Summary:
This replaces all direct references to `ReactNative` within the `react-native` package to use `findNodeHandle` with a reference obtained from `RendererProxy`, which will allow us to select the correct renderer.

Changelog: [internal]

Reviewed By: javache

Differential Revision: D39270689

fbshipit-source-id: a39875281ba7b7b1b00128564124b6adcacebc4d
2022-09-08 11:12:06 -07:00
Nick Gerleman ef77a4218d Stop special-casing Android 11+ from large form-factor keyboardShouldPersistTaps behavior
Summary:
ScrollView has special-case logic to dismiss keyboard on tap, controlled via the `keyboardShouldPersistTaps` property. The first click does not propagate to children of the scrollview if the tap causes the keyboard to be dismissed. This behavior is motivated by a soft keyboard on phones which takes away space from the viewport.

ScrollView historically determined if a soft-keyboard was open via querying if there was a focused TextInput. This meant that clicks to a ScrollView would be eaten, even on form factors using phsyical keyboards.

A couple years ago I added https://github.com/facebook/react-native/pull/30374 to only eat clicks when keyboard events have indicated that a soft keyboard is present. I special-cased Android out of the change, because of platform issues with its reliability of keyboard events.

After D38500859 (https://github.com/facebook/react-native/commit/1e48274223ee647ac4fc2c21822b5240f3c47e4c) rolls out we can start to remove that special-casing, of devices which report "android" for Platform.OS.

Reviewed By: javache

Differential Revision: D38528887

fbshipit-source-id: a745b478b18abe4ef32cbdd8a14ca6dfdb5e738f
2022-08-23 05:46:58 -07:00
Nick Gerleman fd1e82a10f Do not eat taps/clicks in ScrollView when soft-keyboard is detached from viewport
Summary:
If currently focused on a TextInput, clicking an item in a ScrollView takes two clicks.

This is because of `keyboardShouldPersistTaps`, which will fire despite a lack of keyboard events on Android due to special-casing.

This behavior is jarring in scenarios like VR where the soft keyboard is detached from the application. This change avoids eating taps, in this case, where a soft keyboard is open but not inset.

Reviewed By: genkikondo

Differential Revision: D38529237

fbshipit-source-id: a10c5dbf04e6288e0e9e0c805215054bc883339f
2022-08-23 02:25:11 -07:00
Nick Gerleman 26d148029c Let ScrollView Know About Keyboard Opened Before Mount
Summary:
ScrollView has special behavior when the keyboard is open, but starts listening to keyboard events on mount. This means a ScrollView mounted after the keyboard is already up (e.g. for a typeahead) is not initialized to the keyboard being up.

This change adds `Keyboard.isVisible()` and `Keyboard.metrics()` APIs to allow seeding initial keyboard metrics.

Changelog:
[General][Fixed] - Inform ScrollView of Keyboard Events Before Mount

Reviewed By: JoshuaGross, yungsters

Differential Revision: D38701976

fbshipit-source-id: 42b354718fbf5001ca4b90de0442eeab0be91e7a
2022-08-18 15:05:43 -07:00
Pieter Vanderwerff ee3d3c248d Add missing class annotations xplat/js
Reviewed By: SamChou19815

Differential Revision: D38373443

fbshipit-source-id: 1222c4845ebd6b72bd6f54af1a27cf8542dd883a
2022-08-03 12:43:58 -07:00
Pieter Vanderwerff 66c6a75650 Suppress missing annotations in xplat/js
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predictable.

Reviewed By: bradzacher

Differential Revision: D37388949

fbshipit-source-id: cdcbc98035ce9b6994842005ea46df42de54f9b8
2022-06-23 16:54:29 -07:00
Pieter Vanderwerff e7a4dbcefc Add LTI annotations to function params in xplat/js [1/2]
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predicatable.

Reviewed By: evanyeung

Differential Revision: D37353648

fbshipit-source-id: e5a0c685ced85a8ff353d578b373f836b376bb28
2022-06-22 21:36:52 -07:00
Jérémy Barbet 927b43d47c typo for the automaticallyAdjustKeyboardInsets description (#33948)
Summary:
Minor typo change

## Changelog

[iOS] [Fixed] - Typo in the documation for the `automaticallyAdjustKeyboardInsets` prop

Pull Request resolved: https://github.com/facebook/react-native/pull/33948

Test Plan: Read the paragraph, solid.

Reviewed By: kacieb

Differential Revision: D36810184

Pulled By: cortinico

fbshipit-source-id: af586beb4eb3fd4337d2df8612d39c6abb0a37bf
2022-06-01 13:25:20 -07:00
Genki Kondo 7c581f3d30 Move ScrollView's contentOffset to common props
Summary:
ScrollView's contentOffset prop was assumed to be iOS only, but in reality it is supported on Android as well: https://fburl.com/code/nuxpjpth

Changelog:
[General] - Move ScrollView's contentOffset to common props

Reviewed By: yungsters

Differential Revision: D36219604

fbshipit-source-id: f41679fd2ce7971a30129e0d91ae9f32b9cf756e
2022-05-09 13:05:16 -07:00
Evan Yeung 73a43901b4 Deploy 0.177.0 to xplat
Summary: Changelog: [Internal]

Reviewed By: SamChou19815

Differential Revision: D36141544

fbshipit-source-id: 7e322faa6f902547bb68997d02a50352c525d543
2022-05-06 10:51:36 -07:00
Moti Zilberman 1814bffcc2 Minor changes to Flow types
Summary: Changelog: [Internal]

Reviewed By: arushikesarwani94

Differential Revision: D34171528

fbshipit-source-id: c3fdc4a8c77731f1f43f0e6d830d172906ed79a1
2022-02-15 08:50:55 -08:00
Andres Suarez 8bd3edec88 Update copyright headers from Facebook to Meta
Reviewed By: aaronabramov

Differential Revision: D33367752

fbshipit-source-id: 4ce94d184485e5ee0a62cf67ad2d3ba16e285c8f
2021-12-30 15:11:21 -08:00
Amy Huyen 9b0ed920ef Export flow type for ScrollView Deceleration Rate
Summary:
## Changelog:
[General] [Changed] Export Flow type for deceleration rate for use in other files to keep deceleration rate prop values consistently typed

Reviewed By: lunaleaps

Differential Revision: D32989199

fbshipit-source-id: 2e2fef0721de0d0eb60aaefdbb635788bfc8c1f1
2021-12-10 11:43:08 -08:00
Marc Rousavy 49a1460a37 Feature: ScrollView automaticallyAdjustKeyboardInsets (#31402)
Summary:
Retrying D30015799 (https://github.com/facebook/react-native/commit/6e903b07fa8e8d9b78cae0e031bb8022f7a63195) with a fix where ScrollViewNativeComponent was missing the automaticallyAdjustKeyboardInsets prop.
----- Original Summary
Currently, ScrollViews provide the prop `keyboardDismissMode` which lets you choose `"interactive"`. However when the keyboard is shown, it will be rendered above the ScrollView, potentially blocking content.

With the `automaticallyAdjustKeyboardInsets` prop the ScrollView will automatically adjust it's `contentInset`, `scrollIndicatorInsets` and `contentOffset` (scroll Y) props to push the content up so nothing gets blocked.

* The animation curve and duration of the Keyboard is exactly matched.
* The absolute position of the ScrollView is respected, so if the Keyboard only overlaps 10 pixels of the ScrollView, it will only get inset by 10 pixels.
* By respecting the absolute position on screen, this automatically makes it fully compatible with phones with notches (custom safe areas)
* By using the keyboard frame, this also works for different sized keyboards and even `<InputAccessoryView>`s
* This also supports `maintainVisibleContentPosition` and `autoscrollToTopThreshold`.
* I also fixed an issue with the `maintainVisibleContentPosition` (`autoscrollToTopThreshold`) prop(s), so they behave more reliably when `contentInset`s are applied. (This makes automatically scrolling to new items fully compatible with `automaticallyAdjustKeyboardInsets`)

## Changelog

* [iOS] [Added] - ScrollView: `automaticallyAdjustKeyboardInsets` prop: Automatically animate `contentInset`, `scrollIndicatorInsets` and `contentOffset` (scroll Y) to avoid the Keyboard. (respecting absolute position on screen and safe-areas)
* [iOS] [Fixed] - ScrollView: Respect `contentInset` when animating new items with `autoscrollToTopThreshold`, make `automaticallyAdjustKeyboardInsets` work with `autoscrollToTopThreshold` (includes vertical, vertical-inverted, horizontal and horizontal-inverted ScrollViews)

Pull Request resolved: https://github.com/facebook/react-native/pull/31402

Test Plan:
<table>
<tr>
<th>Before</th>
<th>After</th>
</tr>
<tr>
<td>

https://user-images.githubusercontent.com/15199031/115708680-9700aa80-a370-11eb-8016-e75d81a92cd7.MP4

</td>

<td>

https://user-images.githubusercontent.com/15199031/115708699-9b2cc800-a370-11eb-976f-c4010cd96d55.MP4

</td>
</table>

### "Why not just use `<KeyboardAvoidingView>`?"

<table>
<tr>
<th>Before (with <code>&lt;KeyboardAvoidingView&gt;</code>)</th>
<th>After (with <code>automaticallyAdjustKeyboardInsets</code>)</th>
</tr>
<tr>
<td>

https://user-images.githubusercontent.com/15199031/115708749-abdd3e00-a370-11eb-8e09-a27ffaef12b8.MP4

</td>

<td>

https://user-images.githubusercontent.com/15199031/115708777-b3044c00-a370-11eb-9b7a-e040ccb3ef8c.MP4

</td>
</table>

> Also notice how the `<KeyboardAvoidingView>` does not match the animation curve of the Keyboard

### Usage

```jsx
export const ChatPage = ({
  flatListProps,
  textInputProps
}: Props): React.ReactElement => (
  <>
    <FlatList
      {...flatListProps}
      keyboardDismissMode="interactive"
      automaticallyAdjustContentInsets={false}
      contentInsetAdjustmentBehavior="never"
      maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: 100 }}
      automaticallyAdjustKeyboardInsets={true}
    />
    <InputAccessoryView backgroundColor={colors.white}>
      <ChatInput {...textInputProps} />
    </InputAccessoryView>
  </>
);
```

## Related Issues

* Fixes https://github.com/facebook/react-native/issues/31394
* Fixes https://github.com/facebook/react-native/issues/13073

Reviewed By: yungsters

Differential Revision: D32578661

Pulled By: sota000

fbshipit-source-id: 45985e2844275fe96304eccfd1901907dc4f9279
2021-12-06 13:31:13 -08:00
Jesse Katsumata 00bb2ba62d Fix Dead links to documents in the comments (#32619)
Summary:
Links under `reactnative.dev` that ended with `.html` lead to Page not found.
Fixed the url so that users get sent to the appropriate url.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Fixed] - Fixed dead links in the comments.

Pull Request resolved: https://github.com/facebook/react-native/pull/32619

Test Plan: - Changed links are accessible

Reviewed By: lunaleaps

Differential Revision: D32528978

Pulled By: cortinico

fbshipit-source-id: e039d18188371cf5240b37049e431329e28b1b8b
2021-11-22 03:31:10 -08:00
Tim Yung 77ecc7ede1 JS: Format with Prettier v2.4.1 [3/n]
Summary:
Changelog:
[General][Internal]

Reviewed By: zertosh

Differential Revision: D31883447

fbshipit-source-id: cbbf85e4bf935096d242336f41bf0cc5d6f92359
2021-11-02 22:14:16 -07:00
David Vacca a54cfb9e57 Add snapToAlignment to ScrollView.js Android implementation
Summary:
Update ScrollView.js to support snapToAlignment in RN Android

changelog: [Android][Added] Implement snapToAlignment in ReactHorizontalScrollView

Reviewed By: JoshuaGross

Differential Revision: D31174546

fbshipit-source-id: 480e990793ced74121c6aa1875f2695a70d1f804
2021-09-29 01:47:44 -07:00
Sota Ogo 8595f3f22c Back out "Feature: ScrollView automaticallyAdjustKeyboardInsets"
Summary:
Original commit changeset: 9ccfb4b6d477 / D30015799 (https://github.com/facebook/react-native/commit/6e903b07fa8e8d9b78cae0e031bb8022f7a63195)

The diff caused a redbox/error in some products. Reverting now and will try it again.

Changelog: Backing out PR: 31402

Differential Revision: D31238961

fbshipit-source-id: b2ccd3d3ab9d7e764e41fb54d8a7e60882d1405f
2021-09-28 14:05:00 -07:00
Marc Rousavy 6e903b07fa Feature: ScrollView automaticallyAdjustKeyboardInsets (#31402)
Summary:
Currently, ScrollViews provide the prop `keyboardDismissMode` which lets you choose `"interactive"`. However when the keyboard is shown, it will be rendered above the ScrollView, potentially blocking content.

With the `automaticallyAdjustKeyboardInsets` prop the ScrollView will automatically adjust it's `contentInset`, `scrollIndicatorInsets` and `contentOffset` (scroll Y) props to push the content up so nothing gets blocked.

* The animation curve and duration of the Keyboard is exactly matched.
* The absolute position of the ScrollView is respected, so if the Keyboard only overlaps 10 pixels of the ScrollView, it will only get inset by 10 pixels.
* By respecting the absolute position on screen, this automatically makes it fully compatible with phones with notches (custom safe areas)
* By using the keyboard frame, this also works for different sized keyboards and even `<InputAccessoryView>`s
* This also supports `maintainVisibleContentPosition` and `autoscrollToTopThreshold`.
* I also fixed an issue with the `maintainVisibleContentPosition` (`autoscrollToTopThreshold`) prop(s), so they behave more reliably when `contentInset`s are applied. (This makes automatically scrolling to new items fully compatible with `automaticallyAdjustKeyboardInsets`)

## Changelog

* [iOS] [Added] - ScrollView: `automaticallyAdjustKeyboardInsets` prop: Automatically animate `contentInset`, `scrollIndicatorInsets` and `contentOffset` (scroll Y) to avoid the Keyboard. (respecting absolute position on screen and safe-areas)
* [iOS] [Fixed] - ScrollView: Respect `contentInset` when animating new items with `autoscrollToTopThreshold`, make `automaticallyAdjustKeyboardInsets` work with `autoscrollToTopThreshold` (includes vertical, vertical-inverted, horizontal and horizontal-inverted ScrollViews)

Pull Request resolved: https://github.com/facebook/react-native/pull/31402

Test Plan:
<table>
<tr>
<th>Before</th>
<th>After</th>
</tr>
<tr>
<td>

https://user-images.githubusercontent.com/15199031/115708680-9700aa80-a370-11eb-8016-e75d81a92cd7.MP4

</td>

<td>

https://user-images.githubusercontent.com/15199031/115708699-9b2cc800-a370-11eb-976f-c4010cd96d55.MP4

</td>
</table>

### "Why not just use `<KeyboardAvoidingView>`?"

<table>
<tr>
<th>Before (with <code>&lt;KeyboardAvoidingView&gt;</code>)</th>
<th>After (with <code>automaticallyAdjustKeyboardInsets</code>)</th>
</tr>
<tr>
<td>

https://user-images.githubusercontent.com/15199031/115708749-abdd3e00-a370-11eb-8e09-a27ffaef12b8.MP4

</td>

<td>

https://user-images.githubusercontent.com/15199031/115708777-b3044c00-a370-11eb-9b7a-e040ccb3ef8c.MP4

</td>
</table>

> Also notice how the `<KeyboardAvoidingView>` does not match the animation curve of the Keyboard

### Usage

```jsx
export const ChatPage = ({
  flatListProps,
  textInputProps
}: Props): React.ReactElement => (
  <>
    <FlatList
      {...flatListProps}
      keyboardDismissMode="interactive"
      automaticallyAdjustContentInsets={false}
      contentInsetAdjustmentBehavior="never"
      maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: 100 }}
      automaticallyAdjustKeyboardInsets={true}
    />
    <InputAccessoryView backgroundColor={colors.white}>
      <ChatInput {...textInputProps} />
    </InputAccessoryView>
  </>
);
```

## Related Issues

* Fixes https://github.com/facebook/react-native/issues/31394
* Fixes https://github.com/facebook/react-native/issues/13073

Reviewed By: yungsters

Differential Revision: D30015799

Pulled By: sota000

fbshipit-source-id: 9ccfb4b6d477da192a96db4cfa07c31a2d2cefcb
2021-09-24 18:46:00 -07:00
Janic Duplessis 7edf9274cf Fix keyboardDismissMode="on-drag" on Android (#31943)
Summary:
Fixes https://github.com/facebook/react-native/issues/23364

The current logic using `_isTouching` does not work because `_handleTouchCancel` is always called before scroll events begin. This means `_isTouching` is always false. To fix it I moved the logic to `_handleScrollBeginDrag` which is only called once when scroll drag beings. This accomplishes the expected behavior and is better than keeping it in onScroll where it would be called for each scroll event.

## Changelog

[Android] [Fixed] - Fix keyboardDismissMode="on-drag" on Android

Pull Request resolved: https://github.com/facebook/react-native/pull/31943

Test Plan: Tested in an app that on-drag does not work before and works after this patch.

Reviewed By: sshic

Differential Revision: D30674276

Pulled By: yungsters

fbshipit-source-id: aa0bd605809fa01518f70fbf323c06e32c76ed1d
2021-09-02 13:20:04 -07:00
Justin Huntington bc1e602e0c Add ScrollView.automaticallyAdjustsScrollIndicatorInsets prop (on iOS) (#29809)
Summary:
iOS 13 added a new property to `UIScrollView`: `automaticallyAdjustsScrollIndicatorInsets`, which is `YES` by default.  The property changes the meaning of the `scrollIndicatorInsets` property.  When `YES`, any such insets are **in addition to** whatever insets would be applied by the device's safe area.  When `NO`, the iOS <13 behavior is restored, which is for such insets to not account for safe area.

In other words, this effects ScrollViews that underlay the device's safe area (i.e. under the notch).  When `YES`, the OS "automatically" insets the scroll indicators, when `NO` it does not.

There are two problems with the default `YES` setting:

1. It means applying `scrollIndicatorInsets` to a `ScrollView` has a different effect on iOS 13 versus iOS 12.
2. It limits developers' control over `scrollIndicatorInsets`.  Since negative insets are not supported, if the insets the OS chooses are too large for your app, you cannot fix it.

Further explanation & sample code is available in issue https://github.com/facebook/react-native/issues/28140 .

This change sets the default for this property to `NO`, making the behavior consistent across iOS versions, and allowing developers full control.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Changed] - ScrollView scrollIndicatorInsets to not automatically add safe area on iOS13+

Pull Request resolved: https://github.com/facebook/react-native/pull/29809

Test Plan:
Updated the RNTester example to explain what to expect. Also removed the `pageScreen` modal example for now as mentioned in my Github comment.

{F628636466}

Here are screenshots of the demo app (from the original bug) before (with safe area applied to insets) & after (without safe area applied to insets):

![before](https://user-images.githubusercontent.com/428831/91644197-ea03a700-ea07-11ea-9489-be27820930eb.png)

![after](https://user-images.githubusercontent.com/428831/91644200-eff98800-ea07-11ea-8788-daf1e783639d.png)

Reviewed By: p-sun

Differential Revision: D28229603

Pulled By: lunaleaps

fbshipit-source-id: 2e774ae150b1dc41680b8b7886c7ceac8808136a
2021-07-07 20:23:36 -07:00
Daniel Sainati 74d5d03dbd pre-suppress Flow errors in xplat ahead of 153 release
Summary:
This pre-suppresses the 153 error diff ahead of its release, since it is large.

Changelog: [Internal]

Reviewed By: mroch

Differential Revision: D28754374

fbshipit-source-id: 1806f53bc7d804644d434583a2dcd6da63d00328
2021-06-01 09:01:26 -07:00
Kacie Bawiec 1747536007 Clean up the initialization of instance variables in ScrollView
Summary:
This is a small cleanup to move initialization out of the `constructor` as it is unnecessary, and it is currently double initializing a few values.

Changelog:
[General][Changed] Clean up the initialization of instance variables in ScrollView

Reviewed By: nadiia

Differential Revision: D27631320

fbshipit-source-id: 762277e4993a9ce86d444ff2d9e845c93e94d1a8
2021-04-15 12:41:48 -07:00
Samuel Susla 8f4aed6386 Fix race inside ScrollView._inputMeasureAndScrollToKeyboard
Summary:
Changelog: [internal]

For React Native classic the behaviour is identical.

# Problem

`ScrollView.scrollResponderScrollNativeHandleToKeyboard` is broken in new React Native renderer. The behaviour depends on race between two events, `measureLayout` and `keyboardWillShow` event. In the new renderer, `measureLayout` always wins because it is a synchronous call, unlike in React Native classic.

To fix this we can just delay execution by wrapping it in `setTimeout`, which puts it on the back of the queue.

Reviewed By: JoshuaGross

Differential Revision: D27705883

fbshipit-source-id: 7556f86978ca3ccd2fddf1eef2435af26b54f585
2021-04-12 09:48:37 -07:00
Luna Wei bac2c2c801 Update FlowFixMes to use error codes in react-native-github
Summary:
Changelog:
[Internal] - Add error codes to existing FlowFixMe's

Reviewed By: kacieb

Differential Revision: D27445689

fbshipit-source-id: 2b19692e1cb822ab6785efcc5f93ee33e7dce1e5
2021-03-31 18:21:47 -07:00
simek 95f7c791c5 remove unused VR-only props (#31230)
Summary:
It looks like `ScrollView` still contains the remnant props for VR platform, which afaik has be discontinued a while ago (please correct me, if I'm wrong).

This PR removes `scrollBarThumbImage` prop marked as VR platform only prop from `ScrollView`.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[VR] [Removed] - remove VR platform specific `scrollBarThumbImage` prop from `ScrollView`

Pull Request resolved: https://github.com/facebook/react-native/pull/31230

Test Plan: CI

Reviewed By: javache

Differential Revision: D27367267

Pulled By: PeteTheHeat

fbshipit-source-id: b76fdb0e03c443aaf87308162bf75f8683220918
2021-03-29 03:32:09 -07:00
Daniel Sainati 05418f8fcc codemod objects to interfaces where they appear as supertypes of classes
Summary:
Flow is changing the behavior of object types to no longer be valid supertypes of classes. This replaces object types when they appear as supertypes of classes to be interfaces to avoid errors when this change rolls out.

Changelog: [Internal]

Reviewed By: pieterv

Differential Revision: D27193522

fbshipit-source-id: c3e3fca8a4cacd90770a95b773ff2c659774b9a6
2021-03-23 10:26:19 -07:00
Yan Zhang ffba25c648 add a hide-on-scroll feature to ScrollView
Summary:
Add a stickyHeaderHiddenOnScroll option to keep the sticky header hidden during scrolling down, and only slide in when scrolling up
Changelog:
[General][Added] - Add a stickyHeaderHiddenOnScroll option to keep the sticky header hidden during scrolling down, and only slide in when scrolling up

Reviewed By: JoshuaGross

Differential Revision: D26900810

fbshipit-source-id: 6bfb1a4da07fff0763223d60836df187f9d95dd6
2021-03-09 12:36:20 -08:00
Kacie Bawiec 921c9ff165 Fix sticky header not sticking on first render in ScrollView
Summary:
# The bug
Sticky headers would not "stick" to the top of the ScrollView on initial render. On subsequent redners, all sticking would work correctly.

# Why the bug existed
This code to initialize the animated values used for sticky headers was in `UNSAFE_componentWillMount` prior to D26375818 (https://github.com/facebook/react-native/commit/1641d46529f33a1726b5c4f3429655314386c064). `UNSAFE_componentWillMount` is called before `render`.

In D26375818 (https://github.com/facebook/react-native/commit/1641d46529f33a1726b5c4f3429655314386c064), I moved the code into `componentDidMount`, which is called after `render`.

This caused a problem because code in `render` was relying on these initializations being done already.

# How I resolved the bug
To resolve this, I initialize these values in the constructor.

# Reference
Docs for React mount ordering: https://reactjs.org/docs/react-component.html#mounting

Changelog:
[General][Fixed] Fix sticky header not sticking on first render in ScrollView

Reviewed By: nadiia

Differential Revision: D26792003

fbshipit-source-id: c575e8cdd1d986ce3c38941d95d763e329e74874
2021-03-03 15:19:00 -08:00
Kacie Bawiec aaede1029d Remove UNSAFE_componentWillReceiveProps
Summary:
This diff removes `UNSAFE_componentWillReceiveProps` and adds the changes to `componentDidUpdate` instead.

Why use `componentDidUpdate`? When reading through the [React docs on removing UNSAFE_componentWillReceiveProps](https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops), it says:
> If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.

The original usage of `UNSAFE_componentWillReceiveProps` updates the content inset when `props.contentInset` changes. However, we don't always want it to update if the content inset hasn't changed, as calling `setValue` will reset the animated value unnecessarily, and kill any current animations (which we don't want to do). [React Native doc on setValue for reference](https://reactnative.dev/docs/animatedvalue#setvalue).

Changelog:
[General] Use componentDidUpdate instead of UNSAFE_componentwillReceiveProps in ScrollView

Reviewed By: lunaleaps

Differential Revision: D26487276

fbshipit-source-id: 77419deacf5db676cd721b58f34932bd6ca2399f
2021-02-17 15:00:07 -08:00
Kacie Bawiec 1641d46529 Replace UNSAFE_componentWillMount with componentDidMount
Summary:
Changelog:
[General] Replace UNSAFE_componentWillMount with componentDidMount in ScrollView

Reviewed By: nadiia

Differential Revision: D26375818

fbshipit-source-id: 1a33a7fddcf78c05cc1e4f04bd85b48a59290560
2021-02-17 09:58:10 -08:00
Kacie Bawiec 099f67cf8a Move ScrollResponder.Mixin methods into ScrollView and Remove ScrollResponder.js
Summary:
The purpose of this diff is to move all of the ScrollResponder methods into ScrollView to delete ScrollResponder.Mixin.

NOTE: ScrollResponder.Mixin uses a variable named "state" but it does not use React state correctly. Instead of calling `setState()`, state is set using `this.state.item = 123` ([example](https://www.internalfb.com/intern/diffusion/FBS/browsefile/master/xplat/js/react-native-github/Libraries/Components/ScrollResponder.js?lines=315)).  This means these are not actually React state - these are functionally just variables. In this stack, these "state" items from ScrollResponder are turned into regular internal variables.

Changelog:
[General][Removed] Moved ScrollResponder.Mixin methods into ScrollView to Remove ScrollResponder.js

Reviewed By: lunaleaps, nadiia

Differential Revision: D20715880

fbshipit-source-id: 99441434a6dc1c8ff3f435e7d6ec2840821e4e05
2021-02-16 08:03:11 -08:00
Micha Reiser 93377ff508 Remove "use strict" directive from ES Modules
Summary:
ES Modules implicitly enable strict mode. Adding the "use strict" directive is, therefore, not required.

This diff removes all "use strict" directives from ES modules.

Changelog:

[Internal]

Reviewed By: motiz88

Differential Revision: D26172715

fbshipit-source-id: 57957bcbb672c4c3e62b1db633cf425c1c9d6430
2021-02-02 11:12:56 -08:00
Vladislav Shabanov 6e36d046a3 Fix ScrollView getInnerViewNode and getInnerViewRef ref methods (#30588)
Summary:
Currently ScrollView ref's `getInnerViewNode` and `getInnerViewRef` are unbound and don't work as expected returning empty values. The origin of this problem probably is issued by https://github.com/facebook/react-native/commit/d2f314af75b63443db23e131aaf93c2d064e4f44

Working example of the problem is available here: https://github.com/vshab/RNGetInnerViewBug

This PR binds getInnerViewNode and getInnerViewRef to ScrollView and adds test checking the value of getInnerViewRef.

Before:
![Simulator Screen Shot - iPhone 11 - 2020-12-15 at 02 07 03](https://user-images.githubusercontent.com/6755908/102149544-c7df4900-3e7f-11eb-89de-de39a28fbdb3.png)
After:
![Simulator Screen Shot - iPhone 11 - 2020-12-15 at 01 49 31](https://user-images.githubusercontent.com/6755908/102149559-d168b100-3e7f-11eb-8b27-031c9e43112c.png)

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[JavaScript] [Fixed] - ScrollView: Fix `getInnerViewNode` and `getInnerViewRef` ref methods

Pull Request resolved: https://github.com/facebook/react-native/pull/30588

Test Plan:
1. The test checking the value of getInnerViewRef is added.
2. Example app demonstrating the problem is provided with before/after screenshots.

Reviewed By: TheSavior, nadiia

Differential Revision: D25916413

Pulled By: kacieb

fbshipit-source-id: bf18079682be7c647b8715bd0f36cf84953abcfa
2021-01-14 14:45:55 -08:00
Tim Yung 9dfefa8da0 RN: Rename to ScrollViewNativeComponent
Summary:
There may be assumptions that `Native*.js` contains TurboModule. In order to avoid introducing unplanned breaking changes (especially right before the holidays), roll this back for now.

In doing so, I also realized that I forgot to migrate over `ScrollContentViewNativeComponent`. This does that, too.

Changelog:
[Internal]

Reviewed By: RSNara

Differential Revision: D25129324

fbshipit-source-id: 343c4b800969dab91f7cd9f2bf253788c94d38e6
2020-11-20 18:53:14 -08:00
Tim Yung 00e623ddbb RN: Migrate ScrollView to NativeComponentRegistry
Summary:
Migrates `ScrollView` (and its related native components) to use `NativeComponentRegistry`. This will enable it to be configured using experiments to conditionally use the native `ViewConfig` or verify the static `ViewConfig`.

This also cleans up a bunch of the modules and types related to defining the native `ScrollView` component.

This also proposes adopting the same module naming protocol was has been adopted for TurboModules (i.e. `NativeScrollView` instead of `ScrollViewNativeComponent`).

Changelog:
[Internal]

Reviewed By: JoshuaGross

Differential Revision: D25098530

fbshipit-source-id: ff1394bfac023daf58e85d5f9068e4f8da3538be
2020-11-19 15:55:23 -08:00
Tim Yung d4e29ecdaa RN: Fix ScrollView Type Errors
Summary:
Fixes some of the type errors in `ScrollView` that were previously being suppressed by comments. This also slightly simplifies the implementation of `ScrollView`.

Changelog:
[Internal]

Reviewed By: kacieb

Differential Revision: D25097225

fbshipit-source-id: a444db8179c91e264671d8f32431b93c4da8dfc4
2020-11-19 15:55:23 -08:00
Tim Yung 54a067e61e RN: Refactor ScrollView Style Splitting
Summary:
Rewrites `splitLayoutProps`, which is only used by `ScrollView`.

- Improve type safety by avoiding `DangerouslyImpreciseStyle`.
- Avoid allocating objects when it is not necessary.
- Avoid allocating a object enumeratig layout props by using a switch statement.

Changelog:
[Internal]

Reviewed By: JoshuaGross, kacieb

Differential Revision: D25097226

fbshipit-source-id: 2050c03b681024212c06a48b7eb05f28c14415f9
2020-11-19 15:55:23 -08:00
simek 2160377574 remove most of tvOS remnants from the code (#29407)
Summary:
Refs: [0.62 release](https://reactnative.dev/blog/#moving-apple-tv-to-react-native-tvos), https://github.com/facebook/react-native/issues/28706, https://github.com/facebook/react-native/issues/28743, https://github.com/facebook/react-native/issues/29018

This PR removes most of the tvOS remnants in the code. Most of the changes are related to the tvOS platform removal from `.podspec` files, tvOS specific conditionals removal (Obj-C + JS) or tvOS CI/testing pipeline related code.

In addition to the changes listed above I have removed the deprecated `Platform.isTVOS` method. I'm not sure how `Platform.isTV` method is correlated with Android TV devices support which is technically not deprecated in the core so I left this method untouched for now.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

* **[Internal] [Removed]** - remove most of tvOS remnants from the code:
  * `TVEventHandler`, `TVTouchable`, `RCTTVView`, `RCTTVRemoteHandler` and `RCTTVNavigationEventEmitter`
* **[Internal] [Removed]** - remove `TARGET_TV_OS` flag and all the usages
* **[iOS] [Removed]** - remove deprecated `Platform.isTVOS` method
* **[iOS] [Removed]** - remove deprecated and TV related props from View:
  * `isTVSelectable`, `hasTVPreferredFocus` and `tvParallaxProperties`
* **[iOS] [Removed]** - remove `BackHandler` utility implementation

Pull Request resolved: https://github.com/facebook/react-native/pull/29407

Test Plan: Local tests (and iOS CI run) do not yield any errors, but I'm not sure how the CI pipeline would react to those changes. That is the reason why this PR is being posted as Draft. Some tweaks and code adjustment could be required.

Reviewed By: PeteTheHeat

Differential Revision: D22619441

Pulled By: shergin

fbshipit-source-id: 9aaf3840c5e8bd469c2cfcfa7c5b441ef71b30b6
2020-09-28 21:26:41 -07:00
Tim Yung 9c9e677918 RN: Remove react-animated Legacy Package
Summary:
Removes the legacy `react-animated` package configuration and collapses the `Animated/src/` directory into `Animated/`.

Also, reconfigures all references to `Animated/src/` to just be `Animated/`.

Changelog:
[Internal]

Reviewed By: cpojer

Differential Revision: D22450848

fbshipit-source-id: 9fd4861e9f357d817d82e9fec71967a2936a3830
2020-08-25 14:15:35 -07:00
Tim Yung 8edd2e3ef6 RN: Extract ScrollViewContext
Summary:
Extracts `ScrollViewContext` so that other components can use it without requiring `ScrollView` as a dependency.

Changelog:
[Internal]

Reviewed By: kacieb

Differential Revision: D22670035

fbshipit-source-id: 7f902697ad2a60cd1869438e9a2b77e479a18065
2020-08-24 15:24:49 -07:00
Samuel Susla 8fc8cd9aea Add todo notes for nativeID hack
Summary: Changelog: [internal]

Reviewed By: JoshuaGross

Differential Revision: D23003735

fbshipit-source-id: 7814de9e1d280604842e47a969ab3e8d453c50a8
2020-08-10 15:37:12 -07:00
Jesse Katsumata d7b1d3359f chore: use es6 import for scroll view (#29184)
Summary:
Migrate ScrollView component to use ES6 import

motivation: trying to slowly migrate each files to use es6 import/exports to make this discussion happen
https://github.com/react-native-community/discussions-and-proposals/issues/201#issuecomment-588454552

## Changelog

[General] [Changed] - Use es6 import/export syntax for ScrollView component

Pull Request resolved: https://github.com/facebook/react-native/pull/29184

Test Plan:
Test on RNTester for iOS

currently having trouble starting up RNTester on Android, but will update when I'm able to check on Android

Reviewed By: TheSavior

Differential Revision: D22959782

Pulled By: PeteTheHeat

fbshipit-source-id: c909bddda3b5b2edd26a526eedaa67fadd4c2b51
2020-08-05 17:51:13 -07:00
Joshua Gross fa5d3fb6b8 ScrollViewStickyHeader: update position (translateY) in Fabric ShadowTree when scrolling stops
Summary:
In Fabric, some uses of the ScrollViewStickyHeader don't work after scrolling because even though the UI correctly reflects the translateY that the StickyHeader should be at, the underlying C++ Fabric ShadowTree doesn't have the updated parameters.

1. We add a mechanism to pass static props through to animated nodes; these get passed to the platform through the normal commit-diff process. This is to allow passing props to the platform that are also controlled by the animation. This mechanism could be reused elsewhere.
2. In ScrollViewStickyHeader, listen to updates for the translateY value and pass them to the platform when it stops changing - for Fabric only. This noops for non-Fabric since it's not necessary.

Changelog: [Internal]

Reviewed By: mdvacca

Differential Revision: D21948830

fbshipit-source-id: b203ecde466732203dd12a86e2339e81f66b27e7
2020-06-09 16:35:36 -07:00
Jiayan Zhuang 345d0c1abb delete DEPRECATED_sendUpdatedChildFrames prop from ScrollView
Summary:
Changelog:
[iOS][Removed] - Removed DEPRECATED_sendUpdatedChildFrames prop to ScrollView component because there are no callsites of it anymore

Reviewed By: shergin

Differential Revision: D21941946

fbshipit-source-id: 0b7d6d0986ddff4b250e70e0450a6f7e166b41f4
2020-06-09 15:30:53 -07:00