Support React Native 0.74

.github/workflows/build-android.yml

@@ -46,10 +46,6 @@ jobs:
       - name: Install node_modules
         run: yarn install --immutable
 
-      - name: Apply patches
-        working-directory: example
-        run: yarn patch-package
-
       - name: Build app
         working-directory: example/android
         run: ./gradlew assembleDebug --build-cache -PreactNativeArchitectures=arm64-v8a -PnewArchEnabled=${{ matrix.react-native-architecture == 'Fabric' && 'true' || 'false' }}

.yarn/patches/react-native-npm-0.74.5-3cfd406787.patch

@@ -0,0 +1,49 @@
+diff --git a/ReactAndroid/build.gradle.kts b/ReactAndroid/build.gradle.kts
+index 4909aeddba5dd256882dcf1cef170b6e948935ca..b1cfd32e07fb7c1ec182aab2a33414f670ccd229 100644
+--- a/ReactAndroid/build.gradle.kts
++++ b/ReactAndroid/build.gradle.kts
+@@ -155,6 +155,8 @@ val preparePrefab by
+                   "glog", Pair(File(buildDir, "third-party-ndk/glog/exported/").absolutePath, "")),
+               PrefabPreprocessingEntry(
+                   "fabricjni", Pair("src/main/jni/react/fabric", "react/fabric/")),
++              PrefabPreprocessingEntry(
++                  "mapbufferjni", Pair("src/main/jni/react/mapbuffer", "react/mapbuffer/")),
+               PrefabPreprocessingEntry(
+                   "react_render_mapbuffer",
+                   Pair("../ReactCommon/react/renderer/mapbuffer/", "react/renderer/mapbuffer/")),
+@@ -574,6 +576,7 @@ android {
+             "jsi",
+             "glog",
+             "fabricjni",
++            "mapbufferjni",
+             "react_render_mapbuffer",
+             "react_render_textlayoutmanager",
+             "yoga",
+@@ -703,6 +706,7 @@ android {
+     create("jsi") { headers = File(prefabHeadersDir, "jsi").absolutePath }
+     create("glog") { headers = File(prefabHeadersDir, "glog").absolutePath }
+     create("fabricjni") { headers = File(prefabHeadersDir, "fabricjni").absolutePath }
++    create("mapbufferjni") { headers = File(prefabHeadersDir, "mapbufferjni").absolutePath }
+     create("react_render_mapbuffer") {
+       headers = File(prefabHeadersDir, "react_render_mapbuffer").absolutePath
+     }
+diff --git a/ReactAndroid/cmake-utils/ReactNative-application.cmake b/ReactAndroid/cmake-utils/ReactNative-application.cmake
+index e2efc266ca0f68dd2226ec027491f193e6153ec9..3d4e1517a757dec5298a3af3471b9a4cffdbd04e 100644
+--- a/ReactAndroid/cmake-utils/ReactNative-application.cmake
++++ b/ReactAndroid/cmake-utils/ReactNative-application.cmake
+@@ -79,6 +79,7 @@ add_library(rrc_textinput ALIAS ReactAndroid::rrc_textinput)
+ add_library(jsi ALIAS ReactAndroid::jsi)
+ add_library(glog ALIAS ReactAndroid::glog)
+ add_library(fabricjni ALIAS ReactAndroid::fabricjni)
++add_library(mapbufferjni ALIAS ReactAndroid::mapbufferjni)
+ add_library(react_render_mapbuffer ALIAS ReactAndroid::react_render_mapbuffer)
+ add_library(react_render_textlayoutmanager ALIAS ReactAndroid::react_render_textlayoutmanager)
+ add_library(yoga ALIAS ReactAndroid::yoga)
+@@ -93,6 +94,7 @@ add_library(fbjni ALIAS fbjni::fbjni)
+
+ target_link_libraries(${CMAKE_PROJECT_NAME}
+         fabricjni                           # prefab ready
++        mapbufferjni                        # prefab ready
+         fbjni                               # via 3rd party prefab
+         folly_runtime                       # prefab ready
+         glog                                # prefab ready

.yarnrc.yml

@@ -10,4 +10,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
     spec: "@yarnpkg/plugin-version"
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.4.cjs

README.md

@@ -132,7 +132,7 @@ Currently, `react-native-live-markdown` supports only [ExpensiMark](https://gith
 
 ## Compatibility
 
-`react-native-live-markdown` requires React Native 0.71 or newer.
+`react-native-live-markdown` requires React Native 0.74 or newer.
 
 ## License
 

WebExample/package.json

@@ -12,19 +12,19 @@
   "dependencies": {
     "@expo/webpack-config": "~19.0.1",
     "babel-plugin-module-resolver": "^5.0.0",
-    "expo": "~50.0.7",
-    "expo-status-bar": "~1.11.1",
+    "expo": "^51.0.0",
+    "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.4",
-    "react-native-web": "~0.19.6"
+    "react-native": "0.74.5",
+    "react-native-web": "~0.19.12"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.24.0",
     "@playwright/test": "^1.43.1",
     "@types/node": "^20.12.7",
-    "@types/react": "~18.2.45",
-    "typescript": "^5.1.3"
+    "@types/react": "~18.2.79",
+    "typescript": "~5.3.3"
   },
   "private": true
 }

android/src/main/java/com/expensify/livemarkdown/CustomMountingManager.java

@@ -21,8 +21,8 @@
 import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.ViewManagerRegistry;
 import com.facebook.react.views.text.TextAttributeProps;
-import com.facebook.react.views.text.TextInlineViewPlaceholderSpan;
 import com.facebook.react.views.text.TextLayoutManagerMapBuffer;
+import com.facebook.react.views.text.internal.span.TextInlineViewPlaceholderSpan;
 import com.facebook.yoga.YogaMeasureMode;
 import com.facebook.yoga.YogaMeasureOutput;
 
@@ -44,7 +44,7 @@ public CustomMountingManager(
 
     AssetManager assetManager = context.getAssets();
     MarkdownUtils.maybeInitializeRuntime(assetManager);
-    
+
     this.markdownUtils = new MarkdownUtils(assetManager);
     this.markdownUtils.setMarkdownStyle(new MarkdownStyle(decoratorProps, context));
   }

android/src/main/java/com/expensify/livemarkdown/LiveMarkdownModule.java

@@ -1,7 +1,6 @@
 package com.expensify.livemarkdown;
 
 import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.UIManager;
 import com.facebook.react.fabric.FabricUIManager;
 import com.facebook.react.uimanager.UIManagerHelper;
 import com.facebook.react.uimanager.common.UIManagerType;

android/src/main/java/com/expensify/livemarkdown/MarkdownUtils.java

@@ -1,17 +1,12 @@
 package com.expensify.livemarkdown;
 
-import static com.facebook.infer.annotation.ThreadConfined.UI;
-
 import android.content.res.AssetManager;
 import android.text.SpannableStringBuilder;
 import android.text.Spanned;
 
 import androidx.annotation.NonNull;
 
-import com.facebook.infer.annotation.Assertions;
-import com.facebook.infer.annotation.ThreadConfined;
-import com.facebook.react.bridge.UiThreadUtil;
-import com.facebook.react.views.text.CustomLineHeightSpan;
+import com.facebook.react.views.text.internal.span.CustomLineHeightSpan;
 import com.facebook.soloader.SoLoader;
 
 import org.json.JSONArray;

android/src/main/new_arch/CMakeLists.txt

@@ -19,7 +19,7 @@ set(RN_DIR ${LIB_ANDROID_DIR}/../example/node_modules/react-native)
 
 add_library(
   ${LIB_TARGET_NAME}
-  SHARED 
+  SHARED
   ${LIB_MODULE_SRCS}
   ${LIB_CUSTOM_SRCS}
   ${LIB_CODEGEN_SRCS}
@@ -42,6 +42,8 @@ target_link_libraries(
   ReactAndroid::rrc_textinput
   ReactAndroid::react_render_textlayoutmanager
   ReactAndroid::react_render_imagemanager
+  ReactAndroid::reactnativejni
+  ReactAndroid::mapbufferjni
   fabricjni
   fbjni
   folly_runtime
@@ -79,4 +81,4 @@ target_include_directories(
  ${CMAKE_PROJECT_NAME}
  PUBLIC
  ${CMAKE_CURRENT_SOURCE_DIR}
-)
+)

example/.gitignore

@@ -20,7 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-ios/.xcode.env.local
+**/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -56,11 +56,19 @@ yarn-error.log
 *.jsbundle
 
 # Ruby / CocoaPods
-/ios/Pods/
+**/Pods/
 /vendor/bundle/
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
 
 # testing
 /coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

example/android/app/build.gradle

@@ -107,7 +107,6 @@ android {
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
-    implementation("com.facebook.react:flipper-integration")
 
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")

example/android/app/src/main/java/com/expensify/livemarkdownexample/MainApplication.kt

@@ -9,7 +9,6 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.react.flipper.ReactNativeFlipper
 import com.facebook.soloader.SoLoader
 
 class MainApplication : Application(), ReactApplication {
@@ -31,7 +30,7 @@ class MainApplication : Application(), ReactApplication {
       }
 
   override val reactHost: ReactHost
-    get() = getDefaultReactHost(this.applicationContext, reactNativeHost)
+    get() = getDefaultReactHost(applicationContext, reactNativeHost)
 
   override fun onCreate() {
     super.onCreate()
@@ -40,6 +39,5 @@ class MainApplication : Application(), ReactApplication {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       load()
     }
-    ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
   }
 }

example/android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -17,7 +17,8 @@
        android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
        android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
        android:insetTop="@dimen/abc_edit_text_inset_top_material"
-       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
 
     <selector>
         <!--

example/android/build.gradle

@@ -1,11 +1,11 @@
 buildscript {
     ext {
         buildToolsVersion = "34.0.0"
-        minSdkVersion = 21
+        minSdkVersion = 23
         compileSdkVersion = 34
         targetSdkVersion = 34
-        ndkVersion = "25.1.8937393"
-        kotlinVersion = "1.8.0"
+        ndkVersion = "26.1.10909125"
+        kotlinVersion = "1.9.22"
     }
     repositories {
         google()

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.3-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME