Implement brightness and opacity using blend modes

[joevilches]

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

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D56447175

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D56447175

[analysis-bot]

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

[facebook-github-bot]

This pull request has been merged in facebook/react-native@c27f2ab747ac349c64e85dae38a4d6ee1114255c.