Implementing missing CSS filters on iOS

[intergalacticspacehighway]

Introduction

React Native added support for CSS like filter property. It currently supports blur, contrast, dropShadow, grayscale, hueRotate, invert, sepia, saturate, brightness and opacity on Android. On iOS, it currently supports brightness and opacity.

Details

If we want to add additional filter support on iOS, there are two approaches that we can take.

1. CAFilter private API

Upsides

Easy to implement - facebook/react-native#52028

Downsides

• It is a private API. Although some frameworks are using it, there is always a risk of a breaking change or app rejection with a private API. Not worth adding to core imo. Someone can refer to this PR and build a library if needed.
• Since it is a private API, documentation is lacking, hard to guess which filter is supported. In my testing blur and grayscale worked fine. It might be supporting all the filters since iOS uses it under the hood for many public APIs, but hard to guess the API.

2. SwiftUI modifiers

SwiftUI has a public API for many filters. blur, grayscale, brightness, saturation, hueRotation, contrast, opacity are available. However, sepia, invert, dropShadow are missing. (they work, check below answers)

Upsides

• Public API, better documentation, no risk of rejection or breaking changes.
• Supports all the filters. We can have feature parity with android.

Downsides

Implementation is a bit complicated facebook/react-native#52495. Would be helpful to get more feedback on this PR. There are some high level ideas to make it simple, would be awesome to get more thoughts on that as well.

---

Besides these two, other approach that was investigated is CIFilter. It works on Images. It is not feasible for dynamic views.

Discussion points

• Feedback regarding the approach in feat(iOS) - blur filter using SwiftUI facebook/react-native#52495.
• Any alternate approaches or improvements we can think of.

cc - @NickGerleman @joevilches

[AndrewPrifer]

@intergalacticspacehighway I'm sure you already checked these SwiftUI APIs for shadow and invert, in what way are they not compliant with the invert and dropShadow spec?

colorEffect could also work to enable sepia through a shader (this should in theory cost nothing because as opposed to layerEffects, colorEffects don't sample the view as a texture so they can be applied in the same pass).

[intergalacticspacehighway]

I'm sure you already checked these SwiftUI APIs for shadow and invert,

i had checked shadow and found it is more like CSS's box shadow rather than dropShadow. (drop-shadow matches the edges of view)

A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image.

So we can create a dropShadow using colorEffect + blur in theory

and invert,

i didn't check colorInvert. Thanks, this should work for invert filter. It lacks amount control, it can invert the view though.

colorEffect could also work to enable sepia through a shader

I also missed this one. Great, so we have all the filters available using SwiftUI!

[AndrewPrifer]

i had checked shadow and found it is more like CSS's box shadow rather than dropShadow. (drop-shadow matches the edges of view)

That's weird, could you please post some code or screen cap for what you are seeing with .shadow()? It should be using the alpha mask of the view, just like drop shadow. It even stacks the same way, creating shadows of shadows because it's just looking at the alpha mask with previous filters applied.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .resizable()
                .frame(width: 100, height: 100)
                .foregroundColor(.yellow)
                .shadow(color: .blue, radius: 0, x: 20, y: 20)
                .shadow(color: .green, radius: 0, x: -40, y: 40)
        }
    }
}

[intergalacticspacehighway]

It does work @AndrewPrifer ! Thanks. Probably tested with a bad image last time 😅