react-native-tvos 0.64.2-2 → 0.66.3-0

package/Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import RCTActionSheetManager from './NativeActionSheetManager';
 
 const invariant = require('invariant');

package/Libraries/ActionSheetIOS/NativeActionSheetManager.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 

package/Libraries/ActionSheetIOS/React-RCTActionSheet.podspec

@@ -11,7 +11,7 @@ version = package['version']
 source = { :git => 'https://github.com/facebook/react-native.git' }
 if version == '1000.0.0'
   # This is an unpublished version, use the latest commit hash of the react-native repo, which we’re presumably in.
-  source[:commit] = `git rev-parse HEAD`.strip
+  source[:commit] = `git rev-parse HEAD`.strip if system("git rev-parse --git-dir > /dev/null 2>&1")
 else
   source[:tag] = "v#{version}"
 end
@@ -24,7 +24,7 @@ Pod::Spec.new do |s|
   s.documentation_url      = "https://reactnative.dev/docs/actionsheetios"
   s.license                = package["license"]
   s.author                 = "Facebook, Inc. and its affiliates"
-  s.platforms              = { :ios => "10.0", :tvos => "10.0" }
+  s.platforms              = { :ios => "11.0", :tvos => "11.0" }
   s.source                 = source
   s.source_files           = "*.{m}"
   s.preserve_paths          = "package.json", "LICENSE", "LICENSE-docs"

package/Libraries/Alert/Alert.js

@@ -8,12 +8,8 @@
  * @flow
  */
 
-'use strict';
-
 import Platform from '../Utilities/Platform';
-import NativeDialogManagerAndroid, {
-  type DialogOptions,
-} from '../NativeModules/specs/NativeDialogManagerAndroid';
+import type {DialogOptions} from '../NativeModules/specs/NativeDialogManagerAndroid';
 import RCTAlertManager from './RCTAlertManager';
 
 export type AlertType =
@@ -50,6 +46,8 @@ class Alert {
     if (Platform.OS === 'ios') {
       Alert.prompt(title, message, buttons, 'default');
     } else if (Platform.OS === 'android') {
+      const NativeDialogManagerAndroid = require('../NativeModules/specs/NativeDialogManagerAndroid')
+        .default;
       if (!NativeDialogManagerAndroid) {
         return;
       }

package/Libraries/Alert/NativeAlertManager.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 

package/Libraries/Alert/RCTAlertManager.android.js

@@ -7,8 +7,6 @@
  * @format
  */
 
-'use strict';
-
 import NativeDialogManagerAndroid from '../NativeModules/specs/NativeDialogManagerAndroid';
 
 function emptyCallback() {}

package/Libraries/Alert/RCTAlertManager.ios.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 import NativeAlertManager from './NativeAlertManager';
 import type {Args} from './NativeAlertManager';
 

package/Libraries/Animated/Animated.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import Platform from '../Utilities/Platform';
 import typeof AnimatedFlatList from './components/AnimatedFlatList';
 import typeof AnimatedImage from './components/AnimatedImage';

package/Libraries/Animated/AnimatedEvent.js

@@ -74,6 +74,7 @@ function attachNativeEvent(
           NativeAnimatedHelper.API.removeAnimatedEventFromView(
             viewTag,
             eventName,
+            // $FlowFixMe[incompatible-call]
             mapping.animatedValueTag,
           );
         });
@@ -210,9 +211,9 @@ class AnimatedEvent {
           }
         } else if (typeof recMapping === 'object') {
           for (const mappingKey in recMapping) {
-            /* $FlowFixMe(>=0.120.0) This comment suppresses an error found
-             * when Flow v0.120 was deployed. To see the error, delete this
-             * comment and run Flow. */
+            /* $FlowFixMe[prop-missing] (>=0.120.0) This comment suppresses an
+             * error found when Flow v0.120 was deployed. To see the error,
+             * delete this comment and run Flow. */
             traverse(recMapping[mappingKey], recEvt[mappingKey], mappingKey);
           }
         }

package/Libraries/Animated/AnimatedImplementation.js

@@ -706,6 +706,4 @@ module.exports = {
    * Expose Event class, so it can be used as a type for type checkers.
    */
   Event: AnimatedEvent,
-
-  __PropsOnlyForTests: AnimatedProps,
 };

package/Libraries/Animated/AnimatedMock.js

@@ -14,7 +14,6 @@ const {AnimatedEvent, attachNativeEvent} = require('./AnimatedEvent');
 const AnimatedImplementation = require('./AnimatedImplementation');
 const AnimatedInterpolation = require('./nodes/AnimatedInterpolation');
 const AnimatedNode = require('./nodes/AnimatedNode');
-const AnimatedProps = require('./nodes/AnimatedProps');
 const AnimatedValue = require('./nodes/AnimatedValue');
 const AnimatedValueXY = require('./nodes/AnimatedValueXY');
 
@@ -24,7 +23,6 @@ import type {EndCallback} from './animations/Animation';
 import type {TimingAnimationConfig} from './animations/TimingAnimation';
 import type {DecayAnimationConfig} from './animations/DecayAnimation';
 import type {SpringAnimationConfig} from './animations/SpringAnimation';
-import type {Mapping, EventConfig} from './AnimatedEvent';
 
 /**
  * Animations are a source of flakiness in snapshot testing. This mock replaces
@@ -123,10 +121,6 @@ const loop = function(
   return emptyAnimation;
 };
 
-const event = function(argMapping: Array<?Mapping>, config: EventConfig): any {
-  return null;
-};
-
 module.exports = {
   Value: AnimatedValue,
   ValueXY: AnimatedValueXY,
@@ -146,11 +140,10 @@ module.exports = {
   parallel,
   stagger,
   loop,
-  event,
+  event: AnimatedImplementation.event,
   createAnimatedComponent,
   attachNativeEvent,
   forkEvent: AnimatedImplementation.forkEvent,
   unforkEvent: AnimatedImplementation.unforkEvent,
   Event: AnimatedEvent,
-  __PropsOnlyForTests: AnimatedProps,
 };

package/Libraries/Animated/AnimatedWeb.js

@@ -14,10 +14,13 @@ const AnimatedImplementation = require('./AnimatedImplementation');
 
 module.exports = {
   ...AnimatedImplementation,
-  // $FlowFixMe createAnimatedComponent expects to receive types. Plain intrinsic components can't be typed like this
+  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+   * types. Plain intrinsic components can't be typed like this */
   div: (AnimatedImplementation.createAnimatedComponent('div'): $FlowFixMe),
-  // $FlowFixMe createAnimatedComponent expects to receive types. Plain intrinsic components can't be typed like this
+  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+   * types. Plain intrinsic components can't be typed like this */
   span: (AnimatedImplementation.createAnimatedComponent('span'): $FlowFixMe),
-  // $FlowFixMe createAnimatedComponent expects to receive types. Plain intrinsic components can't be typed like this
+  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+   * types. Plain intrinsic components can't be typed like this */
   img: (AnimatedImplementation.createAnimatedComponent('img'): $FlowFixMe),
 };

package/Libraries/Animated/NativeAnimatedHelper.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import NativeAnimatedNonTurboModule from './NativeAnimatedModule';
 import NativeAnimatedTurboModule from './NativeAnimatedTurboModule';
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
@@ -49,9 +47,9 @@ const API = {
     saveValueCallback: (value: number) => void,
   ): void {
     invariant(NativeAnimatedModule, 'Native animated module is not available');
-    if (NativeAnimatedModule.getValue) {
+    API.queueOperation(() => {
       NativeAnimatedModule.getValue(tag, saveValueCallback);
-    }
+    });
   },
   setWaitingForIdentifier: function(id: string): void {
     waitingForQueuedOperations.add(id);
@@ -395,10 +393,15 @@ module.exports = {
   assertNativeAnimatedModule,
   shouldUseNativeDriver,
   transformDataType,
-  // $FlowExpectedError - unsafe getter lint suppresion
+  // $FlowExpectedError[unsafe-getters-setters] - unsafe getter lint suppresion
+  // $FlowExpectedError[missing-type-arg] - unsafe getter lint suppresion
   get nativeEventEmitter(): NativeEventEmitter {
     if (!nativeEventEmitter) {
-      nativeEventEmitter = new NativeEventEmitter(NativeAnimatedModule);
+      nativeEventEmitter = new NativeEventEmitter(
+        // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
+        // If you want to use the native module on other platforms, please remove this condition and test its behavior
+        Platform.OS !== 'ios' ? null : NativeAnimatedModule,
+      );
     }
     return nativeEventEmitter;
   },

package/Libraries/Animated/NativeAnimatedModule.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 

package/Libraries/Animated/NativeAnimatedTurboModule.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 

package/Libraries/Animated/animations/Animation.js

@@ -71,6 +71,7 @@ class Animation {
         this.__nativeId,
         animatedValue.__getNativeTag(),
         this.__getNativeAnimationConfig(),
+        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         this.__debouncedOnEnd.bind(this),
       );
     } catch (e) {

package/Libraries/Animated/animations/DecayAnimation.js

@@ -84,6 +84,7 @@ class DecayAnimation extends Animation {
     if (this._useNativeDriver) {
       this.__startNativeAnimation(animatedValue);
     } else {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
     }
   }
@@ -105,6 +106,7 @@ class DecayAnimation extends Animation {
 
     this._lastValue = value;
     if (this.__active) {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
     }
   }

package/Libraries/Animated/animations/SpringAnimation.js

@@ -344,6 +344,7 @@ class SpringAnimation extends Animation {
       this.__debouncedOnEnd({finished: true});
       return;
     }
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
   }
 

package/Libraries/Animated/animations/TimingAnimation.js

@@ -48,6 +48,7 @@ let _easeInOut;
 function easeInOut() {
   if (!_easeInOut) {
     const Easing = require('../Easing');
+    // $FlowFixMe[method-unbinding]
     _easeInOut = Easing.inOut(Easing.ease);
   }
   return _easeInOut;
@@ -117,6 +118,7 @@ class TimingAnimation extends Animation {
           this.__startNativeAnimation(animatedValue);
         } else {
           this._animationFrame = requestAnimationFrame(
+            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
             this.onUpdate.bind(this),
           );
         }
@@ -149,6 +151,7 @@ class TimingAnimation extends Animation {
           (this._toValue - this._fromValue),
     );
     if (this.__active) {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
     }
   }

package/Libraries/Animated/components/AnimatedFlatList.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
 const FlatList = require('../../Lists/FlatList');

package/Libraries/Animated/components/AnimatedImage.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
 const Image = require('../../Image/Image');
@@ -17,9 +15,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>,
 >);

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
 const ScrollView = require('../../Components/ScrollView/ScrollView');
@@ -24,9 +22,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>,
 >);

package/Libraries/Animated/components/AnimatedSectionList.js

@@ -8,11 +8,9 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
-const SectionList = require('../../Lists/SectionList');
+import SectionList from '../../Lists/SectionList';
 const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';

package/Libraries/Animated/components/AnimatedText.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
 const Text = require('../../Text/Text');
@@ -17,9 +15,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>,
 >);

package/Libraries/Animated/components/AnimatedView.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
 const View = require('../../Components/View/View');
@@ -17,7 +15,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>,
 >);

package/Libraries/Animated/createAnimatedComponent.js

@@ -10,6 +10,8 @@
 
 'use strict';
 
+import * as createAnimatedComponentInjection from './createAnimatedComponentInjection';
+
 const View = require('../Components/View/View');
 const {AnimatedEvent} = require('./AnimatedEvent');
 const AnimatedProps = require('./nodes/AnimatedProps');
@@ -37,8 +39,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 +86,11 @@ 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.
+      // In cases where this value switching between "false" and "true" on Fabric
+      // causes issues, add an additional check for _component nullity.
       if (this._component == null) {
         return false;
       }
@@ -164,14 +176,11 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
     _attachProps(nextProps) {
       const oldPropsAnimated = this._propsAnimated;
 
-      if (nextProps === oldPropsAnimated) {
-        return;
-      }
-
       this._propsAnimated = new AnimatedProps(
         nextProps,
         this._animatedPropsCallback,
       );
+      this._propsAnimated.__attach();
 
       // When you call detach, it removes the element from the parent list
       // of children. If it goes to 0, then the parent also detaches itself
@@ -192,19 +201,6 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
       setLocalRef: ref => {
         this._prevComponent = this._component;
         this._component = ref;
-
-        // TODO: Delete this in a future release.
-        if (ref != null && ref.getNode == null) {
-          ref.getNode = () => {
-            console.warn(
-              '%s: Calling `getNode()` on the ref of an Animated component ' +
-                'is no longer necessary. You can now directly use the ref ' +
-                'instead. This method will be removed in a future release.',
-              ref.constructor.name ?? '<<anonymous>>',
-            );
-            return ref;
-          };
-        }
       },
     });
 
@@ -213,23 +209,42 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
       const {style: passthruStyle = {}, ...passthruProps} =
         this.props.passthroughAnimatedPropExplicitValues || {};
       const mergedStyle = {...style, ...passthruStyle};
+
+      // On Fabric, we always want to ensure the container Animated View is *not*
+      // flattened.
+      // Because we do not get a host component ref immediately and thus cannot
+      // do a proper Fabric vs non-Fabric detection immediately, we default to assuming
+      // that Fabric *is* enabled until we know otherwise.
+      // Thus, in Fabric, this view will never be flattened. In non-Fabric, the view will
+      // not be flattened during the initial render but may be flattened in the second render
+      // and onwards.
+      const forceNativeIdFabric =
+        (this._component == null &&
+          (options?.collapsable === false || props.collapsable !== true)) ||
+        this._isFabric();
+
+      const forceNativeId =
+        props.collapsable ??
+        (this._propsAnimated.__isNative ||
+          forceNativeIdFabric ||
+          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
-          }
         />
       );
     }
@@ -270,6 +285,8 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
       this._propsAnimated && this._propsAnimated.__detach();
       this._detachNativeEvents();
       this._markUpdateComplete();
+      this._component = null;
+      this._prevComponent = null;
     }
   }
 
@@ -283,4 +300,6 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
   });
 }
 
-module.exports = createAnimatedComponent;
+// $FlowIgnore[incompatible-cast] - Will be compatible after refactors.
+module.exports = (createAnimatedComponentInjection.recordAndRetrieve() ??
+  createAnimatedComponent: typeof createAnimatedComponent);

package/Libraries/Animated/createAnimatedComponentInjection.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import * as React from 'react';
+
+type createAnimatedComponent = <TProps: {...}, TInstance>(
+  Component: React.AbstractComponent<TProps, TInstance>,
+) => React.AbstractComponent<TProps, TInstance>;
+
+// This can be undefined, null, or the experimental implementation. If this is
+// null, that means `createAnimatedComponent` has already been initialized and
+// it is too late to call `inject`.
+let injected: ?createAnimatedComponent;
+
+/**
+ * Call during bundle initialization to opt-in to new `createAnimatedComponent`.
+ */
+export function inject(newInjected: createAnimatedComponent): void {
+  if (injected !== undefined) {
+    if (__DEV__) {
+      console.error(
+        'createAnimatedComponentInjection: ' +
+          (injected == null
+            ? 'Must be called before `createAnimatedComponent`.'
+            : 'Cannot be called more than once.'),
+      );
+    }
+    return;
+  }
+  injected = newInjected;
+}
+
+/**
+ * Only called by `createAnimatedComponent.js`.
+ */
+export function recordAndRetrieve(): createAnimatedComponent | null {
+  if (injected === undefined) {
+    injected = null;
+  }
+  return injected;
+}

package/Libraries/Animated/createAnimatedComponent_EXPERIMENTAL.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import useAnimatedProps from './useAnimatedProps';
+import useMergeRefs from '../Utilities/useMergeRefs';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import * as React from 'react';
+
+/**
+ * Experimental implementation of `createAnimatedComponent` that is intended to
+ * be compatible with concurrent rendering.
+ */
+export default function createAnimatedComponent<TProps: {...}, TInstance>(
+  Component: React.AbstractComponent<TProps, TInstance>,
+): React.AbstractComponent<TProps, TInstance> {
+  return React.forwardRef((props, forwardedRef) => {
+    const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
+      props,
+    );
+    const ref = useMergeRefs<TInstance | null>(callbackRef, forwardedRef);
+
+    // Some components require explicit passthrough values for animation
+    // to work properly. For example, if an animated component is
+    // transformed and Pressable, onPress will not work after transform
+    // without these passthrough values.
+    // $FlowFixMe[prop-missing]
+    const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
+    const {style: passthroughStyle, ...passthroughProps} =
+      passthroughAnimatedPropExplicitValues ?? {};
+    const mergedStyle = StyleSheet.compose(style, passthroughStyle);
+
+    return (
+      <Component
+        {...reducedProps}
+        {...passthroughProps}
+        style={mergedStyle}
+        ref={ref}
+      />
+    );
+  });
+}