Support the React Native Strict TypeScript API

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 |  ❌   |  ❌   |  ❌   |  ❌   |  ✅   |  ✅   |  ✅   |  ✅   |  ✅   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |  ❌   |

src/MarkdownTextInput.tsx

@@ -68,7 +68,9 @@ type FormatSelectionResult = {
   cursorOffset: number;
 };
 
-type MarkdownTextInput = TextInput & React.Component<MarkdownTextInputProps>;
+// `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<typeof TextInput>;
 
 function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
   const output = JSON.parse(JSON.stringify(input));

src/MarkdownTextInput.web.tsx

@@ -44,7 +44,9 @@ interface MarkdownNativeEvent extends Event {
   keyCode?: number;
 }
 
-type MarkdownTextInput = TextInput & React.Component<MarkdownTextInputProps>;
+// `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<typeof TextInput>;
 
 type Selection = {
   start: number;

src/MarkdownTextInputDecoratorViewNativeComponent.ts

@@ -1,90 +1,88 @@
 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 {
   syntax: {
     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<NativeProps>('MarkdownTextInputDecoratorView', {