chore: upgrade library deps to RN 0.87

Author: kacperzolkiewski

android/gradle.properties

@@ -1,5 +1,5 @@
-ReactNativeEnrichedHtml_kotlinVersion=2.0.21
+ReactNativeEnrichedHtml_kotlinVersion=2.2.0
 ReactNativeEnrichedHtml_minSdkVersion=24
-ReactNativeEnrichedHtml_targetSdkVersion=34
-ReactNativeEnrichedHtml_compileSdkVersion=35
+ReactNativeEnrichedHtml_targetSdkVersion=36
+ReactNativeEnrichedHtml_compileSdkVersion=37
 ReactNativeEnrichedHtml_ndkVersion=27.1.12297006

apps/example-web/tsconfig.app.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "types": ["vite/client"],
-    "baseUrl": ".",
     "paths": {
       "react-native-enriched-html": ["../../src/index.tsx"]
     }

apps/example/tsconfig.json

@@ -2,7 +2,12 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "paths": {
-      "react-native-enriched-html": ["../../src/index.native.tsx"]
+      "react-native-enriched-html": ["../../src/index.native.tsx"],
+      // Pin a single `@types/react` copy so the library source typechecked here
+      // doesn't mix react types with the example's copy (which makes codegen
+      // command ref types collapse to `never`).
+      "react": ["../../node_modules/@types/react"],
+      "react/*": ["../../node_modules/@types/react/*"]
     }
   }
 }

package.json

@@ -119,9 +119,9 @@
     "@eslint/js": "^9.22.0",
     "@evilmartians/lefthook": "^1.5.0",
     "@playwright/test": "1.58.2",
-    "@react-native-community/cli": "20.1.0",
-    "@react-native/eslint-config": "^0.86.0",
-    "@react-native/jest-preset": "^0.86.0",
+    "@react-native-community/cli": "20.2.0",
+    "@react-native/eslint-config": "^0.87.0",
+    "@react-native/jest-preset": "^0.87.0",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",
     "@types/react": "^19.2.0",
@@ -138,11 +138,11 @@
     "prettier": "^3.0.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "react-native": "0.86.0",
+    "react-native": "0.87.0",
     "react-native-builder-bob": "^0.43.0",
     "release-it": "^17.10.0",
     "turbo": "^1.10.7",
-    "typescript": "^5.8.3"
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
     "react": "*",

src/css.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

src/native/EnrichedText.tsx

@@ -6,6 +6,7 @@ import {
   type ComponentRef,
 } from 'react';
 import type {
+  CodegenTypes,
   HostComponent,
   HostInstance,
   MeasureInWindowOnSuccessCallback,
@@ -20,7 +21,6 @@ import EnrichedTextNativeComponent, {
 import { nullthrows } from '../utils/nullthrows';
 import { normalizeEnrichedTextHtmlStyle } from '../utils/normalizeHtmlStyle';
 import type { EnrichedTextProps } from '../types';
-import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
 
 type ComponentType = ComponentRef<HostComponent<NativeProps>>;
 
@@ -46,14 +46,15 @@ export const EnrichedText = ({
     [_htmlStyle]
   );
 
-  const onLinkPress: DirectEventHandler<OnLinkPressEvent> = useCallback(
-    (e) => {
-      _onLinkPress?.(e.nativeEvent);
-    },
-    [_onLinkPress]
-  );
+  const onLinkPress: CodegenTypes.DirectEventHandler<OnLinkPressEvent> =
+    useCallback(
+      (e) => {
+        _onLinkPress?.(e.nativeEvent);
+      },
+      [_onLinkPress]
+    );
 
-  const onMentionPress: DirectEventHandler<OnMentionPressEventInternal> =
+  const onMentionPress: CodegenTypes.DirectEventHandler<OnMentionPressEventInternal> =
     useCallback(
       (e) => {
         const { text, indicator, attributes } = e.nativeEvent;

src/spec/EnrichedTextInputNativeComponent.ts

@@ -1,12 +1,10 @@
 import { codegenNativeComponent, codegenNativeCommands } from 'react-native';
 import type {
-  BubblingEventHandler,
-  DirectEventHandler,
-  Float,
-  Int32,
-  UnsafeMixed,
-} from 'react-native/Libraries/Types/CodegenTypes';
-import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+  CodegenTypes,
+  ColorValue,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 import React from 'react';
 
 export interface LinkNativeRegex {
@@ -129,8 +127,8 @@ export interface OnChangeStateEvent {
 export interface OnLinkDetected {
   text: string;
   url: string;
-  start: Int32;
-  end: Int32;
+  start: CodegenTypes.Int32;
+  end: CodegenTypes.Int32;
 }
 
 export interface OnMentionDetectedInternal {
@@ -147,18 +145,18 @@ export interface OnMentionDetected {
 
 export interface OnMentionEvent {
   indicator: string;
-  text: UnsafeMixed;
+  text: CodegenTypes.UnsafeMixed;
 }
 
 export interface OnChangeSelectionEvent {
-  start: Int32;
-  end: Int32;
+  start: CodegenTypes.Int32;
+  end: CodegenTypes.Int32;
   text: string;
 }
 
 export interface OnRequestHtmlResultEvent {
-  requestId: Int32;
-  html: UnsafeMixed;
+  requestId: CodegenTypes.Int32;
+  html: CodegenTypes.UnsafeMixed;
 }
 
 export interface OnSubmitEditing {
@@ -181,8 +179,8 @@ export interface TextShortcut {
 export interface OnContextMenuItemPressEvent {
   itemText: string;
   selectedText: string;
-  selectionStart: Int32;
-  selectionEnd: Int32;
+  selectionStart: CodegenTypes.Int32;
+  selectionEnd: CodegenTypes.Int32;
   styleState: {
     bold: {
       isActive: boolean;
@@ -284,27 +282,27 @@ export interface OnContextMenuItemPressEvent {
 }
 
 interface TargetedEvent {
-  target: Int32;
+  target: CodegenTypes.Int32;
 }
 
 export interface PastedImage {
   uri: string;
   type: string;
-  width: Float;
-  height: Float;
+  width: CodegenTypes.Float;
+  height: CodegenTypes.Float;
 }
 
 export interface OnPasteImagesEvent {
   images: {
     uri: string;
     type: string;
-    width: Float;
-    height: Float;
+    width: CodegenTypes.Float;
+    height: CodegenTypes.Float;
   }[];
 }
 
 type Heading = {
-  fontSize?: Float;
+  fontSize?: CodegenTypes.Float;
   bold?: boolean;
 };
 
@@ -317,13 +315,13 @@ export interface HtmlStyleInternal {
   h6?: Heading;
   blockquote?: {
     borderColor?: ColorValue;
-    borderWidth?: Float;
-    gapWidth?: Float;
+    borderWidth?: CodegenTypes.Float;
+    gapWidth?: CodegenTypes.Float;
     color?: ColorValue;
   };
   codeblock?: {
     color?: ColorValue;
-    borderRadius?: Float;
+    borderRadius?: CodegenTypes.Float;
     backgroundColor?: ColorValue;
   };
   code?: {
@@ -336,23 +334,23 @@ export interface HtmlStyleInternal {
   };
   // This is a workaround for the fact that codegen does not support Records.
   // On native Android side this will become a ReadableMap, on native iOS we can work with a folly::dynamic object.
-  mention?: UnsafeMixed;
+  mention?: CodegenTypes.UnsafeMixed;
   ol?: {
-    gapWidth?: Float;
-    marginLeft?: Float;
+    gapWidth?: CodegenTypes.Float;
+    marginLeft?: CodegenTypes.Float;
     markerFontWeight?: string;
     markerColor?: ColorValue;
   };
   ul?: {
     bulletColor?: ColorValue;
-    bulletSize?: Float;
-    marginLeft?: Float;
-    gapWidth?: Float;
+    bulletSize?: CodegenTypes.Float;
+    marginLeft?: CodegenTypes.Float;
+    gapWidth?: CodegenTypes.Float;
   };
   ulCheckbox?: {
-    gapWidth?: Float;
-    boxSize?: Float;
-    marginLeft?: Float;
+    gapWidth?: CodegenTypes.Float;
+    boxSize?: CodegenTypes.Float;
+    marginLeft?: CodegenTypes.Float;
     boxColor?: ColorValue;
   };
 }
@@ -379,26 +377,26 @@ export interface NativeProps extends ViewProps {
   allowFontScaling?: boolean;
 
   // event callbacks
-  onInputFocus?: DirectEventHandler<TargetedEvent>;
-  onInputBlur?: DirectEventHandler<TargetedEvent>;
-  onChangeText?: DirectEventHandler<OnChangeTextEvent>;
-  onChangeHtml?: DirectEventHandler<OnChangeHtmlEvent>;
-  onChangeState?: DirectEventHandler<OnChangeStateEvent>;
-  onLinkDetected?: DirectEventHandler<OnLinkDetected>;
-  onMentionDetected?: DirectEventHandler<OnMentionDetectedInternal>;
-  onMention?: DirectEventHandler<OnMentionEvent>;
-  onChangeSelection?: DirectEventHandler<OnChangeSelectionEvent>;
-  onRequestHtmlResult?: DirectEventHandler<OnRequestHtmlResultEvent>;
-  onInputKeyPress?: DirectEventHandler<OnKeyPressEvent>;
-  onPasteImages?: DirectEventHandler<OnPasteImagesEvent>;
-  onContextMenuItemPress?: DirectEventHandler<OnContextMenuItemPressEvent>;
-  onSubmitEditing?: BubblingEventHandler<OnSubmitEditing>;
+  onInputFocus?: CodegenTypes.DirectEventHandler<TargetedEvent>;
+  onInputBlur?: CodegenTypes.DirectEventHandler<TargetedEvent>;
+  onChangeText?: CodegenTypes.DirectEventHandler<OnChangeTextEvent>;
+  onChangeHtml?: CodegenTypes.DirectEventHandler<OnChangeHtmlEvent>;
+  onChangeState?: CodegenTypes.DirectEventHandler<OnChangeStateEvent>;
+  onLinkDetected?: CodegenTypes.DirectEventHandler<OnLinkDetected>;
+  onMentionDetected?: CodegenTypes.DirectEventHandler<OnMentionDetectedInternal>;
+  onMention?: CodegenTypes.DirectEventHandler<OnMentionEvent>;
+  onChangeSelection?: CodegenTypes.DirectEventHandler<OnChangeSelectionEvent>;
+  onRequestHtmlResult?: CodegenTypes.DirectEventHandler<OnRequestHtmlResultEvent>;
+  onInputKeyPress?: CodegenTypes.DirectEventHandler<OnKeyPressEvent>;
+  onPasteImages?: CodegenTypes.DirectEventHandler<OnPasteImagesEvent>;
+  onContextMenuItemPress?: CodegenTypes.DirectEventHandler<OnContextMenuItemPressEvent>;
+  onSubmitEditing?: CodegenTypes.BubblingEventHandler<OnSubmitEditing>;
 
   // Style related props - used for generating proper setters in component's manager
   // These should not be passed as regular props
   color?: ColorValue;
-  fontSize?: Float;
-  lineHeight?: Float;
+  fontSize?: CodegenTypes.Float;
+  lineHeight?: CodegenTypes.Float;
   fontFamily?: string;
   fontWeight?: string;
   fontStyle?: string;
@@ -422,8 +420,8 @@ interface NativeCommands {
   setValue: (viewRef: React.ElementRef<ComponentType>, text: string) => void;
   setSelection: (
     viewRef: React.ElementRef<ComponentType>,
-    start: Int32,
-    end: Int32
+    start: CodegenTypes.Int32,
+    end: CodegenTypes.Int32
   ) => void;
 
   // Text formatting commands
@@ -448,21 +446,21 @@ interface NativeCommands {
   ) => void;
   addLink: (
     viewRef: React.ElementRef<ComponentType>,
-    start: Int32,
-    end: Int32,
+    start: CodegenTypes.Int32,
+    end: CodegenTypes.Int32,
     text: string,
     url: string
   ) => void;
   removeLink: (
     viewRef: React.ElementRef<ComponentType>,
-    start: Int32,
-    end: Int32
+    start: CodegenTypes.Int32,
+    end: CodegenTypes.Int32
   ) => void;
   addImage: (
     viewRef: React.ElementRef<ComponentType>,
     uri: string,
-    width: Float,
-    height: Float
+    width: CodegenTypes.Float,
+    height: CodegenTypes.Float
   ) => void;
   startMention: (
     viewRef: React.ElementRef<ComponentType>,
@@ -476,7 +474,7 @@ interface NativeCommands {
   ) => void;
   requestHTML: (
     viewRef: React.ElementRef<ComponentType>,
-    requestId: Int32
+    requestId: CodegenTypes.Int32
   ) => void;
   setTextAlignment: (
     viewRef: React.ElementRef<ComponentType>,