fix: adjust markdowninput ref type

Expensify · Oct 18, 2024 · f9ef2bc · f9ef2bc
1 parent b753c7a
commit f9ef2bc
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {Button, StyleSheet, Text, View} from 'react-native';
 import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
-import type {TextInput} from 'react-native';
 import * as TEST_CONST from './testConstants';
 import {PlatformInfo} from './PlatformInfo';
 
@@ -31,8 +30,7 @@ export default function App() {
     };
   }, [emojiFontSizeState, linkColorState]);
 
-  // TODO: use MarkdownTextInput ref instead of TextInput ref
-  const ref = React.useRef<TextInput>(null);
+  const ref = React.useRef<MarkdownTextInput>(null);
 
   return (
     <View style={styles.container}>
@@ -43,7 +41,6 @@ export default function App() {
         value={value}
         onChangeText={setValue}
         style={[styles.input, style]}
-        ref={ref}
         markdownStyle={markdownStyle}
         placeholder="Type here..."
         onSelectionChange={e => setSelection(e.nativeEvent.selection)}

diff --git a/src/MarkdownTextInput.tsx b/src/MarkdownTextInput.tsx
@@ -16,6 +16,8 @@ interface MarkdownTextInputProps extends TextInputProps, InlineImagesInputProps
   markdownStyle?: PartialMarkdownStyle;
 }
 
+type MarkdownTextInput = TextInput & React.Component<MarkdownTextInputProps>;
+
 function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
   const output = JSON.parse(JSON.stringify(input));
 
@@ -37,7 +39,7 @@ function processMarkdownStyle(input: PartialMarkdownStyle | undefined): Markdown
   return processColorsInMarkdownStyle(mergeMarkdownStyleWithDefault(input));
 }
 
-const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>((props, ref) => {
+const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputProps>((props, ref) => {
   const IS_FABRIC = 'nativeFabricUIManager' in global;
 
   const markdownStyle = React.useMemo(() => processMarkdownStyle(props.markdownStyle), [props.markdownStyle]);