Native Animation

Sign in Get all-access

Base Sheet animation preview

Base Sheet animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add base-sheet

Base Sheet

React Native Bottom Sheet Component

A bottom sheet with a 400 ms timing entry and drag dismissal, with configurable copy, content, footer, and theme.

Native Animation Base · Free · MIT

Read and download source

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this component

Related guides

React Native Sliding Up Panel: Bottom Sheet Snap Points

A bottom sheet with a 400 ms timing entry and drag dismissal, with configurable copy, content, footer, and theme.

How it works

It renders in a Modal: a 50% black overlay fades in over 400 ms while the panel rises over 400 ms using withTiming and the drawer curve (0.34, 1.2, 0.64, 1), with a little overshoot.
The panel has a drawer anatomy: top border, 100 × 8 handle, centered title and description, content, and stacked footer actions.
Dragging down follows the finger (dragging up resists); release past 25% of its height or fast enough to dismiss in 200 ms, otherwise it settles back.
Closing slides it out in 160 ms and unmounts it only when the exit finishes. Tapping the overlay closes it. Dragging during entry and reopening during exit continue from the current position.

Install

npx nativeanimation add base-sheet

The CLI also copies base-theme. Dependencies, if you copy by hand:

npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

import { BaseSheet } from './base-sheet';

<BaseSheet
  visible={open}
  onVisibleChange={setOpen}
  title="New project"
  description="Give it a name your team will recognize."
  bottomInset={insets.bottom}
  footer={<BaseButton fullWidth onPress={create}>Create project</BaseButton>}
>
  <BaseInput label="Project name" value={name} onChangeText={setName} />
</BaseSheet>

Wrap your app in BaseThemeProvider (from base-theme) to choose light/dark and an accent; without it, pieces use the light neutral theme. Every piece also takes a theme prop that wins over the provider.

Props

Prop	Type	Default	Description
`visible`	`boolean`	—	Open state (controlled).
`defaultVisible`	`boolean`	`false`	Initial state (uncontrolled).
`onVisibleChange`	`(visible: boolean) => void`	—	Called when it closes by drag, overlay tap or back button.
`title` / `description`	`string`	—	Header text.
`children`	`ReactNode`	—	Body content.
`footer`	`ReactNode`	—	Actions, stacked full width.
`bottomInset`	`number`	`0`	Safe-area bottom inset from the host (`useSafeAreaInsets().bottom`).
`closeLabel`	`string`	`'Close'`	Screen reader name of the overlay.
`theme`	`BaseTheme`	provider	Overrides the theme from `BaseThemeProvider`.
`testID`	`string`	—	Test identifier on the root view.

Compatibility

Expo SDK 58 · React Native 0.88 · Reanimated 4.7 · react-native-worklets 0.13. Runs on iOS, Android and web, in Expo Go and in development builds. Part of Native Animation Base, a free family that shares one theme: install base-theme once (the CLI does it for you) and every Base piece picks it up.

Accessibility

The panel is marked as modal for screen readers, the overlay is a labeled close button and the Android back button closes it. With Reduce Motion on, it appears and closes without sliding.

Part of a shared foundation

Use it in a screen

Compose Base Sheet with other Base components and a single shared theme. Ask your agent to read each API, then connect real navigation, state, and callbacks.

Build a habit tracker Build with an agent CLI and manual installation Theme and dark mode Accessibility checklist Native Animation Base UI library

Go further.

Base covers the everyday. Choose a more expressive interaction when your app calls for it.

Another way to solve this task · $9

Stacked Category Cards ↗

A category stack whose tabs unfold into detail cards, with configurable categories, title, colors, and fonts.

Another way to solve this task · $9

Review Approval Card ↗

A moderation queue with swipe-to-approve or decline feedback, with configurable reviews, labels, colors, and fonts.

Source code

Loading public source…

Dependencies

Package	Version
react-native-gesture-handler	~3.3.0
react-native-reanimated	4.7.1
react-native-worklets	0.13.0

Compatibility

SDK	Status	Revision	Last revision	Platforms	Dependencies
Expo SDK 58	Tested	1	10/27/2026	iOS, Web, Android	react-native-gesture-handler ~3.3.0, react-native-reanimated 4.7.1, react-native-worklets 0.13.0
Expo SDK 57	Tested	1	10/27/2026	iOS, Web, Android	react-native-gesture-handler ~2.32.0, react-native-reanimated 4.5.1, react-native-worklets 0.10.1

Scroll the table horizontally to review every column ↔

More animations

BaseSheet.tsx

import {
  useBaseReducedMotion,
  timing,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, { useEffect, useId, useState } from 'react';
import {
  Modal,
  Pressable,
  Text,
  View,
  useWindowDimensions,
} from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  cancelAnimation,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import { scheduleOnRN } from 'react-native-worklets';

export type BaseSheetProps = {
  visible?: boolean;
  defaultVisible?: boolean;
  onVisibleChange?: (visible: boolean) => void;
  title?: string;
  description?: string;
  children?: React.ReactNode;
  /** Actions, stacked full width. */
  footer?: React.ReactNode;
  /** Safe-area bottom inset from the host (useSafeAreaInsets().bottom). */
  bottomInset?: number;
  /** Accessibility label for the backdrop that closes the sheet. */
  closeLabel?: string;
  theme?: BaseTheme;
  testID?: string;
};

export function BaseSheet({
  visible: controlled,
  defaultVisible = false,
  onVisibleChange,
  title,
  description,
  children,
  footer,
  bottomInset = 0,
  closeLabel = 'Close',
  theme: override,
  testID,
}: BaseSheetProps) {
  const theme = useBaseTheme(override);
  const { colors } = theme;
  const reduced = useBaseReducedMotion();
  const { height: screenHeight } = useWindowDimensions();
  const [internal, setInternal] = useState(defaultVisible);
  const visible = controlled ?? internal;
  // Stays mounted while the exit animation runs.
  const [mounted, setMounted] = useState(visible);

  // Mount as soon as it opens (adjusting state during render, not in an effect).
  if (visible && !mounted) setMounted(true);

  const offset = useSharedValue(screenHeight);
  const shade = useSharedValue(0);
  const panelHeight = useSharedValue(screenHeight);
  const titleId = useId();
  const descriptionId = useId();
  const dragOrigin = useSharedValue(0);
  const dragTranslation = useSharedValue(0);
  const dragging = useSharedValue(false);
  const dismissing = useSharedValue(false);

  useEffect(() => {
    let current = true;
    const finishExit = () => {
      // A completed exit may already be queued on JS when the host reopens.
      if (current) setMounted(false);
    };
    if (visible) {
      dismissing.set(false);
      offset.set(withTiming(0, timing(theme, 'drawer', reduced)));
      shade.set(withTiming(1, timing(theme, 'overlay', reduced)));
    } else if (mounted) {
      shade.set(withTiming(0, timing(theme, 'fade', reduced)));
      offset.set(
        withTiming(
          panelHeight.get(),
          timing(theme, dismissing.get() ? 'dismiss' : 'drawerOut', reduced),
          (finished) => {
            if (finished) scheduleOnRN(finishExit);
          },
        ),
      );
    }
    return () => {
      current = false;
    };
  }, [
    visible,
    mounted,
    reduced,
    theme,
    offset,
    shade,
    panelHeight,
    dismissing,
  ]);

  const close = () => {
    if (controlled === undefined) setInternal(false);
    onVisibleChange?.(false);
  };

  const dismiss = Gesture.Pan()
    .activeOffsetY(8)
    .onStart((event) => {
      cancelAnimation(offset);
      dragOrigin.set(offset.get());
      dragTranslation.set(event.translationY);
      dragging.set(true);
    })
    .onUpdate((event) => {
      const delta = event.translationY - dragTranslation.get();
      // Anchor to the interrupted position, including the activation threshold.
      offset.set(dragOrigin.get() + (delta > 0 ? delta : delta / 6));
    })
    .onEnd((event) => {
      dragging.set(false);
      if (
        event.translationY - dragTranslation.get() > panelHeight.get() * 0.25 ||
        event.velocityY > 500
      ) {
        dismissing.set(true);
        scheduleOnRN(close);
      } else {
        offset.set(withTiming(0, timing(theme, 'drawer', reduced)));
      }
    })
    .onFinalize(() => {
      if (dragging.get()) {
        dragging.set(false);
        offset.set(withTiming(0, timing(theme, 'drawer', reduced)));
      }
    });

  const panelStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: offset.get() }],
  }));
  const shadeStyle = useAnimatedStyle(() => ({ opacity: shade.get() }));

  if (!mounted) return null;

  return (
    <Modal
      transparent
      visible
      animationType="none"
      onRequestClose={close}
      statusBarTranslucent
    >
      <GestureHandlerRootView style={{ flex: 1, justifyContent: 'flex-end' }}>
        <Animated.View
          style={[
            {
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              backgroundColor: colors.overlay,
            },
            shadeStyle,
          ]}
        >
          <Pressable
            style={{ flex: 1 }}
            onPress={close}
            accessibilityRole="button"
            accessibilityLabel={closeLabel}
          />
        </Animated.View>
        <GestureDetector gesture={dismiss}>
          <Animated.View
            testID={testID}
            role="dialog"
            accessibilityViewIsModal
            aria-modal
            accessibilityLabel={title}
            aria-labelledby={title ? titleId : undefined}
            aria-describedby={description ? descriptionId : undefined}
            onLayout={(e) => panelHeight.set(e.nativeEvent.layout.height)}
            style={[
              {
                maxHeight: screenHeight * 0.8,
                backgroundColor: colors.background,
                borderTopLeftRadius: theme.radius.lg,
                borderTopRightRadius: theme.radius.lg,
                borderTopWidth: 1,
                borderColor: colors.border,
                paddingBottom: bottomInset,
              },
              panelStyle,
            ]}
          >
            <View
              style={{
                alignSelf: 'center',
                marginTop: 16,
                width: 100,
                height: 8,
                borderRadius: theme.radius.full,
                backgroundColor: colors.muted,
              }}
            />
            {title || description ? (
              <View style={{ padding: 16, gap: 2, alignItems: 'center' }}>
                {title ? (
                  <Text
                    nativeID={titleId}
                    accessibilityRole="header"
                    style={{
                      fontFamily: theme.fonts.semibold,
                      fontSize: 16,
                      lineHeight: 24,
                      color: colors.foreground,
                    }}
                  >
                    {title}
                  </Text>
                ) : null}
                {description ? (
                  <Text
                    nativeID={descriptionId}
                    style={{
                      fontFamily: theme.fonts.regular,
                      fontSize: 14,
                      lineHeight: 20,
                      color: colors.mutedForeground,
                      textAlign: 'center',
                    }}
                  >
                    {description}
                  </Text>
                ) : null}
              </View>
            ) : null}
            {children ? (
              <View style={{ paddingHorizontal: 16 }}>{children}</View>
            ) : null}
            {footer ? (
              <View style={{ padding: 16, gap: 8 }}>{footer}</View>
            ) : null}
          </Animated.View>
        </GestureDetector>
      </GestureHandlerRootView>
    </Modal>
  );
}

LICENSE

MIT License

Copyright (c) 2026 Native Animation

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

nativeanimation.manifest.json

{
  "schemaVersion": 1,
  "id": "base-sheet",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme"
  ],
  "dependencies": {
    "react-native-gesture-handler": "~3.3.0",
    "react-native-reanimated": "4.7.1",
    "react-native-worklets": "0.13.0"
  }
}