Create BaseViewProps for platforms to derive (#38549)

Summary:
Pull Request resolved: #38549

Out of tree platforms may need different implementations of ViewProps. In fact, Android does already with props like `needsOffscreenAlphaCompositing` and `focusable`. This diff is not opinionated on whether these props should actually be shared on all platforms. Props like `focusable` may be a good candidate for generalizing to all platforms. However, there will always be a need for one platform to experiment with a new prop while it's not available yet on another, especially when considering out of tree platforms.

This diff moves the existing ViewProps class to BaseViewProps, aliases ViewProps as BaseViewProps for iOS for now, and moves Android-specific view props to it's own header and implementation.

## Changelog:
[General] [Added] - Support additional View props in out of tree platform Fabric implementations

Differential Revision: https://internalfb.com/D47492635

fbshipit-source-id: afa3d9af52a36eb53938fcc1b531e953c3900a17

packages/react-native/Libraries/AppDelegate/React-RCTAppDelegate.podspec

@@ -44,6 +44,7 @@ header_search_paths = [
   "$(PODS_ROOT)/Headers/Public/hermes-engine"
 ] : []).concat(use_frameworks ? [
   "$(PODS_CONFIGURATION_BUILD_DIR)/React-Fabric/React_Fabric.framework/Headers/",
+  "$(PODS_CONFIGURATION_BUILD_DIR)/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/common/",
   "$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers/",
   "$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios",
   "$(PODS_CONFIGURATION_BUILD_DIR)/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core",

packages/react-native/React/React-RCTFabric.podspec

@@ -38,6 +38,7 @@ if ENV['USE_FRAMEWORKS']
   header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-FabricImage/React_FabricImage.framework/Headers\""
   header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/textlayoutmanager/platform/ios\""
   header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/textinput/iostextinput\""
+  header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/common\""
   header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/imagemanager/platform/ios\""
   header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-nativeconfig/React_nativeconfig.framework/Headers\""
   header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers\""

packages/react-native/ReactAndroid/build.gradle

@@ -118,7 +118,10 @@ final def preparePrefab = tasks.register("preparePrefab", PreparePrefabHeadersTa
             ),
             new PrefabPreprocessingEntry(
                 "rrc_view",
-                new Pair("../ReactCommon/react/renderer/components/view/", "react/renderer/components/view/")
+                [
+                    new Pair("../ReactCommon/react/renderer/components/view/", "react/renderer/components/view/"),
+                    new Pair("../ReactCommon/react/renderer/components/view/platform/android/", ""),
+                ]
             ),
             new PrefabPreprocessingEntry(
                 "rrc_legacyviewmanagerinterop",

packages/react-native/ReactCommon/React-Fabric.podspec

@@ -105,6 +105,7 @@ Pod::Spec.new do |s|
         "\"$(PODS_CONFIGURATION_BUILD_DIR)/React-rendererdebug/React_rendererdebug.framework/Headers/\"",
         "\"$(PODS_TARGET_SRCROOT)/react/renderer/textlayoutmanager/platform/ios\"",
         "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/textinput/iostextinput\"",
+        "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/view/platform/common\"",
       ]
     end
 
@@ -224,7 +225,7 @@ Pod::Spec.new do |s|
       sss.dependency             "Yoga"
       sss.compiler_flags       = folly_compiler_flags
       sss.source_files         = "react/renderer/components/view/**/*.{m,mm,cpp,h}"
-      sss.exclude_files        = "react/renderer/components/view/tests"
+      sss.exclude_files        = "react/renderer/components/view/tests", "react/renderer/components/view/platform/android"
       sss.header_dir           = "react/renderer/components/view"
       sss.pod_target_xcconfig  = { "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/Headers/Private/Yoga\"" }
     end

packages/react-native/ReactCommon/React-FabricImage.podspec

@@ -36,6 +36,7 @@ if ENV['USE_FRAMEWORKS']
     "\"$(PODS_CONFIGURATION_BUILD_DIR)/React-Codegen/React_Codegen.framework/Headers\"",
     "\"$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\"",
     "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/imagemanager/platform/ios\"",
+    "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/common\"",
     "\"$(PODS_TARGET_SRCROOT)/react/renderer/textlayoutmanager/platform/ios\"",
     "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/textinput/iostextinput\"",
     "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers\"",

packages/react-native/ReactCommon/react/renderer/components/view/ViewProps.cpp → packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-#include "ViewProps.h"
+#include "BaseViewProps.h"
 
 #include <algorithm>
 
@@ -18,9 +18,9 @@
 
 namespace facebook::react {
 
-ViewProps::ViewProps(
+BaseViewProps::BaseViewProps(
     const PropsParserContext &context,
-    ViewProps const &sourceProps,
+    BaseViewProps const &sourceProps,
     RawProps const &rawProps,
     bool shouldSetRawProps)
     : YogaStylableProps(context, sourceProps, rawProps, shouldSetRawProps),
@@ -190,74 +190,7 @@ ViewProps::ViewProps(
                     rawProps,
                     "removeClippedSubviews",
                     sourceProps.removeClippedSubviews,
-                    false))
-#ifdef ANDROID
-      ,
-      elevation(
-          CoreFeatures::enablePropIteratorSetter ? sourceProps.elevation
-                                                 : convertRawProp(
-                                                       context,
-                                                       rawProps,
-                                                       "elevation",
-                                                       sourceProps.elevation,
-                                                       {})),
-      nativeBackground(
-          CoreFeatures::enablePropIteratorSetter
-              ? sourceProps.nativeBackground
-              : convertRawProp(
-                    context,
-                    rawProps,
-                    "nativeBackgroundAndroid",
-                    sourceProps.nativeBackground,
-                    {})),
-      nativeForeground(
-          CoreFeatures::enablePropIteratorSetter
-              ? sourceProps.nativeForeground
-              : convertRawProp(
-                    context,
-                    rawProps,
-                    "nativeForegroundAndroid",
-                    sourceProps.nativeForeground,
-                    {})),
-      focusable(
-          CoreFeatures::enablePropIteratorSetter ? sourceProps.focusable
-                                                 : convertRawProp(
-                                                       context,
-                                                       rawProps,
-                                                       "focusable",
-                                                       sourceProps.focusable,
-                                                       {})),
-      hasTVPreferredFocus(
-          CoreFeatures::enablePropIteratorSetter
-              ? sourceProps.hasTVPreferredFocus
-              : convertRawProp(
-                    context,
-                    rawProps,
-                    "hasTVPreferredFocus",
-                    sourceProps.hasTVPreferredFocus,
-                    {})),
-      needsOffscreenAlphaCompositing(
-          CoreFeatures::enablePropIteratorSetter
-              ? sourceProps.needsOffscreenAlphaCompositing
-              : convertRawProp(
-                    context,
-                    rawProps,
-                    "needsOffscreenAlphaCompositing",
-                    sourceProps.needsOffscreenAlphaCompositing,
-                    {})),
-      renderToHardwareTextureAndroid(
-          CoreFeatures::enablePropIteratorSetter
-              ? sourceProps.renderToHardwareTextureAndroid
-              : convertRawProp(
-                    context,
-                    rawProps,
-                    "renderToHardwareTextureAndroid",
-                    sourceProps.renderToHardwareTextureAndroid,
-                    {}))
-
-#endif
-{
-}
+                    false)) {}
 
 #define VIEW_EVENT_CASE(eventType)                      \
   case CONSTEXPR_RAW_PROPS_KEY_HASH("on" #eventType): { \
@@ -271,7 +204,7 @@ ViewProps::ViewProps(
     return;                                             \
   }
 
-void ViewProps::setProp(
+void BaseViewProps::setProp(
     const PropsParserContext &context,
     RawPropsPropNameHash hash,
     const char *propName,
@@ -282,7 +215,7 @@ void ViewProps::setProp(
   YogaStylableProps::setProp(context, hash, propName, value);
   AccessibilityProps::setProp(context, hash, propName, value);
 
-  static auto defaults = ViewProps{};
+  static auto defaults = BaseViewProps{};
 
   switch (hash) {
     RAW_SET_PROP_SWITCH_CASE_BASIC(opacity);
@@ -326,15 +259,6 @@ void ViewProps::setProp(
     VIEW_EVENT_CASE(TouchMove);
     VIEW_EVENT_CASE(TouchEnd);
     VIEW_EVENT_CASE(TouchCancel);
-#ifdef ANDROID
-    RAW_SET_PROP_SWITCH_CASE_BASIC(elevation);
-    RAW_SET_PROP_SWITCH_CASE(nativeBackground, "nativeBackgroundAndroid");
-    RAW_SET_PROP_SWITCH_CASE(nativeForeground, "nativeForegroundAndroid");
-    RAW_SET_PROP_SWITCH_CASE_BASIC(focusable);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(hasTVPreferredFocus);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(needsOffscreenAlphaCompositing);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(renderToHardwareTextureAndroid);
-#endif
     // BorderRadii
     SET_CASCADED_RECTANGLE_CORNERS(borderRadii, "border", "Radius", value);
     SET_CASCADED_RECTANGLE_EDGES(borderColors, "border", "Color", value);
@@ -380,7 +304,7 @@ static BorderRadii ensureNoOverlap(BorderRadii const &radii, Size const &size) {
   };
 }
 
-BorderMetrics ViewProps::resolveBorderMetrics(
+BorderMetrics BaseViewProps::resolveBorderMetrics(
     LayoutMetrics const &layoutMetrics) const {
   auto isRTL =
       bool{layoutMetrics.layoutDirection == LayoutDirection::RightToLeft};
@@ -412,33 +336,27 @@ BorderMetrics ViewProps::resolveBorderMetrics(
   };
 }
 
-bool ViewProps::getClipsContentToBounds() const {
+bool BaseViewProps::getClipsContentToBounds() const {
   return yogaStyle.overflow() != YGOverflowVisible;
 }
 
-#ifdef ANDROID
-bool ViewProps::getProbablyMoreHorizontalThanVertical_DEPRECATED() const {
-  return yogaStyle.flexDirection() == YGFlexDirectionRow;
-}
-#endif
-
 #pragma mark - DebugStringConvertible
 
 #if RN_DEBUG_STRING_CONVERTIBLE
-SharedDebugStringConvertibleList ViewProps::getDebugProps() const {
-  const auto &defaultViewProps = ViewProps();
+SharedDebugStringConvertibleList BaseViewProps::getDebugProps() const {
+  const auto &defaultBaseViewProps = BaseViewProps();
 
   return AccessibilityProps::getDebugProps() +
       YogaStylableProps::getDebugProps() +
       SharedDebugStringConvertibleList{
           debugStringConvertibleItem(
-              "opacity", opacity, defaultViewProps.opacity),
+              "opacity", opacity, defaultBaseViewProps.opacity),
           debugStringConvertibleItem(
               "backgroundColor",
               backgroundColor,
-              defaultViewProps.backgroundColor),
+              defaultBaseViewProps.backgroundColor),
           debugStringConvertibleItem(
-              "zIndex", zIndex, defaultViewProps.zIndex.value_or(0)),
+              "zIndex", zIndex, defaultBaseViewProps.zIndex.value_or(0)),
       };
 }
 #endif

packages/react-native/ReactCommon/react/renderer/components/view/ViewProps.h → packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.h

@@ -20,16 +20,12 @@
 
 namespace facebook::react {
 
-class ViewProps;
-
-using SharedViewProps = std::shared_ptr<ViewProps const>;
-
-class ViewProps : public YogaStylableProps, public AccessibilityProps {
+class BaseViewProps : public YogaStylableProps, public AccessibilityProps {
  public:
-  ViewProps() = default;
-  ViewProps(
+  BaseViewProps() = default;
+  BaseViewProps(
       const PropsParserContext &context,
-      ViewProps const &sourceProps,
+      BaseViewProps const &sourceProps,
       RawProps const &rawProps,
       bool shouldSetRawProps = true);
 
@@ -39,11 +35,6 @@ class ViewProps : public YogaStylableProps, public AccessibilityProps {
       const char *propName,
       RawValue const &value);
 
-#ifdef ANDROID
-  void propsDiffMapBuffer(Props const *oldProps, MapBufferBuilder &builder)
-      const override;
-#endif
-
 #pragma mark - Props
 
   // Color
@@ -81,27 +72,11 @@ class ViewProps : public YogaStylableProps, public AccessibilityProps {
 
   Float elevation{}; /* Android-only */
 
-#ifdef ANDROID
-
-  std::optional<NativeDrawable> nativeBackground{};
-  std::optional<NativeDrawable> nativeForeground{};
-
-  bool focusable{false};
-  bool hasTVPreferredFocus{false};
-  bool needsOffscreenAlphaCompositing{false};
-  bool renderToHardwareTextureAndroid{false};
-
-#endif
-
 #pragma mark - Convenience Methods
 
   BorderMetrics resolveBorderMetrics(LayoutMetrics const &layoutMetrics) const;
   bool getClipsContentToBounds() const;
 
-#ifdef ANDROID
-  bool getProbablyMoreHorizontalThanVertical_DEPRECATED() const;
-#endif
-
 #pragma mark - DebugStringConvertible
 
 #if RN_DEBUG_STRING_CONVERTIBLE

packages/react-native/ReactCommon/react/renderer/components/view/CMakeLists.txt

@@ -15,10 +15,17 @@ add_compile_options(
         -Wno-gnu-zero-variadic-macro-arguments
         -DLOG_TAG=\"Fabric\")
 
-file(GLOB rrc_view_SRC CONFIGURE_DEPENDS *.cpp)
+file(GLOB rrc_view_SRC CONFIGURE_DEPENDS
+        *.cpp
+        platform/android/react/renderer/components/view/*.cpp)
+
 add_library(rrc_view SHARED ${rrc_view_SRC})
 
-target_include_directories(rrc_view PUBLIC ${REACT_COMMON_DIR})
+target_include_directories(rrc_view
+        PUBLIC
+          ${REACT_COMMON_DIR}
+          ${CMAKE_CURRENT_SOURCE_DIR}/platform/android/
+)
 
 target_link_libraries(rrc_view
         folly_runtime

packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityPropsMapBuffer.cpp → packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/AccessibilityPropsMapBuffer.cpp

@@ -6,12 +6,10 @@
  */
 
 #include "AccessibilityPropsMapBuffer.h"
-#include "AccessibilityProps.h"
+#include <react/renderer/components/view/AccessibilityProps.h>
 
 namespace facebook::react {
 
-#ifdef ANDROID
-
 static MapBuffer convertAccessibilityActions(
     std::vector<AccessibilityAction> const &actions) {
   MapBufferBuilder builder(actions.size());
@@ -163,6 +161,5 @@ void AccessibilityProps::propsDiffMapBuffer(
     builder.putInt(AP_ROLE, static_cast<int32_t>(newProps.role));
   }
 }
-#endif
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityPropsMapBuffer.h → packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/AccessibilityPropsMapBuffer.h

@@ -7,8 +7,6 @@
 
 #pragma once
 
-#ifdef ANDROID
-
 #include <react/renderer/mapbuffer/MapBuffer.h>
 #include <react/renderer/mapbuffer/MapBufferBuilder.h>
 
@@ -35,4 +33,3 @@ constexpr MapBuffer::Key ACCESSIBILITY_ACTION_NAME = 0;
 constexpr MapBuffer::Key ACCESSIBILITY_ACTION_LABEL = 1;
 
 } // namespace facebook::react
-#endif