beautiful-expo

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

★ 21 Open GitHub ↗

Beautiful, copy-pasteable Expo components

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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:

```sh
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:

```tsx
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 (
    <View style={{ flex: 1, backgroundColor: '#000000' }}>
      <Animated.ScrollView
        onScroll={onScroll}
        scrollEventThrottle={16}
        contentInsetAdjustmentBehavior="never"
        contentContainerStyle={{
          paddingTop: headerInset,
          paddingHorizontal: 20,
          paddingBottom: 120,
        }}>
        {/* Page content */}
      </Animated.ScrollView>

<ProgressiveBlurHeader
        scrollY={scrollY}
        tint="dark"
        contentStyle={{
          justifyContent: 'center',
          paddingHorizontal: 20,
        }}>
        <Text style={{ color: '#FFFFFF', fontSize: 20, fontWeight: '700' }}>
          Account
        </Text>
      </ProgressiveBlurHeader>
    </View>
  );
}
```

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:

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

const footerInset = useProgressiveBlurFooterHeight(58, true);

<ScrollView
  contentContainerStyle={{
    paddingBottom: footerInset + 16,
  }}>
  {/* Page content */}
</ScrollView>

<ProgressiveBlurFooter
  floating
  tint="dark"
  contentStyle={{ paddingHorizontal: 12 }}>
  <View
    style={{
      flex: 1,
      height: 58,
      borderRadius: 29,
      backgroundColor: 'rgba(20,20,22,0.82)',
    }}>
    {/* Tab bar content */}
  </View>
</ProgressiveBlurFooter>;
```

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 |
| --- | ---: | --- |
| `barHeight` | `58` | Visible header or footer height |
| `spill` | `16` | Blur footprint outside the bar |
| `falloff` | `64` | Full transition length, mostly behind the bar |
| `intensity` | `70` | Total native blur strength |
| `layers` | `6` | Number of softly masked native blur layers |
| `revealDistance` | `24` | Header scroll distance from transparent to visible |

`spill` and `falloff` are deliberately separate. Increasing `falloff` makes
the transition smoother without making the blur extend farther into the page.

Only the safe area plus `barHeight` belongs in the page content inset. The
spill and falloff overlay scrolling content; they should not push it away.

### Primitive

Use `ProgressiveBlur` for custom layouts:

```tsx
<ProgressiveBlur
  edge="bottom"
  height={108}
  fadeStart={44}
  intensity={70}
  layers={6}
  tint="dark"
  style={{ bottom: 0 }}
/>
```

`direction` remains as a backwards-compatible alias for `edge`.

### Tint and color

The default `systemUltraThinMaterial` adapts to light and dark mode. Use
`tint="dark"` on black interfaces. No solid color overlay is added unless
`overlayColors` is provided, so the resting page can exactly match its own
background.

### Android

Expo SDK 57 requires an explicit `BlurTargetView` for native Android blur.
Wrap the content behind the component in `BlurTargetView` and pass its ref as
`blurTarget`. The component selects `dimezisBlurViewSdk31Plus` by default when
a target is supplied.

## Requirements

- Expo SDK 57 was used for the verified example
- iOS, Android, or web
- Expo Go is supported on iOS

## How it works

The SwiftUI variable-blur technique commonly shared online uses a private Core
Animation filter. This component stays on public Expo APIs: it layers
low-intensity native `BlurView`s with overlapping, eased gradient masks. Every
mask reaches zero before the view edge, avoiding a clipped blur boundary while
approximating a continuous radius ramp.

`@expo/ui` does not currently expose variable backdrop blur, so `expo-blur` is
the native backdrop primitive. Native controls from `@expo/ui` can still be
rendered inside the header or footer.

## Registry development

Validate the registry before publishing:

```sh
npx shadcn@latest registry validate ./registry.json
```

The GitHub workflow validates every pull request and push to `main`.

## License

MIT

beautiful-expo

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README