minor: add useActionSheet hook

App.tsx

@@ -8,12 +8,16 @@ import { Table } from 'components/Table';
 import { TextInput } from 'components/TextInput';
 import { TopNavigation } from 'components/TopNavigation';
 
+import { useActionSheet } from 'hooks/useActionSheet';
+
 function App() {
+  const { showActionSheetWithOptions } = useActionSheet();
+
   const [activeTab, setActiveTab] = useState<number>(0);
 
   return (
     <SafeAreaView style={{ backgroundColor: '#F2F1F6', flex: 1 }}>
-      <ScrollView style={{ marginHorizontal: 16 }}>
+      <ScrollView style={{ paddingHorizontal: 16 }}>
         <TopNavigation
           left={{ icon: <Ionicons name="chevron-back" size={32} />, title: 'Back' }}
           right={{ title: 'Save' }}
@@ -57,6 +61,18 @@ function App() {
             rows={[{ rightIcon: true, title: 'Z17AHW' }, { title: 'HP24' }, { title: 'My Wifi' }]}
           />
         </Flex>
+
+        <Flex>
+          <Button
+            title="Action Sheet"
+            onPress={() =>
+              showActionSheetWithOptions({
+                cancel: { onPress: () => console.log('cancel'), title: 'Cancel' },
+                options: [{ onPress: () => console.log('save'), title: 'Save' }],
+              })
+            }
+          />
+        </Flex>
       </ScrollView>
     </SafeAreaView>
   );

babel.config.js

@@ -21,7 +21,8 @@ module.exports = function (api) {
           ],
           alias: {
             components: './src/components',
-            theme: './src/theme'
+            hooks: './src/hooks',
+            theme: './src/theme',
           },
         },
       ],

src/hooks/useActionSheet/index.ts

@@ -0,0 +1 @@
+export { default as useActionSheet } from './useActionSheet';

src/hooks/useActionSheet/useActionSheet.ts

@@ -0,0 +1,56 @@
+import { useCallback } from 'react';
+import { ActionSheetIOS } from 'react-native';
+
+interface Option {
+  disabled?: boolean;
+  destructive?: boolean;
+  onPress: () => void;
+  title: string;
+}
+
+interface CancelOption extends Omit<Option, 'destructive'> {}
+
+interface Options {
+  cancel?: CancelOption;
+  options: Option[];
+}
+
+function useActionSheet() {
+  const showActionSheetWithOptions = useCallback(({ cancel, options }: Options) => {
+    const actionSheetOptions = cancel ? [cancel, ...options] : options;
+    const actionSheetTitles = actionSheetOptions.map(({ title }) => title);
+
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        options: actionSheetTitles,
+        destructiveButtonIndex: [
+          ...options
+            .filter(({ destructive }) => destructive)
+            .map((_, index) => (cancel ? index + 1 : index)),
+        ],
+        disabledButtonIndices: [
+          ...actionSheetOptions.filter(({ disabled }) => disabled).map((_, index) => index),
+        ],
+        cancelButtonIndex: cancel ? 0 : undefined,
+        userInterfaceStyle: 'dark',
+      },
+      (selectedIndex: number) => {
+        if (cancel && selectedIndex === 0) {
+          return cancel.onPress();
+        }
+
+        if (cancel) {
+          return options[selectedIndex - 1].onPress();
+        }
+
+        return options[selectedIndex].onPress();
+      }
+    );
+  }, []);
+
+  return {
+    showActionSheetWithOptions,
+  };
+}
+
+export default useActionSheet;

src/index.ts

@@ -1,6 +1,10 @@
+// components
 export { Button } from 'components/Button';
 export { Switch } from 'components/Switch';
 export { TabBar } from 'components/TabBar';
 export { Table } from 'components/Table';
 export { TextInput } from 'components/TextInput';
 export { TopNavigation } from 'components/TopNavigation';
+
+// hooks
+export { useActionSheet } from 'hooks/useActionSheet';