Merge pull request #35973 from software-mansion-labs/animated-markdow…

…n-input

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 {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
+import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
 import useMarkdownStyle from '@hooks/useMarkdownStyle';
 import useResetComposerFocus from '@hooks/useResetComposerFocus';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -31,7 +31,7 @@ function Composer(
     }: ComposerProps,
     ref: ForwardedRef<TextInput>,
 ) {
-    const textInput = useRef<AnimatedTextInputRef | null>(null);
+    const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);
     const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
     const theme = useTheme();
     const markdownStyle = useMarkdownStyle();
@@ -42,7 +42,7 @@ function Composer(
      * Set the TextInput Ref
      * @param {Element} el
      */
-    const setTextInputRef = useCallback((el: AnimatedTextInputRef) => {
+    const setTextInputRef = useCallback((el: AnimatedMarkdownTextInputRef) => {
         textInput.current = el;
         if (typeof ref !== 'function' || textInput.current === null) {
             return;
@@ -68,7 +68,7 @@ function Composer(
     const composerStyle = useMemo(() => StyleSheet.flatten(style), [style]);
 
     return (
-        <MarkdownTextInput
+        <RNMarkdownTextInput
             multiline
             autoComplete="off"
             placeholderTextColor={theme.placeholderText}

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 AnimatedMarkdownTextInput = Animated.createAnimatedComponent(MarkdownTextInput);
+
+type AnimatedMarkdownTextInputRef = typeof AnimatedMarkdownTextInput & TextInput & HTMLInputElement;
+
+function RNMarkdownTextInputWithRef(props: MarkdownTextInputProps, ref: ForwardedRef<AnimatedMarkdownTextInputRef>) {
+    const theme = useTheme();
+
+    return (
+        <AnimatedMarkdownTextInput
+            allowFontScaling={false}
+            textBreakStrategy="simple"
+            keyboardAppearance={theme.colorScheme}
+            ref={(refHandle) => {
+                if (typeof ref !== 'function') {
+                    return;
+                }
+                ref(refHandle as AnimatedMarkdownTextInputRef);
+            }}
+            // eslint-disable-next-line
+            {...props}
+        />
+    );
+}
+
+RNMarkdownTextInputWithRef.displayName = 'RNTextInputWithRef';
+
+export default React.forwardRef(RNMarkdownTextInputWithRef);
+export type {AnimatedMarkdownTextInputRef};