react-native-my-custom-alert

Custom React Native Alerts.

Installation

$ npm install react-native-my-custom-alert --save

React Native Custom Alerts

To use the Success Alert you have to add the below line in your android/app/build.gradle.

For react native version>=0.60 :

implementation 'com.facebook.fresco:fresco:2.0.0'
implementation 'com.facebook.fresco:animated-gif:2.0.0'

For latest react native version 0.66 :

implementation 'com.facebook.fresco:animated-gif:2.6.0'

Usage

Note: There are two ways to use the Alerts: 1. Use Alert Components Directly by Importing them 2. Wrap your App.js with AlertProvider and use Alert Box by directly calling the open ALert functions';.

1. Use Alert Components Directly by Importing them

import {ConfirmationAlertBox} from 'react-native-my-custom-alert';

function App() {


  const [confirmationModalVisible, setConfirmationModalVisible] =useState(false);


    const [successAlert, setSuccessAlert] = useState(false)
 

  return (
    <View style={{flex: 1}}>
     
     <ConfirmationAlert
        modalVisible={true} // boolean value to control the visibility of the modal
        title="Confirmation Title" // Title text for the confirmation dialog
        Subtitle="Confirmation Subtitle" // Optional subtitle text for the confirmation dialog
        okBtnAction={() => {}} // Action to perform when the "Yes" button is pressed
        closeFunction={() => {}} // Action to perform when the "No" button is pressed or modal is closed
        canCloseOnClickOutside={true} // Boolean value to enable closing the modal by clicking outside
        color="#2196F3" // Color theme for the buttons
/>

     <SuccessAlert
        modalVisible={true} // boolean value to control the visibility of the modal
        heading="Congratulations" // Optional heading text for the success alert
        titleText="Action completed successfully" // Optional text for the title displayed below the image
        okBtnAction={() => {}} // Optional action to perform when the "OK" button is pressed
        closeFunction={() => {}} // Optional action to perform when the modal is closed
        canCloseOnClickOutside={true} // Boolean value to enable closing the modal by clicking outside
/>

      <Button
        title="Confirmation Alert"
        onPress={() => setConfirmationModalVisible(true)}
      />
      <Button
        title="Success Alert"
        onPress={() => setSuccessAlert(true)}
      />

    </View>
  );
}

Properties for Alerts

ConfirmationAlertBox

| Prop | Description | Default | | ---------------- | ----------------------------------------------------------------- | -------- | | modalVisible | (Required) Boolean value to control the visibility of the modal. | None | | title | (Required) Title text for the confirmation dialog. | false | | Subtitle | (Optional) subtitle text for the confirmation dialog. | None | | okBtnAction | (Optional) action to perform when the "Yes" button is pressed. | None | | closeFunction | (Optional) action to perform when the "No" button is pressed or modal is closed. | None | | canCloseOnClickOutside | (Optional) boolean value to enable closing the modal by clicking outside. | None | | color | (Optional) Color theme for the buttons. | #2196F3| | titleStyle| (Optional) Custom styles for the title text. | None | | subtitleStyle | (Optional) Custom styles for the subtitle text. | None |

SuccessAlertBox

All of the props under Properties in addition to the following:

| Prop | Description | Default | | -------------------------| ----------------------------------------------------------------- | ------------- | | modalVisible | (Required) Boolean value to control the visibility of the modal. | None | | heading | (Optional) heading text for the success alert. | 'Congratulation' | | titleText | (Optional) text for the title displayed below the image. | None | | okBtnAction | (Optional) action to perform when the "OK" button is pressed. | None | | closeFunction | (Optional) action to perform when the modal is closed. | None | | headingStyle | (Optional) Custom styles for the heading text. | None | | titleStyle | (Optional) Custom styles for the title text. | None | | children | (Optional) Additional JSX elements to render inside the success alert. | None | | canCloseOnClickOutside | (Optional) Boolean value to enable closing the modal by clicking outside. | None | | imageStyle | (Optional) Custom styles for the success image. | None

2. Using AlertProvider

Import the AlertProvider component into your React Native file and wrap your application with it as follows:

<AlertProvider>
  {/* Your application components */}
</AlertProvider>

Example

Wrap your components with the AlertProvider

import React from 'react';
import {
  View,
  StyleSheet,
  Button,
  
} from 'react-native';
import AlertProvider from 'react-native-my-custom-alert';
import MyComponent from './MyComponent';

function App() {
  
 

  return (
    
    <View style={{flex: 1}}>
        <AlertProvider >
            <MyComponent/>
        </AlertProvider>
    </View>
  );
}

const styles = StyleSheet.create({
  
});

export default App;

You can Configure the styling of Alerts by default configurations

import React from 'react';
import {
  View,
  StyleSheet,
  Button,
  
} from 'react-native';
import AlertProvider from 'react-native-my-custom-alert';
import MyComponent from './MyComponent';

function App() {
  
 

  return (
    
    <View style={{flex: 1}}>
       <AlertProvider 

        confirmationAlertConfiguration={{
        color:"red",
        
        }}

        successAlertConfiguration={{
            headingStyle:{}
        }}
      >
            <MyComponent/>
        </AlertProvider>
    </View>
  );
}

const styles = StyleSheet.create({
  
});

export default App;

Properties for AlertProvider Functions

Use Alerts in Your Components

import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
import {useAlert} from 'react-native-my-custom-alert';

export default function MyComponent() {
  const { openConfirmationModal, openSuccessModal } = useAlert();

  const handleConfirmation = () => {
    openConfirmationModal({
      title: 'Confirmation Title',
      subtitle: 'Are you sure you want to proceed?',
      okBtnAction: () => {
        console.log('Confirmed');
        // Perform your action here upon confirmation
      },
      closeFunction: () => {
        console.log('Modal closed');
        // Perform any action upon closing the modal
      },
    });
  };

  const handleSuccess = () => {
    openSuccessModal({
      heading: 'Success!',
      titleText: 'Action completed successfully',
      okBtnAction: () => {
        console.log('Success modal closed');
        // Perform any action upon closing the success modal
      },
    });
  };

  return (
    <View>
      <Button title="Open Confirmation Modal" onPress={handleConfirmation} />
      <Button title="Open Success Modal" onPress={handleSuccess} />
    </View>
  );
}

const styles = StyleSheet.create({});

openConfirmationModal

| Prop | Description | Default | | ---------------- | ----------------------------------------------------------------- | -------- | | title | Required title text for the confirmation dialog. | None | | subtitle | Optional subtitle text for the confirmation dialog. | None | | okBtnAction | Optional action to perform when the "Yes" button is pressed. | None | | closeFunction | Optional action to perform when the modal is closed. | None | | canCloseOnClickOutside | Boolean value to enable closing the modal by clicking outside. | None | | color | Color theme for the buttons. | None | | titleStyle | Custom styles for the title text. | None | | subtitleStyle | Custom styles for the subtitle text. | None |

openSuccessModal

| Prop | Description | Default | | -------------------------| ----------------------------------------------------------------- | ------------- | | heading | (Required) Heading text for the success alert. | None | | titleText | Optional text for the title displayed below the image. | None | | okBtnAction | Optional action to perform when the "OK" button is pressed. | None | | closeFunction | Optional action to perform when the modal is closed. | None | | children | Additional JSX elements to render inside the success alert. | None | | headingStyle | Custom styles for the heading text. | None | | titleStyle | Custom styles for the title text. | None | | canCloseOnClickOutside | Boolean value to enable closing the modal by clicking outside. | None | | imageStyle | Custom styles for the success image. | None |

Props for the default configuration for the Alerts which use in AlertProvider

confirmationAlertConfiguration

| Prop | Description | Default | | ---------------- | ----------------------------------------------------------------- | -------- | | color | Color theme for the buttons. | None | | titleStyle | Custom styles for the title text. | None | | subtitleStyle | Custom styles for the subtitle text. | None |

successAlertConfiguration

| Prop | Description | Default | | ---------------- | ----------------------------------------------------------------- | -------- | | headingStyle | Custom styles for the heading text. | None | | titleStyle | Custom styles for the title text. | None | | imageStyle | Custom styles for the success image. | None |