feat: add clip-path js support

Author: paradowstack

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

@@ -17,6 +17,7 @@ import processBackgroundPosition from '../../StyleSheet/processBackgroundPositio
 import processBackgroundRepeat from '../../StyleSheet/processBackgroundRepeat';
 import processBackgroundSize from '../../StyleSheet/processBackgroundSize';
 import processBoxShadow from '../../StyleSheet/processBoxShadow';
+import processClipPath from '../../StyleSheet/processClipPath';
 import processColor from '../../StyleSheet/processColor';
 import processFilter from '../../StyleSheet/processFilter';
 import processFontVariant from '../../StyleSheet/processFontVariant';
@@ -203,7 +204,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   outlineStyle: true,
   outlineWidth: true,
   pointerEvents: true,
-
+  clipPath: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? true
+    : {process: processClipPath},
   /**
    * Text
    */

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

@@ -357,6 +357,7 @@ const validAttributesForNonEventProps = {
   borderStyle: true,
   hitSlop: true,
   pointerEvents: true,
+  clipPath: true,
   nativeBackgroundAndroid: true,
   nativeForegroundAndroid: true,
   needsOffscreenAlphaCompositing: true,

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

@@ -825,6 +825,85 @@ export type BoxShadowValue = {
   inset?: boolean,
 };
 
+export type ClipPathGeometryBox =
+  | 'border-box'
+  | 'padding-box'
+  | 'content-box'
+  | 'margin-box'
+  | 'fill-box'
+  | 'stroke-box'
+  | 'view-box';
+
+export type ClipPathFillRule = 'nonzero' | 'evenodd';
+
+export type ClipPathInsetShape = {
+  type: 'inset',
+  top?: number | string | null,
+  bottom?: number | string | null,
+  left?: number | string | null,
+  right?: number | string | null,
+  borderRadius?: number | string | null,
+  ...
+};
+
+export type ClipPathCircleShape = {
+  type: 'circle',
+  r?: number | string | null,
+  cx?: number | string | null,
+  cy?: number | string | null,
+  ...
+};
+
+export type ClipPathEllipseShape = {
+  type: 'ellipse',
+  rx?: number | string | null,
+  ry?: number | string | null,
+  cx?: number | string | null,
+  cy?: number | string | null,
+  ...
+};
+
+export type ClipPathPolygonShape = {
+  type: 'polygon',
+  points: $ReadOnlyArray<{x: number | string, y: number | string, ...}>,
+  fillRule?: ClipPathFillRule | null,
+  ...
+};
+
+export type ClipPathRectShape = {
+  type: 'rect',
+  top: number | string | 'auto',
+  right: number | string | 'auto',
+  bottom: number | string | 'auto',
+  left: number | string | 'auto',
+  borderRadius?: number | string | null,
+  ...
+};
+
+export type ClipPathXywhShape = {
+  type: 'xywh',
+  x: number | string,
+  y: number | string,
+  width: number | string,
+  height: number | string,
+  borderRadius?: number | string | null,
+  ...
+};
+
+export type ClipPathBasicShape =
+  | ClipPathInsetShape
+  | ClipPathCircleShape
+  | ClipPathEllipseShape
+  | ClipPathPolygonShape
+  | ClipPathRectShape
+  | ClipPathXywhShape;
+
+export type ClipPathValue = {
+  shape?: ClipPathBasicShape | null,
+  geometryBox?: ClipPathGeometryBox | null,
+  ...
+};
+
 type ____BlendMode_Internal =
   | 'normal'
   | 'multiply'
@@ -898,6 +977,7 @@ export type ____ViewStyle_InternalBase = $ReadOnly<{
     | $ReadOnlyArray<BackgroundRepeatValue>
     | string,
   isolation?: 'auto' | 'isolate',
+  clipPath?: ClipPathValue | string,
 }>;
 
 export type ____ViewStyle_InternalCore = $ReadOnly<{