Dingdong_app/components/Actionsheet.js

import React from "react";
import { StyleSheet, View, Text  } from "react-native";
import {
    SelectItem,
    Icon,
} from "@ui-kitten/components";
import { Actionsheet } from "beeshell";

const styles = StyleSheet.create({
    backdrop: {
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    menu: {
        bottom: 0,
    },
    modal: {},
    layout: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    text: {
        fontSize: 12,
    },
    item: {
        flexDirection: "row",
        paddingVertical: 10,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#fff",
        borderBottomWidth: 1,
        borderColor: "rgb(228, 233, 242)",
    },
});


const ForwardIcon = (props) => <Icon {...props} name='arrow-ios-forward' />;
export default function myActionsheet({ list, onChange, value }) {
    const [bottomModalX, changeBottomModalx] = React.useState("");
    return (
      <>
        <SelectItem
          appearance='form'
          style={{ flex: 1 }}
          accessoryRight={ForwardIcon}
          title={value || " "}
          onPress={() => {
                    bottomModalX.open();
                }}
        />
        <Actionsheet
          ref={(c) => {
                    changeBottomModalx(c);
                }}
          header={<View />}
          data={list}
          cancelable
          maxShowNum={4}
          useSafeAreaView
          onPressConfirm={(item) => {
                    onChange(item);
                }}
          onPressCancel={() => {
                }}
          renderItem={(item) => {
                    return (
                      <View style={styles.item}>
                        <Text style={styles.text}>{item}</Text>
                      </View>
                    );
                }}
        />
      </>
    );
}