1.0.1 • Published 2 years ago

@vchhabra33/react-native-ui-modal v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

Installation

npm i @vchhabra33/react-native-ui-modal
# or
yarn add @vchhabra33/react-native-ui-modal

Usage

import UIModal from "react-native-ui-modal";

const MyComponent = () => {
  const [alertModalVisible, setAlertModalVisible] = useState(false);
  return (
    <UIModal
      isVisible={alertModalVisible}
      transparent={true}
      animationType="fade"
      overlayColor="rgba(0, 0, 0, 0.2)"
      onClose={() => {
        setAlertModalVisible(false);
      }}
      type="alert"
      alertProps={{
        title: "Have a Promo Code?",
        description: ["Please login to reedem", "your promo code"],
        isLoading: false,
        alertTitle: "Login",
      }}
    />
  );
};

Features

  • 🔧 Expo Compatible
  • 🎨 Extremely Customizable
  • 🔧 Flexible config
  • 📦 Very lightweight (33.8KB)

Description

react-native-ui-modal is a versatile and customizable modal package for React Native apps. It includes features such as alert, confirmation, congratulations, and loading modals, each with their own unique design and functionality.

Props

NameTypeDescriptionRequiredDefault
isVisiblebooleanopen/close the modalYES
transparentbooleanmodal transparencyNOtrue
typeenumalert, confirmation,congratulations, loading, imageNOalert
overlayColorstringModal background overlay colorNOrgba(0, 0, 0, 0.2)
animationTypeenumanimation to open the modal(fade, slide)NOfade
alertPropsalertPropspass if type === 'alert'NO
confirmationPropsconfirmationPropspass if type === 'confirmationProps'NO
congPropscongPropspass if type === 'congProps'NO
loadingPropsloadingPropspass if type === 'loadingProps'NO

alertProps

NameTypeDescriptionRequiredDefault
alertContainerStylesView Stylestyles to modify alert containerNo
withImagestringex - require('../path_of_your_image')NO
imageStylesView Stylestyles to modify image in the alertNO
alertDescriptionContainerStylesView StyleAlert description containery stylesNO
titlestringtitle for the alertNO
alertTitleStylesText Stylestyles to modify alert titleNO
descriptionstring[]description for the alertNO
alertDescriptionStylesText Stylestyles for description textNO
alertActionContainerStylesView Stylestyles to modify button containerNO
isLoadingbooleanfor async actionsNO
alertActionTextStylesView Stylestyles to modify text on action buttonNO
onPressActionfunctionon press of action buttonNO
alertTitlestringaction button titleNO
activityIndicatorPropsActivityIndicatorreact native activity indicator propsNO

confirmationProps

NameTypeDescriptionRequiredDefault
confirmationContainerStylesView Stylestyles to modify confirmation containerNo
actionContainerStylesstringex - require('../path_of_your_image')NO
confirmationCancelTitlestringconfirmation cancel button titleNO
confirmationDescriptionContainerStylesView StyleConfirmation description containery stylesNO
titlestringtitle for the alertNO
titleTextStylesText Stylestyles to modify text titleNO
descriptionstring[]description for the alertNO
confirmationDescriptionStylesText Stylestyles for description containerNO
confirmationActionContainerStylesView Stylestyles to modify confirm buttonNO
isLoadingbooleanfor async actionsNO
confirmationActionTextStylesView Stylestyles to modify text on action buttonNO
onPressActionfunctionon press of action buttonNO
confirmationTitlestringconfirmation button titleNO
activityIndicatorPropsActivityIndicatorreact native activity indicator propsNO
confirmationCancelContainerStylesView StyleCancel button stylesNO
withWarningObjectcheck withWarning docs belowNO

loadingProps

NameTypeDescriptionRequiredDefault
loadingContainerStylesView Stylestyles to modify loading containerNo
titlestringtitle below activity indicatorNO
titleStylesText Stylestyles to modify titleNO
descriptionstringdescription below titleNO
descriptionStylesText Stylestyles to modify descriptionNO
activityIndicatorPropsText Stylestyles to modify text titleNO

congProps

NameTypeDescriptionRequiredDefault
congContainerStylesView Stylestyles to modify containerNo
backgroundColorstringto change background colorNOrgb(247,229,216)
baseTextStylesText Stylestyles to base textNO
baseTextstringbase text stringNO
textContainerStylesView Stylestyles to modify text containerNO
titlesstring[]strings to show as title can be multilineNO
descriptionstringsingle line description stringNO
descriptionTextStylesText Stylestyles to description textNO
descriptionContainerStylesView Stylestyles to modify description containerNO
isLoadingbooleanfor async actionsNO
onPressActionfunctionon press of action buttonNO
actionTextstringaction button text stringNO
actionTextStylesText Stylestyles to action button textNO
actionButtonStylesView Stylestyles to modify button containerNO

withWarning

NameTypeDescriptionRequiredDefault
descriptionstringdescription stringNO
1.0.1

2 years ago

1.0.0

2 years ago