react-native-devansh-action-sheet/components/ActionSheet.js

Action Sheet/Option Picker for react-native

import React from "react";
import {
  SafeAreaView,
  View,
  Text,
  StyleSheet,
  Dimensions,
  Modal,
  TouchableHighlight,
} from "react-native";
import ActionLabelComp from "./ActionLabelComp";
import PropTypes from "prop-types";

const { width, height } = Dimensions.get("window");

const ActionSheet = (props) => {
  const {
    actionLabel = [],
    visibility = false,
    onClose = null,
    onActionLabelSelected = undefined,
    heading = "Chose One Option",
    cancleColor,
    labelBackground,
  } = props;

  /************* Render Options
   */ const renderOptions = () => {
    if (!actionLabel || actionLabel.length < 1) return;
    return actionLabel.map((x, i) => (
      <ActionLabelComp
        onPress={() => {
          onActionLabelSelected(x, i);
          onClose ? onClose() : null;
        }}
        labelBackground={labelBackground}
        cancleColor={cancleColor}
        key={x?.id || i}
        labelText={x?.name || "name undefined"}
        {...x}
      />
    ));
  };

  return (
    <Modal
      onRequestClose={() => (onClose ? onClose() : null)}
      transparent={true}
      animationType="slide"
      visible={visibility}
    >
      <SafeAreaView style={{ flex: 1, backgroundColor: "rgba(0, 0, 0, 0.1)" }}>
        <TouchableHighlight
          onPressIn={() => (onClose ? onClose() : null)}
          style={styles.container}
        >
          {/*************** Main Cont ****************** */}
          <View style={styles.subCont}>
            <Text style={styles.topHeading}>{heading}</Text>
            {/*************** Options ****************** */}
            {renderOptions()}
          </View>
        </TouchableHighlight>
      </SafeAreaView>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-end",
    alignItems: "center",
    width,
    height,
  },
  subCont: {
    borderRadius: 12,
    overflow: "hidden",
    backgroundColor: "white",
    width: (width * 90) / 100,
    borderColor: "rgba(0, 0, 0, 0.4)",
    marginBottom: 1.8,
  },
  topHeading: {
    fontSize: 14,
    paddingVertical: 40,
    fontWeight: "600",
    textAlign: "center",
  },
});
ActionSheet.propTypes = {
  actionLabel: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      cancel: PropTypes.bool,
    }).isRequired
  ).isRequired,
  visibility: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  onActionLabelSelected: PropTypes.func.isRequired,
  heading: PropTypes.string,
  cancleColor: PropTypes.string,
  cancleBackground: PropTypes.string,
  cancelName: PropTypes.string,
};
export default ActionSheet;