RN: Remove forwardRef from ScrollView (#45197)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45197

With React 19, `forwardRef` is no longer necessary because `ref` is available on props. However, this only holds true for functional components — not class components.

This eliminates the `forwardRef` invocation in `ScrollView`, while retaining the wrapper component to map `ref` to `scrollViewRef` for the class component. For now...

Changelog:
[Internal]

Reviewed By: javache

Differential Revision: D59091873

fbshipit-source-id: 60afcd441aec82fa050738b5c09083f3a26378d6
This commit is contained in:
Tim Yung
2024-06-27 11:08:11 -07:00
committed by Facebook GitHub Bot
parent bfc51f97da
commit 1341169a4b
2 changed files with 15 additions and 17 deletions
@@ -649,13 +649,13 @@ export type Props = $ReadOnly<{|
* A ref to the inner View element of the ScrollView. This should be used
* instead of calling `getInnerViewRef`.
*/
innerViewRef?: ForwardedRef<InnerViewInstance>,
innerViewRef?: React.RefSetter<InnerViewInstance>,
/**
* A ref to the Native ScrollView component. This ref can be used to call
* all of ScrollView's public methods, in addition to native methods like
* measure, measureLayout, etc.
*/
scrollViewRef?: ForwardedRef<PublicScrollViewInstance>,
scrollViewRef?: React.RefSetter<PublicScrollViewInstance>,
|}>;
type State = {|
@@ -1891,11 +1891,9 @@ const styles = StyleSheet.create({
},
});
type ForwardedRef<T> = {current: null | T, ...} | ((null | T) => mixed);
type RefForwarder<TNativeInstance, TPublicInstance> = {
getForwardingRef: (
?ForwardedRef<TPublicInstance>,
?React.RefSetter<TPublicInstance>,
) => (TNativeInstance | null) => void,
nativeInstance: TNativeInstance | null,
publicInstance: TPublicInstance | null,
@@ -1933,21 +1931,22 @@ function createRefForwarder<TNativeInstance, TPublicInstance>(
return state;
}
/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
* LTI update could not be added via codemod */
function Wrapper(props, ref: (mixed => mixed) | {current: mixed, ...}) {
// NOTE: This wrapper component is necessary because `ScrollView` is a class
// component and we need to map `ref` to a differently named prop. This can be
// removed when `ScrollView` is a functional component.
function Wrapper({
ref,
...props
}: {
...Props,
ref: React.RefSetter<PublicScrollViewInstance>,
}): React.Node {
return <ScrollView {...props} scrollViewRef={ref} />;
}
Wrapper.displayName = 'ScrollView';
// $FlowFixMe[incompatible-call]
const ForwardedScrollView = React.forwardRef(Wrapper);
Wrapper.Context = ScrollViewContext;
// $FlowFixMe[prop-missing] Add static context to ForwardedScrollView
ForwardedScrollView.Context = ScrollViewContext;
ForwardedScrollView.displayName = 'ScrollView';
module.exports = ((ForwardedScrollView: $FlowFixMe): React.AbstractComponent<
module.exports = ((Wrapper: $FlowFixMe): React.AbstractComponent<
React.ElementConfig<typeof ScrollView>,
PublicScrollViewInstance,
> &
@@ -34,7 +34,6 @@ exports[`ScrollView renders its children: should deep render when not mocked (pl
onTouchMove={[Function]}
onTouchStart={[Function]}
pagingEnabled={false}
scrollViewRef={null}
sendMomentumEvents={false}
snapToEnd={true}
snapToStart={true}