ammarahm-ed/react-native-actions-sheet

A Cross Platform(Android, iOS & Web) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

Installation

Check out the installation section of our docs for the detailed installation instructions.

Documentation

Check out our dedicated documentation page for info about this library, it's features, API reference and more: https://rnas.vercel.app

Migrating from v0.7.0

The new version of ActionSheet introduces some breaking changes. Please read through the migration guide and take the necessary steps.

Examples

The source code for the example (showcase) app is under the example/ directory. If you want to play with the ActionSheet but don't feel like trying it on a real app, you can run the example snack.

Documentation for v0.7.0 & older

You can find the docs in v0.7.0 branch

Consider supporting with a ⭐️ star on GitHub

If you are using the library in one of your projects, consider supporting with a star. It takes a lot of time and effort to keep this maintained and address issues and bugs. Thank you.

MIT Licensed

react-native-actions-sheet's Issues

@babel is not found

Module not found: Can't resolve '@babel/runtime/helpers/classCallCheck' in '....\node_modules\react-native-actions-sheet\src'

and I try to import

addHasReachedTopListener,
removeHasReachedTopListener,

as you did in the example they are not exported from the package

also see bellow

are you sure the package is the latest?

Actions sheet closes on first open

Hi,

Thanks for the library, really appreciated!

I have a small issue, when I open the library for the first time, it closes automatically, then on the second time it works fine, any idea why?

Thanks,

Théo

Wrong device height calculation on Android devices

Hi, the height calculation does not work correctly on Android devices. According to my research, we should subtract the status bar height from the window height. Because as far as I can observe, the modal starts under the status bar on Android.

Avoid explicit usage of `children` in the documentation

I find a bit weird to show an explicit usage of the children props:

<ActionSheet
  children={<View/>}
/>

instead of

<ActionSheet
  <View/>
/>

I have never seen this before
Even if it syntaxically correct, it adds verbosity for... nothing?

What do you think?

Keyboard dismissing when actions sheet is closing

First of all, thanks for your work, I really love this library.

I'm having an issue when I try to focus a TextInput while the Action Sheet is closing, as you can see in the gif below, the keyboard is opening but somehow it gets dismissed by the Action Sheet. I know is the Action Sheet because when I don't close the Action Sheet, the input gets focused and the keyboard opens as expected.

It might be something related to the focus because not only the keyboard get dismissed but also the TextInpust lose the focus.
Gif

Video: https://i.imgur.com/Y5CGXwO.mp4

Actionsheet on actionsheet not working.

When i try to open two different actionsheets at same time already open was closed in iOS, while in android second actionsheet was opened. But when i close second sheet first one also closed.

`onPositionChanged` is required in index.d.ts

The documentation says that onPositionChanged is not required but it's required in index.d.ts.

When data is received from a service, ActionSheet becomes not visible.

Probably there is an automatic toggle of the ModalVisible state. Is this by design?

If so I guess I could keep track of the modalVisible state outside the component? Or is there a way to disable the modalVisible automation?

Example gif:

Working with static data (provided from outside):

Dynamic data:

flatlist warning

Hello, as soon as I put a <Flatlist /> on this component I get the VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead warning.

Am I missing something? should I use something different for lists? Or is it normal and maybe it is just a matter of silencing the warning?

I plan to use this component as a drawer to make user choose from a filterable list.

Sheet takes a lot of time when you will have a large amount of data

I wanted to display a country list with country code, the sheet is taking a lot of time in the opening, and once open, if you click any of the list items it will take time to update the data.

White Bar at bottom after keyboard dismissal and sheet disappears when TextInput + autofocus is used

Hiho,

first of all: Awesome library!

EDIT: Look at my second post the first problem has been solved

Second:

I have a minor problem and it might be my fault but I really don't know how I can solve it. I'm really stuck.

So when I open the action sheet and then type into the TextArea of course the keyboard comes up and the whole sheet gets way slower (this works perfectly). But when I close or dismiss the keyboard I have a white margin on the bottom of the still open sheet:

So this is where I'm left at. I'm almost done with finishing up this chapter but this problem has to be solved before I can continue.

This is the whole code I'm using the lib.

The file I'm using it is a custom BottomTabBar from react-navigation, here is the code:

https://pastebin.com/rtRS0ZM1

Would be really cool if you could help me out here :)

Spec:

Windows
Android Emu
RN 0.62

extra white bar on top and bottom

Extra white bar (background) is coming :-

<ActionSheet initialOffsetFromBottom={1}bounceOnOpen={true} bounciness={8} gestureEnabled={true} ref={actionSheetRef}> </ActionSheet>
even after initialOffsetFromBottom={1} after this.

CustomHeaderComponent with borderRadius

When using CustomHeaderComponent with borderRadius set > 9 the default white background will show behind the custom header component.
I want to change the background color of the header component. Is there a props to set that?

Support Background Interaction

as the title says, i want to be able to have the action sheet show a little bit, but still have the buttons be clickable in the background.

I cannot make the input aware of the keyboard opening and asjust the view.

I am using a mapview with the markers of the restaurants. When clicked on the restaurant marker in the map , i display the actionsheet with input to write some notes. However the keyboard blocks the actionsheet completely. I cannot figure out how to solve the problem.

My Code snippet is as following

const styles = StyleSheet.create({
        container: {
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            justifyContent: 'flex-end',
            alignItems: 'center',
            flex: 1,
        },
        map: {
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            flex: 1
        },

    });


    return (
        <View style={styles.container}>
            {
                showCamera &&
                <React.Fragment>
                    <RNCamera
                        captureAudio={false}
                        ref={ref => {
                            this.camera = ref
                        }}
                    />
                    <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
                        <TouchableOpacity onPress={()=>takePicture()}>
                            <Icon name="record-vinyl" size={25}/>
                        </TouchableOpacity>
                    </View>
                </React.Fragment>

            }
            {
                latitude && longitude &&
                <MapView
                    provider={PROVIDER_GOOGLE}
                    initialRegion={{latitude:latitude,longitude:longitude, latitudeDelta: 0.5,longitudeDelta: 0.5}}
                    style={styles.map}
                    showsUserLocation={true}
                >

                    {
                        deliveryAddresses.map((address,locationKey)=>{
                            return (
                                <MapView.Marker
                                    coordinate={{latitude: address.location.lat,longitude: address.location.lng}}
                                    title={address.customer}
                                    description={address.delivery_address}
                                    onPress={()=>onAddressPress(address)}
                                >
                                </MapView.Marker>
                            )
                        })
                    }
                    {
                        polyLines.map((points)=>{
                            const decodedPoints = Polyline.decode(points);
                            const coords = decodedPoints.map((point, index) => {
                                return  {
                                    latitude : point[0],
                                    longitude : point[1]
                                }
                            });
                            return (
                                <MapView.Polyline
                                    coordinates={coords}
                                    strokeColor={'black'}
                                    strokeWidth={4}
                                >

                                </MapView.Polyline>
                            )
                        })
                    }
                </MapView>
            }

            <ActionSheet
                ref={actionSheetRef}

            >
                <ScrollView>
                    {
                        selectedOrder &&
                        <Card>
                            <Content>
                                <CardItem header>
                                    <Text>{'#SO-'+selectedOrder.sales_order_id}</Text>
                                </CardItem>
                                <CardItem>
                                    <Body>
                                    <Text>{selectedOrder.customer}</Text>
                                    <Divider/>
                                    <Text>{selectedOrder.delivery_address}</Text>
                                    </Body>
                                </CardItem>
                                <CardItem>
                                    <Input placeholder="Notes on delivery"/>
                                </CardItem>
                                <CardItem>
                                    <Button iconLeft light onPress={()=>openCamera()}>
                                        <Icon name='camera' size={20} style={{padding:5}}/>
                                        <Text>Take Photo</Text>
                                    </Button>
                                </CardItem>

                                <CardItem>
                                    <Button iconLeft onPress={()=>markOrderAsDelivered(selectedOrder.sales_order_id)}
                                            style={{backgroundColor:'#1AB394'}}
                                    >
                                        <Icon name="check" size={20} color={'#ffff'} style={{padding:5}}/>
                                        <Text>Mark as Delivered</Text>
                                    </Button>
                                </CardItem>
                            </Content>
                        </Card>

                    }
                </ScrollView>

            </ActionSheet>
        </View>

action sheet cannot open? please help

this is my code onPress={actionSheetRef.current.setModalVisible(true)}

Alert component gets closed after the component hides

Inside the component ActionSheet I have a touchable component (react-native) the programmatically hide the ActionSheet component and triggers an Alert (react-native component), on that specific order. The alerts shows up, but then it disappears. It could be related to the Modal component that this framework uses.

Additional information:
React-native: 0.62.2
React: 16.12.0
OS: latest MacOS X & latest iOS 13

The only workaround for me is to hide ActionSheet only after any operations related to the Alert component is completed/triggered.

ReferenceError: Keyboard is not defined

With the simple example, when I try to open the screen an error occurred:

ReferenceError: Keyboard is not defined in ActionSheet.

Additional information:
React-native: 0.62.2
React: 16.11.0
OS: latest MacOS X & latest iOS 13

import React, { Component, createRef } from 'react';
import ActionSheet from "react-native-actions-sheet";

render(){

const actionSheetRef = createRef();

...


<ActionSheet ref={actionSheetRef}>
<View>
       <Text>YOUR CUSTOM COMPONENT INSIDE THE ACTIONSHEET</Text>
 </View>
 </ActionSheet>


}

Multiple components share the same <ActionSheet>

Hi, is this component supposed to be used only as a provider-like way in App.tsx? I have wrapped it into multiple components in a Screen but it seems that the ActionSheet that gets opened is always the same.

Example:

import React, { createRef, useState, useCallback, useEffect } from "react";
import ActionSheet from "react-native-actions-sheet";
import {
  View,
  Text,
  TouchableOpacity,
  FlatList,
  ListRenderItem,
  TextInput,
} from "react-native";
import {
  IComboboxItemDto,
  IGetComboboxItemsInput,
} from "irideweb2-data-access";
import { AxiosRequestConfig } from "axios";

const actionSheetRef = createRef<ActionSheet>();
export interface IDataProviderParams
  extends Pick<IGetComboboxItemsInput, "parentId" | "limit"> {}
interface Props {
  dataProvider?: (
    params?: IGetComboboxItemsInput,
    options?: AxiosRequestConfig
  ) => Promise<IComboboxItemDto[]>;
  dataproviderParams?: IDataProviderParams;
  options?: IComboboxItemDto[];
  onSelect?: (value: IComboboxItemDto) => void;
}

export const Dropdown = (props: Props) => {
  const onChangeText = (text: string) => {
    setSearchText(text);
    props.dataProvider!({ searchTerm: text }).then(
      (items: IComboboxItemDto[]) => {
        setOptions(items);
      }
    );
  };
  const [options, setOptions] = useState<IComboboxItemDto[]>();
  useEffect(() => {
    if (!!props.options) {
      setOptions(props.options);
    }
  }, [props.options]);

  const [searchText, setSearchText] = useState<string>();
  const [selectedItem, setSelectedItem] = useState<IComboboxItemDto>();
  const onItemSelect = React.useCallback((item: IComboboxItemDto) => {
    if (props.onSelect) {
      setSelectedItem(item);
      actionSheetRef.current?.setModalVisible();
      return props.onSelect(item);
    }
  }, []);

  const renderItem: ListRenderItem<IComboboxItemDto> = ({ item }) => (
    <View>
      <TouchableOpacity onPress={() => onItemSelect(item)}>
        <Text key={item.value}>{item.displayText}</Text>
      </TouchableOpacity>
    </View>
  );
  let actionSheet;
  return (
    <>
      <TouchableOpacity
        onPress={() => {
          actionSheetRef.current?.setModalVisible();
        }}
      >
        <Text>{selectedItem?.displayText ?? "Scegli"}</Text>
      </TouchableOpacity>
      <ActionSheet ref={actionSheetRef}>
        <Text>{JSON.stringify(props.options)}</Text>
        <FlatList
          style={{ flexDirection: "column", flex: 1 }}
          keyExtractor={(item: IComboboxItemDto) => item?.value as string}
          data={options}
          renderItem={renderItem}
        ></FlatList>
      </ActionSheet>
    </>
  );
};

and, in component which uses it,

<Dropdown
        onSelect={(item) => {
          setSelectedCityId(item);
        }}
        dataProvider={CityService.getComboboxItems}
      ></Dropdown>
      <Dropdown
        onSelect={(item) => {
          setSelectedGroupingOption(item);
        }}
        options={toJS(groupingSearchStore!.groupingOptions)}
      ></Dropdown>

Is this wrong? Is there a way to accomplish this using this compoent?

Thanks

Webview in Actionsheet aint working on Android

I'm using ActionSheet with Webview. I enabled gestureEnabled and add CustomHeaderComponent. When I enable gesture on Android the webview scroll not works.

"react-native": "0.63.2"
"react-native-actions-sheet": "^0.4.2",

[Feature Request] How to make action sheet not dismiss-able

Hi, thanks a lot for such lightweight package. I was wondering if we can stop the action sheet from being dismissed. Lets say if i press on backdrop accidentally there should be a prop to disable that.
Thanks

Horizontal layout support

Hi! Thanks for this awesome plugin. Portrait mode is working as expected, but horizontal layout does not trigger the content view, the background in toggled as I can see it turning darker.

Could you please look in to it?

Thanks

Everything is broken after latest changes!

Hello. After you handle Keyboard there are issues that breaks everything. On Ios there is error:

On android, it starts to open kb and close it...

Event to get the dragged position

Is there way I can detect the current position of actionsheet on drag?
e.g. When user is scrolling up/down using the gesture, I want to trigger some event when it reaches to certain threshold.

`TextInput` hides on creating a newline on android

Creating a new line on android hides the TextInput behind the keyboard until the next keystroke.

Unresponsive screen after closing sheet

For some reason, if you try to scroll/tap as soon as the sheet closes, it doesn't work. It seems that even when the overlay is totally transparent, it takes some milliseconds/seconds to remove it from the screen.

I tried reducing the closeAnimationDuration time but I didn't have any luck.

Always keep full sheet above the keyboard

Is there a way to keep the entire sheet above the keyboard? Currently when the user focuses an input the keyboard will pop up and cover whatever portion of the sheet is below the input that is focused.

Sheet does not implement the fullscreen-size correctly if the height is too big

See video:
https://user-images.githubusercontent.com/36629890/113579619-dadf7a00-9624-11eb-93cd-14bf0b155105.mp4

Doesn't opens when using Class base component.

Does it not support using Class base component? I know Class base components are not being used anymore. But I am stuck with some old code base project.

Scroll within Flatlist is not working on android with gestureEnabled true

Android

Desired behavior:
Flatlist as a child of ActionSheet IS scrollable and ActionSheet CAN be close with a gesture.

Actual behavior:
gestureEnabled={true}
Flatlist as a child of ActionSheet IS NOT scrollable. ActionSheet CAN be close with a gesture.

gestureEnabled={false}
Flatlist as a child of ActionSheet IS scrollable. ActionSheet CAN NOT be close with a gesture.

iOS

Everything works as desired.

FlatList not rendering inside action sheet.

Today I updated the package to fix some issues that I had and for some reason, in the last version, the FlatList that are inside the ActionSheet component is not rendering.

Sheet slides down when input text

Hi, thanks for such amazing library.

I experience problem with input field inside sheet on Android.

When I focus on input field, sheet changes its size accordingly, but when I start typing something, it slides down.
However, when I open it again, it works as intended.

And probably it's related to the parent, which has flexGrow: 1. When I disable it, problem disappear.

Do you have any suggestions how to avoid it without disabling flexGrow?

Thanks!

Rewrite the module in TypeScript

Hey 👋

Thank you for doing this, how about rewriting the module in TypeScript and generate the type definition file instead of maintaining it by hand?

I made a couple of PR to fix issues that would have been detected by using TypeScript.

Closed automaticaly when using graphql + flatlist

Hi @ammarahm-ed do you able using flatlist in rerender data ?, I have try using flatlist it's closed automaticaly only when data using query graphql. but it works well when data static.

Child input element with autofocus

Great library but am having trouble having the sheet appear with the keyboard already focused on a child element. using

<Input autofocus {....} />

the sheet jumps up and down on and off the screen forever.

If there is another api implementation to achieve the sheet appear with the keyboard and an input selected I'd be super grateful.

How to stop scrolling in nested list affecting the action sheet

As it can be seen in the video, when scrolling in a nested list and when the scroll is at the upper or lower limits, the action sheet itself starts being affected by the scrolling gesture. Is there any way to stop this? I'd like for the action sheet to move only when the user makes a scroll gesture outside the nested list.
Even setting gestureEnabled={false} in the action sheet doesn't stop it from moving when interacting with the nested list.

The code to use as example can be the one at the examples folder.

Thank you for this great lib!

Screen.Recording.2021-04-21.at.18.28.32.mov

Feature request - drag-up to bounce.

When the sheet is visible, the user can close it by drag it down, dragging up should also have an effect: bounce back to its size.

It just looks cool :)

RPReplay_Final1612717757.mp4

TabBar visibility when open bottom sheet

Hello,

I am trying to show the bottom sheet on-screen but tab bar must be visible so I need to render it above the tab bar. Any idea how to achieve it if it is even possible with modal in use?

Action sheet is dismissed if clicked on the status bar

Not sure if anyone has this issue. I was testing over the example code. The action sheet is dismissed if I clicked on the status bar. and it is unable to show again, even with the Open ActionSheet button.

Screen.Recording.2021-04-26.at.2.19.22.AM.mov

Keyboard avoiding transformY seems to increase when multiple input fields are stacked

When I stack multiple input fields, wrapped by Views, it seems that the "gap" at the bottom increases to an evermore excessive amount to compensate for the keyboard. With one input field it works just fine, but with three I observe some weird effects.

Tested with version 0.4.2
react-native 0.63.2
expo 39.0.5

I've been getting as close to the example as I can. Using a ScrollView and hooking up all the events. The wrapping component is a bit more complex, that's why I'm not posting the full code here.

Looking into the source, I think that this is the place where it goes wrong:
https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/src/index.js#L425

If I simply say const gap = -1 * fieldHeight; it works for my use-case.

Any ideas on why the initial calculation is breaking here? 😅

snapToOffset function will trigger _returnToPrevScrollPosition

Hi, I have tried to call snapToOffset function in the CustomHeaderComponent to show like dismissing the action-sheet to the bottom when clicking on the header.

However, the _onScrollEnd function will get called each time after onScroll function. Again, the action sheet will call _returnToPrevScrollPosition.

Not sure what do I miss here. Appreciate any helps. Thanks.

Screen.Recording.2021-04-26.at.4.31.25.PM.mov

here is the piece of code of my testing

        <ActionSheet
          containerStyle={{borderRadius: 32}}
          animated={false}
          initialOffsetFromBottom={0.7}
          ref={actionSheetRef}
          onOpen={onOpen}
          statusBarTranslucent
          onPositionChanged={onHasReachedTop}
          gestureEnabled={true}
          onClose={onClose}
          closable={false}
          bottomOffset={200}
          closeOnPressBack={false}
          CustomHeaderComponent={
              <TouchableOpacity
                onPress={() => {
                  console.log('header is clicked');
                  actionSheetRef.current?.snapToOffset(200);
                }}
              >
                <View style={styles.indicator} />
              </TouchableOpacity>
          }
          defaultOverlayOpacity={0}>

the inspiration of the testing is here.

Screen.Recording.2021-04-26.at.4.46.24.PM.mov

Methods Missing from Type Definitions

addHasReachedTopListener and removeHasReachedTopListener are missing from the TypeScript definitions causing an error when importing from react-native-actions-sheet.

Reproduction:

1. Start TypeScript React Native project
2. Import the required functions:

import ActionSheet, {
  addHasReachedTopListener,
  removeHasReachedTopListener,
} from 'react-native-actions-sheet';

Output:

Module '"react-native-actions-sheet"' has no exported member 'addHasReachedTopListener'. Did you mean to use 'import addHasReachedTopListener from "react-native-actions-sheet"' instead?
Module '"react-native-actions-sheet"' has no exported member 'removeHasReachedTopListener'. Did you mean to use 'import removeHasReachedTopListener from "react-native-actions-sheet"' instead?

Support Nested ScrollViews

action sheet closes when state is updated, is that normal?

is there a way to avoid the action sheet to not close when state is updated.

in my case I have an async call that updates a textfield inside the action sheet.

thanks a lot

Scrollview not working on android

Hello,

When I have a scrollview as the first children of the react-native-action-sheet on android it is not working. My component simply just don't scroll. Works perfectly on iOS, but not on Android.

Is something wrong with the library or am I missing something?

backdrop not touchable around actionsheet in tablet mode

Actionsheet is dismissed automatically when app is in background for a while

Hi, I have noticed this behaviour recently that when the action sheet is opened and if i open some other app for some time and return to my application, the action sheet is in dismissed state and not even completely dismissed but i guess it looks like in blurred state.

Scenario : I am using actionsheet to allow user to enter the OTP sent via messages, so if he opens messaging application and returns back, the actionsheet is gone.
Can we do anything about this..
Thanks

Nested FlatList doesn't react to scroll gesture

Hello. After updating component to 0.30.0 version I've tried to render FlatList in the ActionSheet, but nested flat list doesn't react to scroll gesture. Code example:

ActionSheet Wrapper

Proptype for container style does not accept array

Hello,

The proptype for containerstyle does not accept an array, although it works, is it possible to adapt it so that also arrays are accepted for container style?

Im doing it like this:

<ActionSheet
ref={actionSheetRef}
containerStyle={[
styles.actionSheetStyle.default,
styles[props.colorMode].actionSheetStyle,
]}>

Warning: Failed prop type: Invalid prop containerStyle of type array supplied to ActionSheet, expected object.
in ActionSheet (at DropdownSheet.js:21)
in DropdownSheet (at ServiceTimesPage.js:73)

Touchable elements inside ActionSheet doesn't work in android

First of all, I'd like to thank you guys for building this component 💙.
I was trying to use it on my app and it works on very smoothly on iOS and Android as well.
The issue I am facing is that these TouchableOpacity elements aren't clickable/pressable in android.

import React from "react"
import theme, { Box, Text } from "../../theme"
import {
  TouchableOpacity,
  TouchableWithoutFeedback,
} from "react-native-gesture-handler"
import { Image, Dimensions, Platform, View } from "react-native"
import { ChevronDownIcon, CommentIcon, BookmarkIcon } from "../Icons"
import { Tag } from "./Tag"
import Carousel from "../Carousel/Carousel"
import Animated from "react-native-reanimated"
import ActionSheet from "react-native-actions-sheet"

const { width } = Dimensions.get("screen")

interface CardPropTypes {
  showComment: boolean
  isMany: Boolean
  avatarURI: string
}
interface CardStateTypes {
  activeIndex: number
  menuActionSheet: Boolean
}

class Card extends React.PureComponent<
  Readonly<CardPropTypes>,
  Readonly<CardStateTypes>
> {
  state = {
    activeIndex: 0,
    menuActionSheet: false,
  }

  handleMenuPress = () => {
    this.actionSheetRef?.current?.setModalVisible()
  }

  actionSheetRef = React.createRef<ActionSheet>()

  render() {
    const { showComment, isMany, avatarURI } = this.props
    const { activeIndex, menuActionSheet } = this.state
    return (
      <>
        <TouchableWithoutFeedback style={{ marginTop: 6, borderRadius: 6 }}>
          {/* Card Layout */}
        </TouchableWithoutFeedback>
        <ActionSheet
          ref={this.actionSheetRef}
          gestureEnabled
          bounceOnOpen
          closeOnPressBack
          indicatorColor={theme.colors.gray100}
        >
          <Box paddingBottom={Platform.OS === "ios" ? 18 : 0} flex={1}>
            <TouchableOpacity
              style={{ padding: 18 }}
              onPress={() => console.log("____________")}
            >
              <Text variant="body" textAlign="center">
                Show fewer posts like this
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={{ padding: 18 }}
              onPress={() => console.log("____________")}
            >
              <Text variant="body" textAlign="center">
                Block this person
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={{ padding: 18 }}
              onPress={() => console.log("____________")}
            >
              <Text variant="body" textAlign="center" color="orange500">
                Report this post
              </Text>
            </TouchableOpacity>
          </Box>
        </ActionSheet>
      </>
    )
  }
}

export default Card