VirtualView: Create Experimental Feature Flag (#53533)

Summary:
Pull Request resolved: #53533

Creates a new `enableVirtualViewExperimental` feature flag that determines whether `VirtualView` uses the old or new implementation.

Changelog:
[Internal]

Reviewed By: lunaleaps

Differential Revision: D81340963

fbshipit-source-id: f550fe4e4573e080eb8668077d0ad3ca53cd4d33

Author: yungsters

packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js

@@ -839,6 +839,16 @@ const definitions: FeatureFlagDefinitions = {
       },
       ossReleaseStage: 'stable',
     },
+    enableVirtualViewExperimental: {
+      defaultValue: false,
+      metadata: {
+        dateAdded: '2025-08-29',
+        description: 'Enables the experimental version of `VirtualView`.',
+        expectedReleaseValue: true,
+        purpose: 'experimentation',
+      },
+      ossReleaseStage: 'none',
+    },
     fixVirtualizeListCollapseWindowSize: {
       defaultValue: false,
       metadata: {

packages/react-native/src/private/components/virtualview/VirtualView.js

@@ -16,7 +16,7 @@ import type {NativeModeChangeEvent} from './VirtualViewNativeComponent';
 import StyleSheet from '../../../../Libraries/StyleSheet/StyleSheet';
 import * as ReactNativeFeatureFlags from '../../featureflags/ReactNativeFeatureFlags';
 import VirtualViewExperimentalNativeComponent from './VirtualViewExperimentalNativeComponent';
-import VirtualViewNativeComponent from './VirtualViewNativeComponent';
+import VirtualViewClassicNativeComponent from './VirtualViewNativeComponent';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
 // $FlowFixMe[missing-export]
@@ -49,6 +49,11 @@ export type ModeChangeEvent = $ReadOnly<{
   target: HostInstance,
 }>;
 
+const VirtualViewNativeComponent: typeof VirtualViewClassicNativeComponent =
+  ReactNativeFeatureFlags.enableVirtualViewExperimental()
+    ? VirtualViewExperimentalNativeComponent
+    : VirtualViewClassicNativeComponent;
+
 type VirtualViewComponent = component(
   children?: React.Node,
   nativeID?: string,
@@ -63,16 +68,9 @@ const NotHidden = null;
 
 type State = HiddenHeight | typeof NotHidden;
 
-function createVirtualView(
-  initialState: State,
-  experimental: boolean,
-): VirtualViewComponent {
+function createVirtualView(initialState: State): VirtualViewComponent {
   const initialHidden = initialState !== NotHidden;
 
-  const NativeComponent = experimental
-    ? VirtualViewExperimentalNativeComponent
-    : VirtualViewNativeComponent;
-
   component VirtualView(
     children?: React.Node,
     nativeID?: string,
@@ -124,7 +122,7 @@ function createVirtualView(
     };
 
     return (
-      <NativeComponent
+      <VirtualViewNativeComponent
         initialHidden={initialHidden}
         nativeID={nativeID}
         ref={ref}
@@ -153,24 +151,16 @@ function createVirtualView(
             'no-activity' | _ => isHidden ? null : children,
           }
         }
-      </NativeComponent>
+      </VirtualViewNativeComponent>
     );
   }
   return VirtualView;
 }
 
-export default createVirtualView(NotHidden, false) as VirtualViewComponent;
-
-export const VirtualViewExperimental = createVirtualView(
-  NotHidden,
-  true,
-) as VirtualViewComponent;
+export default createVirtualView(NotHidden) as VirtualViewComponent;
 
-export function createHiddenVirtualView(
-  height: number,
-  experimental: boolean,
-): VirtualViewComponent {
-  return createVirtualView(height as HiddenHeight, experimental);
+export function createHiddenVirtualView(height: number): VirtualViewComponent {
+  return createVirtualView(height as HiddenHeight);
 }
 
 export const _logs: {states?: Array<State>} = {};

packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js

@@ -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<<8ac45d7dfef86becd1f0a7ec7ba8e999>>
+ * @generated SignedSource<<22523248acc3e378f3f81ef43406f106>>
  * @flow strict
  * @noformat
  */
@@ -34,6 +34,7 @@ export type ReactNativeFeatureFlagsJsOnly = $ReadOnly<{
   deferFlatListFocusChangeRenderUpdate: Getter<boolean>,
   disableMaintainVisibleContentPosition: Getter<boolean>,
   enableAccessToHostTreeInFabric: Getter<boolean>,
+  enableVirtualViewExperimental: Getter<boolean>,
   fixVirtualizeListCollapseWindowSize: Getter<boolean>,
   isLayoutAnimationEnabled: Getter<boolean>,
   reduceDefaultPropsInImage: Getter<boolean>,
@@ -150,6 +151,11 @@ export const disableMaintainVisibleContentPosition: Getter<boolean> = createJava
  */
 export const enableAccessToHostTreeInFabric: Getter<boolean> = createJavaScriptFlagGetter('enableAccessToHostTreeInFabric', true);
 
+/**
+ * Enables the experimental version of `VirtualView`.
+ */
+export const enableVirtualViewExperimental: Getter<boolean> = createJavaScriptFlagGetter('enableVirtualViewExperimental', false);
+
 /**
  * Fixing an edge case where the current window size is not properly calculated with fast scrolling. Window size collapsed to 1 element even if windowSize more than the current amount of elements
  */