Mobikul-custom-alert NPM

MobikulAlert

A customizable alert modal component for React Native applications. Easily display alerts with titles, messages, and customizable buttons. To find out more mobikul.com

Installation

Install the package using npm:

npm install mobikul-custom-alert

or using yarn:

yarn add mobikul-custom-alert

Usage

Import MobikulAlert into your React Native component and use it as follows:

import React, { useState } from 'react';
import { Button, View } from 'react-native';
import MobikulAlert from 'mobikul-alert';

const App = () => {
  const [isVisible, setIsVisible] = useState(false);

  const showAlert = () => setIsVisible(true);
  const hideAlert = () => setIsVisible(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Alert" onPress={showAlert} />

      <MobikulAlert
        visible={isVisible}
        onCancel={hideAlert}
        title="Are you sure?"
        message="This action cannot be undone."
        buttons={[
          {
            title: 'Cancel',
            callback: hideAlert,
          },
          {
            title: 'Confirm',
            callback: () => {
              console.log('Confirmed!');
              hideAlert();
            },
          },
        ]}
      />
    </View>
  );
};

export default App;

Props

Prop Name	Type	Default Value	Description
`visible`	`boolean`	`false`	Controls the visibility of the alert modal.
`onCancel`	`() => void`	`undefined`	Callback function when the overlay or cancel button is pressed.
`title`	`string`	`'Do you want to proceed?'`	The title of the alert.
`message`	`string`	`''`	The message displayed in the alert.
`buttons`	`Array<{ title: string, callback?: (e: GestureResponderEvent) => void }>`	`[{ title: 'Cancel' }, { title: 'Ok' }]`	Array of buttons with titles and optional callbacks.
`titleTextStyle`	`StyleProp<TextStyle>`	`styles.titleStyle`	Custom style for the title text.
`messageTextStyle`	`StyleProp<TextStyle>`	`styles.message`	Custom style for the message text.
`buttonTextStyle`	`StyleProp<TextStyle>`	`styles.buttonTextStyle`	Custom style for the button text.
`buttonStyle`	`StyleProp<ViewStyle>`	`styles.okButton`	Custom style for the button container.
`iconVisible`	`boolean`	`true`	Whether to display the icon in the alert.
`iconSource`	`ImageSourcePropType`	`Default Icon`	Source to provide custom image in the alert

Customization

You can customize the appearance of the alert by passing custom styles to the titleTextStyle, messageTextStyle, buttonTextStyle, and buttonStyle props.

Example

<MobikulAlert
  visible={isVisible}
  onCancel={hideAlert}
  title="Warning!"
  message="This is a custom alert message."
  buttons={[
    {
      title: 'No',
      callback: hideAlert,
    },
    {
      title: 'Yes',
      callback: () => {
        console.log('Yes clicked!');
        hideAlert();
      },
    },
  ]}
  titleTextStyle={{ color: 'red', fontSize: 20 }}
  messageTextStyle={{ color: 'black', fontSize: 16 }}
  buttonTextStyle={{ color: 'white' }}
  buttonStyle={{ backgroundColor: 'green', padding: 10 }}
  iconVisible={false}
/>

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Give us a like and share it with your friends

react-native ios android

@react-native-community/cli

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago