Make ref prop optional in xplat: 1/n (#53801)

SamChou19815 · facebook-github-bot · commit dadd7cdaf7ba · 2025-09-16T09:10:22.000-07:00
Summary: Pull Request resolved: #53801 Changelog: [Internal] Reviewed By: panagosg7 Differential Revision: D82507711 fbshipit-source-id: 27c8004c0475765705a01c0b6afb274dab443a38
diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js b/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js
@@ -44,7 +44,7 @@ interface Instance extends React.ElementRef<typeof Animated.View> {
 }
 
 const ScrollViewStickyHeader: component(
-  ref: React.RefSetter<Instance>,
+  ref?: React.RefSetter<Instance>,
   ...props: ScrollViewStickyHeaderProps
 ) = function ScrollViewStickyHeader({
   ref: forwardedRef,
@@ -282,7 +282,7 @@ const ScrollViewStickyHeader: component(
   const passthroughAnimatedPropExplicitValues =
     isFabric && translateY != null
       ? {
-          style: {transform: [{translateY: translateY}]},
+          style: {transform: [{translateY}]},
         }
       : null;
 
@@ -303,20 +303,20 @@ const ScrollViewStickyHeader: component(
         passthroughAnimatedPropExplicitValues
       }>
       {cloneElement(child, {
-        style: styles.fill, // We transfer the child style to the wrapper.
         onLayout: undefined, // we call this manually through our this._onLayout
+        style: styles.fill, // We transfer the child style to the wrapper.
       })}
     </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
-  header: {
-    zIndex: 10,
-  },
   fill: {
     flex: 1,
   },
+  header: {
+    zIndex: 10,
+  },
 });
 
 export default ScrollViewStickyHeader;
diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js b/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js
@@ -47,15 +47,14 @@ class TouchableBounce extends React.Component<
 
   _createPressabilityConfig(): PressabilityConfig {
     return {
+      android_disableSound: this.props.touchSoundDisabled,
       cancelable: !this.props.rejectResponderTermination,
-      disabled: this.props.disabled,
-      hitSlop: this.props.hitSlop,
       delayLongPress: this.props.delayLongPress,
       delayPressIn: this.props.delayPressIn,
       delayPressOut: this.props.delayPressOut,
+      disabled: this.props.disabled,
+      hitSlop: this.props.hitSlop,
       minPressDuration: 0,
-      pressRectOffset: this.props.pressRetentionOffset,
-      android_disableSound: this.props.touchSoundDisabled,
       onBlur: event => {
         if (Platform.isTV) {
           this._bounceTo(1, 0.4, 0);
@@ -113,6 +112,7 @@ class TouchableBounce extends React.Component<
           this.props.onPressOut(event);
         }
       },
+      pressRectOffset: this.props.pressRetentionOffset,
     };
   }
 
@@ -123,10 +123,10 @@ class TouchableBounce extends React.Component<
     callback?: ?() => void,
   ) {
     Animated.spring(this.state.scale, {
-      toValue,
-      velocity,
       bounciness,
+      toValue,
       useNativeDriver: true,
+      velocity,
     }).start(callback);
   }
 
@@ -230,6 +230,6 @@ export default (function TouchableBounceWrapper({
 }) {
   return <TouchableBounce {...props} hostRef={hostRef} />;
 } as component(
-  ref: React.RefSetter<mixed>,
+  ref?: React.RefSetter<mixed>,
   ...props: $ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>
 ));
diff --git a/packages/react-native/Libraries/Debugging/DebuggingOverlay.js b/packages/react-native/Libraries/Debugging/DebuggingOverlay.js
@@ -39,20 +39,13 @@ function DebuggingOverlay({
   useImperativeHandle(
     ref,
     () => ({
-      highlightTraceUpdates(updates) {
+      clearElementsHighlight() {
         if (!isNativeComponentReady) {
           return;
         }
 
-        const nonEmptyRectangles = updates.filter(
-          ({rectangle, color}) => rectangle.width >= 0 && rectangle.height >= 0,
-        );
-
         if (nativeComponentRef.current != null) {
-          Commands.highlightTraceUpdates(
-            nativeComponentRef.current,
-            nonEmptyRectangles,
-          );
+          Commands.clearElementsHighlights(nativeComponentRef.current);
         }
       },
       highlightElements(elements) {
@@ -64,13 +57,20 @@ function DebuggingOverlay({
           Commands.highlightElements(nativeComponentRef.current, elements);
         }
       },
-      clearElementsHighlight() {
+      highlightTraceUpdates(updates) {
         if (!isNativeComponentReady) {
           return;
         }
 
+        const nonEmptyRectangles = updates.filter(
+          ({rectangle, color}) => rectangle.width >= 0 && rectangle.height >= 0,
+        );
+
         if (nativeComponentRef.current != null) {
-          Commands.clearElementsHighlights(nativeComponentRef.current);
+          Commands.highlightTraceUpdates(
+            nativeComponentRef.current,
+            nonEmptyRectangles,
+          );
         }
       },
     }),
@@ -95,14 +95,14 @@ function DebuggingOverlay({
 
 const styles = StyleSheet.create({
   overlay: {
-    position: 'absolute',
-    top: 0,
     bottom: 0,
     left: 0,
+    position: 'absolute',
     right: 0,
+    top: 0,
   },
 });
 
 export default DebuggingOverlay as component(
-  ref: React.RefSetter<DebuggingOverlayHandle>,
+  ref?: React.RefSetter<DebuggingOverlayHandle>,
 );
diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<4ccde3daef50fa7522f10bc7146c0cc6>>
+ * @generated SignedSource<<377660a4dc9f8c721ebcd64f759637ac>>
  *
  * This file was generated by scripts/js-api/build-types/index.js.
  */
@@ -573,7 +573,7 @@ declare const VirtualizedSectionListComponent_default: <
   > = DefaultVirtualizedSectionT,
 >(
   props: Omit<VirtualizedSectionListProps<ItemT, SectionT>, "ref"> & {
-    ref: React.Ref<{
+    ref?: React.Ref<{
       getListRef(): undefined | VirtualizedList_default
       scrollToLocation(params: ScrollToLocationParamsType): void
     }>
diff --git a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js
@@ -68,7 +68,7 @@ type Props = $ReadOnly<{
 }>;
 
 const BaseFlatListExample: component(
-  ref: React.RefSetter<FlatList<string>>,
+  ref?: React.RefSetter<FlatList<string>>,
   ...props: Props
 ) = ({ref, ...props}: {ref: React.RefSetter<FlatList<string>>, ...Props}) => {
   return (
@@ -111,41 +111,23 @@ const ITEM_MARGIN = 8;
 export const ITEM_HEIGHT: number = ITEM_INNER_HEIGHT + ITEM_MARGIN * 2;
 
 const styles = StyleSheet.create({
+  container: {flex: 1},
+  header: {
+    backgroundColor: 'white',
+    fontSize: 32,
+  },
   item: {
     backgroundColor: 'pink',
-    paddingHorizontal: 20,
     height: ITEM_INNER_HEIGHT,
-    marginVertical: ITEM_MARGIN,
     justifyContent: 'center',
+    marginVertical: ITEM_MARGIN,
+    paddingHorizontal: 20,
   },
-  header: {
-    fontSize: 32,
-    backgroundColor: 'white',
-  },
-  title: {
-    fontSize: 24,
-  },
-  titleContainer: {
-    position: 'absolute',
-    top: 45,
-    left: 0,
-    right: 0,
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    backgroundColor: 'gray',
-    zIndex: 1,
-  },
-  titleText: {
-    fontSize: 24,
-    lineHeight: 44,
-    fontWeight: 'bold',
+  list: {
+    flex: 1,
   },
-  testContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: '#f2f2f7ff',
-    height: 40,
+  offScreen: {
+    height: 1000,
   },
   output: {
     fontSize: 12,
@@ -156,11 +138,29 @@ const styles = StyleSheet.create({
   separatorText: {
     fontSize: 10,
   },
-  list: {
-    flex: 1,
+  testContainer: {
+    alignItems: 'center',
+    backgroundColor: '#f2f2f7ff',
+    flexDirection: 'row',
+    height: 40,
+    justifyContent: 'space-between',
   },
-  container: {flex: 1},
-  offScreen: {
-    height: 1000,
+  title: {
+    fontSize: 24,
+  },
+  titleContainer: {
+    alignItems: 'center',
+    backgroundColor: 'gray',
+    justifyContent: 'flex-end',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 45,
+    zIndex: 1,
+  },
+  titleText: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    lineHeight: 44,
   },
 });
diff --git a/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js b/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js
@@ -20,20 +20,20 @@ import {
 
 const DATA = [
   {
-    title: 'Main dishes',
     data: ['Pizza', 'Burger', 'Risotto'],
+    title: 'Main dishes',
   },
   {
-    title: 'Sides',
     data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
+    title: 'Sides',
   },
   {
-    title: 'Drinks',
     data: ['Water', 'Coke', 'Beer'],
+    title: 'Drinks',
   },
   {
-    title: 'Desserts',
     data: ['Cheesecake', 'Brownie'],
+    title: 'Desserts',
   },
 ];
 
@@ -75,7 +75,7 @@ type Props = $ReadOnly<{
 
 const SectionListBaseExample: component(
   // $FlowFixMe[unclear-type]
-  ref: React.RefSetter<SectionList<any>>,
+  ref?: React.RefSetter<SectionList<any>>,
   ...props: Props
 ) = ({
   ref,
@@ -122,33 +122,33 @@ const SectionListBaseExample: component(
 };
 
 const styles = StyleSheet.create({
+  container: {flex: 1},
+  header: {
+    backgroundColor: 'white',
+    fontSize: 32,
+  },
   item: {
     backgroundColor: 'pink',
-    padding: 20,
     marginVertical: 8,
+    padding: 20,
   },
-  header: {
-    fontSize: 32,
-    backgroundColor: 'white',
+  list: {
+    flex: 1,
   },
-  title: {
-    fontSize: 24,
+  output: {
+    flex: 1,
+    fontSize: 12,
   },
   testContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
     alignItems: 'center',
     backgroundColor: '#f2f2f7ff',
+    flexDirection: 'row',
     height: 40,
+    justifyContent: 'space-between',
   },
-  output: {
-    flex: 1,
-    fontSize: 12,
-  },
-  list: {
-    flex: 1,
+  title: {
+    fontSize: 24,
   },
-  container: {flex: 1},
 });
 
 export default SectionListBaseExample;
diff --git a/packages/rn-tester/js/examples/TextInput/ExampleTextInput.js b/packages/rn-tester/js/examples/TextInput/ExampleTextInput.js
@@ -13,7 +13,7 @@ import React, {useContext} from 'react';
 import {StyleSheet, TextInput} from 'react-native';
 
 const ExampleTextInput: component(
-  ref: React.RefSetter<null | React.ElementRef<typeof TextInput>>,
+  ref?: React.RefSetter<null | React.ElementRef<typeof TextInput>>,
   ...props: React.ElementConfig<typeof TextInput>
 ) = ({
   ref,
@@ -30,9 +30,9 @@ const ExampleTextInput: component(
       {...props}
       style={[
         {
-          color: theme.LabelColor,
           backgroundColor: theme.SecondaryGroupedBackgroundColor,
           borderColor: theme.QuaternaryLabelColor,
+          color: theme.LabelColor,
         },
         styles.input,
         props.style,
@@ -44,9 +44,9 @@ const ExampleTextInput: component(
 const styles = StyleSheet.create({
   input: {
     borderWidth: 1,
-    fontSize: 13,
     flexGrow: 1,
     flexShrink: 1,
+    fontSize: 13,
     padding: 4,
   },
 });
diff --git a/packages/virtualized-lists/Lists/VirtualizedSectionList.js b/packages/virtualized-lists/Lists/VirtualizedSectionList.js
@@ -648,7 +648,7 @@ const VirtualizedSectionListComponent = VirtualizedSectionList as component<
     DefaultVirtualizedSectionT,
   > = DefaultVirtualizedSectionT,
 >(
-  ref: React.RefSetter<
+  ref?: React.RefSetter<
     interface {
       getListRef(): ?VirtualizedList,
       scrollToLocation(params: ScrollToLocationParamsType): void,
