React Native Sliding Up Panel with a Map Backdrop

A map-linked bottom sheet with three snap points and a receding backdrop, with configurable locations, photos, accent colors, and fonts.

Why this one

Most snap-sheet examples treat the backdrop as static decoration. This version turns the map and sheet into one continuous composition: the map recenters at the middle anchor, shrinks and darkens at full height, and remains fully selectable. The place change also has narrative continuity—the sheet returns to peek before presenting the newly selected café.

How it works

1. The component measures its own container and derives all three sheet positions from its height: 18%, 50%, and 90% visible.
2. One continuous progress shared value drives the sheet translation, map offset, map scale, corner radius, dimming, and staged content entrances.
3. A vertical pan follows the finger, applies progressive rubber-band resistance beyond the endpoints, projects release velocity, and springs to the nearest anchor.
4. The map is rendered with Skia while accessible React Native marker buttons sit above it. Selecting a marker moves through peek before revealing the new place.
5. BlurTargetView and BlurView create a real cross-platform glass surface, with a translucent white fallback where platform blur is unavailable.

Icons: Lucide (ISC).

Install

npx expo install @shopify/react-native-skia expo-blur expo-image expo-linear-gradient react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

import SnapSheetBackdrop from './SnapSheetBackdrop';

export function PlacesScreen() {
  return (
    <SnapSheetBackdrop
      photos={[
        require('./assets/cafe-1.jpg'),
        require('./assets/cafe-2.jpg'),
        require('./assets/cafe-3.jpg'),
      ]}
    />
  );
}

Customize the content and control the sheet through its forwarded ref:

import { useRef } from 'react';
import SnapSheetBackdrop, {
  type SnapSheetBackdropRef,
} from './SnapSheetBackdrop';

export function PlacesScreen() {
  const sheetRef = useRef<SnapSheetBackdropRef>(null);

  return (
    <SnapSheetBackdrop
      ref={sheetRef}
      photos={cafePhotos}
      accentColors={['#FB923C', '#B91C1C']}
      heading="Coffee near you"
      onDirectionsPress={() => openDirections()}
      onLocationChange={(location) => trackSelection(location.id)}
    />
  );
}

The ref exposes snapTo(snap), next(), and selectLocation(index).

Props

Compatibility

• Expo SDK 58
• React Native 0.88
• Reanimated 4.7 and Worklets 0.13
• Skia 2.14
• iOS: supported
• Android: supported
• Web: supported
• Works in Expo Go because all native dependencies are included in the SDK

Accessibility

Markers and actions are labeled buttons with at least 44-point hit areas. The sheet exposes adjustable increment and decrement actions, while tapping the handle provides a non-gesture alternative. With Reduce Motion enabled, anchors crossfade into place without springs, rubber-band motion, map scaling, or marker pulsing.

Customization notes

Movement follows gestures, scroll position, or interruptible spring physics. A global duration is not exposed; reduced-motion fades retain their short fixed timing.