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

Action Sheet/Option Picker for react-native

import React from "react";
import { TouchableOpacity, Text, StyleSheet, Dimensions } from "react-native";
import PropTypes from "prop-types";

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

const ActionLabelComp = (props) => {
  const {
    labelText,
    onPress,
    cancleColor,
    labelBackground,
    colored = false,
    labelTextStyle,
  } = props;

  return (
    <TouchableOpacity
      onPress={() => (onPress ? onPress() : null)}
      style={[
        styles.container,
        colored && {
          borderColor: labelBackground || "#f7632c",
          backgroundColor: labelBackground || "#f7632c",
        },
      ]}
    >
      <Text
        style={[
          styles.text,
          labelTextStyle,
          colored && { color: cancleColor || "white" },
        ]}
      >
        {labelText}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    width: "100%",
    borderTopWidth: 1,
    borderColor: "rgba(0, 0, 0, 0.2)",
  },
  text: {
    fontSize: 15,
    fontWeight: "500",
    paddingVertical: 18,
    textAlign: "center",
  },
});

ActionLabelComp.propTypes = {
  labelText: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
  cancleColor: PropTypes.string,
  cancleBackground: PropTypes.string,
  cancel: PropTypes.bool,
};
export default ActionLabelComp;