BottomSheet

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

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().

Source

components/ui/bottom-sheet.tsx

import React, { forwardRef, useCallback } from "react";
import { View } from "react-native";
import GorhomBottomSheet, {
  type BottomSheetProps as GorhomProps,
  BottomSheetBackdrop,
  BottomSheetView,
} from "@gorhom/bottom-sheet";
import { cn } from "@/lib/utils";

export interface BottomSheetProps extends Partial<GorhomProps> {
  className?: string;
  children: React.ReactNode;
  snapPoints?: (string | number)[];
}
export const BottomSheet = forwardRef<GorhomBottomSheet, BottomSheetProps>(
  ({ className, children, snapPoints = ["25%", "50%"], ...props }, ref) => {
    const renderBackdrop = useCallback(
      (backdropProps: React.ComponentProps<typeof BottomSheetBackdrop>) => (
        <BottomSheetBackdrop {...backdropProps} disappearsOnIndex={-1} appearsOnIndex={0} opacity={0.5} />
      ),
      []
    );
    return (
      <GorhomBottomSheet
        ref={ref}
        index={-1}
        snapPoints={snapPoints}
        enablePanDownToClose
        backdropComponent={renderBackdrop}
        backgroundStyle={{ backgroundColor: "hsl(0 0% 100%)" }}
        handleIndicatorStyle={{ backgroundColor: "hsl(240 3.8% 46.1%)" }}
        {...props}
      >
        <BottomSheetView>
          <View className={cn("p-4", className)}>{children}</View>
        </BottomSheetView>
      </GorhomBottomSheet>
    );
  }
);
BottomSheet.displayName = "BottomSheet";