From f044e12db7aed2e6cd12180a153803ded40e0553 Mon Sep 17 00:00:00 2001 From: Yehor Kharchenko Date: Thu, 12 Nov 2026 16:25:43 +0100 Subject: [PATCH] Support the React Native Strict TypeScript API Type the MarkdownTextInput instance as React.ComponentRef. Under the Strict API, the default since React Native 0.87, TextInput is a function component, so `TextInput & React.Component` has no instance methods. On older React Native types it is the same TextInput class instance. Import the codegen types through the CodegenTypes namespace instead of the react-native/Libraries/Types/CodegenTypes deep import, which the Strict API blocks. The codegen schema is unchanged on React Native 0.80 and 0.85. React Native 0.79 exports no CodegenTypes and its codegen can't read qualified names, so the compatibility table drops it from the next release. --- README.md | 3 +- src/MarkdownTextInput.tsx | 4 +- src/MarkdownTextInput.web.tsx | 4 +- ...wnTextInputDecoratorViewNativeComponent.ts | 64 +++++++++---------- 4 files changed, 39 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 4e416ef9b..be1959b7d 100644 --- a/README.md +++ b/README.md @@ -205,7 +205,8 @@ Currently, `react-native-live-markdown` supports only [ExpensiMark](https://gith | | 0.73 | 0.74 | 0.75 | 0.76 | 0.77 | 0.78 | 0.79 | 0.80 | 0.81 | 0.82 | 0.83 | 0.84 | 0.85 | 0.86 | 0.87 | 0.88 | |:-----------------:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:| -| 0.1.362+ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| 0.1.373+ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| 0.1.362 – 0.1.372 | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | 0.1.331 – 0.1.361 | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | | 0.1.321 – 0.1.330 | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | | 0.1.304 - 0.1.320 | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | diff --git a/src/MarkdownTextInput.tsx b/src/MarkdownTextInput.tsx index 935b05548..614611f57 100644 --- a/src/MarkdownTextInput.tsx +++ b/src/MarkdownTextInput.tsx @@ -68,7 +68,9 @@ type FormatSelectionResult = { cursorOffset: number; }; -type MarkdownTextInput = TextInput & React.Component; +// `TextInput` is a function component under the React Native Strict TypeScript API, so its instance type has to come from +// its ref rather than from `TextInput` itself. On older React Native types this is the same `TextInput` class instance. +type MarkdownTextInput = React.ComponentRef; function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle { const output = JSON.parse(JSON.stringify(input)); diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index bcfa9913b..9b3187d54 100644 --- a/src/MarkdownTextInput.web.tsx +++ b/src/MarkdownTextInput.web.tsx @@ -44,7 +44,9 @@ interface MarkdownNativeEvent extends Event { keyCode?: number; } -type MarkdownTextInput = TextInput & React.Component; +// `TextInput` is a function component under the React Native Strict TypeScript API, so its instance type has to come from +// its ref rather than from `TextInput` itself. On older React Native types this is the same `TextInput` class instance. +type MarkdownTextInput = React.ComponentRef; type Selection = { start: number; diff --git a/src/MarkdownTextInputDecoratorViewNativeComponent.ts b/src/MarkdownTextInputDecoratorViewNativeComponent.ts index 6b977626a..88c76c287 100644 --- a/src/MarkdownTextInputDecoratorViewNativeComponent.ts +++ b/src/MarkdownTextInputDecoratorViewNativeComponent.ts @@ -1,20 +1,18 @@ import {codegenNativeComponent} from 'react-native'; -import type {ColorValue, ViewProps} from 'react-native'; - -import type {Float, Int32} from 'react-native/Libraries/Types/CodegenTypes'; +import type {CodegenTypes, ColorValue, ViewProps} from 'react-native'; interface CodeBlockStyle { fontFamily: string; - fontSize: Float; + fontSize: CodegenTypes.Float; color: ColorValue; backgroundColor: ColorValue; borderColor?: ColorValue; - borderWidth?: Float; - borderRadius?: Float; + borderWidth?: CodegenTypes.Float; + borderRadius?: CodegenTypes.Float; borderStyle?: string; - padding?: Float; - paddingVertical?: Float; - paddingHorizontal?: Float; + padding?: CodegenTypes.Float; + paddingVertical?: CodegenTypes.Float; + paddingHorizontal?: CodegenTypes.Float; } interface MarkdownStyle { @@ -22,69 +20,69 @@ interface MarkdownStyle { color: ColorValue; }; emoji: { - fontSize: Float; + fontSize: CodegenTypes.Float; fontFamily: string; }; link: { color: ColorValue; }; h1: { - fontSize: Float; + fontSize: CodegenTypes.Float; }; blockquote: { borderColor: ColorValue; - borderWidth: Float; - marginLeft: Float; - paddingLeft: Float; + borderWidth: CodegenTypes.Float; + marginLeft: CodegenTypes.Float; + paddingLeft: CodegenTypes.Float; }; code: CodeBlockStyle & { - h1NestedFontSize?: Float; + h1NestedFontSize?: CodegenTypes.Float; }; pre: CodeBlockStyle; mentionHere: { color: ColorValue; backgroundColor: ColorValue; - borderRadius?: Float; + borderRadius?: CodegenTypes.Float; }; mentionUser: { color: ColorValue; backgroundColor: ColorValue; - borderRadius?: Float; + borderRadius?: CodegenTypes.Float; }; mentionReport: { color: ColorValue; backgroundColor: ColorValue; - borderRadius?: Float; + borderRadius?: CodegenTypes.Float; }; inlineImage: { - minWidth: Float; - minHeight: Float; - maxWidth: Float; - maxHeight: Float; - marginTop: Float; - marginBottom: Float; - borderRadius: Float; + minWidth: CodegenTypes.Float; + minHeight: CodegenTypes.Float; + maxWidth: CodegenTypes.Float; + maxHeight: CodegenTypes.Float; + marginTop: CodegenTypes.Float; + marginBottom: CodegenTypes.Float; + borderRadius: CodegenTypes.Float; }; loadingIndicatorContainer?: { backgroundColor?: ColorValue; - borderWidth?: Float; + borderWidth?: CodegenTypes.Float; borderColor?: ColorValue; - borderRadius?: Float; - width?: Float; - height?: Float; + borderRadius?: CodegenTypes.Float; + width?: CodegenTypes.Float; + height?: CodegenTypes.Float; }; loadingIndicator?: { primaryColor?: ColorValue; secondaryColor?: ColorValue; - width?: Float; - height?: Float; - borderWidth?: Float; + width?: CodegenTypes.Float; + height?: CodegenTypes.Float; + borderWidth?: CodegenTypes.Float; }; } interface NativeProps extends ViewProps { markdownStyle: MarkdownStyle; - parserId: Int32; + parserId: CodegenTypes.Int32; } export default codegenNativeComponent('MarkdownTextInputDecoratorView', {