Custom Shadow Nodes

apps/fabric-example/ios/Podfile.lock

@@ -1923,6 +1923,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - RNReanimated/reanimated/apple (= 4.0.0-beta.3)
+    - RNReanimated/reanimated/view (= 4.0.0-beta.3)
     - RNWorklets
     - Yoga
   - RNReanimated/reanimated/apple (4.0.0-beta.3):
@@ -1950,6 +1951,31 @@ PODS:
     - ReactCommon/turbomodule/core
     - RNWorklets
     - Yoga
+  - RNReanimated/reanimated/view (4.0.0-beta.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - 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
+    - Yoga
   - RNScreens (4.10.0):
     - DoubleConversion
     - glog
@@ -2458,7 +2484,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: ae521efb1c6c2b183ae0f8479487db03c826184c
   RNFlashList: 5001dd06f0003a497de3e2035653c54cf8b48e96
   RNGestureHandler: ebef699ea17e7c0006c1074e1e423ead60ce0121
-  RNReanimated: 4fd34359bfa957343f541de242237dfb076b2f10
+  RNReanimated: d6c7ec0d1df9b02a0316ef3b45675f112fb65d3c
   RNScreens: 5621e3ad5a329fbd16de683344ac5af4192b40d3
   RNSVG: 794f269526df9ddc1f79b3d1a202b619df0368e3
   RNWorklets: 228763f863587fbcedfdabf24ce8fe864c7d94f1

apps/macos-example/macos/Podfile.lock

@@ -1626,6 +1626,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - RNReanimated/reanimated/apple (= 4.0.0-beta.3)
+    - RNReanimated/reanimated/view (= 4.0.0-beta.3)
     - RNWorklets
     - Yoga
   - RNReanimated/reanimated/apple (4.0.0-beta.3):
@@ -1650,6 +1651,28 @@ PODS:
     - ReactCommon/turbomodule/core
     - RNWorklets
     - Yoga
+  - RNReanimated/reanimated/view (4.0.0-beta.3):
+    - DoubleConversion
+    - glog
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNWorklets
+    - Yoga
   - RNSVG (15.11.2):
     - DoubleConversion
     - glog
@@ -2036,7 +2059,7 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: befba0534e46dee5c3a5a58fe9bcf378c3c616ec
   RNCClipboard: d648682aad40632c1f6e365ce6b66f267b6df034
   RNGestureHandler: c6b441559fe02f0c07fe2720c9103a8532552ce1
-  RNReanimated: fa84dc7d86a85014117828d43b6f6f48d258d51f
+  RNReanimated: 9df9c04acd7738ec819a6e677e3c669c6170d1ca
   RNSVG: a0d6f47aafa401209c2fef7e90fcd44d1f846b9a
   RNWorklets: 94c2f671630f36a081f36d21f41c12fcb5d9ed8e
   SocketRocket: 9ee265c4b5ae2382d18e4ee1d2dd2d7af0ff1ab5

apps/tvos-example/ios/Podfile.lock

@@ -1703,6 +1703,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - RNReanimated/reanimated/apple (= 4.0.0-beta.3)
+    - RNReanimated/reanimated/view (= 4.0.0-beta.3)
     - RNWorklets
     - Yoga
   - RNReanimated/reanimated/apple (4.0.0-beta.3):
@@ -1730,6 +1731,31 @@ PODS:
     - ReactCommon/turbomodule/core
     - RNWorklets
     - Yoga
+  - RNReanimated/reanimated/view (4.0.0-beta.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - 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
+    - Yoga
   - RNWorklets (0.2.0):
     - DoubleConversion
     - glog
@@ -2104,7 +2130,7 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: 2f6c1069f4cbc3b93646ddb8e152e5b1f6f09195
   ReactCodegen: 6be8ab48a4fd1444efc8c3ecf2e14982328cecd8
   ReactCommon: 34fef08811011b6334a3164f446b1fa374a0d18e
-  RNReanimated: c28409b3fd73193fdefe5828f9b9a23f4401984c
+  RNReanimated: 948adbb82642508df959fcff1bf4423e1715b3a3
   RNWorklets: a27918d7331dce6f366d00e8123d99005b3131e0
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 44eb79ba9d06b97656a8ea5e77321aae80608ae3

packages/react-native-reanimated/Common/NativeView/CMakeLists.txt

@@ -0,0 +1,52 @@
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE on)
+
+set(ANDROID_DIR ${CMAKE_CURRENT_SOURCE_DIR}/../../android)
+set(CODEGEN_JNI_DIR ${ANDROID_DIR}/build/generated/source/codegen/jni)
+set(CODEGEN_COMPONENTS_DIR ${CODEGEN_JNI_DIR}/react/renderer/components/rnreanimated)
+file(
+  GLOB CODEGEN_ORIGINAL_SRCS CONFIGURE_DEPENDS
+  ${CODEGEN_JNI_DIR}/*.cpp
+  ${CODEGEN_COMPONENTS_DIR}/*.cpp
+)
+
+set(CODEGEN_OVERWRITTEN_JNI_DIR .)
+set(CODEGEN_OVERWRITTEN_COMPONENTS_DIR ${CODEGEN_OVERWRITTEN_JNI_DIR}/react/renderer/components/rnreanimated)
+file(
+  GLOB CODEGEN_OVERWRITTEN_SRCS CONFIGURE_DEPENDS 
+  ${CODEGEN_OVERWRITTEN_JNI_DIR}/*.cpp
+  ${CODEGEN_OVERWRITTEN_COMPONENTS_DIR}/*.cpp
+)
+
+add_library(
+  react_codegen_rnreanimated
+  OBJECT
+  ${CODEGEN_OVERWRITTEN_SRCS}
+  ${CODEGEN_ORIGINAL_SRCS}
+)
+
+target_include_directories(
+  react_codegen_rnreanimated
+  PUBLIC
+  ${CODEGEN_OVERWRITTEN_JNI_DIR}
+  ${CODEGEN_OVERWRITTEN_COMPONENTS_DIR}
+  ${CODEGEN_JNI_DIR}
+  ${CODEGEN_COMPONENTS_DIR}
+)
+
+target_link_libraries(
+  react_codegen_rnreanimated
+  fbjni
+  jsi
+  reactnative
+)
+
+target_compile_options(
+  react_codegen_rnreanimated
+  PRIVATE
+  -DLOG_TAG=\"ReactNative\"
+  -fexceptions
+  -frtti
+  -std=c++20
+  -Wall
+)

packages/react-native-reanimated/Common/NativeView/react/renderer/components/rnreanimated/ComponentDescriptors.h

@@ -0,0 +1,15 @@
+#pragma once
+
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/components/rnreanimated/ReanimatedShadowNode.h>
+
+namespace facebook::react {
+
+using ReanimatedViewComponentDescriptor =
+    ConcreteComponentDescriptor<ReanimatedShadowNode>;
+
+void rnreanimated_registerComponentDescriptorsFromCodegen(
+    const std::shared_ptr<const ComponentDescriptorProviderRegistry> &registry);
+
+} // namespace facebook::react

packages/react-native-reanimated/Common/NativeView/react/renderer/components/rnreanimated/ReanimatedShadowNode.cpp

@@ -0,0 +1,11 @@
+#include <react/renderer/components/rnreanimated/ReanimatedShadowNode.h>
+
+namespace facebook::react {
+
+extern const char ReanimatedViewComponentName[] = "ReanimatedView";
+
+void ReanimatedShadowNode::layout(LayoutContext layoutContext) {
+  YogaLayoutableShadowNode::layout(layoutContext);
+}
+
+} // namespace facebook::react

packages/react-native-reanimated/Common/NativeView/react/renderer/components/rnreanimated/ReanimatedShadowNode.h

@@ -0,0 +1,26 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/components/rnreanimated/EventEmitters.h>
+#include <react/renderer/components/rnreanimated/Props.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+#include <react/renderer/components/rnreanimated/ReanimatedViewState.h>
+
+namespace facebook::react {
+
+JSI_EXPORT extern const char ReanimatedViewComponentName[];
+
+using ReanimatedViewShadowNodeBase = ConcreteViewShadowNode<
+    ReanimatedViewComponentName,
+    ReanimatedViewProps,
+    ReanimatedViewEventEmitter,
+    ReanimatedViewState>;
+
+class ReanimatedShadowNode final : public ReanimatedViewShadowNodeBase {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+  void layout(LayoutContext layoutContext) override;
+};
+
+} // namespace facebook::react

packages/react-native-reanimated/Common/NativeView/react/renderer/components/rnreanimated/ReanimatedViewState.h

@@ -0,0 +1,23 @@
+#pragma once
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#endif
+
+namespace facebook::react {
+
+class ReanimatedViewState {
+ public:
+  ReanimatedViewState() = default;
+
+#ifdef ANDROID
+  ReanimatedViewState(
+      ReanimatedViewState const &previousState,
+      folly::dynamic data) {};
+  folly::dynamic getDynamic() const {
+    return {};
+  };
+#endif
+};
+
+} // namespace facebook::react

packages/react-native-reanimated/RNReanimated.podspec

@@ -48,6 +48,12 @@ Pod::Spec.new do |s|
       sss.header_dir = "reanimated"
       sss.header_mappings_dir = "apple/reanimated"
     end
+
+    ss.subspec "view" do |sv|
+      sv.source_files = "Common/NativeView/**/*.{mm,h,cpp}"
+      sv.header_dir = ""
+      sv.header_mappings_dir = "Common/NativeView"
+    end
   end
 
   gcc_debug_definitions = "$(inherited)"

packages/react-native-reanimated/react-native.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        componentDescriptors: [
+          "ReanimatedViewComponentDescriptor",
+        ],
+        cmakeListsPath: "../Common/NativeView/CMakeLists.txt",
+      },
+    },
+  },
+}

packages/react-native-reanimated/src/specs/ReanimatedNativeComponent.ts

@@ -4,4 +4,6 @@ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNati
 
 interface NativeProps extends ViewProps {}
 
-export default codegenNativeComponent<NativeProps>('ReanimatedView');
+export default codegenNativeComponent<NativeProps>('ReanimatedView', {
+  interfaceOnly: true,
+});