# @expo/react-native-action-sheet [![npm](https://img.shields.io/npm/v/@expo/react-native-action-sheet.svg?style=flat-square)](https://www.npmjs.com/package/@expo/react-native-action-sheet) [![License: MIT](https://img.shields.io/github/license/nd-02110114/goofi-mobile.svg)](https://opensource.org/licenses/MIT) [![Discord](https://img.shields.io/badge/discord-expo-green?style=flat-square&logo=discord)](https://discord.gg/4gtbPAdpaE) React Native Action Sheet is a cross-platform React Native component that uses the native UIActionSheet on iOS and a pure JS implementation on Android. | iOS | Android | Web | | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | |

| ## [Check out the example snack here!](https://snack.expo.dev/@expo-action-sheet/example) ## Installation ``` npm install @expo/react-native-action-sheet ``` or ``` yarn add @expo/react-native-action-sheet ``` ## A basic ActionSheet Setup ### 1. Wrap your top-level component with `` ReactNativeActionSheet uses React context to allow your components to invoke the menu. This means your app needs to be wrapped with the `ActionSheetProvider` component first. ```jsx import { ActionSheetProvider } from '@expo/react-native-action-sheet'; export default function AppContainer() { return ( ); } ``` ### 2. Call the `showActionSheetWithOptions` method with a hook or a higher order component. ```tsx // Using the provided hook import { useActionSheet } from '@expo/react-native-action-sheet'; export default Menu() { const { showActionSheetWithOptions } = useActionSheet(); const onPress = () => { const options = ['Delete', 'Save', 'Cancel']; const destructiveButtonIndex = 0; const cancelButtonIndex = 2; showActionSheetWithOptions({ options, cancelButtonIndex, destructiveButtonIndex }, (selectedIndex: number) => { switch (selectedIndex) { case 1: // Save break; case destructiveButtonIndex: // Delete break; case cancelButtonIndex: // Canceled }}); } return (

패키지	다운로드	Stars	크기	Issues	발행일	라이선스

@expo/react-native-action-sheet	260,328	1,503	177 kB	24	4ヶ月前	MIT