Commit Graph

3 Commits

Author SHA1 Message Date
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
Kacie Bawiec d2f314af75 Make ScrollView use ForwardRef
Summary:
Have ScrollView use forwardRef so that the host component methods like `measure` and `measureLayout` are available without having to call `getNativeScrollRef`. Instead, you can use `<ScrollView ref={myRef} />` and directly call all methods of ScrollView and host components on `myRef`.

Previous usage:
```
const myRef = React.createRef<React.ElementRef<typeof ScrollView>>();
<ScrollView ref={myRef} />

const innerViewRef = myRef.current.getNativeScrollRef();

innerViewRef.measure();
```
New usage:
```
const myRef = React.createRef<React.ElementRef<typeof View>>();
<ScrollView ref={myRef} />

// now, myRef.current can be used directly as the ref
myRef.current.measure();
myRef.current.measureLayout();

// Additionally, myRef still has access to ScrollView methods
myRef.current.scrollTo(...);
```

Changes:

* Added deprecation warnings to ScrollView methods `getNativeScrollRef`, `getScrollableNode`, and `getScrollResponder`
* Added the forwardRef call to create `ForwardedScrollView` - this takes in `ref` and passes it into the class ScrollView as `scrollViewRef`.
* Forwarded the ref to the native scroll view using `setAndForwardRef`.
* Added statics onto `ForwardedScrollView` so that `ScrollView.Context` can still be accessed.
* Added type `ScrollViewImperativeMethods`, which lists the public methods of ScrollView.
* Converted all public methods of ScrollView to arrow functions. This is because they need to be bound to the forwarded ref.
* Bound all public methods of ScrollView to the forwarded ref in the `setAndForwardRef` call.
* Flow typed the final output (ForwardedScrollView) as an abstract component that takes in the props of the `ScrollView` class, and has all methods of both the inner host component (`measure`, `measureLayout`, etc) and the public methods (`scrollTo`, etc).

Changes to mockScrollView:
* Changed mockScrollView to be able to mock the function component instead of a class component
* Updated necessary tests

Changelog:
[General] [Changed] - Make ScrollView use forwardRef

Reviewed By: TheSavior

Differential Revision: D19304480

fbshipit-source-id: 6c359897526d9d5ac6bc6ab6d5f9d82bfc0d8af4
2020-03-26 16:53:46 -07:00
Kacie Bawiec aebeb3b0a9 Add Snapshot Rendering Test to ScrollView
Summary:
As title.

Changelog: [Added] Add snapshot rendering test to ScrollView

Reviewed By: zackargyle, TheSavior

Differential Revision: D20037673

fbshipit-source-id: 4270bc63a6065789f072893756468b67deae169d
2020-02-24 14:48:40 -08:00