diff --git a/example/src/App.tsx b/example/src/App.tsx index d3d63426..b25188d1 100644 --- 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(null); + const ref = React.useRef(null); return ( @@ -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 index 3eb2ea26..84cda574 100644 --- a/src/MarkdownTextInput.tsx +++ b/src/MarkdownTextInput.tsx @@ -16,6 +16,8 @@ interface MarkdownTextInputProps extends TextInputProps, InlineImagesInputProps markdownStyle?: PartialMarkdownStyle; } +type MarkdownTextInput = TextInput & React.Component; + 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((props, ref) => { +const MarkdownTextInput = React.forwardRef((props, ref) => { const IS_FABRIC = 'nativeFabricUIManager' in global; const markdownStyle = React.useMemo(() => processMarkdownStyle(props.markdownStyle), [props.markdownStyle]);