fix: adjust MarkdownTextInput ref type (#523)

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

Hide file tree

Showing 3 changed files with 7 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}>

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]);

diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -40,6 +40,8 @@ interface MarkdownNativeEvent extends Event {
   inputType: string;
 }
 
+type MarkdownTextInput = TextInput & React.Component<MarkdownTextInputProps>;
+
 type Selection = {
   start: number;
   end: number;
@@ -68,7 +70,7 @@ type HTMLMarkdownElement = HTMLElement & {
   value: string;
 };
 
-const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
+const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputProps>(
   (
     {
       accessibilityLabel,