The Problem

Mobile apps often need to create a translucent “glass” effect to emphasize a foreground element while still showing a blurred background. Native APIs provide this, but bridging them to React Native is non‑trivial. This repository offers a thin, well‑typed wrapper that lets developers drop a blur view into their JSX without writing platform code.

What This Does

The library exposes three components: BlurView, GaussianBlurView, and ProgressiveBlurView.

  • src/components/BlurView/BlurView.tsx renders a <BlurView> that shows whatever is behind it, passing props such as intensity, tint, and cornerRadius.
  • src/components/GaussianBlurView/GaussianBlurView.tsx renders a blur that applies only to its children, matching SwiftUI’s .blur(radius:opaque:).
  • src/components/ProgressiveBlurView/ProgressiveBlurView.tsx renders a view that fades from a fully blurred edge to a transparent one.

Each component forwards its props to a native view defined in android/src/main/java/expo/modules/blurview/views/... or ios/Views/.... The native implementations use the public blur APIs on iOS (UIVisualEffectView) and Android (RenderScript/RenderEffect). The JavaScript layer lives in src/index.ts, which re‑exports the components and declares the module via expo-module.config.json.

How It Is Wired

Execution starts in React Native when a component is used in JSX.

  1. example/App.tsx imports BlurView from expo-backdrop.
  2. The import resolves to src/index.ts, which re‑exports the TS component.
  3. The TS component (src/components/BlurView/BlurView.tsx) calls requireNativeComponent('ExpoBlurView').
  4. expo-module.config.json tells the Expo bundler to link the native module named ExpoBlurView.
  5. On Android, the module is built by android/build.gradle and the Java/Kotlin code in android/src/main/java/expo/modules/blurview/....
  6. On iOS, the module is built by ios/BlurView.podspec and Swift code in ios/Views/....

The flow is linear: React → JS component → native bridge → platform API. The only external effect is rendering; no network or file I/O occurs. The most “blast‑radius” function is requireNativeComponent in the TS component, as it creates the bridge to the native layer. The native code contains the platform‑specific logic and has no external dependencies beyond the OS APIs.

How To Use It

Setup

# Install the module
bunx expo install expo-backdrop

# Add the native code to a development build
bunx expo prebuild

The README notes that a development build is required; Expo Go cannot render the native view.

Configuration No additional environment variables are needed. The native modules are configured via expo-module.config.json and the Gradle/Podspec files.

Running

# From the repo root
cd example
expo start

The example application starts from example/App.tsx. It demonstrates all three components and shows the blur in action.

Real‑World Use

A screen that highlights a modal dialog can blur the background:

import { BlurView } from 'expo-backdrop';

export default function MyScreen() {
  return (
    <View style={{ flex: 1 }}>
      <Image source={background} style={{ flex: 1 }} />
      <BlurView
        intensity={70}
        tint="systemThinMaterialDark"
        style={{
          ...StyleSheet.absoluteFillObject,
          borderRadius: 12,
        }}
      />
      <Modal visible={true} /* ... */ />
    </View>
  );
}

The blur layer appears beneath the modal, creating a natural focus effect.

Code Health & Issues

  • Medium/SDLC – No CI/CD pipeline detected (.github/ missing).
  • Low/Risk – Dependencies are declared in package.json and android/build.gradle but no lockfile exists.
  • Tests: 2 test files (example/tests/...) are present but no automated pipeline runs them.
  • No obvious linting or formatting issues; .prettierrc and eslint.config.cjs are included.

The Bottom Line

expo-backdrop delivers a minimal, well‑typed bridge to native blur APIs with a clear separation of concerns between JavaScript and native layers. It is ideal for developers building polished iOS/Android UIs who need a reusable glass effect without writing native code. The lack of CI and a lockfile means builds are not yet fully reproducible, so teams should add a CI pipeline and generate a lockfile before using it in production.