BottomSheet

Bottom sheet overlay powered by @gorhom/bottom-sheet.

Web preview — components render natively on iOS & Android

import { BottomSheet } from "@/components/ui/bottom-sheet";
import { useRef } from "react";
import GorhomBottomSheet from "@gorhom/bottom-sheet";

export function MyScreen() {
  const sheetRef = useRef<GorhomBottomSheet>(null);
  return (
    <>
      <Button onPress={() => sheetRef.current?.expand()}>
        Open Sheet
      </Button>
      <BottomSheet ref={sheetRef} snapPoints={["25%", "50%"]}>
        <Text>Sheet content goes here</Text>
      </BottomSheet>
    </>
  );
}

Installation#

npx @aniui/cli add bottom-sheet

This component requires additional dependencies:

npx expo install @gorhom/bottom-sheet react-native-gesture-handler react-native-reanimated

You also need to wrap your app with GestureHandlerRootView from react-native-gesture-handler.

Usage#

app/index.tsx

import { BottomSheet } from "@/components/ui/bottom-sheet";
import { useRef } from "react";
import GorhomBottomSheet from "@gorhom/bottom-sheet";

export function MyScreen() {
  const sheetRef = useRef<GorhomBottomSheet>(null);
  return (
    <>
      <Button onPress={() => sheetRef.current?.expand()}>
        Open Sheet
      </Button>
      <BottomSheet ref={sheetRef} snapPoints={["25%", "50%"]}>
        <Text>Sheet content goes here</Text>
      </BottomSheet>
    </>
  );
}

Props#

PropTypeDefault

snapPoints

(string | number)[]

["25%", "50%"]

className

string

—

children

React.ReactNode

required

Also accepts all @gorhom/bottom-sheet props. Use a ref to control the sheet imperatively with expand(), close(), and snapToIndex().

Accessibility#

Powered by @gorhom/bottom-sheet with backdrop dismiss.
Sheet content is focusable and supports screen reader navigation.

Source#

components/ui/bottom-sheet.tsx

import React, { forwardRef, useCallback } from "react";
import { View, useColorScheme } from "react-native";
import {
  BottomSheetModal,
  BottomSheetBackdrop,
  BottomSheetView,
} from "@gorhom/bottom-sheet";
import { cn } from "@/lib/utils";

export interface BottomSheetProps {
  className?: string;
  children: React.ReactNode;
  snapPoints?: (string | number)[];
}

export const BottomSheet = forwardRef<BottomSheetModal, BottomSheetProps>(
  ({ className, children, snapPoints = ["25%", "50%"], ...props }, ref) => {
    const dark = useColorScheme() === "dark";
    const renderBackdrop = useCallback(
      (backdropProps: React.ComponentProps<typeof BottomSheetBackdrop>) => (
        <BottomSheetBackdrop {...backdropProps} disappearsOnIndex={-1} appearsOnIndex={0} opacity={0.5} />
      ),
      []
    );

    return (
      <BottomSheetModal
        ref={ref}
        snapPoints={snapPoints}
        enablePanDownToClose
        backdropComponent={renderBackdrop}
        backgroundStyle={{ backgroundColor: dark ? "#0a0a0a" : "#ffffff" }}
        handleIndicatorStyle={{ backgroundColor: dark ? "#52525b" : "#a1a1aa" }}
        {...props}
      >
        <BottomSheetView>
          <View className={cn("p-4", className)}>{children}</View>
        </BottomSheetView>
      </BottomSheetModal>
    );
  }
);

BottomSheet.displayName = "BottomSheet";

Previous← Alert Dialog NextDrawer →