mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Kacie Bawiec
d2f314af75
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
52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @emails oncall+react_native
|
|
* @flow-strict
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const React = require('react');
|
|
const ScrollView = require('../ScrollView');
|
|
const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
|
|
const ReactTestRenderer = require('react-test-renderer');
|
|
const View = require('../../View/View');
|
|
const Text = require('../../../Text/Text');
|
|
|
|
describe('<ScrollView />', () => {
|
|
it('should render as expected', () => {
|
|
ReactNativeTestTools.expectRendersMatchingSnapshot(
|
|
'ScrollView',
|
|
() => (
|
|
<ScrollView>
|
|
<View>
|
|
<Text>Hello World!</Text>
|
|
</View>
|
|
</ScrollView>
|
|
),
|
|
() => {
|
|
jest.dontMock('../ScrollView');
|
|
},
|
|
);
|
|
});
|
|
it('should mock native methods and instance methods when mocked', () => {
|
|
jest.resetModules();
|
|
jest.mock('../ScrollView');
|
|
const ref = React.createRef();
|
|
|
|
ReactTestRenderer.create(<ScrollView ref={ref} />);
|
|
|
|
expect(ref.current != null && ref.current.measure).toBeInstanceOf(
|
|
jest.fn().constructor,
|
|
);
|
|
expect(ref.current != null && ref.current.scrollTo).toBeInstanceOf(
|
|
jest.fn().constructor,
|
|
);
|
|
});
|
|
});
|