+ <>
-
+
- Delete
-
-
- Share
+ Edit Message
- Play
+ Mark Unread
- Favourite
+ Remind Me
- Cancel
+ Add to Saved Items
+
+
+ Delete
-
+
);
};
diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx
index 34143ddcc..b5cf7a0ef 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx
@@ -28,6 +28,7 @@ import {
ActionsheetFlatList,
ActionsheetSectionList,
ActionsheetSectionHeaderText,
+ ButtonGroup,
Button,
ButtonText,
VStack,
@@ -43,13 +44,16 @@ import {
HStack,
Image,
Text,
+ Heading,
Box,
Icon,
TrashIcon,
- ShareIcon,
- PlayIcon,
- FavouriteIcon,
+ EyeOffIcon,
+ ClockIcon,
+ DownloadIcon,
+ EditIcon,
CloseIcon,
+ Pressable
} from '../../core-components/nativewind';
import {
CollapsibleCode,
@@ -58,13 +62,10 @@ import {
Table,
TableContainer,
InlineCode,
- AddIcon,
- InfoIcon,
- Alert,
Tabs
} from '@gluestack/design-system';
import { Platform, KeyboardAvoidingView, } from 'react-native';
-import { CreditCardIcon } from 'lucide-react-native';
+import { CreditCardIcon, UploadCloud, Send, Percent, DollarSign } from 'lucide-react-native';
import { transformedCode } from '../../utils';
import Wrapper from '../../core-components/nativewind/Wrapper';
@@ -76,41 +77,41 @@ This is an illustration of **Actionsheet** component.
showArgsController={false}
metaData={{
code: `
-function App(){
- const [showActionsheet, setShowActionsheet] = React.useState(false);
- const handleClose = () => setShowActionsheet(!showActionsheet);
- return (
-
-
-
-
-
-
-
-
-
- Delete
-
-
- Share
-
-
- Play
-
-
- Favourite
-
-
- Cancel
-
-
-
-
- );
-}
-`,
+ function App(){
+ const [showActionsheet, setShowActionsheet] = React.useState(false);
+ const handleClose = () => setShowActionsheet(!showActionsheet);
+ return (
+ <>
+
+
+
+
+
+
+
+
+ Edit Message
+
+
+ Mark Unread
+
+
+ Remind Me
+
+
+ Add to Saved Items
+
+
+ Delete
+
+
+
+
+ );
+ }
+ `,
transformCode: (code) => {
return transformedCode(code, 'function', 'App');
},
@@ -125,7 +126,6 @@ function App(){
ActionsheetItem,
ActionsheetItemText,
Wrapper,
- Box,
},
}}
/>
@@ -509,7 +509,15 @@ We have outlined the various features that ensure the Actionsheet component is a
### Screen Reader
-- VoiceOver: When the actionsheet is focused, the screen reader will announce the button group .
+- 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
@@ -531,60 +539,60 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
const [showActionsheet, setShowActionsheet] = React.useState(false);
const handleClose = () => setShowActionsheet(!showActionsheet);
return (
- <>
+ <>
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mastercard
- Card ending in 2345
-
-
-
-
-
- Confirm security code
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Mastercard
+ Card ending in 2345
+
+
+
+
+
+ Confirm security code
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
-`,
+ `,
transformCode: (code) => {
return transformedCode(code, 'function', 'App');
},
@@ -633,68 +641,68 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
const [showActionsheet, setShowActionsheet] = React.useState(false);
const handleClose = () => setShowActionsheet(!showActionsheet);
return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mastercard
- Card ending in 2345
-
-
-
-
-
- Confirm security code
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);}
-`,
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Mastercard
+ Card ending in 2345
+
+
+
+
+
+ Confirm security code
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+ `,
transformCode: (code) => {
return transformedCode(code, 'function', 'App');
},
@@ -745,52 +753,42 @@ The Actionsheet with Icons is a variation of the Actionsheet component that disp
const [showActionsheet, setShowActionsheet] = React.useState(false);
const handleClose = () => setShowActionsheet(!showActionsheet);
return (
- <>
+ <>
-
+
-
-
-
- Delete
+
+ Edit Message
-
-
-
- Share
+
+ Mark Unread
-
-
-
- Play
+
+ Remind Me
-
-
-
- Favourite
+
+ Add to Saved Items
-
-
-
-
- Cancel
+
+
+ Delete
-
-
- );
- }
- `,
+
+
+ );
+ }
+ `,
transformCode: (code) => {
return transformedCode(code, 'function', 'App');
},
@@ -803,13 +801,12 @@ The Actionsheet with Icons is a variation of the Actionsheet component that disp
ActionsheetItem,
ActionsheetItemText,
ActionsheetIcon,
- Icon,
Wrapper,
TrashIcon,
- ShareIcon,
- PlayIcon,
- FavouriteIcon,
- CloseIcon,
+ EyeOffIcon,
+ ClockIcon,
+ DownloadIcon,
+ EditIcon,
Button,
ButtonText,
},
@@ -982,20 +979,8 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
const handleClose = () => setShowActionsheet(!showActionsheet);
const DATA = [
{
- title: 'Main dishes',
- data: ['Pizza', 'Burger', 'Risotto'],
- },
- {
- title: 'Sides',
- data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
- },
- {
- title: 'Drinks',
- data: ['Water', 'Coke', 'Beer'],
- },
- {
- title: 'Desserts',
- data: ['Cheese Cake', 'Ice Cream'],
+ title: 'Gender',
+ data: ['Men', 'Women', 'Boy', 'Girl'],
},
];
return (
@@ -1003,7 +988,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
-
+
@@ -1051,3 +1036,216 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
}}
/>
+
+### File Upload with Actionsheet
+
+
+ setShowActionsheet(!showActionsheet);
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ Upload your latest resume
+
+ JPG, PDF, PNG supported
+
+
+
+
+
+
+
+ No files uploaded yet
+
+
+
+
+
+
+
+
+ );
+ }
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Actionsheet,
+ ActionsheetBackdrop,
+ ActionsheetContent,
+ ActionsheetDragIndicator,
+ ActionsheetDragIndicatorWrapper,
+ ActionsheetItem,
+ ActionsheetItemText,
+ ActionsheetSectionList,
+ ActionsheetSectionHeaderText,
+ ButtonGroup,
+ Button,
+ ButtonText,
+ Wrapper,
+ HStack,
+ VStack,
+ Box,
+ Heading,
+ Text,
+ Icon,
+ CloseIcon,
+ UploadCloud,
+ Pressable
+ },
+ argsType: {},
+ }}
+ />
+
+
+{/* ### Actionsheet with CTA
+
+
+ setShowActionsheet(!showActionsheet);
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ See what all new features are available in this updated
+
+
+
+
+
+
+
+
+
+
+
+
+ Simplified navigation
+
+
+ Usage of app was never that easy: all important things at your
+ fingertips
+
+
+
+
+
+
+
+
+ Special offer
+
+ Get new offers and discounts every week right in the app
+
+
+
+
+
+
+
+
+ New cashback
+
+ Get daily cashback from every purchase you make and even more
+ when you shop at our partners
+
+
+
+
+
+
+
+
+ );
+ }
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Actionsheet,
+ ActionsheetBackdrop,
+ ActionsheetContent,
+ ActionsheetDragIndicator,
+ ActionsheetDragIndicatorWrapper,
+ ActionsheetItem,
+ ActionsheetIcon,
+ ActionsheetItemText,
+ ActionsheetSectionList,
+ ActionsheetSectionHeaderText,
+ Button,
+ ButtonText,
+ Wrapper,
+ HStack,
+ VStack,
+ Box,
+ Text,
+ Icon,
+ CloseIcon,
+ Send,
+ Percent,
+ DollarSign,
+ Pressable
+ },
+ argsType: {},
+ }}
+ />
+ */}
diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.nw.storiesold.mdx
deleted file mode 100644
index fbeaab145..000000000
--- a/example/storybook-nativewind/src/components/Actionsheet/index.nw.storiesold.mdx
+++ /dev/null
@@ -1,572 +0,0 @@
----
-title: Actionsheet | gluestack-ui | Installation, Usage, and API
-
-description: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
-
-pageTitle: Actionsheet
-
-pageDescription: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
-
-showHeader: true
-
-tag: beta
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetIcon,
- ActionsheetScrollView,
- ActionsheetVirtualizedList,
- ActionsheetFlatList,
- ActionsheetSectionList,
- ActionsheetSectionHeaderText,
- Button,
- ButtonText,
- Box,
-} from './Actionsheet';
-import {
- VStack,
- Input,
- InputIcon,
- InputSlot,
- InputField,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- HStack,
- KeyboardAvoidingView,
- Platform,
-} from '@gluestack-ui/themed';
-import { LeadingIcon, IconRoot } from '@gluestack-ui/themed';
-import { Image, Text } from '@gluestack-ui/themed';
-import { Icon, TrashIcon, ShareIcon } from '@gluestack-ui/themed';
-import { PlayIcon, FavouriteIcon, CloseIcon } from '@gluestack-ui/themed';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- AddIcon,
- InfoIcon,
- Alert,
-} from '@gluestack/design-system';
-import { config } from '@gluestack-ui/config';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-This is an illustration of **Actionsheet** component.
-
-< Wrapper config = { config } >
- setShowActionsheet(!showActionsheet);
- return (
-
-
-
-
-
-
-
-
-
- Delete
-
-
- Share
-
-
- Play
-
-
- Favourite
-
-
- Cancel
-
-
-
-
- );
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- Wrapper,
- Box,
- },
- }
-}
-/>
-
-
-
-
-## Installation
-
-### Step 1: Install the following dependencies:
-
-```bash
-
-npm i @gluestack-ui/actionsheet
-
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/nativewind/actionsheet/index.tsx --%%
-```
-
-
-
-### 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.
-
-```jsx
-import { Actionsheet } from '@/components/ui/actionsheet';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-### 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](https://reactnative.dev/docs/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`}
-
-
- -
-
-
- {`The ref of element to receive focus when the Actionsheet opens.`}
-
-
-
-
-
- finalFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`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`}
-
-
- {`[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.`}
-
-
-
-
-
-
-
-
-#### ActionsheetBackdrop
-
-It is React Native's [Pressable](https://reactnative.dev/docs/pressable) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `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](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this Actionsheet component, you have the flexibility to use any declarative animation library that suits your needs.
-
-**Descendants Styling Props**
-Props to style child components.
-
-
-
-
-
-
-
-#### ActionsheetItemText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### ActionsheetIcon
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### ActionsheetScrollView
-
-It inherits all the properties of React Native's [ScrollView](https://reactnative.dev/docs/scrollview) component.
-
-#### ActionsheetVirtualizedList
-
-It inherits all the properties of React Native's [VirtualizedList](https://reactnative.dev/docs/virtualizedlist) component.
-
-#### ActionsheetFlatList
-
-It inherits all the properties of React Native's [FlatList](https://reactnative.dev/docs/flatlist) component.
-
-#### ActionsheetSectionList
-
-It inherits all the properties of React Native's [SectionList](https://reactnative.dev/docs/sectionlist) component.
-
-#### ActionsheetSectionHeaderText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-> 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.
-
-### Screen Reader
-
-- VoiceOver: When the actionsheet is focused, the screen reader will announce the button group .
-
-## Spec Doc
-
-Explore the comprehensive details of the Actionsheet in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
-
-
diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.stories.mdx
deleted file mode 100644
index 2832b3c9c..000000000
--- a/example/storybook-nativewind/src/components/Actionsheet/index.stories.mdx
+++ /dev/null
@@ -1,1840 +0,0 @@
----
-title: Actionsheet | gluestack-ui | Installation, Usage, and API
-
-description: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
-
-pageTitle: Actionsheet
-
-pageDescription: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
-
-showHeader: true
-
-tag: beta
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetIcon,
- ActionsheetScrollView,
- ActionsheetVirtualizedList,
- ActionsheetFlatList,
- ActionsheetSectionList,
- ActionsheetSectionHeaderText,
-} from './Actionsheet';
-import {
- Button,
- ButtonText,
- VStack,
- Input,
- InputIcon,
- InputSlot,
- InputField,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- HStack,
- KeyboardAvoidingView,
- Platform,
-} from '@gluestack-ui/themed';
-import { LeadingIcon, IconRoot } from '@gluestack-ui/themed';
-import { Image, Text, Box } from '@gluestack-ui/themed';
-import { Icon, TrashIcon, ShareIcon } from '@gluestack-ui/themed';
-import { PlayIcon, FavouriteIcon, CloseIcon } from '@gluestack-ui/themed';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- AddIcon,
- InfoIcon,
- Alert,
-} from '@gluestack/design-system';
-import { config } from '@gluestack-ui/config';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Actionsheet** component.
-
-
- setShowActionsheet(!showActionsheet);
- return (
-
-
-
-
-
-
-
-
-
- Delete
-
-
- Share
-
-
- Play
-
-
- Favourite
-
-
- Cancel
-
-
-
-
- );
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- Wrapper,
- Box,
- },
- }}
- />
-
-
-
-
-## API Reference
-
-### Import
-
-To use this component in your project, include the following import statement in your file.
-
-```bash
-import { Actionsheet } from '@gluestack-ui/themed';
-```
-
-### Anatomy
-
-The structure provided below can help you identify and understand a actionsheet component's various parts.
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-### 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](https://reactnative.dev/docs/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`}
-
-
- -
-
-
- {`The ref of element to receive focus when the Actionsheet opens.`}
-
-
-
-
-
- finalFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`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`}
-
-
- {`[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.`}
-
-
-
-
-
-
-
-
-#### ActionsheetBackdrop
-
-It is React Native's [Pressable](https://reactnative.dev/docs/pressable) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `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](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this Actionsheet component, you have the flexibility to use any declarative animation library that suits your needs.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-
-
-
-
-#### ActionsheetItemText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### ActionsheetIcon
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### ActionsheetScrollView
-
-It inherits all the properties of React Native's [ScrollView](https://reactnative.dev/docs/scrollview) component.
-
-#### ActionsheetVirtualizedList
-
-It inherits all the properties of React Native's [VirtualizedList](https://reactnative.dev/docs/virtualizedlist) component.
-
-#### ActionsheetFlatList
-
-It inherits all the properties of React Native's [FlatList](https://reactnative.dev/docs/flatlist) component.
-
-#### ActionsheetSectionList
-
-It inherits all the properties of React Native's [SectionList](https://reactnative.dev/docs/sectionlist) component.
-
-#### ActionsheetSectionHeaderText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-> 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.
-
-### Screen Reader
-
-- VoiceOver: When the actionsheet is focused, the screen reader will announce the button group .
-
-## Themed
-
-The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this [link](https://gluestack.io/ui/docs/core-concepts/themed-library).
-
-## 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**
-
-<>
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mastercard
- Card ending in 2345
-
-
-
-
-
- Confirm security code
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- Button,
- ButtonText,
- ButtonText,
- VStack,
- Input,
- InputIcon,
- InputSlot,
- InputField,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- HStack,
- Image,
- Text,
- Box,
- Icon,
- LeadingIcon,
- IconRoot,
- KeyboardAvoidingView,
- Platform,
- },
- argsType: {},
- }}
- />
-
-
-**With SnapPoints**
-
-<>
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mastercard
- Card ending in 2345
-
-
-
-
-
- Confirm security code
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- Button,
- ButtonText,
- ButtonText,
- VStack,
- Input,
- InputIcon,
- InputSlot,
- InputField,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- HStack,
- Image,
- Text,
- Box,
- Icon,
- LeadingIcon,
- IconRoot,
- KeyboardAvoidingView,
- Platform,
- },
- argsType: {},
- }}
- />
-
-
-### 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.
-
-<>
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
- Delete
-
-
-
-
-
- Share
-
-
-
-
-
- Play
-
-
-
-
-
- Favourite
-
-
-
-
-
- Cancel
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetIcon,
- Icon,
- Wrapper,
- TrashIcon,
- ShareIcon,
- PlayIcon,
- FavouriteIcon,
- CloseIcon,
- Button,
- ButtonText,
- },
- argsType: {},
- }}
- />
-
-
-### 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.
-
-<>
- setShowActionsheet(!showActionsheet);
- 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 }) => (
-
- {title}
-
- ),
- [handleClose]
- );
- return (
- <>
-
-
-
-
-
-
-
- }
- keyExtractor={(item) => item.id}
- getItemCount={getItemCount}
- getItem={getItem}
- />
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetVirtualizedList,
- Button,
- ButtonText,
- Wrapper,
- },
- argsType: {},
- }}
- />
-
-
-### 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.
-
-<>
- setShowActionsheet(!showActionsheet);
- 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 }) => (
-
- {title}
-
- ),
- [handleClose]
- );
- return (
- <>
-
-
-
-
-
-
-
- }
- keyExtractor={(item) => item.id}
- />
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetFlatList,
- Button,
- ButtonText,
- Wrapper,
- },
- argsType: {},
- }}
- />
-
-
-### 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.
-
-Default styling of the component can be found in the `components/actionsheet` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Actionsheet) of the styled `Actionsheet` component.
-
-<>
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- title: 'Main dishes',
- data: ['Pizza', 'Burger', 'Risotto'],
- },
- {
- title: 'Sides',
- data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
- },
- {
- title: 'Drinks',
- data: ['Water', 'Coke', 'Beer'],
- },
- {
- title: 'Desserts',
- data: ['Cheese Cake', 'Ice Cream'],
- },
- ];
- return (
- <>
-
-
-
-
-
-
-
- item + index}
- renderItem={({ item }) => (
-
- {item}
-
- )}
- renderSectionHeader={({ section: { title, data } }) => (
-
- {title} ({data.length})
-
- )}
- />
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetSectionList,
- ActionsheetSectionHeaderText,
- Button,
- ButtonText,
- Wrapper,
- },
- argsType: {},
- }}
- />
-
-
-## Unstyled
-
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
-
-### 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.
-
-#### Themed
-
-<>
- setShowActionsheet(!showActionsheet);
- return (
-
-
-
-
-
-
-
-
-
- Edit Profile
-
-
- View Followers
-
-
- Add a Post
-
-
- Delete Account
-
-
- Settings
-
-
- Sign Out
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Box,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- Wrapper,
- },
- argsType: {},
- }}
- />
-
-
-#### VirtualizedList
-
-<>
- setShowActionsheet(!showActionsheet);
- const data = React.useMemo(() => Array(5).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 }) => (
-
- {title}
-
- ),
- [handleClose]
- );
- return (
- <>
-
-
-
-
-
-
-
- }
- keyExtractor={(item) => item.id}
- getItemCount={getItemCount}
- getItem={getItem}
- />
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- },
- argsType: {},
- }}
- />
-
-
-#### Keyboard handling
-
-<>
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mastercard
- Card ending in 2345
-
-
-
-
-
- Confirm security code
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- Input,
- AddIcon,
- Image,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-<>
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mastercard
- Card ending in 2345
-
-
-
-
-
- Confirm security code
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- Input,
- AddIcon,
- Image,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-#### FlatList
-
-<>
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
- title: 'Pizza'
- },
- {
- id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
- title: 'Burger'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d73',
- title: 'Risotto'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d74',
- title: 'French Fries'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d75',
- title: 'Onion Rings'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d76',
- title: 'Fried Shrimps'
- },
- ];
- const Item = React.useCallback(
- ({ title }) => (
-
- {title}
-
- ),
- [handleClose]
- );
- return (
- <>
-
-
-
-
-
-
-
- }
- keyExtractor={(item) => item.id}
- />
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- Input,
- AddIcon,
- Image,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-<>
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
- title: 'Pizza'
- },
- {
- id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
- title: 'Burger'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d73',
- title: 'Risotto'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d74',
- title: 'French Fries'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d75',
- title: 'Onion Rings'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d76',
- title: 'Fried Shrimps'
- },
- ];
- const Item = React.useCallback(
- ({ title }) => (
-
- {title}
-
- ),
- [handleClose]
- );
- return (
- <>
-
-
-
-
-
-
-
- }
- keyExtractor={(item) => item.id}
- />
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- Input,
- AddIcon,
- Image,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-#### SectionList
-
-<>
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- title: 'Main dishes',
- data: ['Pizza', 'Burger', 'Risotto'],
- },
- {
- title: 'Sides',
- data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
- },
- ];
- return (
- <>
-
-
-
-
-
-
-
- item + index}
- renderItem={({ item }) => (
-
- {item}
-
- )}
- renderSectionHeader={({ section: { title, data } }) => (
-
- {title} ({data.length})
-
- )}
- />
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- Input,
- AddIcon,
- Image,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-<>
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- title: 'Main dishes',
- data: ['Pizza', 'Burger', 'Risotto'],
- },
- {
- title: 'Sides',
- data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
- },
- ];
- return (
- <>
-
-
-
-
-
-
-
- item + index}
- renderItem={({ item }) => (
-
- {item}
-
- )}
- renderSectionHeader={({ section: { title, data } }) => (
-
- {title} ({data.length})
-
- )}
- />
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- Input,
- AddIcon,
- Image,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-### Customizing the Actionsheet
-
-We have a function called `createActionsheet` which can be used to create a custom actionsheet component. This function takes in a configuration object which contains the styled components that you want to use for the Actionsheet You can refer [gluestack.io/style](/style) for more information on how to use styled components.
-
-You can read more on how to animate components [here](/ui/docs/advanced/animations).
-
-#### Usage
-
-Default styling of all these components can be found in the `components/core/actionsheet` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Actionsheet) of the styled `Actionsheet` components.
-
-```jsx
-// import the styles
-import {
- Root,
- Content,
- Item,
- ItemText,
- DragIndicator,
- IndicatorWrapper,
- Backdrop,
-} from 'components/core/actionsheet/styled-components';
-
-// import the createActionsheet function
-import { createActionsheet } from '@gluestack-ui/actionsheet';
-
-// Understanding the API
-const Actionsheet = createActionsheet({
- Root,
- Content,
- Item,
- ItemText,
- DragIndicator,
- IndicatorWrapper,
- Backdrop,
-});
-
-// Using the actionsheet component
-export default () => (
-
-
-
-
-
-
-
- Community
-
-
-
-);
-```
-
--->
-
-## Spec Doc
-
-Explore the comprehensive details of the Actionsheet in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
-
-
diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.themed.storiesold.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.themed.storiesold.mdx
deleted file mode 100644
index a1b8274f3..000000000
--- a/example/storybook-nativewind/src/components/Actionsheet/index.themed.storiesold.mdx
+++ /dev/null
@@ -1,1143 +0,0 @@
----
-title: gluestack-ui Actionsheet Component | Installation, Usage, and API
-
-description: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
-
-pageTitle: Actionsheet
-
-pageDescription: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
-
-showHeader: true
-
-tag: beta
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetIcon,
- ActionsheetScrollView,
- ActionsheetVirtualizedList,
- ActionsheetFlatList,
- ActionsheetSectionList,
- ActionsheetSectionHeaderText,
- Button,
- ButtonText,
- Box,
- VStack,
- Input,
- InputIcon,
- InputSlot,
- InputField,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- HStack,
- Image,
- Text,
- PlayIcon,
- FavouriteIcon,
- CloseIcon,
- Icon,
- TrashIcon,
- ShareIcon
-} from '../../core-components/themed';
-import {
- KeyboardAvoidingView,
-} from '@gluestack-ui/themed';
-import {CreditCardIcon} from 'lucide-react-native';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- AddIcon,
- InfoIcon,
- Alert,
- Tabs,
-} from '@gluestack/design-system';
-import { config } from '@gluestack-ui/config';
-import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-import {Platform} from 'react-native';
-
-This is an illustration of **Actionsheet** component.
-
-
- setShowActionsheet(!showActionsheet);
- return (
-
-
-
-
-
-
-
-
-
- Delete
-
-
- Share
-
-
- Play
-
-
- Favourite
-
-
- Cancel
-
-
-
-
- );
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- Wrapper,
- Box,
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add actionsheet
- ```
-
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/actionsheet @expo/html-elements
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/themed/actionsheet/index.tsx --%%
-```
-
-
-
-### 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.
-
-```jsx
-import { Actionsheet } from '@/components/ui/actionsheet';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-### 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](https://reactnative.dev/docs/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`}
-
-
- -
-
-
- {`The ref of element to receive focus when the Actionsheet opens.`}
-
-
-
-
-
- finalFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`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`}
-
-
- {`[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.`}
-
-
-
-
-
-
-
-
-#### ActionsheetBackdrop
-
-It is React Native's [Pressable](https://reactnative.dev/docs/pressable) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `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](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this Actionsheet component, you have the flexibility to use any declarative animation library that suits your needs.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-