Fix hard errors in filter parsing

packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -24,8 +24,39 @@ import processTransform from '../../StyleSheet/processTransform';
 import processTransformOrigin from '../../StyleSheet/processTransformOrigin';
 import sizesDiffer from '../../Utilities/differ/sizesDiffer';
 
+const nativeCSSParsing = ReactNativeFeatureFlags.enableNativeCSSParsing();
+
 const colorAttributes = {process: processColor};
 
+/**
+ * Gated style attribute types. When native CSS parsing is enabled, the JS
+ * processor is bypassed and the raw value is sent directly to native.
+ * These are exported so that other ViewConfigs can reuse them.
+ */
+export const filterAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processFilter};
+
+export const boxShadowAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBoxShadow};
+
+export const backgroundImageAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundImage};
+
+export const backgroundSizeAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundSize};
+
+export const backgroundPositionAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundPosition};
+
+export const backgroundRepeatAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundRepeat};
+
 const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Layout
@@ -125,9 +156,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Filter
    */
-  filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? true
-    : {process: processFilter},
+  filter: filterAttribute,
 
   /**
    * MixBlendMode
@@ -142,29 +171,27 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /*
    * BoxShadow
    */
-  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? true
-    : {process: processBoxShadow},
+  boxShadow: boxShadowAttribute,
 
   /**
    * BackgroundImage
    */
-  experimental_backgroundImage: {process: processBackgroundImage},
+  experimental_backgroundImage: backgroundImageAttribute,
 
   /**
    * BackgroundSize
    */
-  experimental_backgroundSize: {process: processBackgroundSize},
+  experimental_backgroundSize: backgroundSizeAttribute,
 
   /**
    * BackgroundPosition
    */
-  experimental_backgroundPosition: {process: processBackgroundPosition},
+  experimental_backgroundPosition: backgroundPositionAttribute,
 
   /**
    * BackgroundRepeat
    */
-  experimental_backgroundRepeat: {process: processBackgroundRepeat},
+  experimental_backgroundRepeat: backgroundRepeatAttribute,
 
   /**
    * View

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -10,8 +10,15 @@
 
 import type {PartialViewConfigWithoutName} from './PlatformBaseViewConfig';
 
-import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
+import {
+  backgroundImageAttribute,
+  backgroundPositionAttribute,
+  backgroundRepeatAttribute,
+  backgroundSizeAttribute,
+  boxShadowAttribute,
+  filterAttribute,
+} from '../Components/View/ReactNativeStyleAttributes';
 import {DynamicallyInjectedByGestureHandler} from './ViewConfigIgnore';
 
 const bubblingEventTypes = {
@@ -191,24 +198,12 @@ const validAttributesForNonEventProps = {
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
   transformOrigin: true,
-  experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processBackgroundImage').default},
-  experimental_backgroundSize: {
-    process: require('../StyleSheet/processBackgroundSize').default,
-  },
-  experimental_backgroundPosition: {
-    process: require('../StyleSheet/processBackgroundPosition').default,
-  },
-  experimental_backgroundRepeat: {
-    process: require('../StyleSheet/processBackgroundRepeat').default,
-  },
-  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processBoxShadow').default},
-  filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processFilter').default},
+  experimental_backgroundImage: backgroundImageAttribute,
+  experimental_backgroundSize: backgroundSizeAttribute,
+  experimental_backgroundPosition: backgroundPositionAttribute,
+  experimental_backgroundRepeat: backgroundRepeatAttribute,
+  boxShadow: boxShadowAttribute,
+  filter: filterAttribute,
   mixBlendMode: true,
   isolation: true,
   opacity: true,

packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -10,8 +10,11 @@
 
 import type {PartialViewConfigWithoutName} from './PlatformBaseViewConfig';
 
-import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
+import {
+  boxShadowAttribute,
+  filterAttribute,
+} from '../Components/View/ReactNativeStyleAttributes';
 import {
   ConditionallyIgnoredEventHandlers,
   DynamicallyInjectedByGestureHandler,
@@ -228,12 +231,8 @@ const validAttributesForNonEventProps = {
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer').default},
   collapsable: true,
   collapsableChildren: true,
-  filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processFilter').default},
-  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processBoxShadow').default},
+  filter: filterAttribute,
+  boxShadow: boxShadowAttribute,
   mixBlendMode: true,
   isolation: true,
 

packages/react-native/ReactCommon/react/renderer/components/view/FilterPropsConversions.h

@@ -45,64 +45,64 @@ parseProcessedFilter(const PropsParserContext &context, const RawValue &value, s
 
     auto rawFilterFunction = static_cast<std::unordered_map<std::string, RawValue>>(rawFilterPrimitive);
     FilterFunction filterFunction{};
-    try {
-      filterFunction.type = filterTypeFromString(rawFilterFunction.begin()->first);
-      if (filterFunction.type == FilterType::DropShadow) {
-        auto rawDropShadow = static_cast<std::unordered_map<std::string, RawValue>>(rawFilterFunction.begin()->second);
-        DropShadowParams dropShadowParams{};
-
-        auto offsetX = rawDropShadow.find("offsetX");
-        react_native_expect(offsetX != rawDropShadow.end());
-        if (offsetX == rawDropShadow.end()) {
-          result = {};
-          return;
-        }
+    auto filterType = filterTypeFromString(rawFilterFunction.begin()->first);
+    if (!filterType.has_value()) {
+      LOG(ERROR) << "Could not parse FilterFunction: " << rawFilterFunction.begin()->first;
+      result = {};
+      return;
+    }
+    filterFunction.type = *filterType;
+    if (filterFunction.type == FilterType::DropShadow) {
+      auto rawDropShadow = static_cast<std::unordered_map<std::string, RawValue>>(rawFilterFunction.begin()->second);
+      DropShadowParams dropShadowParams{};
+
+      auto offsetX = rawDropShadow.find("offsetX");
+      react_native_expect(offsetX != rawDropShadow.end());
+      if (offsetX == rawDropShadow.end()) {
+        result = {};
+        return;
+      }
 
-        react_native_expect(offsetX->second.hasType<Float>());
-        if (!offsetX->second.hasType<Float>()) {
-          result = {};
-          return;
-        }
-        dropShadowParams.offsetX = (Float)offsetX->second;
+      react_native_expect(offsetX->second.hasType<Float>());
+      if (!offsetX->second.hasType<Float>()) {
+        result = {};
+        return;
+      }
+      dropShadowParams.offsetX = (Float)offsetX->second;
 
-        auto offsetY = rawDropShadow.find("offsetY");
-        react_native_expect(offsetY != rawDropShadow.end());
-        if (offsetY == rawDropShadow.end()) {
-          result = {};
-          return;
-        }
-        react_native_expect(offsetY->second.hasType<Float>());
-        if (!offsetY->second.hasType<Float>()) {
+      auto offsetY = rawDropShadow.find("offsetY");
+      react_native_expect(offsetY != rawDropShadow.end());
+      if (offsetY == rawDropShadow.end()) {
+        result = {};
+        return;
+      }
+      react_native_expect(offsetY->second.hasType<Float>());
+      if (!offsetY->second.hasType<Float>()) {
+        result = {};
+        return;
+      }
+      dropShadowParams.offsetY = (Float)offsetY->second;
+
+      auto standardDeviation = rawDropShadow.find("standardDeviation");
+      if (standardDeviation != rawDropShadow.end()) {
+        react_native_expect(standardDeviation->second.hasType<Float>());
+        if (!standardDeviation->second.hasType<Float>()) {
           result = {};
           return;
         }
-        dropShadowParams.offsetY = (Float)offsetY->second;
-
-        auto standardDeviation = rawDropShadow.find("standardDeviation");
-        if (standardDeviation != rawDropShadow.end()) {
-          react_native_expect(standardDeviation->second.hasType<Float>());
-          if (!standardDeviation->second.hasType<Float>()) {
-            result = {};
-            return;
-          }
-          dropShadowParams.standardDeviation = (Float)standardDeviation->second;
-        }
-
-        auto color = rawDropShadow.find("color");
-        if (color != rawDropShadow.end()) {
-          fromRawValue(context.contextContainer, context.surfaceId, color->second, dropShadowParams.color);
-        }
+        dropShadowParams.standardDeviation = (Float)standardDeviation->second;
+      }
 
-        filterFunction.parameters = dropShadowParams;
-      } else {
-        filterFunction.parameters = (float)rawFilterFunction.begin()->second;
+      auto color = rawDropShadow.find("color");
+      if (color != rawDropShadow.end()) {
+        fromRawValue(context.contextContainer, context.surfaceId, color->second, dropShadowParams.color);
       }
-      filter.push_back(std::move(filterFunction));
-    } catch (const std::exception &e) {
-      LOG(ERROR) << "Could not parse FilterFunction: " << e.what();
-      result = {};
-      return;
+
+      filterFunction.parameters = dropShadowParams;
+    } else {
+      filterFunction.parameters = (float)rawFilterFunction.begin()->second;
     }
+    filter.push_back(filterFunction);
   }
 
   result = filter;
@@ -313,11 +313,15 @@ inline std::optional<FilterFunction> parseFilterRawValue(const PropsParserContex
     }
     return {};
   } else {
+    auto filterType = filterTypeFromString(filterKey);
+    if (!filterType.has_value()) {
+      return {};
+    }
     if (auto amount = coerceAmount(rawFilter.begin()->second)) {
       if (*amount < 0.0f) {
         return {};
       }
-      return FilterFunction{.type = filterTypeFromString(filterKey), .parameters = *amount};
+      return FilterFunction{.type = *filterType, .parameters = *amount};
     }
     return {};
   }

packages/react-native/ReactCommon/react/renderer/components/view/tests/ConversionsTest.cpp

@@ -239,4 +239,15 @@ TEST(ConversionsTest, unprocessed_filter_objects_multiple_objects) {
   EXPECT_TRUE(filters.empty());
 }
 
+TEST(ConversionsTest, unprocessed_filter_objects_unknown_type) {
+  RawValue value{
+      folly::dynamic::array(folly::dynamic::object("unknown-filter", 5))};
+
+  std::vector<FilterFunction> filters;
+  parseUnprocessedFilter(
+      PropsParserContext{-1, ContextContainer{}}, value, filters);
+
+  EXPECT_TRUE(filters.empty());
+}
+
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/graphics/Filter.h

@@ -10,6 +10,7 @@
 #include <react/renderer/graphics/Color.h>
 #include <react/renderer/graphics/Float.h>
 
+#include <optional>
 #include <string>
 #include <string_view>
 #include <variant>
@@ -29,7 +30,7 @@ enum class FilterType {
   DropShadow
 };
 
-inline FilterType filterTypeFromString(std::string_view filterName)
+inline std::optional<FilterType> filterTypeFromString(std::string_view filterName)
 {
   if (filterName == "blur") {
     return FilterType::Blur;
@@ -52,7 +53,7 @@ inline FilterType filterTypeFromString(std::string_view filterName)
   } else if (filterName == "dropShadow") {
     return FilterType::DropShadow;
   } else {
-    throw std::invalid_argument(std::string(filterName));
+    return std::nullopt;
   }
 }