diff --git a/Libraries/Animated/components/AnimatedImage.js b/Libraries/Animated/components/AnimatedImage.js
index 56cdb7d18f7..5aae7d90056 100644
--- a/Libraries/Animated/components/AnimatedImage.js
+++ b/Libraries/Animated/components/AnimatedImage.js
@@ -17,9 +17,9 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent(
-  (Image: $FlowFixMe),
-): AnimatedComponentType<
+module.exports = (createAnimatedComponent((Image: $FlowFixMe), {
+  collapsable: false,
+}): AnimatedComponentType<
   React.ElementConfig<typeof Image>,
   React.ElementRef<typeof Image>,
 >);
diff --git a/Libraries/Animated/components/AnimatedScrollView.js b/Libraries/Animated/components/AnimatedScrollView.js
index 259cbb81b0e..bfa75b7167b 100644
--- a/Libraries/Animated/components/AnimatedScrollView.js
+++ b/Libraries/Animated/components/AnimatedScrollView.js
@@ -24,9 +24,9 @@ const ScrollViewWithEventThrottle = React.forwardRef((props, ref) => (
   <ScrollView scrollEventThrottle={0.0001} {...props} ref={ref} />
 ));
 
-module.exports = (createAnimatedComponent(
-  ScrollViewWithEventThrottle,
-): AnimatedComponentType<
+module.exports = (createAnimatedComponent(ScrollViewWithEventThrottle, {
+  collapsable: false,
+}): AnimatedComponentType<
   React.ElementConfig<typeof ScrollView>,
   React.ElementRef<typeof ScrollView>,
 >);
diff --git a/Libraries/Animated/components/AnimatedText.js b/Libraries/Animated/components/AnimatedText.js
index 5a184e0626f..7a940093aad 100644
--- a/Libraries/Animated/components/AnimatedText.js
+++ b/Libraries/Animated/components/AnimatedText.js
@@ -17,9 +17,9 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent(
-  (Text: $FlowFixMe),
-): AnimatedComponentType<
+module.exports = (createAnimatedComponent((Text: $FlowFixMe), {
+  collapsable: false,
+}): AnimatedComponentType<
   React.ElementConfig<typeof Text>,
   React.ElementRef<typeof Text>,
 >);
diff --git a/Libraries/Animated/components/AnimatedView.js b/Libraries/Animated/components/AnimatedView.js
index 0ce54601fe9..d2a87807b02 100644
--- a/Libraries/Animated/components/AnimatedView.js
+++ b/Libraries/Animated/components/AnimatedView.js
@@ -17,7 +17,9 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent(View): AnimatedComponentType<
+module.exports = (createAnimatedComponent(View, {
+  collapsable: true,
+}): AnimatedComponentType<
   React.ElementConfig<typeof View>,
   React.ElementRef<typeof View>,
 >);
diff --git a/Libraries/Animated/createAnimatedComponent.js b/Libraries/Animated/createAnimatedComponent.js
index 230aa164203..8e8638edb63 100644
--- a/Libraries/Animated/createAnimatedComponent.js
+++ b/Libraries/Animated/createAnimatedComponent.js
@@ -37,8 +37,13 @@ export type AnimatedComponentType<
   Instance,
 >;
 
+type AnimatedComponentOptions = {
+  collapsable?: boolean,
+};
+
 function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
   Component: React.AbstractComponent<Props, Instance>,
+  options?: AnimatedComponentOptions,
 ): AnimatedComponentType<Props, Instance> {
   invariant(
     typeof Component !== 'function' ||
@@ -79,6 +84,9 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
     }
 
     _isFabric = (): boolean => {
+      // When called during the first render, `_component` is always null.
+      // Therefore, even if a component is rendered in Fabric, we can't detect
+      // that until ref is set, which happens sometime after the first render.
       if (this._component == null) {
         return false;
       }
@@ -213,23 +221,28 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
       const {style: passthruStyle = {}, ...passthruProps} =
         this.props.passthroughAnimatedPropExplicitValues || {};
       const mergedStyle = {...style, ...passthruStyle};
+      const forceNativeId =
+        props.collapsable ??
+        (this._propsAnimated.__isNative ||
+          this._isFabric() ||
+          options?.collapsable === false);
+      // The native driver updates views directly through the UI thread so we
+      // have to make sure the view doesn't get optimized away because it cannot
+      // go through the NativeViewHierarchyManager since it operates on the shadow
+      // thread. TODO: T68258846
+      const collapsableProps = forceNativeId
+        ? {
+            nativeID: props.nativeID ?? 'animatedComponent',
+            collapsable: false,
+          }
+        : {};
       return (
         <Component
           {...props}
           {...passthruProps}
+          {...collapsableProps}
           style={mergedStyle}
           ref={this._setComponentRef}
-          nativeID={
-            props.nativeID ??
-            (this._isFabric() ? 'animatedComponent' : undefined)
-          } /* TODO: T68258846. */
-          // The native driver updates views directly through the UI thread so we
-          // have to make sure the view doesn't get optimized away because it cannot
-          // go through the NativeViewHierarchyManager since it operates on the shadow
-          // thread.
-          collapsable={
-            this._propsAnimated.__isNative ? false : props.collapsable
-          }
         />
       );
     }