Migrate from react-native-reanimated to react-native-worklets with backward compatibility (#731)

Co-authored-by: war-in <[email protected]>

Author: war-in

RNLiveMarkdown.podspec

@@ -5,8 +5,18 @@ 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_from_pods_root = Pathname.new(react_native_reanimated_node_modules_dir).relative_path_from(pods_root).to_s
+
+worklets_installed = system(%Q[
+  cd "#{Pod::Config.instance.installation_root}" &&
+  node -e "require.resolve('react-native-worklets/package.json')" > /dev/null 2>&1
+])
+react_native_worklets_path = `cd "#{Pod::Config.instance.installation_root.to_s}" && node --print "require.resolve('react-native-worklets/package.json')"`
+worklets_installed = react_native_worklets_path != ""
+worklets_package_name = worklets_installed ? 'react-native-worklets' : 'react-native-reanimated'
+
+react_native_worklets_or_reanimated_node_modules_dir = ENV['REACT_NATIVE_WORKLETS_NODE_MODULES_DIR'] || ENV['REACT_NATIVE_REANIMATED_NODE_MODULES_DIR'] ||
+ File.dirname(`cd "#{Pod::Config.instance.installation_root.to_s}" && node --print "require.resolve('#{worklets_package_name}/package.json')"`)
+react_native_worklets_or_reanimated_node_modules_dir_from_pods_root = Pathname.new(react_native_worklets_or_reanimated_node_modules_dir).relative_path_from(pods_root).to_s
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
@@ -24,15 +34,23 @@ Pod::Spec.new do |s|
 
   s.source_files = "apple/**/*.{h,m,mm}", "cpp/**/*.{h,cpp}"
 
-  s.dependency "RNReanimated/worklets"
+  if worklets_installed
+    s.dependency "RNWorklets"
+  else
+    s.dependency "RNReanimated/worklets"
+  end
 
-  s.xcconfig = {
+  xcconfig = {
     "OTHER_CFLAGS" => "$(inherited) -DREACT_NATIVE_MINOR_VERSION=#{react_native_minor_version}",
     "HEADER_SEARCH_PATHS" => [
-      "\"$(PODS_ROOT)/#{react_native_reanimated_node_modules_dir_from_pods_root}/apple\"",
-      "\"$(PODS_ROOT)/#{react_native_reanimated_node_modules_dir_from_pods_root}/Common/cpp\"",
+      "\"$(PODS_ROOT)/#{react_native_worklets_or_reanimated_node_modules_dir_from_pods_root}/apple\"",
+      "\"$(PODS_ROOT)/#{react_native_worklets_or_reanimated_node_modules_dir_from_pods_root}/Common/cpp\"",
     ].join(' '),
   }
+  if worklets_installed
+    xcconfig["OTHER_CFLAGS"] << " -DWORKLETS_INSTALLED=1"
+  end
+  s.xcconfig = xcconfig
 
   s.pod_target_xcconfig = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/cpp\"" }
 

android/build.gradle

@@ -67,6 +67,7 @@ def getReactNativeMinorVersion() {
 }
 
 def REACT_NATIVE_MINOR_VERSION = getReactNativeMinorVersion()
+def workletsInstalled = rootProject.findProject(':react-native-worklets') != null
 
 android {
   if (supportsNamespace()) {
@@ -94,7 +95,9 @@ android {
         arguments "-DANDROID_STL=c++_shared",
           "-DANDROID_TOOLCHAIN=clang",
           "-DREACT_NATIVE_MINOR_VERSION=${REACT_NATIVE_MINOR_VERSION}",
-          "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON"
+          "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON",
+          "-DREACT_NATIVE_ROOT_DIR=${resolveReactNativeDirectory().path}",
+          "-DWORKLETS_INSTALLED=${workletsInstalled}"
         abiFilters (*reactNativeArchitectures())
       }
     }
@@ -177,14 +180,24 @@ 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")
+
+  if (workletsInstalled) {
+    implementation project(":react-native-worklets")
+  } else {
+    implementation project(":react-native-reanimated")
+  }
 }
 
 // This fixes linking errors due to undefined symbols from libworklets.so.
 // During Gradle Sync, Android Gradle Plugin runs Prefab and treats worklets
 // 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")
+  if (workletsInstalled) {
+    prepareKotlinBuildScriptModel.dependsOn(":react-native-worklets:prefabDebugPackage")
+    prepareKotlinBuildScriptModel.dependsOn(":react-native-worklets:prefabReleasePackage")
+  } else {
+    prepareKotlinBuildScriptModel.dependsOn(":react-native-reanimated:prefabDebugPackage")
+    prepareKotlinBuildScriptModel.dependsOn(":react-native-reanimated:prefabReleasePackage")
+  }
 }

android/src/main/cpp/CMakeLists.txt

@@ -4,6 +4,11 @@ cmake_minimum_required(VERSION 3.13)
 
 set(CMAKE_VERBOSE_MAKEFILE on)
 
+if(WORKLETS_INSTALLED)
+  include("${REACT_NATIVE_ROOT_DIR}/ReactAndroid/cmake-utils/folly-flags.cmake")
+  add_compile_options(${folly_FLAGS})
+endif()
+
 add_compile_options(-fvisibility=hidden -fexceptions -frtti)
 
 string(APPEND CMAKE_CXX_FLAGS " -DREACT_NATIVE_MINOR_VERSION=${REACT_NATIVE_MINOR_VERSION}")
@@ -15,16 +20,32 @@ 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})
+if(WORKLETS_INSTALLED)
+  target_include_directories(${CMAKE_PROJECT_NAME} PRIVATE ${CMAKE_CURRENT_SOURCE_DIR} ${CPP_DIR} "${REACT_NATIVE_ROOT_DIR}/ReactCommon/jsiexecutor")
+else()
+  target_include_directories(${CMAKE_PROJECT_NAME} PRIVATE ${CMAKE_CURRENT_SOURCE_DIR} ${CPP_DIR})
+endif()
 
 find_package(fbjni REQUIRED CONFIG)
 find_package(ReactAndroid REQUIRED CONFIG)
-find_package(react-native-reanimated REQUIRED CONFIG)
+
+if(WORKLETS_INSTALLED)
+  find_package(react-native-worklets REQUIRED CONFIG)
+  add_definitions(-DWORKLETS_INSTALLED)
+else()
+  find_package(react-native-reanimated REQUIRED CONFIG)
+endif()
+
 
 target_link_libraries(
         ${CMAKE_PROJECT_NAME}
         fbjni::fbjni
         ReactAndroid::jsi
         ReactAndroid::reactnative
-        react-native-reanimated::worklets
 )
+
+if(WORKLETS_INSTALLED)
+  target_link_libraries(${CMAKE_PROJECT_NAME} react-native-worklets::worklets)
+else()
+  target_link_libraries(${CMAKE_PROJECT_NAME} react-native-reanimated::worklets)
+endif()

apple/MarkdownParser.mm

@@ -19,7 +19,11 @@ @implementation MarkdownParser {
     const auto &markdownRuntime = expensify::livemarkdown::getMarkdownRuntime();
     jsi::Runtime &rt = markdownRuntime->getJSIRuntime();
 
+#ifdef WORKLETS_INSTALLED
+    std::shared_ptr<SerializableWorklet> markdownWorklet;
+#else
     std::shared_ptr<ShareableWorklet> markdownWorklet;
+#endif
     try {
       markdownWorklet = expensify::livemarkdown::getMarkdownWorklet([parserId intValue]);
     } catch (const std::out_of_range &error) {

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);
 }

cpp/MarkdownGlobal.h

@@ -10,15 +10,19 @@ using namespace worklets;
 namespace expensify {
 namespace livemarkdown {
 
+#ifndef WORKLETS_INSTALLED
+using SerializableWorklet = ShareableWorklet; // ShareableWorklet was renamed to SerializableWorklet
+#endif
+
 void setMarkdownRuntime(const std::shared_ptr<WorkletRuntime> &markdownWorkletRuntime);
 
 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

cpp/RuntimeDecorator.cpp

@@ -23,7 +23,12 @@ 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]));
+#ifdef WORKLETS_INSTALLED
+        auto worklet = extractSerializableOrThrow<SerializableWorklet>(rt, args[0]);
+#else
+        auto worklet = extractShareableOrThrow<SerializableWorklet>(rt, args[0]);
+#endif
+        auto parserId = registerMarkdownWorklet(worklet);
         return jsi::Value(parserId);
       }));
 

example/babel.config.js

@@ -1,6 +1,14 @@
 const path = require('path');
 const pak = require('../package.json');
 
+let workletsPlugin = null;
+try {
+  require.resolve('react-native-worklets');
+  workletsPlugin = 'react-native-worklets/plugin';
+} catch (e) {
+  workletsPlugin = 'react-native-reanimated/plugin';
+}
+
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
   plugins: [
@@ -13,6 +21,6 @@ module.exports = {
         },
       },
     ],
-    'react-native-reanimated/plugin',
+    workletsPlugin,
   ],
 };

example/ios/Podfile.lock

@@ -2253,7 +2253,7 @@ PODS:
     - React-perflogger (= 0.81.4)
     - React-utils (= 0.81.4)
     - SocketRocket
-  - RNLiveMarkdown (0.1.303):
+  - RNLiveMarkdown (0.1.305):
     - boost
     - DoubleConversion
     - fast_float
@@ -2279,10 +2279,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/worklets
+    - RNWorklets
     - SocketRocket
     - Yoga
-  - RNReanimated (3.19.0):
+  - RNReanimated (4.1.3):
     - boost
     - DoubleConversion
     - fast_float
@@ -2309,11 +2309,11 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 3.19.0)
-    - RNReanimated/worklets (= 3.19.0)
+    - RNReanimated/reanimated (= 4.1.3)
+    - RNWorklets
     - SocketRocket
     - Yoga
-  - RNReanimated/reanimated (3.19.0):
+  - RNReanimated/reanimated (4.1.3):
     - boost
     - DoubleConversion
     - fast_float
@@ -2340,10 +2340,11 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated/apple (= 3.19.0)
+    - RNReanimated/reanimated/apple (= 4.1.3)
+    - RNWorklets
     - SocketRocket
     - Yoga
-  - RNReanimated/reanimated/apple (3.19.0):
+  - RNReanimated/reanimated/apple (4.1.3):
     - boost
     - DoubleConversion
     - fast_float
@@ -2370,9 +2371,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - RNWorklets
     - SocketRocket
     - Yoga
-  - RNReanimated/worklets (3.19.0):
+  - RNWorklets (0.6.1):
     - boost
     - DoubleConversion
     - fast_float
@@ -2399,10 +2401,40 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/worklets/apple (= 3.19.0)
+    - RNWorklets/worklets (= 0.6.1)
     - SocketRocket
     - Yoga
-  - RNReanimated/worklets/apple (3.19.0):
+  - RNWorklets/worklets (0.6.1):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNWorklets/worklets/apple (= 0.6.1)
+    - SocketRocket
+    - Yoga
+  - RNWorklets/worklets/apple (0.6.1):
     - boost
     - DoubleConversion
     - fast_float
@@ -2508,6 +2540,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../../node_modules/react-native/ReactCommon`)
   - RNLiveMarkdown (from `../..`)
   - RNReanimated (from `../../node_modules/react-native-reanimated`)
+  - RNWorklets (from `../../node_modules/react-native-worklets`)
   - SocketRocket (~> 0.7.1)
   - Yoga (from `../../node_modules/react-native/ReactCommon/yoga`)
 
@@ -2661,6 +2694,8 @@ EXTERNAL SOURCES:
     :path: "../.."
   RNReanimated:
     :path: "../../node_modules/react-native-reanimated"
+  RNWorklets:
+    :path: "../../node_modules/react-native-worklets"
   Yoga:
     :path: "../../node_modules/react-native/ReactCommon/yoga"
 
@@ -2735,10 +2770,11 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: 433ddfb4536948630aadd5bd925aff8a632d2fe3
   ReactCodegen: adf5027f30e34c68b5a09f0b68acb3e5ef9e1a5d
   ReactCommon: 394c6b92765cf6d211c2c3f7f6bc601dffb316a6
-  RNLiveMarkdown: 0a98549fd315dc5fdc8b7ed937fdd6414d47565f
-  RNReanimated: 08fa7bb56d5f6d47c32245cf9cf53efb19befa0c
+  RNLiveMarkdown: 30f59122c1f27ea2ec2ad43935b1be214e10c697
+  RNReanimated: e04fc279d4e0d936a27f50c9a170cfa269c3434d
+  RNWorklets: 879b69a98caa893353b964b6fece154a819145af
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Yoga: 922d794dce2af9c437f864bf4093abfa7a131adb
+  Yoga: a3ed390a19db0459bd6839823a6ac6d9c6db198d
 
 PODFILE CHECKSUM: 3f53660915b3f926239de7f89ab29581306a2614
 

example/package.json

@@ -12,7 +12,8 @@
     "expensify-common": "2.0.148",
     "react": "19.1.0",
     "react-native": "0.81.4",
-    "react-native-reanimated": "3.19.0"
+    "react-native-reanimated": "4.1.3",
+    "react-native-worklets": "0.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",