Effects

Edge fades, backdrop blur, and masks that render natively on iOS and Android and with CSS on web

Three visual effects under One.UI, each drawn by the platform’s own graphics stack:

• EdgeFade fades content out toward one or more edges, the way a list dissolves under a header. It can fade to transparent, paint a color over the edge, or blur the content progressively.
• Blur blurs whatever is behind it, like a frosted toolbar, while its own children stay sharp.
• Mask shows its children only where another element is opaque, for gradient text or shaped images.

Usage

import { One } from 'one'

function Feed() {
  return (
    <One.UI.EdgeFade top={48} bottom={64} style={{ flex: 1 }}>
      <Posts />
    </One.UI.EdgeFade>
  )
}

Both edges fade to transparent along the default smooth curve, so whatever is behind the feed shows through.

How it works

EdgeFade picks one of three modes. mask fades the content’s alpha, overlay paints a color gradient over it, and blur blurs it more toward the edge. Without mode, it is overlay when any edge has a color and mask otherwise; blur must be asked for.

• Mask mode on iOS draws a grayscale gradient into a mask layer on the view; on Android it draws the children, then composites a cached alpha gradient shader over them per edge.
• Overlay mode needs no native code: it places absolute strips with React Native backgroundImage gradients over the children, with the curve sampled into color stops.
• Blur mode stacks three blurs of rising radius along each edge, so the blur grows toward the outside following the curve. On iOS each is a UIVisualEffectView clipped to its edge strip, so the interior costs nothing; on Android each is a RenderEffect blur of a recording of the children, on Android 12 and later.

Presets reach native code by name and use cached gradients there; a bezier or stop list is sampled in JavaScript and sent as alpha values. On web every mode is plain elements: mask and overlay use CSS gradients, and blur puts a backdrop-filter strip on each edge with its own gradient mask.

Blur on iOS is a UIVisualEffectView with the chosen material. UIKit has no blur intensity, so the component holds a paused animator at the intensity point, and rebuilds it when UIKit could have reset it: on return from the background and when entering a window. On Android 12 and later it records what is drawn behind the view and applies a Gaussian RenderEffect to that recording, then draws a tint over it; children draw on top, sharp. On web it is a CSS backdrop-filter blur of up to 20 pixels with a tinted veil.

Mask mounts maskElement as an invisible first child. On iOS its layer becomes the view’s layer mask, which Core Animation renders live. On Android the mask subtree is drawn into a reused bitmap, redrawn only when it changes, and applied as an alpha mask. On web the mask subtree is serialized with its computed styles into an SVG image used as a CSS mask-image.

API reference

BlurTint is light, dark, default, extraLight, regular, prominent, or one of the system materials systemUltraThinMaterial, systemThinMaterial, systemMaterial, systemThickMaterial, and systemChromeMaterial, each also with a Light or Dark suffix.

An edge takes true to use size, a number for its own depth, or an EdgeConfig. start and end follow the layout direction and win over left and right.

An EdgeFadeCurve is a preset (smooth, smoother, sharp, gentle, soft, linear), a cubic bezier, or a list of alpha stops from the inner edge to the outer edge.

One.UI.sampleCurve(curve) returns the inner to outer alpha values: 32 samples for a preset or bezier, rounded to four places, or the stop list clamped to 0 through 1. One.UI.serializeCurve(curve) returns a preset’s name, or the samples joined with commas.

Platform differences

Limits and gotchas

• Use radius, not borderRadius, on EdgeFade. The fade and the clip share radius; style.borderRadius is ignored, with a warning in development.
• Blur needs bounds. The blur fills the view behind its children, so give it a size or absolute position.
• Android 11 and earlier get no blur. Blur draws only its tint, and EdgeFade’s blur mode falls back to a mask fade.
• Blur mode ignores edge colors. In blur mode the component’s color is an optional frost veil, and each edge’s own color is ignored.
• The mask must cover the content. It is laid out to fill the view; anything outside the opaque parts of the mask is hidden. A maskElement that is not an element warns once and renders the children unmasked.
• iOS has no true variable blur. Blur mode blends three fixed blurs, since Apple’s variable radius filter is private.

Examples

import { ScrollView, Text, View } from 'react-native'
import { One } from 'one'

function Screen() {
  return (
    <View style={{ flex: 1 }}>
      <ScrollView contentContainerStyle={{ paddingTop: 96 }}>
        <Posts />
      </ScrollView>
      <One.UI.Blur
        tint="systemChromeMaterial"
        style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 96, justifyContent: 'flex-end', padding: 16 }}
      >
        <Text style={{ fontSize: 28, fontWeight: '700' }}>Feed</Text>
      </One.UI.Blur>
    </View>
  )
}

The list scrolls under the header and shows through it blurred, while the title stays sharp. The top padding keeps the first post clear of the header at rest.

import { ScrollView } from 'react-native'
import { One } from 'one'

function Chips() {
  return (
    <One.UI.EdgeFade end={{ size: 32, color: '#ffffff' }} style={{ height: 44 }}>
      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
        <ChipRow />
      </ScrollView>
    </One.UI.EdgeFade>
  )
}

A color makes this overlay mode, which paints white over the trailing edge. end flips to the left side in right to left layouts.

import { Text, View } from 'react-native'
import { One } from 'one'

function Title() {
  return (
    <One.UI.Mask maskElement={<Text style={{ fontSize: 40, fontWeight: '800' }}>One</Text>}>
      <View style={{ height: 48, width: 120, backgroundImage: 'linear-gradient(to right, #ff5f6d, #ffc371)' }} />
    </One.UI.Mask>
  )
}

The text is the mask, so the gradient view shows only inside the letters.

Credit

The ordinary iOS blur is adapted from react-native-blur by Ahmed Sbai. The EdgeFade native masks and blur are adapted from react-native-edge-fade by Giulio Amato.