You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The `DropShadowValue` object is taken by the [`filter`](./view-style-props.md#filter) style prop for the `dropShadow` function. It is comprised of 2 or 3 lengths and an optional color. These values collectively define the drop shadow's color, position, and blurriness.
7
+
8
+
## Example
9
+
10
+
```js
11
+
{
12
+
offsetX:10,
13
+
offsetY:-3,
14
+
standardDeviation:'15px',
15
+
color:'blue',
16
+
}
17
+
```
18
+
19
+
## Keys and values
20
+
21
+
### `offsetX`
22
+
23
+
The offset on the x-axis. This can be positive or negative. A positive value indicates right and negative indicates left.
24
+
25
+
| Type | Optional |
26
+
| ---------------- | -------- |
27
+
| number \| string | No |
28
+
29
+
### `offsetY`
30
+
31
+
The offset on the y-axis. This can be positive or negative. A positive value indicates up and negative indicates down.
32
+
33
+
| Type | Optional |
34
+
| ---------------- | -------- |
35
+
| number \| string | No |
36
+
37
+
### `standardDeviation`
38
+
39
+
Represents the standard deviation used in the [Guassian blur](https://en.wikipedia.org/wiki/Gaussian_blur) algorithm. The larger the value the blurrier the shadow is. Only non-negative values are valid. The default is 0.
Copy file name to clipboardExpand all lines: docs/view-style-props.md
+38Lines changed: 38 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -309,6 +309,44 @@ Sets the elevation of a view, using Android's underlying [elevation API](https:/
309
309
310
310
---
311
311
312
+
### `filter`
313
+
314
+
Adds a graphical filter to the `View`. This filter is comprised of any number of _filter functions_, which each represent some atomic change to the graphical composition of the `View`. The complete list of valid filter functions is defined below. `filter` will apply to descendants of the `View` as well as the `View` itself. `filter` implies `overflow: hidden`, so descendants will be clipped to fit the bounds of the `View`.
315
+
316
+
The following filter functions work across all platforms:
317
+
318
+
-`brightness`: Changes the brightness of the `View`. Takes a non-negative number or percentage.
319
+
-`opacity`: Changes the opacity, or alpha, of the `View`. Takes a non-negative number or percentage.
320
+
321
+
:::note
322
+
Due to issues with performance and spec compliance, these are the only two filter functions available on iOS. There are plans to explore some potential workarounds using SwiftUI instead of UIKit for this implementation.
323
+
:::
324
+
325
+
<divclass="label basic android">Android</div>
326
+
327
+
The following filter functions work on Android only:
328
+
329
+
-`blur`: Blurs the `View` with a [Guassian blur](https://en.wikipedia.org/wiki/Gaussian_blur), where the specified length represents the radius used in the blurring algorithm. Any non-negative DIP value is valid (no percents). The larger the value, the blurrier the result.
330
+
-`contrast`: Changes the contrast of the `View`. Takes a non-negative number or percentage.
331
+
-`dropShadow`: Adds a shadow around the alpha mask of the `View` (only non-zero alpha pixels in the `View` will cast a shadow). Takes an optional color representing the shadow color, and 2 or 3 lengths. If 2 lengths are specified they are interperted as `offsetX` and `offsetY` which will translate the shadow in the X and Y dimensions respectfully. If a 3rd length is given it is interpreted as the standard deviation of the Guassian blur used on the shadow - so a larger value will blur the shadow more. Read more about the arguments in [DropShadowValue](./dropshadowvalue.md).
332
+
333
+
:::note
334
+
Outset shadows are only supported on **Android 9+**. Inset shadows are only supported on **Android 10+**.
335
+
:::
336
+
337
+
-`grayscale`: Converts the `View` to [grayscale](https://en.wikipedia.org/wiki/Grayscale) by the specified amount. Takes a non-negative number or percentage, where `1` or `100%` represents complete grayscale.
338
+
-`hueRotate`: Changes the [hue](https://en.wikipedia.org/wiki/Hue) of the View. The argument of this function defines the angle of a color wheel around which the hue will be rotated, so e.g., `360deg` would have no effect. This angle can have either `deg` or `rad` units.
339
+
-`invert`: Inverts the colors in the `View`. Takes a non-negative number or percentage, where `1` or `100%` represents complete inversion.
340
+
-`sepia`: Converts the `View` to [sepia](<https://en.wikipedia.org/wiki/Sepia_(color)>). Takes a non-negative number or percentage, where `1` or `100%` represents complete sepia.
341
+
-`saturate`: Changes the [saturation](https://en.wikipedia.org/wiki/Colorfulness) of the `View`. Takes a non-negative number or percentage.
342
+
343
+
`filter` takes either an array of objects comprising of the above filter functions or a string which mimics the [web syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/filter).
The `DropShadowValue` object is taken by the [`filter`](./view-style-props.md#filter) style prop for the `dropShadow` function. It is comprised of 2 or 3 lengths and an optional color. These values collectively define the drop shadow's color, position, and blurriness.
7
+
8
+
## Example
9
+
10
+
```js
11
+
{
12
+
offsetX:10,
13
+
offsetY:-3,
14
+
standardDeviation:'15px',
15
+
color:'blue',
16
+
}
17
+
```
18
+
19
+
## Keys and values
20
+
21
+
### `offsetX`
22
+
23
+
The offset on the x-axis. This can be positive or negative. A positive value indicates right and negative indicates left.
24
+
25
+
| Type | Optional |
26
+
| ---------------- | -------- |
27
+
| number \| string | No |
28
+
29
+
### `offsetY`
30
+
31
+
The offset on the y-axis. This can be positive or negative. A positive value indicates up and negative indicates down.
32
+
33
+
| Type | Optional |
34
+
| ---------------- | -------- |
35
+
| number \| string | No |
36
+
37
+
### `standardDeviation`
38
+
39
+
Represents the standard deviation used in the [Guassian blur](https://en.wikipedia.org/wiki/Gaussian_blur) algorithm. The larger the value the blurrier the shadow is. Only non-negative values are valid. The default is 0.
Copy file name to clipboardExpand all lines: website/versioned_docs/version-0.76/view-style-props.md
+38Lines changed: 38 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -309,6 +309,44 @@ Sets the elevation of a view, using Android's underlying [elevation API](https:/
309
309
310
310
---
311
311
312
+
### `filter`
313
+
314
+
Adds a graphical filter to the `View`. This filter is comprised of any number of _filter functions_, which each represent some atomic change to the graphical composition of the `View`. The complete list of valid filter functions is defined below. `filter` will apply to descendants of the `View` as well as the `View` itself. `filter` implies `overflow: hidden`, so descendants will be clipped to fit the bounds of the `View`.
315
+
316
+
The following filter functions work across all platforms:
317
+
318
+
-`brightness`: Changes the brightness of the `View`. Takes a non-negative number or percentage.
319
+
-`opacity`: Changes the opacity, or alpha, of the `View`. Takes a non-negative number or percentage.
320
+
321
+
:::note
322
+
Due to issues with performance and spec compliance, these are the only two filter functions available on iOS. There are plans to explore some potential workarounds using SwiftUI instead of UIKit for this implementation.
323
+
:::
324
+
325
+
<divclass="label basic android">Android</div>
326
+
327
+
The following filter functions work on Android only:
328
+
329
+
-`blur`: Blurs the `View` with a [Guassian blur](https://en.wikipedia.org/wiki/Gaussian_blur), where the specified length represents the radius used in the blurring algorithm. Any non-negative DIP value is valid (no percents). The larger the value, the blurrier the result.
330
+
-`contrast`: Changes the contrast of the `View`. Takes a non-negative number or percentage.
331
+
-`dropShadow`: Adds a shadow around the alpha mask of the `View` (only non-zero alpha pixels in the `View` will cast a shadow). Takes an optional color representing the shadow color, and 2 or 3 lengths. If 2 lengths are specified they are interperted as `offsetX` and `offsetY` which will translate the shadow in the X and Y dimensions respectfully. If a 3rd length is given it is interpreted as the standard deviation of the Guassian blur used on the shadow - so a larger value will blur the shadow more. Read more about the arguments in [DropShadowValue](./dropshadowvalue).
332
+
333
+
:::note
334
+
Outset shadows are only supported on **Android 9+**. Inset shadows are only supported on **Android 10+**.
335
+
:::
336
+
337
+
-`grayscale`: Converts the `View` to [grayscale](https://en.wikipedia.org/wiki/Grayscale) by the specified amount. Takes a non-negative number or percentage, where `1` or `100%` represents complete grayscale.
338
+
-`hueRotate`: Changes the [hue](https://en.wikipedia.org/wiki/Hue) of the View. The argument of this function defines the angle of a color wheel around which the hue will be rotated, so e.g., `360deg` would have no effect. This angle can have either `deg` or `rad` units.
339
+
-`invert`: Inverts the colors in the `View`. Takes a non-negative number or percentage, where `1` or `100%` represents complete inversion.
340
+
-`sepia`: Converts the `View` to [sepia](<https://en.wikipedia.org/wiki/Sepia_(color)>). Takes a non-negative number or percentage, where `1` or `100%` represents complete sepia.
341
+
-`saturate`: Changes the [saturation](https://en.wikipedia.org/wiki/Colorfulness) of the `View`. Takes a non-negative number or percentage.
342
+
343
+
`filter` takes either an array of objects comprising of the above filter functions or a string which mimics the [web syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/filter).
0 commit comments