Actionsheet

Quickly access options overlaying the app's content for efficient user actions.

Installation

API Reference

This is an illustration of Actionsheet component.

function App() {
  const [showActionsheet, setShowActionsheet] = React.useState(false)
  const handleClose = () => setShowActionsheet(false)
  return (
    <>
      <Button onPress={() => setShowActionsheet(true)}>
        <ButtonText>Open Actionsheet</ButtonText>
      </Button>
      <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
        <ActionsheetBackdrop />
        <ActionsheetContent>
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
          <ActionsheetItem onPress={handleClose}>
            <ActionsheetItemText>Edit Message</ActionsheetItemText>
          </ActionsheetItem>
          <ActionsheetItem onPress={handleClose}>
            <ActionsheetItemText>Mark Unread</ActionsheetItemText>
          </ActionsheetItem>
          <ActionsheetItem onPress={handleClose}>
            <ActionsheetItemText>Remind Me</ActionsheetItemText>
          </ActionsheetItem>
          <ActionsheetItem onPress={handleClose}>
            <ActionsheetItemText>Add to Saved Items</ActionsheetItemText>
          </ActionsheetItem>
          <ActionsheetItem isDisabled onPress={handleClose}>
            <ActionsheetItemText>Delete</ActionsheetItemText>
          </ActionsheetItem>
        </ActionsheetContent>
      </Actionsheet>
    </>
  )
}

Installation

CLI

Manual

Run the following command:

npx gluestack-ui add actionsheet

Step 1: Install the following dependencies:

npm i @gluestack-ui/actionsheet

Step 2: Copy and paste the following code into your project.

"use client"
import React, { useMemo } from "react"
import { H4 } from "@expo/html-elements"
import { Svg } from "react-native-svg"
import { createActionsheet } from "@gluestack-ui/actionsheet"
import {
  Pressable,
  View,
  Text,
  ScrollView,
  VirtualizedList,
  FlatList,
  SectionList,
  Platform,
  PressableProps,
} from "react-native"

import { tva } from "@gluestack-ui/nativewind-utils/tva"
import type { VariantProps } from "@gluestack-ui/nativewind-utils"
import { withStates } from "@gluestack-ui/nativewind-utils/withStates"
import { cssInterop } from "nativewind"
import {
  Motion,
  AnimatePresence,
  createMotionAnimatedComponent,
} from "@legendapp/motion"

type IPrimitiveIcon = {
  height?: number | string
  width?: number | string
  fill?: string
  color?: string
  size?: number | string
  stroke?: string
  as?: React.ElementType
  className?: string
  classNameColor?: string
}
const PrimitiveIcon = React.forwardRef<
  React.ElementRef<typeof Svg>,
  IPrimitiveIcon
>(
  (
    {
      height,
      width,
      fill,
      color,
      classNameColor,
      size,
      stroke = "currentColor",
      as: AsComp,
      ...props
    },
    ref
  ) => {
    color = color ?? classNameColor
    const sizeProps = useMemo(() => {
      if (size) return { size }
      if (height && width) return { height, width }
      if (height) return { height }
      if (width) return { width }
      return {}
    }, [size, height, width])

    let colorProps = {}
    if (fill) {
      colorProps = { ...colorProps, fill: fill }
    }
    if (stroke !== "currentColor") {
      colorProps = { ...colorProps, stroke: stroke }
    } else if (stroke === "currentColor" && color !== undefined) {
      colorProps = { ...colorProps, stroke: color }
    }

    if (AsComp) {
      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />
    }
    return (
      <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
    )
  }
)

const ItemWrapper = React.forwardRef<
  React.ElementRef<typeof Pressable>,
  PressableProps
>(({ ...props }, ref) => {
  return <Pressable {...props} ref={ref} />
})

const AnimatedPressable = createMotionAnimatedComponent(Pressable)

export const UIActionsheet = createActionsheet({
  Root: View,
  Content: Motion.View,
  Item: Platform.OS === "web" ? ItemWrapper : withStates(ItemWrapper),
  ItemText: Text,
  DragIndicator: View,
  IndicatorWrapper: View,
  Backdrop: AnimatedPressable,
  ScrollView: ScrollView,
  VirtualizedList: VirtualizedList,
  FlatList: FlatList,
  SectionList: SectionList,
  SectionHeaderText: H4,
  Icon: PrimitiveIcon,
  AnimatePresence: AnimatePresence,
})

cssInterop(UIActionsheet, { className: "style" })
cssInterop(UIActionsheet.Content, { className: "style" })
cssInterop(ItemWrapper, { className: "style" })
cssInterop(UIActionsheet.ItemText, { className: "style" })
cssInterop(UIActionsheet.DragIndicator, { className: "style" })
cssInterop(UIActionsheet.DragIndicatorWrapper, { className: "style" })
cssInterop(UIActionsheet.Backdrop, { className: "style" })
cssInterop(UIActionsheet.ScrollView, {
  className: "style",
  contentContainerClassName: "contentContainerStyle",
  indicatorClassName: "indicatorStyle",
})
cssInterop(UIActionsheet.VirtualizedList, {
  className: "style",
  ListFooterComponentClassName: "ListFooterComponentStyle",
  ListHeaderComponentClassName: "ListHeaderComponentStyle",
  contentContainerClassName: "contentContainerStyle",
  indicatorClassName: "indicatorStyle",
})
cssInterop(UIActionsheet.FlatList, {
  className: "style",
  ListFooterComponentClassName: "ListFooterComponentStyle",
  ListHeaderComponentClassName: "ListHeaderComponentStyle",
  columnWrapperClassName: "columnWrapperStyle",
  contentContainerClassName: "contentContainerStyle",
  indicatorClassName: "indicatorStyle",
})
cssInterop(UIActionsheet.SectionList, { className: "style" })
cssInterop(UIActionsheet.SectionHeaderText, { className: "style" })
// @ts-ignore
cssInterop(UIActionsheet.Icon, {
  className: {
    target: "style",
    nativeStyleToProp: {
      height: true,
      width: true,
      fill: true,
      color: "classNameColor",
      stroke: true,
    },
  },
})

const actionsheetStyle = tva({ base: "w-full h-full web:pointer-events-none" })

const actionsheetContentStyle = tva({
  base: "items-center rounded-tl-3xl rounded-tr-3xl p-5 pt-2 bg-background-0 web:pointer-events-auto web:select-none shadow-hard-5 border border-b-0 border-outline-100",
})

const actionsheetItemStyle = tva({
  base: "w-full flex-row items-center p-3 rounded-sm data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-auto data-[disabled=true]:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 data-[focus=true]:bg-background-100 web:data-[focus-visible=true]:bg-background-100 web:data-[focus-visible=true]:outline-indicator-primary gap-2",
})

const actionsheetItemTextStyle = tva({
  base: "text-typography-700 font-normal font-body",
  variants: {
    isTruncated: {
      true: "",
    },
    bold: {
      true: "font-bold",
    },
    underline: {
      true: "underline",
    },
    strikeThrough: {
      true: "line-through",
    },
    size: {
      "2xs": "text-2xs",
      xs: "text-xs",
      sm: "text-sm",
      md: "text-md",
      lg: "text-lg",
      xl: "text-xl",
      "2xl": "text-2xl",
      "3xl": "text-3xl",
      "4xl": "text-4xl",
      "5xl": "text-5xl",
      "6xl": "text-6xl",
    },
  },
})

const actionsheetDragIndicatorStyle = tva({
  base: "w-16 h-1 bg-background-400 rounded-full",
})

const actionsheetDragIndicatorWrapperStyle = tva({
  base: "w-full py-1 items-center",
})

const actionsheetBackdropStyle = tva({
  base: "absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto",
})

const actionsheetScrollViewStyle = tva({
  base: "w-full h-auto",
})

const actionsheetVirtualizedListStyle = tva({
  base: "w-full h-auto",
})

const actionsheetFlatListStyle = tva({
  base: "w-full h-auto",
})

const actionsheetSectionListStyle = tva({
  base: "w-full h-auto",
})

const actionsheetSectionHeaderTextStyle = tva({
  base: "leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase",
  variants: {
    isTruncated: {
      true: "",
    },
    bold: {
      true: "font-bold",
    },
    underline: {
      true: "underline",
    },
    strikeThrough: {
      true: "line-through",
    },
    size: {
      "5xl": "text-5xl",
      "4xl": "text-4xl",
      "3xl": "text-3xl",
      "2xl": "text-2xl",
      xl: "text-xl",
      lg: "text-lg",
      md: "text-md",
      sm: "text-sm",
      xs: "text-xs",
    },

    sub: {
      true: "text-xs",
    },
    italic: {
      true: "italic",
    },
    highlight: {
      true: "bg-yellow500",
    },
  },
  defaultVariants: {
    size: "xs",
  },
})

const actionsheetIconStyle = tva({
  base: "text-background-500 fill-none",
  variants: {
    size: {
      "2xs": "h-3 w-3",
      xs: "h-3.5 w-3.5",
      sm: "h-4 w-4",
      md: "w-[18px] h-[18px]",
      lg: "h-5 w-5",
      xl: "h-6 w-6",
    },
  },
})

type IActionsheetProps = VariantProps<typeof actionsheetStyle> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet>

type IActionsheetContentProps = VariantProps<typeof actionsheetContentStyle> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet.Content> & {
    className?: string
  }

type IActionsheetItemProps = VariantProps<typeof actionsheetItemStyle> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet.Item>

type IActionsheetItemTextProps = VariantProps<typeof actionsheetItemTextStyle> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet.ItemText>

type IActionsheetDragIndicatorProps = VariantProps<
  typeof actionsheetDragIndicatorStyle
> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet.DragIndicator>

type IActionsheetDragIndicatorWrapperProps = VariantProps<
  typeof actionsheetDragIndicatorWrapperStyle
> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet.DragIndicatorWrapper>

type IActionsheetBackdropProps = VariantProps<typeof actionsheetBackdropStyle> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet.Backdrop> & {
    className?: string
  }

type IActionsheetScrollViewProps = VariantProps<
  typeof actionsheetScrollViewStyle
> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet.ScrollView>

type IActionsheetVirtualizedListProps = VariantProps<
  typeof actionsheetVirtualizedListStyle
> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet.VirtualizedList>

type IActionsheetFlatListProps = VariantProps<typeof actionsheetFlatListStyle> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet.FlatList>

type IActionsheetSectionListProps = VariantProps<
  typeof actionsheetSectionListStyle
> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet.SectionList>

type IActionsheetSectionHeaderTextProps = VariantProps<
  typeof actionsheetSectionHeaderTextStyle
> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet.SectionHeaderText>

type IActionsheetIconProps = VariantProps<typeof actionsheetIconStyle> &
  React.ComponentPropsWithoutRef<typeof UIActionsheet.Icon> & {
    className?: string
    as?: React.ElementType
  }

const Actionsheet = React.forwardRef<
  React.ElementRef<typeof UIActionsheet>,
  IActionsheetProps
>(({ className, ...props }, ref) => {
  return (
    <UIActionsheet
      className={actionsheetStyle({
        class: className,
      })}
      ref={ref}
      {...props}
    />
  )
})

const ActionsheetContent = React.forwardRef<
  React.ElementRef<typeof UIActionsheet.Content>,
  IActionsheetContentProps
>(({ className, ...props }, ref) => {
  return (
    <UIActionsheet.Content
      className={actionsheetContentStyle({
        class: className,
      })}
      ref={ref}
      {...props}
    />
  )
})

const ActionsheetItem = React.forwardRef<
  React.ElementRef<typeof UIActionsheet.Item>,
  IActionsheetItemProps
>(({ className, ...props }, ref) => {
  return (
    <UIActionsheet.Item
      className={actionsheetItemStyle({
        class: className,
      })}
      ref={ref}
      {...props}
    />
  )
})

const ActionsheetItemText = React.forwardRef<
  React.ElementRef<typeof UIActionsheet.ItemText>,
  IActionsheetItemTextProps
>(
  (
    {
      isTruncated,
      bold,
      underline,
      strikeThrough,
      size = "sm",
      className,
      ...props
    },
    ref
  ) => {
    return (
      <UIActionsheet.ItemText
        className={actionsheetItemTextStyle({
          class: className,
          isTruncated,
          bold,
          underline,
          strikeThrough,
          size,
        })}
        ref={ref}
        {...props}
      />
    )
  }
)

const ActionsheetDragIndicator = React.forwardRef<
  React.ElementRef<typeof UIActionsheet.DragIndicator>,
  IActionsheetDragIndicatorProps
>(({ className, ...props }, ref) => {
  return (
    <UIActionsheet.DragIndicator
      className={actionsheetDragIndicatorStyle({
        class: className,
      })}
      ref={ref}
      {...props}
    />
  )
})

const ActionsheetDragIndicatorWrapper = React.forwardRef<
  React.ElementRef<typeof UIActionsheet.DragIndicatorWrapper>,
  IActionsheetDragIndicatorWrapperProps
>(({ className, ...props }, ref) => {
  return (
    <UIActionsheet.DragIndicatorWrapper
      className={actionsheetDragIndicatorWrapperStyle({
        class: className,
      })}
      ref={ref}
      {...props}
    />
  )
})

const ActionsheetBackdrop = React.forwardRef<
  React.ElementRef<typeof UIActionsheet.Backdrop>,
  IActionsheetBackdropProps
>(({ className, ...props }, ref) => {
  return (
    <UIActionsheet.Backdrop
      initial={{
        opacity: 0,
      }}
      animate={{
        opacity: 0.5,
      }}
      exit={{
        opacity: 0,
      }}
      {...props}
      className={actionsheetBackdropStyle({
        class: className,
      })}
      ref={ref}
    />
  )
})

const ActionsheetScrollView = React.forwardRef<
  React.ElementRef<typeof UIActionsheet.ScrollView>,
  IActionsheetScrollViewProps
>(({ className, ...props }, ref) => {
  return (
    <UIActionsheet.ScrollView
      className={actionsheetScrollViewStyle({
        class: className,
      })}
      ref={ref}
      {...props}
    />
  )
})

const ActionsheetVirtualizedList = React.forwardRef<
  React.ElementRef<typeof UIActionsheet.VirtualizedList>,
  IActionsheetVirtualizedListProps
>(({ className, ...props }, ref) => {
  return (
    <UIActionsheet.VirtualizedList
      className={actionsheetVirtualizedListStyle({
        class: className,
      })}
      ref={ref}
      {...props}
    />
  )
})

const ActionsheetFlatList = React.forwardRef<
  React.ElementRef<typeof UIActionsheet.FlatList>,
  IActionsheetFlatListProps
>(({ className, ...props }, ref) => {
  return (
    <UIActionsheet.FlatList
      className={actionsheetFlatListStyle({
        class: className,
      })}
      ref={ref}
      {...props}
    />
  )
})

const ActionsheetSectionList = React.forwardRef<
  React.ElementRef<typeof UIActionsheet.SectionList>,
  IActionsheetSectionListProps
>(({ className, ...props }, ref) => {
  return (
    <UIActionsheet.SectionList
      className={actionsheetSectionListStyle({
        class: className,
      })}
      ref={ref}
      {...props}
    />
  )
})

const ActionsheetSectionHeaderText = React.forwardRef<
  React.ElementRef<typeof UIActionsheet.SectionHeaderText>,
  IActionsheetSectionHeaderTextProps
>(
  (
    {
      className,
      isTruncated,
      bold,
      underline,
      strikeThrough,
      size,
      sub,
      italic,
      highlight,
      ...props
    },
    ref
  ) => {
    return (
      <UIActionsheet.SectionHeaderText
        className={actionsheetSectionHeaderTextStyle({
          class: className,
          isTruncated,
          bold,
          underline,
          strikeThrough,
          size,
          sub,
          italic,
          highlight,
        })}
        ref={ref}
        {...props}
      />
    )
  }
)

const ActionsheetIcon = React.forwardRef<
  React.ElementRef<typeof UIActionsheet.Icon>,
  IActionsheetIconProps
>(({ className, size = "sm", ...props }, ref) => {
  if (typeof size === "number") {
    return (
      <UIActionsheet.Icon
        ref={ref}
        {...props}
        className={actionsheetIconStyle({ class: className })}
        size={size}
      />
    )
  } else if (
    (props.height !== undefined || props.width !== undefined) &&
    size === undefined
  ) {
    return (
      <UIActionsheet.Icon
        ref={ref}
        {...props}
        className={actionsheetIconStyle({ class: className })}
      />
    )
  }
  return (
    <UIActionsheet.Icon
      className={actionsheetIconStyle({
        class: className,
        size,
      })}
      ref={ref}
      {...props}
    />
  )
})

export {
  Actionsheet,
  ActionsheetContent,
  ActionsheetItem,
  ActionsheetItemText,
  ActionsheetDragIndicator,
  ActionsheetDragIndicatorWrapper,
  ActionsheetBackdrop,
  ActionsheetScrollView,
  ActionsheetVirtualizedList,
  ActionsheetFlatList,
  ActionsheetSectionList,
  ActionsheetSectionHeaderText,
  ActionsheetIcon,
}

Step 3: Update the import paths to match your project setup.

API Reference

To use this component in your project, include the following import statement in your file.

import {
  Actionsheet,
  ActionsheetBackdrop,
  ActionsheetContent,
  ActionsheetDragIndicator,
  ActionsheetDragIndicatorWrapper,
  ActionsheetItem,
  ActionsheetItemText,
  ActionsheetIcon,
} from "@/components/ui/actionsheet"

export default () => (
  <Actionsheet>
    <ActionsheetBackdrop />
    <ActionsheetContent>
      <ActionsheetDragIndicatorWrapper>
        <ActionsheetDragIndicator />
      </ActionsheetDragIndicatorWrapper>
      <ActionsheetItem>
        <ActionsheetItemText />
      </ActionsheetItem>
    </ActionsheetContent>
  </Actionsheet>
)

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Actionsheet

It inherits all the properties of React Native's View component.

Prop	Type	Default	Description
isOpen	boolean	-	If true, the Actionsheet will open. Useful for controllable state behavior.
onClose	() => any	-	Callback invoked when the Actionsheet is closed.
onOpen	() => any	-	Callback invoked when the Actionsheet is opened.
useRNModal	boolean	false	If true, renders react-native native modal.
defaultIsOpen	boolean	-	Specifies the default open state of the Actionsheet
initialFocusRef	React.RefObject<any>	-	The ref of element to receive focus when the Actionsheet opens.
finalFocusRef	React.RefObject<any>	-	The ref of element to receive focus when the Actionsheet closes
closeOnOverlayClick	boolean	-	If true, the Actionsheet will close when the overlay is clicked.
isKeyboardDismissable	boolean	-	If true, the keyboard can dismiss the Actionsheet
trapFocus	boolean	true	If true, creates a focus scope containing all elements within the Actionsheet content.
children	any	-	The content to display inside the Actionsheet
snapPoints	Array<number>	[50]	The snap points for the Actionsheet The Actionsheet will snap to the point closest to its current position. The default value is 50% of the screen height. The value should be between 0 and 100. Currently, only one snap point is supported. We plan to support multiple snap points in the future.
preventScroll	boolean	true	If true, scroll will be prevented when the Actionsheet is open.

Important Note

Note: If snapPoints are not provided to Actionsheet, then it's essential to set maxHeight to ActionsheetContent.

ActionsheetBackdrop

It is React Native's Pressable component, created using @legendapp/motion's createMotionAnimatedComponent function to add animation to the component. You can use any declarative animation library you prefer.

ActionsheetContent

It inherits all the properties of @legendapp/motion's Motion.View component. With this Actionsheet component, you have the flexibility to use any declarative animation library that suits your needs.

ActionsheetDragIndicatorWrapper

It inherits all the properties of React Native's View component.

ActionsheetDragIndicator

It inherits all the properties of React Native's View component.

ActionsheetItem

It inherits all the properties of React Native's Pressable component.

ActionsheetItemText

It inherits all the properties of React Native's Text component.

ActionsheetIcon

It inherits all the properties of React Native's View component.

ActionsheetScrollView

It inherits all the properties of React Native's ScrollView component.

ActionsheetVirtualizedList

It inherits all the properties of React Native's VirtualizedList component.

ActionsheetFlatList

It inherits all the properties of React Native's FlatList component.

ActionsheetSectionList

It inherits all the properties of React Native's SectionList component.

ActionsheetSectionHeaderText

It inherits all the properties of React Native's Text component.

Important Note

Note: While our Actionsheet component supports both ActionsheetScrollView and ActionsheetVirtualizedList, we recommend using VirtualizedList for better performance on large lists of items. The ScrollView option may cause performance issues on lists with many items.

Features

Actionsheet has aria-modal set to true.
Actionsheet has role set to dialog.
When the Actionsheet opens, focus is trapped within it.
Pressing Esc closes the Actionsheet
Clicking on the overlay closes the Actionsheet
Scrolling is blocked on the elements behind the Actionsheet

Accessibility

We have outlined the various features that ensure the Actionsheet component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.

Keyboard

Tab + Enter: Triggers the actionsheet action.

VoiceOver: When the ActionSheet is focused, the screen reader will announce the button name. After entering the ActionSheet, it will read the content of the ActionSheet items.

Keyboard

Space: Opens the actionsheet.
Enter: Opens/closes the actionsheet.
Tab: Moves focus to the next focusable element.
Shift + Tab: Moves focus to the previous focusable element.
Esc: Closes the actionsheet.

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Keyboard handling

Demonstrates a common UI pattern known as keyboard handling or keyboard scrolling, in which an input field is automatically scrolled into view when the user taps on it and the keyboard appears. This improves usability and ensures that the input field is always visible and accessible, even when the keyboard is blocking part of the screen.

Without SnapPoints

function App() {
  const [showActionsheet, setShowActionsheet] = React.useState(false)
  const handleClose = () => setShowActionsheet(false)
  return (
    <>
      <Button onPress={() => setShowActionsheet(true)}>
        <ButtonText>Open</ButtonText>
      </Button>
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : undefined}
      >
        <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
          <ActionsheetBackdrop />
          <ActionsheetContent className="">
            <ActionsheetDragIndicatorWrapper>
              <ActionsheetDragIndicator />
            </ActionsheetDragIndicatorWrapper>
            <VStack className="w-full pt-5">
              <HStack space="md" className="justify-center items-center">
                <Box className="w-[50px] h-full px-2 border border-solid border-outline-300 rounded-sm">
                  <Image
                    source={{ uri: "https://i.imgur.com/UwTLr26.png" }}
                    resizeMode="contain"
                    className="flex-1"
                  />
                </Box>
                <VStack className="flex-1">
                  <Text className="font-bold">Mastercard</Text>
                  <Text>Card ending in 2345</Text>
                </VStack>
              </HStack>
              <FormControl className="mt-[36px]">
                <FormControlLabel>
                  <FormControlLabelText>
                    Confirm security code
                  </FormControlLabelText>
                </FormControlLabel>
                <Input className="w-full">
                  <InputSlot>
                    <InputIcon as={CreditCardIcon} className="ml-2" />
                  </InputSlot>
                  <InputField placeholder="CVC/CVV" />
                </Input>
                <Button onPress={handleClose} className="mt-3">
                  <ButtonText className="flex-1">Pay $1000</ButtonText>
                </Button>
              </FormControl>
            </VStack>
          </ActionsheetContent>
        </Actionsheet>
      </KeyboardAvoidingView>
    </>
  )
}

With SnapPoints

function App() {
  const [showActionsheet, setShowActionsheet] = React.useState(false)
  const handleClose = () => setShowActionsheet(false)
  return (
    <>
      <Button onPress={() => setShowActionsheet(true)}>
        <ButtonText>Open</ButtonText>
      </Button>
      <Actionsheet
        isOpen={showActionsheet}
        onClose={handleClose}
        snapPoints={[36]}
      >
        <KeyboardAvoidingView
          behavior="position"
          style={{
            position: "relative",
            flex: 1,
            justifyContent: "flex-end",
          }}
        >
          <ActionsheetBackdrop />
          <ActionsheetContent className="">
            <ActionsheetDragIndicatorWrapper>
              <ActionsheetDragIndicator />
            </ActionsheetDragIndicatorWrapper>
            <VStack className="w-full pt-5">
              <HStack space="md" className="justify-center items-center">
                <Box className="w-[50px] h-full px-2 border border-solid border-outline-300 rounded-sm">
                  <Image
                    source={{ uri: "https://i.imgur.com/UwTLr26.png" }}
                    resizeMode="contain"
                    className="flex-1"
                  />
                </Box>
                <VStack className="flex-1">
                  <Text className="font-bold">Mastercard</Text>
                  <Text>Card ending in 2345</Text>
                </VStack>
              </HStack>
              <FormControl className="mt-9">
                <FormControlLabel>
                  <FormControlLabelText>
                    Confirm security code
                  </FormControlLabelText>
                </FormControlLabel>
                <Input className="w-full">
                  <InputSlot>
                    <InputIcon as={CreditCardIcon} className="ml-2" />
                  </InputSlot>
                  <InputField placeholder="CVC/CVV" />
                </Input>
                <Button onPress={handleClose} className="mt-3">
                  <ButtonText className="flex-1">Pay $1000</ButtonText>
                </Button>
              </FormControl>
            </VStack>
          </ActionsheetContent>
        </KeyboardAvoidingView>
      </Actionsheet>
    </>
  )
}

Icons

The Actionsheet with Icons is a variation of the Actionsheet component that displays icons next to each option. It's commonly used in apps for a more visual representation of options and easier navigation.

function App() {
  const [showActionsheet, setShowActionsheet] = React.useState(false)
  const handleClose = () => setShowActionsheet(false)
  return (
    <>
      <Button onPress={() => setShowActionsheet(true)}>
        <ButtonText>Open</ButtonText>
      </Button>
      <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
        <ActionsheetBackdrop />
        <ActionsheetContent>
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
          <ActionsheetItem onPress={handleClose}>
            <ActionsheetIcon className="stroke-background-700" as={EditIcon} />
            <ActionsheetItemText>Edit Message</ActionsheetItemText>
          </ActionsheetItem>
          <ActionsheetItem onPress={handleClose}>
            <ActionsheetIcon
              className="stroke-background-700"
              as={EyeOffIcon}
            />
            <ActionsheetItemText>Mark Unread</ActionsheetItemText>
          </ActionsheetItem>
          <ActionsheetItem onPress={handleClose}>
            <ActionsheetIcon className="stroke-background-700" as={ClockIcon} />
            <ActionsheetItemText>Remind Me</ActionsheetItemText>
          </ActionsheetItem>
          <ActionsheetItem onPress={handleClose}>
            <ActionsheetIcon
              className="stroke-background-700"
              as={DownloadIcon}
            />
            <ActionsheetItemText>Add to Saved Items</ActionsheetItemText>
          </ActionsheetItem>
          <ActionsheetItem isDisabled onPress={handleClose}>
            <ActionsheetIcon className="stroke-background-700" as={TrashIcon} />
            <ActionsheetItemText>Delete</ActionsheetItemText>
          </ActionsheetItem>
        </ActionsheetContent>
      </Actionsheet>
    </>
  )
}

VirtualizedList

The Actionsheet with Virtualized List includes a virtualized list for better performance when displaying a large number of options. It's commonly used in apps with long lists of options for an improved user experience.

function App() {
  const [showActionsheet, setShowActionsheet] = React.useState(false)
  const handleClose = () => setShowActionsheet(false)
  const data = React.useMemo(
    () =>
      Array(50)
        .fill(0)
        .map((_, index) => "Item" + index),
    []
  )
  const getItem = (_data, index) => ({
    id: Math.random().toString(12).substring(0),
    title: _data[index],
  })
  const getItemCount = (_data) => _data.length
  const Item = React.useCallback(
    ({ title }) => (
      <ActionsheetItem onPress={handleClose}>
        <ActionsheetItemText>{title}</ActionsheetItemText>
      </ActionsheetItem>
    ),
    [handleClose]
  )
  return (
    <>
      <Button onPress={() => setShowActionsheet(true)}>
        <ButtonText>Open</ButtonText>
      </Button>
      <Actionsheet
        isOpen={showActionsheet}
        onClose={handleClose}
        snapPoints={[50]}
      >
        <ActionsheetBackdrop />
        <ActionsheetContent>
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
          <ActionsheetVirtualizedList
            h="$56"
            data={data}
            initialNumToRender={5}
            renderItem={({ item }) => <Item title={item.title} />}
            keyExtractor={(item) => item.id}
            getItemCount={getItemCount}
            getItem={getItem}
          />
        </ActionsheetContent>
      </Actionsheet>
    </>
  )
}

FlatList

The Actionsheet with Flat List is a variation of the Actionsheet component that displays a flat list of options. It's commonly used in apps for a simple and straightforward display of options to the user.

function App() {
  const [showActionsheet, setShowActionsheet] = React.useState(false)
  const handleClose = () => setShowActionsheet(false)
  const DATA = [
    {
      id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
      title: "First Item",
    },
    {
      id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
      title: "Second Item",
    },
    {
      id: "58694a0f-3da1-471f-bd96-145571e29d72",
      title: "Third Item",
    },
  ]
  const Item = React.useCallback(
    ({ title }) => (
      <ActionsheetItem onPress={handleClose}>
        <ActionsheetItemText>{title}</ActionsheetItemText>
      </ActionsheetItem>
    ),
    [handleClose]
  )
  return (
    <>
      <Button onPress={() => setShowActionsheet(true)}>
        <ButtonText>Open</ButtonText>
      </Button>
      <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
        <ActionsheetBackdrop />
        <ActionsheetContent>
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
          <ActionsheetFlatList
            data={DATA}
            renderItem={({ item }) => <Item title={item.title} />}
            keyExtractor={(item) => item.id}
          />
        </ActionsheetContent>
      </Actionsheet>
    </>
  )
}

SectionList

The Actionsheet with SectionList is a variation of the Actionsheet component that displays a sectioned list of options. It's commonly used in apps to organize options into different categories or sections for better readability and navigation.

function App() {
  const [showActionsheet, setShowActionsheet] = React.useState(false)
  const handleClose = () => setShowActionsheet(false)
  const DATA = [
    {
      title: "Gender",
      data: ["Men", "Women", "Boy", "Girl"],
    },
  ]
  return (
    <>
      <Button onPress={() => setShowActionsheet(true)}>
        <ButtonText>Open</ButtonText>
      </Button>
      <Actionsheet
        isOpen={showActionsheet}
        onClose={handleClose}
        snapPoints={[35]}
      >
        <ActionsheetBackdrop />
        <ActionsheetContent>
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
          <ActionsheetSectionList
            h="$56"
            sections={DATA}
            keyExtractor={(item, index) => item + index}
            renderItem={({ item }) => (
              <ActionsheetItem onPress={handleClose}>
                <ActionsheetItemText>{item}</ActionsheetItemText>
              </ActionsheetItem>
            )}
            renderSectionHeader={({ section: { title, data } }) => (
              <ActionsheetSectionHeaderText>
                {title} ({data.length})
              </ActionsheetSectionHeaderText>
            )}
          />
        </ActionsheetContent>
      </Actionsheet>
    </>
  )
}

File Upload with Actionsheet

function App() {
  const [showActionsheet, setShowActionsheet] = React.useState(false)
  const handleClose = () => setShowActionsheet(false)
  return (
    <>
      <Button onPress={() => setShowActionsheet(true)}>
        <ButtonText>Open</ButtonText>
      </Button>
      <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
        <ActionsheetBackdrop />
        <ActionsheetContent className="px-5">
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
          <HStack className="justify-between w-full mt-3">
            <VStack>
              <Heading size="md" className="font-semibold">
                Upload your latest resume
              </Heading>
              <Text size="sm">JPG, PDF, PNG supported</Text>
            </VStack>
            <Pressable onPress={handleClose}>
              <Icon
                as={CloseIcon}
                size="lg"
                className="stroke-background-500"
              />
            </Pressable>
          </HStack>
          <Box className="my-[18px] items-center justify-center rounded-xl bg-background-50 border border-dashed border-outline-300 h-[130px] w-full">
            <Icon
              as={UploadCloud}
              className="h-[62px] w-[62px] stroke-background-200"
            />
            <Text size="sm">No files uploaded yet</Text>
          </Box>
          <ButtonGroup className="w-full">
            <Button className="w-full" onPress={handleClose}>
              <ButtonText>Browse files</ButtonText>
            </Button>
            <Button
              className="w-full"
              variant="outline"
              isDisabled
              action="secondary"
            >
              <ButtonText>Upload</ButtonText>
            </Button>
          </ButtonGroup>
        </ActionsheetContent>
      </Actionsheet>
    </>
  )
}

Actionsheet

Installation

Run the following command:

Step 1: Install the following dependencies:

Step 2: Copy and paste the following code into your project.

Step 3: Update the import paths to match your project setup.

API Reference

Component Props

Actionsheet

ActionsheetBackdrop

ActionsheetContent

ActionsheetDragIndicatorWrapper

ActionsheetDragIndicator

ActionsheetItem

ActionsheetItemText

ActionsheetIcon

ActionsheetScrollView

ActionsheetVirtualizedList

ActionsheetFlatList

ActionsheetSectionList

ActionsheetSectionHeaderText

Features

Accessibility

Keyboard

Screen Reader

Keyboard

Examples

Keyboard handling

Icons

VirtualizedList

FlatList

SectionList

File Upload with Actionsheet