Skip to content

Commit

Permalink
Fix ScrollView getInnerViewNode and getInnerViewRef ref methods (#30588)
Browse files Browse the repository at this point in the history
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 d2f314a

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: #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
  • Loading branch information
vshab authored and facebook-github-bot committed Jan 14, 2021
1 parent cfd39bc commit 6e36d04
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 4 deletions.
8 changes: 4 additions & 4 deletions Libraries/Components/ScrollView/ScrollView.js
Original file line number Diff line number Diff line change
Expand Up @@ -808,13 +808,13 @@ class ScrollView extends React.Component<Props, State> {
return ReactNative.findNodeHandle(this._scrollViewRef);
};

getInnerViewNode(): ?number {
getInnerViewNode: () => ?number = () => {
return ReactNative.findNodeHandle(this._innerViewRef);
}
};

getInnerViewRef(): ?React.ElementRef<typeof View> {
getInnerViewRef: () => ?React.ElementRef<typeof View> = () => {
return this._innerViewRef;
}
};

getNativeScrollRef: () => ?React.ElementRef<HostComponent<mixed>> = () => {
return this._scrollViewRef;
Expand Down
16 changes: 16 additions & 0 deletions Libraries/Components/ScrollView/__tests__/ScrollView-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,20 @@ describe('<ScrollView />', () => {
jest.fn().constructor,
);
});
it('getInnerViewRef for case where it returns a native view', () => {
jest.resetModules();
jest.unmock('../ScrollView');

const scrollViewRef = React.createRef(null);

ReactTestRenderer.create(<ScrollView ref={scrollViewRef} />);

const innerViewRef = scrollViewRef.current.getInnerViewRef();

// This is checking if the ref acts like a host component. If we had an
// `isHostComponent(ref)` method, that would be preferred.
expect(innerViewRef.measure).toBeInstanceOf(jest.fn().constructor);
expect(innerViewRef.measureLayout).toBeInstanceOf(jest.fn().constructor);
expect(innerViewRef.measureInWindow).toBeInstanceOf(jest.fn().constructor);
});
});

0 comments on commit 6e36d04

Please sign in to comment.