From 9cced3fd745255ce62e9b36019ca24b518b28e89 Mon Sep 17 00:00:00 2001 From: bigcupcoffee <24373206+bigcupcoffee@users.noreply.github.com> Date: Sun, 4 Jan 2026 02:14:38 +0200 Subject: [PATCH 1/6] Document mixBlendMode view style prop --- docs/view-style-props.md | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/view-style-props.md b/docs/view-style-props.md index 261a2493742..51a3b62560e 100644 --- a/docs/view-style-props.md +++ b/docs/view-style-props.md @@ -453,6 +453,40 @@ The width of an outline which is drawn around an element, outside the border. Do --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. +For more granular control over what should be blending together see [isolation](layout-props.md). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `pointerEvents` Controls whether the `View` can be the target of touch events. From 9f9603dee81511e6dfcc778b0114ba8d03afe425 Mon Sep 17 00:00:00 2001 From: bigcupcoffee <24373206+bigcupcoffee@users.noreply.github.com> Date: Sun, 4 Jan 2026 02:22:57 +0200 Subject: [PATCH 2/6] Fix isolation link --- docs/view-style-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/view-style-props.md b/docs/view-style-props.md index 51a3b62560e..43b803c909a 100644 --- a/docs/view-style-props.md +++ b/docs/view-style-props.md @@ -460,7 +460,7 @@ The width of an outline which is drawn around an element, outside the border. Do ::: Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. -For more granular control over what should be blending together see [isolation](layout-props.md). +For more granular control over what should be blending together see [isolation](layout-props.md#isolation). ##### mixBlendMode Values From f003a1da604e9ab462125d0ba3f5faf43cded023 Mon Sep 17 00:00:00 2001 From: bigcupcoffee <24373206+bigcupcoffee@users.noreply.github.com> Date: Sun, 4 Jan 2026 02:27:19 +0200 Subject: [PATCH 3/6] Space out + retry build --- docs/view-style-props.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/view-style-props.md b/docs/view-style-props.md index 43b803c909a..315facd66ec 100644 --- a/docs/view-style-props.md +++ b/docs/view-style-props.md @@ -460,6 +460,7 @@ The width of an outline which is drawn around an element, outside the border. Do ::: Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + For more granular control over what should be blending together see [isolation](layout-props.md#isolation). ##### mixBlendMode Values From ffbdbf062c11871223b81266fed5d794fe2feddf Mon Sep 17 00:00:00 2001 From: bigcupcoffee <24373206+bigcupcoffee@users.noreply.github.com> Date: Sun, 4 Jan 2026 02:32:21 +0200 Subject: [PATCH 4/6] Fix the link? --- docs/view-style-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/view-style-props.md b/docs/view-style-props.md index 315facd66ec..1cdafa3d6bb 100644 --- a/docs/view-style-props.md +++ b/docs/view-style-props.md @@ -461,7 +461,7 @@ The width of an outline which is drawn around an element, outside the border. Do Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. -For more granular control over what should be blending together see [isolation](layout-props.md#isolation). +For more granular control over what should be blending together see [isolation](layout-props#isolation). ##### mixBlendMode Values From 23ec42b54495d2185059cddfcd4fa1ec2dc61c16 Mon Sep 17 00:00:00 2001 From: bigcupcoffee <24373206+bigcupcoffee@users.noreply.github.com> Date: Mon, 5 Jan 2026 22:23:45 +0200 Subject: [PATCH 5/6] Backport to versioned docs --- .../version-0.77/view-style-props.md | 35 +++++++++++++++++++ .../version-0.78/view-style-props.md | 35 +++++++++++++++++++ .../version-0.79/view-style-props.md | 35 +++++++++++++++++++ .../version-0.80/view-style-props.md | 35 +++++++++++++++++++ .../version-0.81/view-style-props.md | 35 +++++++++++++++++++ .../version-0.82/view-style-props.md | 35 +++++++++++++++++++ .../version-0.83/view-style-props.md | 35 +++++++++++++++++++ 7 files changed, 245 insertions(+) diff --git a/website/versioned_docs/version-0.77/view-style-props.md b/website/versioned_docs/version-0.77/view-style-props.md index 5778fb17f8a..281c852436b 100644 --- a/website/versioned_docs/version-0.77/view-style-props.md +++ b/website/versioned_docs/version-0.77/view-style-props.md @@ -453,6 +453,41 @@ The width of an outline which is drawn around an element, outside the border. Do --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.78/view-style-props.md b/website/versioned_docs/version-0.78/view-style-props.md index 958f4465f84..70e1cc46de9 100644 --- a/website/versioned_docs/version-0.78/view-style-props.md +++ b/website/versioned_docs/version-0.78/view-style-props.md @@ -453,6 +453,41 @@ The width of an outline which is drawn around an element, outside the border. Do --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.79/view-style-props.md b/website/versioned_docs/version-0.79/view-style-props.md index 958f4465f84..70e1cc46de9 100644 --- a/website/versioned_docs/version-0.79/view-style-props.md +++ b/website/versioned_docs/version-0.79/view-style-props.md @@ -453,6 +453,41 @@ The width of an outline which is drawn around an element, outside the border. Do --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.80/view-style-props.md b/website/versioned_docs/version-0.80/view-style-props.md index 958f4465f84..70e1cc46de9 100644 --- a/website/versioned_docs/version-0.80/view-style-props.md +++ b/website/versioned_docs/version-0.80/view-style-props.md @@ -453,6 +453,41 @@ The width of an outline which is drawn around an element, outside the border. Do --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.81/view-style-props.md b/website/versioned_docs/version-0.81/view-style-props.md index 261a2493742..1cdafa3d6bb 100644 --- a/website/versioned_docs/version-0.81/view-style-props.md +++ b/website/versioned_docs/version-0.81/view-style-props.md @@ -453,6 +453,41 @@ The width of an outline which is drawn around an element, outside the border. Do --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.82/view-style-props.md b/website/versioned_docs/version-0.82/view-style-props.md index 261a2493742..1cdafa3d6bb 100644 --- a/website/versioned_docs/version-0.82/view-style-props.md +++ b/website/versioned_docs/version-0.82/view-style-props.md @@ -453,6 +453,41 @@ The width of an outline which is drawn around an element, outside the border. Do --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.83/view-style-props.md b/website/versioned_docs/version-0.83/view-style-props.md index 261a2493742..1cdafa3d6bb 100644 --- a/website/versioned_docs/version-0.83/view-style-props.md +++ b/website/versioned_docs/version-0.83/view-style-props.md @@ -453,6 +453,41 @@ The width of an outline which is drawn around an element, outside the border. Do --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `pointerEvents` Controls whether the `View` can be the target of touch events. From ccee99e0122f19e04b06fd4d2414fec871759944 Mon Sep 17 00:00:00 2001 From: bigcupcoffee <24373206+bigcupcoffee@users.noreply.github.com> Date: Tue, 6 Jan 2026 02:49:24 +0200 Subject: [PATCH 6/6] Alphabet check --- docs/view-style-props.md | 70 +++++++++---------- .../version-0.77/view-style-props.md | 70 +++++++++---------- .../version-0.78/view-style-props.md | 70 +++++++++---------- .../version-0.79/view-style-props.md | 70 +++++++++---------- .../version-0.80/view-style-props.md | 70 +++++++++---------- .../version-0.81/view-style-props.md | 70 +++++++++---------- .../version-0.82/view-style-props.md | 70 +++++++++---------- .../version-0.83/view-style-props.md | 70 +++++++++---------- 8 files changed, 280 insertions(+), 280 deletions(-) diff --git a/docs/view-style-props.md b/docs/view-style-props.md index 1cdafa3d6bb..6efa66da550 100644 --- a/docs/view-style-props.md +++ b/docs/view-style-props.md @@ -389,6 +389,41 @@ The following filter functions work on Android only: --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `opacity` | Type | @@ -453,41 +488,6 @@ The width of an outline which is drawn around an element, outside the border. Do --- -### `mixBlendMode` - -:::note -`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) -::: - -Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. - -For more granular control over what should be blending together see [isolation](layout-props#isolation). - -##### mixBlendMode Values - -- `normal`: The element is drawn on top of its background without blending. -- `multiply`: The source color is multiplied by the destination color and replaces the destination. -- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. -- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. -- `darken`: Selects the darker of the backdrop and source colors. -- `lighten`: Selects the lighter of the backdrop and source colors. -- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. -- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. -- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. -- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. -- `difference`: Subtracts the darker of the two constituent colors from the lighter color. -- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. -- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. -- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. -- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. -- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. - -| Type | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | - ---- - ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.77/view-style-props.md b/website/versioned_docs/version-0.77/view-style-props.md index 281c852436b..2200fb8c099 100644 --- a/website/versioned_docs/version-0.77/view-style-props.md +++ b/website/versioned_docs/version-0.77/view-style-props.md @@ -389,6 +389,41 @@ The following filter functions work on Android only: --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `opacity` | Type | @@ -453,41 +488,6 @@ The width of an outline which is drawn around an element, outside the border. Do --- -### `mixBlendMode` - -:::note -`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) -::: - -Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. - -For more granular control over what should be blending together see [isolation](layout-props#isolation). - -##### mixBlendMode Values - -- `normal`: The element is drawn on top of its background without blending. -- `multiply`: The source color is multiplied by the destination color and replaces the destination. -- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. -- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. -- `darken`: Selects the darker of the backdrop and source colors. -- `lighten`: Selects the lighter of the backdrop and source colors. -- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. -- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. -- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. -- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. -- `difference`: Subtracts the darker of the two constituent colors from the lighter color. -- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. -- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. -- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. -- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. -- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. - -| Type | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | - ---- - ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.78/view-style-props.md b/website/versioned_docs/version-0.78/view-style-props.md index 70e1cc46de9..9d2ac1d7f09 100644 --- a/website/versioned_docs/version-0.78/view-style-props.md +++ b/website/versioned_docs/version-0.78/view-style-props.md @@ -389,6 +389,41 @@ The following filter functions work on Android only: --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `opacity` | Type | @@ -453,41 +488,6 @@ The width of an outline which is drawn around an element, outside the border. Do --- -### `mixBlendMode` - -:::note -`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) -::: - -Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. - -For more granular control over what should be blending together see [isolation](layout-props#isolation). - -##### mixBlendMode Values - -- `normal`: The element is drawn on top of its background without blending. -- `multiply`: The source color is multiplied by the destination color and replaces the destination. -- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. -- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. -- `darken`: Selects the darker of the backdrop and source colors. -- `lighten`: Selects the lighter of the backdrop and source colors. -- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. -- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. -- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. -- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. -- `difference`: Subtracts the darker of the two constituent colors from the lighter color. -- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. -- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. -- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. -- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. -- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. - -| Type | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | - ---- - ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.79/view-style-props.md b/website/versioned_docs/version-0.79/view-style-props.md index 70e1cc46de9..9d2ac1d7f09 100644 --- a/website/versioned_docs/version-0.79/view-style-props.md +++ b/website/versioned_docs/version-0.79/view-style-props.md @@ -389,6 +389,41 @@ The following filter functions work on Android only: --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `opacity` | Type | @@ -453,41 +488,6 @@ The width of an outline which is drawn around an element, outside the border. Do --- -### `mixBlendMode` - -:::note -`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) -::: - -Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. - -For more granular control over what should be blending together see [isolation](layout-props#isolation). - -##### mixBlendMode Values - -- `normal`: The element is drawn on top of its background without blending. -- `multiply`: The source color is multiplied by the destination color and replaces the destination. -- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. -- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. -- `darken`: Selects the darker of the backdrop and source colors. -- `lighten`: Selects the lighter of the backdrop and source colors. -- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. -- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. -- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. -- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. -- `difference`: Subtracts the darker of the two constituent colors from the lighter color. -- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. -- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. -- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. -- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. -- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. - -| Type | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | - ---- - ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.80/view-style-props.md b/website/versioned_docs/version-0.80/view-style-props.md index 70e1cc46de9..9d2ac1d7f09 100644 --- a/website/versioned_docs/version-0.80/view-style-props.md +++ b/website/versioned_docs/version-0.80/view-style-props.md @@ -389,6 +389,41 @@ The following filter functions work on Android only: --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `opacity` | Type | @@ -453,41 +488,6 @@ The width of an outline which is drawn around an element, outside the border. Do --- -### `mixBlendMode` - -:::note -`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) -::: - -Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. - -For more granular control over what should be blending together see [isolation](layout-props#isolation). - -##### mixBlendMode Values - -- `normal`: The element is drawn on top of its background without blending. -- `multiply`: The source color is multiplied by the destination color and replaces the destination. -- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. -- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. -- `darken`: Selects the darker of the backdrop and source colors. -- `lighten`: Selects the lighter of the backdrop and source colors. -- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. -- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. -- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. -- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. -- `difference`: Subtracts the darker of the two constituent colors from the lighter color. -- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. -- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. -- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. -- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. -- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. - -| Type | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | - ---- - ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.81/view-style-props.md b/website/versioned_docs/version-0.81/view-style-props.md index 1cdafa3d6bb..6efa66da550 100644 --- a/website/versioned_docs/version-0.81/view-style-props.md +++ b/website/versioned_docs/version-0.81/view-style-props.md @@ -389,6 +389,41 @@ The following filter functions work on Android only: --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `opacity` | Type | @@ -453,41 +488,6 @@ The width of an outline which is drawn around an element, outside the border. Do --- -### `mixBlendMode` - -:::note -`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) -::: - -Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. - -For more granular control over what should be blending together see [isolation](layout-props#isolation). - -##### mixBlendMode Values - -- `normal`: The element is drawn on top of its background without blending. -- `multiply`: The source color is multiplied by the destination color and replaces the destination. -- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. -- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. -- `darken`: Selects the darker of the backdrop and source colors. -- `lighten`: Selects the lighter of the backdrop and source colors. -- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. -- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. -- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. -- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. -- `difference`: Subtracts the darker of the two constituent colors from the lighter color. -- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. -- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. -- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. -- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. -- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. - -| Type | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | - ---- - ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.82/view-style-props.md b/website/versioned_docs/version-0.82/view-style-props.md index 1cdafa3d6bb..6efa66da550 100644 --- a/website/versioned_docs/version-0.82/view-style-props.md +++ b/website/versioned_docs/version-0.82/view-style-props.md @@ -389,6 +389,41 @@ The following filter functions work on Android only: --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `opacity` | Type | @@ -453,41 +488,6 @@ The width of an outline which is drawn around an element, outside the border. Do --- -### `mixBlendMode` - -:::note -`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) -::: - -Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. - -For more granular control over what should be blending together see [isolation](layout-props#isolation). - -##### mixBlendMode Values - -- `normal`: The element is drawn on top of its background without blending. -- `multiply`: The source color is multiplied by the destination color and replaces the destination. -- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. -- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. -- `darken`: Selects the darker of the backdrop and source colors. -- `lighten`: Selects the lighter of the backdrop and source colors. -- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. -- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. -- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. -- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. -- `difference`: Subtracts the darker of the two constituent colors from the lighter color. -- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. -- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. -- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. -- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. -- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. - -| Type | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | - ---- - ### `pointerEvents` Controls whether the `View` can be the target of touch events. diff --git a/website/versioned_docs/version-0.83/view-style-props.md b/website/versioned_docs/version-0.83/view-style-props.md index 1cdafa3d6bb..6efa66da550 100644 --- a/website/versioned_docs/version-0.83/view-style-props.md +++ b/website/versioned_docs/version-0.83/view-style-props.md @@ -389,6 +389,41 @@ The following filter functions work on Android only: --- +### `mixBlendMode` + +:::note +`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) +::: + +Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. + +For more granular control over what should be blending together see [isolation](layout-props#isolation). + +##### mixBlendMode Values + +- `normal`: The element is drawn on top of its background without blending. +- `multiply`: The source color is multiplied by the destination color and replaces the destination. +- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. +- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. +- `darken`: Selects the darker of the backdrop and source colors. +- `lighten`: Selects the lighter of the backdrop and source colors. +- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. +- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. +- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. +- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. +- `difference`: Subtracts the darker of the two constituent colors from the lighter color. +- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. +- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. +- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. +- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. +- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. + +| Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | + +--- + ### `opacity` | Type | @@ -453,41 +488,6 @@ The width of an outline which is drawn around an element, outside the border. Do --- -### `mixBlendMode` - -:::note -`mixBlendMode` is only available on the [New Architecture](/architecture/landing-page) -::: - -Controls how the `View` blends its colors with the other elements in its **stacking context**. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for a full overview of each blending function. - -For more granular control over what should be blending together see [isolation](layout-props#isolation). - -##### mixBlendMode Values - -- `normal`: The element is drawn on top of its background without blending. -- `multiply`: The source color is multiplied by the destination color and replaces the destination. -- `screen`: Multiplies the complements of the backdrop and source color values, then complements the result. -- `overlay`: Multiplies or screens the colors, depending on the backdrop color value. -- `darken`: Selects the darker of the backdrop and source colors. -- `lighten`: Selects the lighter of the backdrop and source colors. -- `color-dodge`: Brightens the backdrop color to reflect the source color. Painting with black produces no changes. -- `color-burn`: Darkens the backdrop color to reflect the source color. Painting with white produces no change. -- `hard-light`: Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. -- `soft-light`: Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. -- `difference`: Subtracts the darker of the two constituent colors from the lighter color. -- `exclusion`: Produces an effect similar to that of the Difference mode but lower in contrast. -- `hue`: Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. -- `saturation`: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. -- `color`: Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. -- `luminosity`: Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. - -| Type | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`) | - ---- - ### `pointerEvents` Controls whether the `View` can be the target of touch events.