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

| Name | Type | Description | Required | Default | | ----------------- | ----------------- | --------------------------------------------------- | -------- | ------------------ | | isVisible | boolean | open/close the modal | YES | | | transparent | boolean | modal transparency | NO | true | | type | enum | alert, confirmation,congratulations, loading, image | NO | alert | | overlayColor | string | Modal background overlay color | NO | rgba(0, 0, 0, 0.2) | | animationType | enum | animation to open the modal(fade, slide) | NO | fade | | alertProps | alertProps | pass if type === 'alert' | NO | | | confirmationProps | confirmationProps | pass if type === 'confirmationProps' | NO | | | congProps | congProps | pass if type === 'congProps' | NO | | | loadingProps | loadingProps | pass if type === 'loadingProps' | NO | |

alertProps

| Name | Type | Description | Required | Default | | ------------------------------- | ----------------- | -------------------------------------- | -------- | ------- | | alertContainerStyles | View Style | styles to modify alert container | No | | | withImage | string | ex - require('../path_of_your_image') | NO | | | imageStyles | View Style | styles to modify image in the alert | NO | | | alertDescriptionContainerStyles | View Style | Alert description containery styles | NO | | | title | string | title for the alert | NO | | | alertTitleStyles | Text Style | styles to modify alert title | NO | | | description | string[] | description for the alert | NO | | | alertDescriptionStyles | Text Style | styles for description text | NO | | | alertActionContainerStyles | View Style | styles to modify button container | NO | | | isLoading | boolean | for async actions | NO | | | alertActionTextStyles | View Style | styles to modify text on action button | NO | | | onPressAction | function | on press of action button | NO | | | alertTitle | string | action button title | NO | | | activityIndicatorProps | ActivityIndicator | react native activity indicator props | NO | |

confirmationProps

| Name | Type | Description | Required | Default | | ------------------------------- | ----------------- | -------------------------------------- | -------- | ------- | | confirmationContainerStyles | View Style | styles to modify confirmation container| No | | | actionContainerStyles | string | ex - require('../path_of_your_image') | NO | | | confirmationCancelTitle | string | confirmation cancel button title | NO | | | confirmationDescriptionContainerStyles| View Style | Confirmation description containery styles | NO | | | title | string | title for the alert | NO | | | titleTextStyles | Text Style | styles to modify text title | NO | | | description | string[] | description for the alert | NO | | | confirmationDescriptionStyles | Text Style | styles for description container | NO | | | confirmationActionContainerStyles| View Style | styles to modify confirm button | NO | | | isLoading | boolean | for async actions | NO | | | confirmationActionTextStyles | View Style | styles to modify text on action button | NO | | | onPressAction | function | on press of action button | NO | | | confirmationTitle | string | confirmation button title | NO | | | activityIndicatorProps | ActivityIndicator | react native activity indicator props | NO | | | confirmationCancelContainerStyles| View Style | Cancel button styles | NO | | | withWarning | Object | check withWarning docs below | NO | |

loadingProps

| Name | Type | Description | Required | Default | | ------------------------------- | ----------------- | -------------------------------------- | -------- | ------- | | loadingContainerStyles | View Style | styles to modify loading container | No | | | title | string | title below activity indicator | NO | | | titleStyles | Text Style | styles to modify title | NO | | | description | string | description below title | NO | | | descriptionStyles | Text Style | styles to modify description | NO | | | activityIndicatorProps | Text Style | styles to modify text title | NO | |

congProps

| Name | Type | Description | Required | Default | | ------------------------------- | ----------------- | -------------------------------------- | -------- | ---------------| | congContainerStyles | View Style | styles to modify container | No | | | backgroundColor | string | to change background color | NO |rgb(247,229,216)| | baseTextStyles | Text Style | styles to base text | NO | | | baseText | string | base text string | NO | | | textContainerStyles | View Style | styles to modify text container | NO | | | titles | string[] | strings to show as title can be multiline| NO | | | description | string | single line description string | NO | | | descriptionTextStyles | Text Style | styles to description text | NO | | | descriptionContainerStyles | View Style | styles to modify description container | NO | | | isLoading | boolean | for async actions | NO | | | onPressAction | function | on press of action button | NO | | | actionText | string | action button text string | NO | | | actionTextStyles | Text Style | styles to action button text | NO | | | actionButtonStyles | View Style | styles to modify button container | NO | |

withWarning

| Name | Type | Description | Required | Default | | ------------------------------- | ----------------- | -------------------------------------- | -------- | ---------------| | description | string | description string | NO | |