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:

| Prop | Default | Purpose | |