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};