facebook
Implement brightness and opacity using blend modes
Summary: Most filters are not going to work on iOS. It is a long story but essentially there is not a good way to continuously get a snapshot of the view and its descendants to filter.
We can, however, implement brightness using compositingFilter and blend mode. This is really not documented at all, but if you assign a string representing the blend mode to the compositingFilter property on CALayer, it will actually work. The filter we use is multiplyBlendMode. As the title suggests this just multiplies the two layers. We can apply this to a _filterLayer and set its background color to the brightness amount to get the desired results. Most other color filters either operate on the color components dependently (e.g. new red component depends the value in blue and green), or they have addition operations. We can do addition with linearDodgeBlendMode, but the order of operations does not work (we multiply, clamp, then add vs. multiply, add, then clamp).
opacity is just a multiplier on the CALayer opacity property.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D56447175
| Platform | Engine | Arch | Size (bytes) | Diff |
|---|---|---|---|---|
| android | hermes | arm64-v8a | 19,495,338 | +84 |
| android | hermes | armeabi-v7a | n/a | -- |
| android | hermes | x86 | n/a | -- |
| android | hermes | x86_64 | n/a | -- |
| android | jsc | arm64-v8a | 22,867,635 | +88 |
| android | jsc | armeabi-v7a | n/a | -- |
| android | jsc | x86 | n/a | -- |
| android | jsc | x86_64 | n/a | -- |
Base commit: be09d12667044f237f08af410b2838062eb8e657 Branch: main
This pull request has been merged in facebook/react-native@c27f2ab747ac349c64e85dae38a4d6ee1114255c.