u/jes_uon

I got curious about how SwiftUI’s numericText transition could feel on Android, so I tried recreating the behavior natively.

This is the result, same sequence running side by side on iOS and Android.

What started as a small experiment turned into react-native-numeric-text.

On iOS it uses the native numeric text transition. On Android, I recreated the behavior natively from scratch.

I learned a lot digging into how the transition behaves and figuring out how to reproduce that feel on Android.

It’s now open source:

GitHub: https://github.com/AmatoGiulio/react-native-numeric-text
NPM: https://www.npmjs.com/package/react-native-numeric-text

npm install react-native-numeric-text

I’ve just released react-native-edge-fade v0.2.0.

The main addition is a new blur mode for creating progressive scroll-edge blur natively on iOS and Android.

This is not a standard blur view with a gradient placed on top.

The perceived blur radius progressively increases across the edge band—from sharp content on the inside to the full blur radius at the outer edge—and the progression can be shaped using presets or a custom Bézier curve.

<EdgeFadeView
  mode="blur"
  top={120}
  bottom={160}
  blurRadius={24}
  curve="gentle"
  frostProgression={1}
>
  <ScrollView>
    {/* content */}
  </ScrollView>
</EdgeFadeView>

The video shows the example app I built to tune the effect in real time: blur radius, edge size, curve shape, progression, saturation, lift and frost tint.

Under the hood:

• iOS uses clipped, progressively masked UIVisualEffectView layers
• Android uses native RenderEffect blur passes and gradient masks
• the same props and progression semantics are shared across both platforms
• the expensive blur passes are restricted to the active edge bands
• heavier Android blur levels are rendered at half resolution
• custom curves can reshape the full sharp-to-blurred transition
• optional frost tint can be layered over the blur
• Fabric / New Architecture only
• no required dependencies beyond React and React Native
• Reanimated support remains optional

The library also still supports:

• true alpha-mask fades
• color overlay fades
• independent top, bottom, left and right edges
• logical start and end edges for RTL layouts
• preset curves, custom cubic Bézier curves and explicit stops
• AGSL rendering on Android 13+
• Web support for mask and overlay modes

Blur requires iOS 13+ or Android 12+. Older Android versions and Web gracefully fall back to the regular mask fade.

One implementation detail worth mentioning: progressive blur needs an opaque background behind the content. Transparent gaps can produce dark premultiplied-alpha fringes, so the wrapper or its content should have a solid background color.

I’d especially appreciate feedback on:

• the blur API
• consistency between iOS and Android
• performance on physical Android devices
• whether the curve editor makes the progression easier to understand

X post:
https://x.com/GiulioAmato/status/2078058876667084884

GitHub:
https://github.com/AmatoGiulio/react-native-edge-fade

npm:
https://www.npmjs.com/package/react-native-edge-fade

npm install react-native-edge-fade

I kept reimplementing edge fades by hand — MaskedView + stacked LinearGradients, native shaders, platform-specific clipping — just to fade the bottom of a list or hint at off-screen carousel items. And it still banded on Android.

So I packaged it properly: react-native-edge-fade.

<EdgeFadeView bottom={80}>
  <ScrollView />
</EdgeFadeView>

What it does:

- Two modes: mask (true alpha fade, reveals what's behind) and overlay (paints a color over content)

- Four edges, each with its own size / curve / color

- Per-pixel AGSL shaders on Android 13+ → no banding (LinearGradient fallback below)

- CALayer mask on iOS, composes with rounded/squircle corners

- Web via CSS mask

- Optional Reanimated integration for UI-thread animated fades (no re-renders)

- Fabric / New Architecture, zero required deps

Works in Expo too via a dev client / prebuild (it ships a native component, so not Expo Go).

Repo + docs: github.com/AmatoGiulio/react-native-edge-fade

npm i react-native-edge-fade

It's MIT and early (v0.0.1) — would genuinely appreciate feedback, edge cases, or API critiques. What would you expect from a library like this?