Prepare live markdown for Reanimated v4 🚀

[blazejkustra]

Here is the patch that I used locally, hope it helps @war-in!

diff --git a/node_modules/@expensify/react-native-live-markdown/RNLiveMarkdown.podspec b/node_modules/@expensify/react-native-live-markdown/RNLiveMarkdown.podspec
index 21de59d..da055d6 100644
--- a/node_modules/@expensify/react-native-live-markdown/RNLiveMarkdown.podspec
+++ b/node_modules/@expensify/react-native-live-markdown/RNLiveMarkdown.podspec
@@ -5,7 +5,7 @@ react_native_json = JSON.parse(File.read(File.join(react_native_node_modules_dir
 react_native_minor_version = react_native_json['version'].split('.')[1].to_i
 
 pods_root = Pod::Config.instance.project_pods_root
-react_native_reanimated_node_modules_dir = ENV['REACT_NATIVE_REANIMATED_NODE_MODULES_DIR'] || File.dirname(`cd "#{Pod::Config.instance.installation_root.to_s}" && node --print "require.resolve('react-native-reanimated/package.json')"`)
+react_native_reanimated_node_modules_dir = ENV['REACT_NATIVE_REANIMATED_NODE_MODULES_DIR'] || File.dirname(`cd "#{Pod::Config.instance.installation_root.to_s}" && node --print "require.resolve('react-native-worklets/package.json')"`)
 react_native_reanimated_node_modules_dir_from_pods_root = Pathname.new(react_native_reanimated_node_modules_dir).relative_path_from(pods_root).to_s
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
@@ -24,7 +24,7 @@ Pod::Spec.new do |s|
 
   s.source_files = "apple/**/*.{h,m,mm}", "cpp/**/*.{h,cpp}"
 
-  s.dependency "RNReanimated/worklets"
+  s.dependency "RNWorklets"
 
   s.xcconfig = {
     "OTHER_CFLAGS" => "$(inherited) -DREACT_NATIVE_MINOR_VERSION=#{react_native_minor_version}",
diff --git a/node_modules/@expensify/react-native-live-markdown/android/build.gradle b/node_modules/@expensify/react-native-live-markdown/android/build.gradle
index 001a23c..232263c 100644
--- a/node_modules/@expensify/react-native-live-markdown/android/build.gradle
+++ b/node_modules/@expensify/react-native-live-markdown/android/build.gradle
@@ -1,3 +1,5 @@
+import org.apache.tools.ant.taskdefs.condition.Os
+
 buildscript {
   repositories {
     google()
@@ -68,6 +70,15 @@ def getReactNativeMinorVersion() {
 
 def REACT_NATIVE_MINOR_VERSION = getReactNativeMinorVersion()
 
+def toPlatformFileString(String path) {
+    if (Os.isFamily(Os.FAMILY_WINDOWS)) {
+        path = path.replace(File.separatorChar, '/' as char)
+    }
+    return path
+}
+
+def reactNativeRootDir = resolveReactNativeDirectory()
+
 android {
   if (supportsNamespace()) {
     namespace "com.expensify.livemarkdown"
@@ -94,6 +105,7 @@ android {
         arguments "-DANDROID_STL=c++_shared",
           "-DANDROID_TOOLCHAIN=clang",
           "-DREACT_NATIVE_MINOR_VERSION=${REACT_NATIVE_MINOR_VERSION}",
+          "-DREACT_NATIVE_DIR=${toPlatformFileString(reactNativeRootDir.path)}",
           "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON"
         abiFilters (*reactNativeArchitectures())
       }
@@ -175,7 +187,7 @@ repositories {
 dependencies {
   implementation "com.facebook.react:react-android" // version substituted by RNGP
   implementation "com.facebook.react:hermes-android" // version substituted by RNGP
-  implementation project(":react-native-reanimated")
+  implementation project(":react-native-worklets")
 }
 
 // This fixes linking errors due to undefined symbols from libworklets.so.
@@ -183,6 +195,6 @@ dependencies {
 // like a header-only library. During build, config files are not regenerated
 // because the cache key does not change and AGP thinks that they are up-to-date.
 afterEvaluate {
-  prepareKotlinBuildScriptModel.dependsOn(":react-native-reanimated:prefabDebugPackage")
-  prepareKotlinBuildScriptModel.dependsOn(":react-native-reanimated:prefabReleasePackage")
+  prepareKotlinBuildScriptModel.dependsOn(":react-native-worklets:prefabDebugPackage")
+  prepareKotlinBuildScriptModel.dependsOn(":react-native-worklets:prefabReleasePackage")
 }
diff --git a/node_modules/@expensify/react-native-live-markdown/android/src/main/cpp/CMakeLists.txt b/node_modules/@expensify/react-native-live-markdown/android/src/main/cpp/CMakeLists.txt
index e5ba0ea..c0456eb 100644
--- a/node_modules/@expensify/react-native-live-markdown/android/src/main/cpp/CMakeLists.txt
+++ b/node_modules/@expensify/react-native-live-markdown/android/src/main/cpp/CMakeLists.txt
@@ -4,6 +4,9 @@ cmake_minimum_required(VERSION 3.13)
 
 set(CMAKE_VERBOSE_MAKEFILE on)
 
+include("${REACT_NATIVE_DIR}/ReactAndroid/cmake-utils/folly-flags.cmake")
+add_compile_options(${folly_FLAGS})
+
 add_compile_options(-fvisibility=hidden -fexceptions -frtti)
 
 string(APPEND CMAKE_CXX_FLAGS " -DREACT_NATIVE_MINOR_VERSION=${REACT_NATIVE_MINOR_VERSION}")
@@ -15,16 +18,16 @@ file(GLOB CPP_SRC CONFIGURE_DEPENDS "${CPP_DIR}/*.cpp")
 
 add_library(${CMAKE_PROJECT_NAME} SHARED ${ANDROID_SRC} ${CPP_SRC})
 
-target_include_directories(${CMAKE_PROJECT_NAME} PRIVATE ${CMAKE_CURRENT_SOURCE_DIR} ${CPP_DIR})
+target_include_directories(${CMAKE_PROJECT_NAME} PRIVATE ${CMAKE_CURRENT_SOURCE_DIR} ${CPP_DIR} "${REACT_NATIVE_DIR}/ReactCommon/jsiexecutor")
 
 find_package(fbjni REQUIRED CONFIG)
 find_package(ReactAndroid REQUIRED CONFIG)
-find_package(react-native-reanimated REQUIRED CONFIG)
+find_package(react-native-worklets REQUIRED CONFIG)
 
 target_link_libraries(
         ${CMAKE_PROJECT_NAME}
         fbjni::fbjni
         ReactAndroid::jsi
         ReactAndroid::reactnative
-        react-native-reanimated::worklets
+        react-native-worklets::worklets
 )
diff --git a/node_modules/@expensify/react-native-live-markdown/apple/MarkdownParser.mm b/node_modules/@expensify/react-native-live-markdown/apple/MarkdownParser.mm
index 9d585e3..fe46961 100644
--- a/node_modules/@expensify/react-native-live-markdown/apple/MarkdownParser.mm
+++ b/node_modules/@expensify/react-native-live-markdown/apple/MarkdownParser.mm
@@ -19,7 +19,7 @@ @implementation MarkdownParser {
     const auto &markdownRuntime = expensify::livemarkdown::getMarkdownRuntime();
     jsi::Runtime &rt = markdownRuntime->getJSIRuntime();
 
-    std::shared_ptr<ShareableWorklet> markdownWorklet;
+    std::shared_ptr<SerializableWorklet> markdownWorklet;
     try {
       markdownWorklet = expensify::livemarkdown::getMarkdownWorklet([parserId intValue]);
     } catch (const std::out_of_range &error) {
diff --git a/node_modules/@expensify/react-native-live-markdown/cpp/MarkdownGlobal.cpp b/node_modules/@expensify/react-native-live-markdown/cpp/MarkdownGlobal.cpp
index 56fd6de..67f93eb 100644
--- a/node_modules/@expensify/react-native-live-markdown/cpp/MarkdownGlobal.cpp
+++ b/node_modules/@expensify/react-native-live-markdown/cpp/MarkdownGlobal.cpp
@@ -17,11 +17,11 @@ std::shared_ptr<WorkletRuntime> getMarkdownRuntime() {
   return globalMarkdownWorkletRuntime;
 }
 
-std::unordered_map<int, std::shared_ptr<ShareableWorklet>> globalMarkdownShareableWorklets;
+std::unordered_map<int, std::shared_ptr<SerializableWorklet>> globalMarkdownShareableWorklets;
 std::mutex globalMarkdownShareableWorkletsMutex;
 int nextParserId = 1;
 
-const int registerMarkdownWorklet(const std::shared_ptr<ShareableWorklet> &markdownWorklet) {
+const int registerMarkdownWorklet(const std::shared_ptr<SerializableWorklet> &markdownWorklet) {
   assert(markdownWorklet != nullptr);
   auto parserId = nextParserId++;
   std::unique_lock<std::mutex> lock(globalMarkdownShareableWorkletsMutex);
@@ -34,7 +34,7 @@ void unregisterMarkdownWorklet(const int parserId) {
   globalMarkdownShareableWorklets.erase(parserId);
 }
 
-std::shared_ptr<ShareableWorklet> getMarkdownWorklet(const int parserId) {
+std::shared_ptr<SerializableWorklet> getMarkdownWorklet(const int parserId) {
   std::unique_lock<std::mutex> lock(globalMarkdownShareableWorkletsMutex);
   return globalMarkdownShareableWorklets.at(parserId);
 }
diff --git a/node_modules/@expensify/react-native-live-markdown/cpp/MarkdownGlobal.h b/node_modules/@expensify/react-native-live-markdown/cpp/MarkdownGlobal.h
index 1edfb45..e181726 100644
--- a/node_modules/@expensify/react-native-live-markdown/cpp/MarkdownGlobal.h
+++ b/node_modules/@expensify/react-native-live-markdown/cpp/MarkdownGlobal.h
@@ -14,11 +14,11 @@ void setMarkdownRuntime(const std::shared_ptr<WorkletRuntime> &markdownWorkletRu
 
 std::shared_ptr<WorkletRuntime> getMarkdownRuntime();
 
-const int registerMarkdownWorklet(const std::shared_ptr<ShareableWorklet> &markdownWorklet);
+const int registerMarkdownWorklet(const std::shared_ptr<SerializableWorklet> &markdownWorklet);
 
 void unregisterMarkdownWorklet(const int parserId);
 
-std::shared_ptr<ShareableWorklet> getMarkdownWorklet(const int parserId);
+std::shared_ptr<SerializableWorklet> getMarkdownWorklet(const int parserId);
 
 } // namespace livemarkdown
 } // namespace expensify
diff --git a/node_modules/@expensify/react-native-live-markdown/cpp/RuntimeDecorator.cpp b/node_modules/@expensify/react-native-live-markdown/cpp/RuntimeDecorator.cpp
index 5332e30..f1f25a5 100644
--- a/node_modules/@expensify/react-native-live-markdown/cpp/RuntimeDecorator.cpp
+++ b/node_modules/@expensify/react-native-live-markdown/cpp/RuntimeDecorator.cpp
@@ -23,7 +23,7 @@ void injectJSIBindings(jsi::Runtime &rt) {
       jsi::PropNameID::forAscii(rt, "jsi_registerMarkdownWorklet"),
       1,
       [](jsi::Runtime &rt, const jsi::Value &thisValue, const jsi::Value *args, size_t count) -> jsi::Value {
-        auto parserId = registerMarkdownWorklet(extractShareableOrThrow<ShareableWorklet>(rt, args[0]));
+        auto parserId = registerMarkdownWorklet(extractSerializableOrThrow<SerializableWorklet>(rt, args[0]));
         return jsi::Value(parserId);
       }));
 
diff --git a/node_modules/@expensify/react-native-live-markdown/lib/typescript/src/MarkdownTextInput.d.ts b/node_modules/@expensify/react-native-live-markdown/lib/typescript/src/MarkdownTextInput.d.ts
index e6ad088..90f2487 100644
--- a/node_modules/@expensify/react-native-live-markdown/lib/typescript/src/MarkdownTextInput.d.ts
+++ b/node_modules/@expensify/react-native-live-markdown/lib/typescript/src/MarkdownTextInput.d.ts
@@ -2,7 +2,7 @@ import { TextInput } from 'react-native';
 import React from 'react';
 import type { TextInputProps } from 'react-native';
 import type { WorkletRuntime } from 'react-native-reanimated';
-import type { ShareableRef, WorkletFunction } from 'react-native-reanimated/lib/typescript/commonTypes';
+import type { ShareableRef, WorkletFunction } from 'react-native-worklets';
 import type { PartialMarkdownStyle } from './styleUtils';
 import type { InlineImagesInputProps, MarkdownRange } from './commonTypes';
 declare global {
diff --git a/node_modules/@expensify/react-native-live-markdown/src/MarkdownTextInput.tsx b/node_modules/@expensify/react-native-live-markdown/src/MarkdownTextInput.tsx
index 82ee895..55c0e90 100644
--- a/node_modules/@expensify/react-native-live-markdown/src/MarkdownTextInput.tsx
+++ b/node_modules/@expensify/react-native-live-markdown/src/MarkdownTextInput.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type {TextInputProps} from 'react-native';
 import {createWorkletRuntime, makeShareableCloneRecursive} from 'react-native-reanimated';
 import type {WorkletRuntime} from 'react-native-reanimated';
-import type {ShareableRef, WorkletFunction} from 'react-native-reanimated/lib/typescript/commonTypes';
+import type {ShareableRef, WorkletFunction} from 'react-native-worklets';
 
 import MarkdownTextInputDecoratorViewNativeComponent from './MarkdownTextInputDecoratorViewNativeComponent';
 import type {MarkdownStyle} from './MarkdownTextInputDecoratorViewNativeComponent';
diff --git a/node_modules/@expensify/react-native-live-markdown/src/parseExpensiMark.ts b/node_modules/@expensify/react-native-live-markdown/src/parseExpensiMark.ts
index 6e14e25..38d92bb 100644
--- a/node_modules/@expensify/react-native-live-markdown/src/parseExpensiMark.ts
+++ b/node_modules/@expensify/react-native-live-markdown/src/parseExpensiMark.ts
@@ -4,7 +4,7 @@ import {Platform} from 'react-native';
 import {ExpensiMark} from 'expensify-common';
 import {unescapeText} from 'expensify-common/dist/utils';
 import {decode} from 'html-entities';
-import type {WorkletFunction} from 'react-native-reanimated/lib/typescript/commonTypes';
+import type {WorkletFunction} from 'react-native-worklets';
 import type {MarkdownType, MarkdownRange} from './commonTypes';
 import {groupRanges, sortRanges, splitRangesOnEmojis} from './rangeUtils';
 

[radvansky-tomas]

So I think thats the reason for

› Compiling @expensify/react-native-live-markdown Pods/RNLiveMarkdown » RuntimeDecorator.cpp

❌  (/Users/tomasradvansky/Documents/RDEV-LIMITED/asynchor/app/node_modules/react-native/ReactCommon/cxxreact/NativeModule.h:13:10)

  11 | #include <vector>
  12 | 
> 13 | #include <folly/dynamic.h>
     |          ^ 'folly/dynamic.h' file not found
  14 | #include <optional>
  15 | 
  16 | namespace facebook::react {

And similar header errors?

Any idea how to install it with expo54 ?

[12138zhen]

Seems like they’re about to wrap it up

[war-in]

We released a new version 0.1.308 with react-native-worklets support - see this PR: #731

Note that react-native-reanimated v4 is still required but we plan to remove that dependency in the near future (once we remove the support for reanimated v3)