diff --git a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js index 0a73eb53c84..1fda63d5945 100644 --- a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -120,6 +120,11 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { */ experimental_filter: {process: processFilter}, + /** + * MixBlendMode + */ + experimental_mixBlendMode: true, + /** * View */ diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js index d2947cc9692..29f303eec7a 100644 --- a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js @@ -169,6 +169,7 @@ const validAttributesForNonEventProps = { experimental_filter: { process: require('../StyleSheet/processFilter').default, }, + experimental_mixBlendMode: true, opacity: true, elevation: true, shadowColor: {process: require('../StyleSheet/processColor').default}, diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index 3a438013655..90e100576a0 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -713,11 +713,30 @@ type ____FilterStyle_Internal = $ReadOnly<{ experimental_filter?: $ReadOnlyArray, }>; +export type ____MixBlendMode_Internal = + | 'normal' + | 'multiply' + | 'screen' + | 'overlay' + | 'darken' + | 'lighten' + | 'color-dodge' + | 'color-burn' + | 'hard-light' + | 'soft-light' + | 'difference' + | 'exclusion' + | 'hue' + | 'saturation' + | 'color' + | 'luminosity'; + export type ____ViewStyle_InternalCore = $ReadOnly<{ ...$Exact<____LayoutStyle_Internal>, ...$Exact<____ShadowStyle_Internal>, ...$Exact<____TransformStyle_Internal>, ...____FilterStyle_Internal, + experimental_mixBlendMode?: ____MixBlendMode_Internal, backfaceVisibility?: 'visible' | 'hidden', backgroundColor?: ____ColorValue_Internal, borderColor?: ____ColorValue_Internal, diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 44b4cc511f2..7ff79dfe92a 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -7700,11 +7700,29 @@ export type ____ShadowStyle_Internal = $ReadOnly<{ type ____FilterStyle_Internal = $ReadOnly<{ experimental_filter?: $ReadOnlyArray, }>; +export type ____MixBlendMode_Internal = + | \\"normal\\" + | \\"multiply\\" + | \\"screen\\" + | \\"overlay\\" + | \\"darken\\" + | \\"lighten\\" + | \\"color-dodge\\" + | \\"color-burn\\" + | \\"hard-light\\" + | \\"soft-light\\" + | \\"difference\\" + | \\"exclusion\\" + | \\"hue\\" + | \\"saturation\\" + | \\"color\\" + | \\"luminosity\\"; export type ____ViewStyle_InternalCore = $ReadOnly<{ ...$Exact<____LayoutStyle_Internal>, ...$Exact<____ShadowStyle_Internal>, ...$Exact<____TransformStyle_Internal>, ...____FilterStyle_Internal, + experimental_mixBlendMode?: ____MixBlendMode_Internal, backfaceVisibility?: \\"visible\\" | \\"hidden\\", backgroundColor?: ____ColorValue_Internal, borderColor?: ____ColorValue_Internal,