Reintroduce animated input for Markdown composer

src/components/Composer/index.native.tsx

@@ -1,9 +1,9 @@
-import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
 import type {ForwardedRef} from 'react';
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {TextInput} from 'react-native';
 import {StyleSheet} from 'react-native';
-import type {AnimatedTextInputRef} from '@components/RNTextInput';
+import type {AnimatedTextInputRef} from '@components/RNMarkdownTextInput';
+import MarkdownTextInput from '@components/RNMarkdownTextInput';
 import useMarkdownStyle from '@hooks/useMarkdownStyle';
 import useResetComposerFocus from '@hooks/useResetComposerFocus';
 import useStyleUtils from '@hooks/useStyleUtils';

src/components/RNMarkdownTextInput.tsx

@@ -0,0 +1,37 @@
+import type {MarkdownTextInputProps} from '@expensify/react-native-live-markdown';
+import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
+import type {ForwardedRef} from 'react';
+import React from 'react';
+import type {TextInput} from 'react-native';
+import Animated from 'react-native-reanimated';
+import useTheme from '@hooks/useTheme';
+
+// Convert the underlying TextInput into an Animated component so that we can take an animated ref and pass it to a worklet
+const AnimatedTextInput = Animated.createAnimatedComponent(MarkdownTextInput);
+
+type AnimatedTextInputRef = typeof AnimatedTextInput & TextInput & HTMLInputElement;
+
+function RNMarkdownTextInput(props: MarkdownTextInputProps, ref: ForwardedRef<AnimatedTextInputRef>) {
+    const theme = useTheme();
+
+    return (
+        <AnimatedTextInput
+            allowFontScaling={false}
+            textBreakStrategy="simple"
+            keyboardAppearance={theme.colorScheme}
+            ref={(refHandle) => {
+                if (typeof ref !== 'function') {
+                    return;
+                }
+                ref(refHandle as AnimatedTextInputRef);
+            }}
+            // eslint-disable-next-line
+            {...props}
+        />
+    );
+}
+
+RNMarkdownTextInput.displayName = 'RNTextInputWithRef';
+
+export default React.forwardRef(RNMarkdownTextInput);
+export type {AnimatedTextInputRef};