为什么值得关注

它完全使用公开的 Expo API 实现原生级别的可变背景模糊效果，可在 iOS 的 Expo Go 中运行，无需原生模块或数据库锁定，集成简单。

适合谁使用

希望无需原生模块即可获得原生质量模糊效果的 Expo 开发者
想要简单可复制的渐进式模糊组件的 React Native 开发者
需要实现滚动显示模糊标题栏或浮动标签栏的设计师

典型使用场景

添加滚动时逐渐显示模糊效果的透明标题栏
创建具有模糊背景的浮动标签栏或页脚
为任意边缘或方向实现自定义渐进式模糊覆盖层

项目优势

无需运行时包或设计系统锁定——组件直接复制到项目中
仅使用 JavaScript 和公开的 Expo API，支持 iOS、Android 和 Web
iOS 上支持 Expo Go，无需开发构建
具有精良的默认值，分离的 spill/falloff 参数可实现平滑过渡而不推挤内容

使用前须知

仅提供渐进式模糊组件，并非完整的组件库
Android 需要显式 BlurTargetView 和 Expo SDK 57+
Expo Go 支持仅限于 iOS（Android 可能需要开发构建才能完全使用）

README 快速开始

Beautiful Expo

Beautiful, copy-pasteable components for Expo and React Native.

Components live in your app after installation. There is no runtime beautiful-expo package and no design-system lock-in.

Progressive Blur

A JavaScript-only progressive backdrop blur built from public Expo APIs. It includes:

ProgressiveBlur for custom top or bottom effects
ProgressiveBlurHeader with safe-area and scroll-reveal support
ProgressiveBlurFooter for standard or floating bottom bars
hooks for the matching content insets and scroll handler

Install it directly from the GitHub registry:

npx shadcn@latest add davidmokos/beautiful-expo/progressive-blur

The command copies src/components/ui/progressive-blur.tsx into your project and installs its Expo-compatible JavaScript dependencies. It does not require Tailwind, NativeWind, Swift, or a development build. Expo Go is supported on iOS.

The important render-order rule

Render scrolling content first and the blur after it. Native BlurView needs to be mounted after dynamic content to sample that content correctly.

Scroll-aware header

This is the recommended setup for a transparent header that reveals its blur as content scrolls underneath:

import { Text, View } from 'react-native';
import Animated from 'react-native-reanimated';

import {
  ProgressiveBlurHeader,
  useProgressiveBlurHeaderHeight,
  useProgressiveBlurScroll,
} from '@/components/ui/progressive-blur';

export default function Screen() {
  const headerInset = useProgressiveBlurHeaderHeight();
  const { scrollY, onScroll } = useProgressiveBlurScroll();

  return (
    
      
        {/* Page content */}
      

      
        
          Account
        
      
    
  );
}

Without scrollY, the header blur stays visible at all times.

Floating footer or tab bar

floating uses the compact bottom-safe-area placement from the verified Revolut-style example:

import {
  ProgressiveBlurFooter,
  useProgressiveBlurFooterHeight,
} from '@/components/ui/progressive-blur';

const footerInset = useProgressiveBlurFooterHeight(58, true);


  {/* Page content */}



  
    {/* Tab bar content */}
  
;

Omit floating for a footer that sits directly above the bottom safe area.

Polished defaults

The header and footer share the values verified in the example app:

项目描述

Beautiful, copy-pasteable Expo components

beautiful-expo