Commit 4b91b63
Summary:
### The Problem
When trying to measure the location of a `View` within a `ScrollView` (ie. for scrolling to the view), the current recommended method is to use `measureLayout` on the nested view to determine its location inside the containing scroll view:
```tsx
const MyComponent = () => {
const scrollViewRef = useRef<ScrollView>(null);
const nestedViewRef = useRef<View>(null);
const scrollToNestedView = () => {
if (!scrollViewRef.current || !nestedViewRef.current) {
return;
}
nestedViewRef.current.measureLayout(
scrollViewRef.current.getInnerViewNode(),
(x, y) => { scrollViewRef.current.scrollTo({ y, animated: true }); },
);
}
return (
<ScrollView ref={scrollViewRef}>
<View ref={nestedViewRef}>
{ /* content */ }
</View>
</ScrollView>
);
}
```
This is valid in the Typescript types layer. However, the only two methods on `ScrollView` to use in this scenario that are [available in the type definitions](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/ScrollView/ScrollView.d.ts#L830) are `getScrollableNode` and `getInnerViewNode` – both of these methods [return a `number`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/ScrollView/ScrollView.js#L139-L140). The issue is that a `number` not a valid value to use with `measureLayout` because [its source returns early for that type](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricHostComponent.js#L91-L102).
(Note, you can also use `findNodeHandle` with the scroll view ref, but this also returns a `number`.)
### The Solution
The long-term solution would be to update the types for both `measureLayout` and `ScrollView`. However, that would constitute a breaking change and require some fairly expansive updates. Instead, I am proposing an additive solution.
`ScrollView` has [a public method called `getNativeScrollRef`](https://github.com/facebook/react-native/blob/e69f0726cd2616fb112d2e4fabfeaafc8cada5d7/packages/react-native/Libraries/Components/ScrollView/ScrollView.js#L142) which returns the underlying `HostInstance`. This method correctly works in the runtime layer, but is not supported in the types layer. This PR exposes the public method in the type definition so that we can properly access the underlying instance without using `ts-ignore`.
## Changelog:[GENERAL] [FIXED] - Expose `ScrollView.getNativeScrollRef` on the type definition to allow accessing the underlying `HostInstance`.
Pull Request resolved: #52203
Test Plan: None needed. This is only a type update exposing existing functionality.
Reviewed By: cortinico
Differential Revision: D77153959
Pulled By: rshest
fbshipit-source-id: 5880695da85406ed9fe49a1b736b5754db0e6382
1 parent 7f7655d commit 4b91b63
1 file changed
Lines changed: 7 additions & 0 deletions
Lines changed: 7 additions & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
10 | 10 | | |
11 | 11 | | |
12 | 12 | | |
| 13 | + | |
13 | 14 | | |
14 | 15 | | |
15 | 16 | | |
| |||
878 | 879 | | |
879 | 880 | | |
880 | 881 | | |
| 882 | + | |
| 883 | + | |
| 884 | + | |
| 885 | + | |
| 886 | + | |
| 887 | + | |
881 | 888 | | |
882 | 889 | | |
883 | 890 | | |
| |||
0 commit comments