Blend modes seem configured differently on iOS and Android

[wcandillon]

And Android and RN web, blend modes behave the same (as expected except for some blend modes: #5)

https://skia.org/docs/user/api/skblendmode_overview/

On iOS, only a few blend modes are working (blend mode test is in #5).

[wcandillon]

One thing I tried is to set the blendmode directly (to make sure that this is not an issue with the JSI API):

   getObject()->setBlendMode(SkBlendMode::kMultiply);

This produces the same result on iOS. To be investigated further.

[wcandillon]

This is the test code I am running in C++ directly:

canvas->clear(SK_ColorTRANSPARENT);
SkPaint paint;
paint.setBlendMode(SkBlendMode::kMultiply);
auto width = 256 * _context->getPixelDensity();
auto height = 256 * _context->getPixelDensity();
auto r = 128 * _context->getPixelDensity();
SkPaint cyan(paint);
cyan.setColor(SK_ColorCYAN);
canvas->drawCircle(r, r, r, cyan);
// Magenta Circle
SkPaint magenta(paint);
magenta.setColor(SK_ColorMAGENTA);
canvas->drawCircle(width - r, r, r, magenta);
// Yellow Circle
SkPaint yellow(paint);
yellow.setColor(SK_ColorYELLOW);
canvas->drawCircle(width/2, height - r, r, magenta);
canvas->drawCircle(0, 0, r, yellow);
canvas->flush();

The example looks quite strange on iOS, changing the blendmode does changes the color, not sure if it's an issue with the porterduff mode.
Another lead we had was to try to change the settings on Android to try to reproduce the same result on Android as well but I was not able to.
One thing that seems to work well is the porterduff mode. For instance paint.setBlendMode(SkBlendMode::kDstOver); would work as expected.

[wcandillon]

Here's the gist of the example above: https://gist.github.com/wcandillon/98c254161b78f274f224a0c8fa6df561

[chrfalch]

Android:

[chrfalch]

iOS Simulator:

iOS Device (iPhone 12):

[chrfalch]

https://fiddle.skia.org/c/727048e8b0ca835a25e4956138ec391e

[chrfalch]

Link to discussion about blend modes on Skia Discuss: https://groups.google.com/g/skia-discuss/c/3qKDPB7jb-0/m/PBcMf_ImBgAJ

[wcandillon]

When looking at the multiply blendmode, there is a difference between the simulator (where the color is multiplied by magenta #ff00ff no matter what) and on the physical device where the color is multiplied by black no matter what.

This seems to be consistent with the image filter blending issue which is magenta on simulator and transparent on the physical device.

[wcandillon]

Here is a "pure ios" example of the issue: https://github.com/Shopify/react-native-skia/blob/blendmode-bug/package/ios/RNSkia-iOS/RNSkDrawViewImpl.mm#L73