Skip to content

Commit 4b91b63

Browse files
zbauman3facebook-github-bot
authored andcommitted
fix: add missing getNativeScrollRef type for ScrollView (#52203)
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

File tree

packages/react-native/Libraries/Components/ScrollView/ScrollView.d.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
import type * as React from 'react';
1111
import {Constructor} from '../../../types/private/Utilities';
1212
import {Insets} from '../../../types/public/Insets';
13+
import {HostInstance} from '../../../types/public/ReactNativeTypes';
1314
import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
1415
import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
1516
import {
@@ -878,6 +879,12 @@ export class ScrollView extends ScrollViewBase {
878879
// Undocumented
879880
getInnerViewNode(): any;
880881

882+
/**
883+
* Returns a reference to the underlying native scroll view, or null if the
884+
* native instance is not mounted.
885+
*/
886+
getNativeScrollRef: () => HostInstance | null;
887+
881888
/**
882889
* @deprecated Use scrollTo instead
883890
*/

0 commit comments

Comments
 (0)