Introducing RN-Alertify, your go-to library for seamlessly integrating alert notifications into your React Native (RN) applications for both Android and iOS platforms. RN-Alertify simplifies the process of displaying alerts, ensuring a hassle-free experience for developers and users alike.

• Features
• Installation
• Usage
  • AlertProvider
    • AlertProvider Props
  • AlertContext
    • AlertContext Props
  • AlertTextStyleProps
• Customization
  • AlertThemeProps
  • AlertThemeColors
  • AlertThemeColorSet
  • AlertThemeFontSizes
  • AlertThemeShadow
  • Customization Example
• API Methods
  • Show Alert
    • Example
    • Props
  • Change Content
    • Example
    • Props
  • Set Loader
    • Example
    • Props
  • On Close
  • On Open
  • IsShowing
  • IsLoading
• Troubleshooting
• Contributing
• Creator
• License

• Flexible Alert Configuration: Customize the appearance and behavior of alerts by leveraging a wide range of configuration options.
• Title and Message: Display informative titles and descriptive messages to provide context within the alerts.
• Alert Types: Choose from various pre-defined alert types, including success, error, info, and warning, to convey different levels of urgency or importance.
• Duration Control: Set the duration for which alerts will be displayed before automatically closing, ensuring optimal visibility and user experience.
• Indicator Options: Choose between different types of indicators, such as icons or progress bars, to visually enhance the alerts.
• Custom Icons: Add custom icon components or elements to further enhance the visual representation of alerts.
• Interaction Callbacks: Attach callback functions to handle user interactions, such as pressing or interacting with alerts.
• Stay Open Option: Configure alerts to stay open until explicitly closed by the user, allowing extended visibility for critical information.
• Dismissible Alerts: Enable alerts to be dismissed when pressed, providing users with control over their display.
• Shadow Customization: Customize the shadow color and other properties of alerts to match your application's design language.
• Progress Bar: Show a progress bar within alerts to indicate ongoing processes or tasks.
• Loading Indicator: Display a loading indicator within alerts to indicate activity or loading states.
• Animation Modes: Choose between different animation modes for the loading indicator, allowing for unique visual effects.
• Swipable Alerts: Enable swiping gestures to dismiss alerts, offering intuitive and convenient user interaction.
• Hide After Loading: Automatically hide alerts after completion of loading, streamlining the user experience.
• Responsive Design: Ensure optimal rendering across different devices.
• React Native Safe Area Support: Seamlessly integrate with the react-native-safe-area-context library to handle safe areas in your app, ensuring proper rendering across different devices.

These features provide extensive customization options and enhance the engagement and usability of rn-alertify, making it a powerful and versatile library for creating interactive and visually appealing alerts in your React Native applications.

See the tiktok explanation here

You can install React Native Alertify using either Yarn or npm.

yarn add rn-alertify

or

npm install rn-alertify

This library, rn-alertify, makes use of the react-native-safe-area-context library, which provides functionality for handling safe areas in React Native applications. We would like to acknowledge and give credit to the creators of react-native-safe-area-context for their valuable contribution to the React Native ecosystem.

If you find react-native-safe-area-context useful, we encourage you to visit the official documentation of react-native-safe-area-context to learn more about its features and usage. The creators have put in significant effort to develop and maintain this library, and your support and recognition are greatly appreciated.

If you dont have react-native-safe-area-context installed in your project, you can install it using either Yarn or npm.

yarn add react-native-safe-area-context

or

npm install react-native-safe-area-context

To use React Native Alertify, you need to wrap your app with the AlertProvider component, ensure that the react-native-safe-area-context library is installed, and that the SafeAreaProvider component wrap the AlertProvider component to work properly.

import { AlertProvider } from 'rn-alertify';
import { SafeAreaProvider } from 'react-native-safe-area-context';

const App = () => {
  return (
    <SafeAreaProvider>
      <AlertProvider>{/* Your app content here */}</AlertProvider>
    </SafeAreaProvider>
  );
};

The AlertProvider component accepts the following props:

After wrapping your app with AlertProvider, you can use the alert by accessing the context using the useAlertContext hook.

import { useAlertContext } from 'rn-alertify';

const MyComponent = () => {
  const { showAlert, onClose, onOpen, isShowing } = useAlertContext();

  return {
    /* Your app content here */
  };
};

The useAlertContext hook provides the following props:

If you want to see more information and examples about each of these props, please refer to the API Methods section.

The AlertProvider component allows users to customize the theme by providing a custom theme object of type AlertTheme.

The AlertThemeProps object consists of the following properties:

The AlertThemeColors object defines color values for various parts of the alert:

The AlertThemeColorSet object defines color values for a specific theme (light or dark):

The AlertThemeFontSizes object specifies font-related properties for the alert:

The AlertThemeShadow object defines properties related to the shadow effect of the alert:

By providing a custom theme object that conforms to the AlertTheme interface, users can customize the colors, font sizes, and other visual aspects of the alert component to match their application's design and branding.

To customize the theme of the AlertProvider, you can provide a custom theme object of type AlertTheme. Here's an example of how you can define a custom theme:

import { AlertProvider, AlertTheme } from 'rn-alertify';

const customTheme: AlertTheme = {
  colors: {
    light: {
      backgroundColor: '#F5F5F5',
      success: '#008000',
      error: '#FF0000',
      info: '#0000FF',
      warning: '#FFA500',
      titleColor: '#333333',
      messageColor: '#666666',
      shadow: {
        shadowColor: '#000000',
        shadowOpacity: 0.3,
        shadowOffset: {
          width: 2,
          height: 2,
        },
        shadowRadius: 4,
        elevation: 4,
      },
      loadingIconColor: '#555555',
    },
    dark: {
      backgroundColor: '#222222',
      success: '#00FF00',
      error: '#FF0000',
      info: '#FFFFFF',
      warning: '#FFA500',
      titleColor: '#FFFFFF',
      messageColor: '#CCCCCC',
      shadow: {
        shadowColor: '#000000',
        shadowOpacity: 0.5,
        shadowOffset: {
          width: 3,
          height: 3,
        },
        shadowRadius: 6,
        elevation: 6,
      },
      loadingIconColor: '#CCCCCC',
    },
  },
  fontSizes: {
    fontSizeTitle: 18,
    fontSizeMessage: 14,
    fontFamily: 'Roboto',
  },
};

const App = () => {
  return (
    <AlertProvider theme={customTheme}>
      {/* Your app components */}
    </AlertProvider>
  );
};

export default App;

In this example, we define a custom theme object customTheme with color values and font-related properties for both the light and dark themes. You can adjust the color values, font sizes, and other properties according to your preferences. Then, you can wrap your app components with the AlertProvider component and provide the theme prop with your custom theme object.

By using a custom theme, you can ensure that the alerts rendered by rn-alertify align with your application's design and branding.

The showAlert method displays an alert with the specified properties.

import { useAlertContext } from 'rn-alertify';

const MyComponent = () => {
  const { showAlert } = useAlertContext();

  const handleButtonPress = () => {
    showAlert({
      title: 'Hello',
      message: 'Welcome to React Native Alertify!',
      type: 'success',
      duration: 3000,
    });
  };

  return <Button title="Show Alert" onPress={handleButtonPress} />;
};

The changeContent method allows you to change the content of the alert.

const { showAlert, isShowing, setLoader, isLoading, changeContent } =
  useAlertContext();
const simulateAsync = (number: number) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      number > 0.5 ? resolve(true) : reject();
    }, 2000);
  });
};

const handleClick = async () => {
  const random = Math.random();
  setLoader(true);
  showAlert({
    title: 'Loading',
    message: 'Please wait...',
  });
  try {
    await simulateAsync(random);
    setLoader(false);
    changeContent({
      title: 'Success',
      message: 'You have successfully loaded the alert',
      type: 'success',
    });
  } catch (e) {
    setLoader(false);
    changeContent({
      title: 'Error',
      message: 'Something went wrong',
      type: 'error',
    });
  }
};

The changeContent method accepts the same props as the showAlert method, see the ShowAlert Props section for more details.

The setLoader method allows you to handle the loading state of the alert.

const { showAlert, isShowing, setLoader, isLoading } = useAlertContext();
const simulateAsync = (number: number) => {
  setLoader(true);
  showAlert({
    title: 'Loading',
    message: 'Please wait...',
  });
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      number > 0.5 ? resolve(true) : reject();
    }, 2000);
  });
  setLoader(false);
};

React.useEffect(() => {
  const random = Math.random();
  simulateAsync(random);
}, []);

Note: The onClose method is under development and may cause problems. Use it with caution.

The onClose method allows you to register a callback function to be called when the alert's state changes to closed.

onClose(callback: () => void): void;

Use this function if you want to perform certain actions when the alert's state changes to closed.

Example:

onClose(() => {
  // Your code here
});

Note: The onOpen method is under development and may cause problems. Use it with caution.

The onOpen method allows you to register a callback function to be called when the alert's state changes to open.

onOpen(callback: () => void): void;

Use this function if you want to perform certain actions when the alert's state changes to open.

Example:

onOpen(() => {
  // Your code here
});

The isShowing property returns the current state of the alert.

isShowing: boolean;

You can use this property to check if the alert is currently being displayed.

if (isShowing) {
  // Alert is showing
} else {
  // Alert is not showing
}

The isLoading property returns the current loading state of the alert.

isLoading: boolean;

You can use this property to check if the alert is currently loading.

if (isLoading) {
  // Alert is loading
} else {
  // Alert is not loading
}

Please note that the onClose and onOpen methods are still under development and may have limitations or issues. Use them with caution and make sure to test thoroughly in your application.

If you find any issues with the library, please create an issue, specifying the problem and how to reproduce it, if is possible upload a screenshot or video of the issue.

I'll try to fix it as soon as possible.

Certainly! Here's an example of a "Contributing" section for your README:

Thank you for considering contributing to the React Native Alertify library! We welcome any contributions that help improve the library and provide a better experience for users. To contribute, please follow these guidelines:

See the contributing guide to learn how to contribute to the repository and the development workflow.

We appreciate your contributions and will review the pull request as soon as possible. Together, let's make React Native Alertify even better!

This library was created by Esteban Estrada, a passionate developer who loves to learn new technologies and build cool things.

Esteban Estrada is an experienced full stack developer. He is passionate about creating efficient and user-friendly solutions for developers. This library, rn-alertify, is one of his contributions to the React Native community.

You can connect with Esteban Estrada on LinkedIn and GitHub to learn more about his work and other projects.

Feel free to reach out to Esteban Estrada with any questions, feedback, or suggestions related to rn-alertify.

This library is open-source and available under the MIT License. You are free to use, modify, and distribute this library for personal or commercial purposes. However, it would be greatly appreciated if you provide support to the creator by giving credit and acknowledging their contribution.

Remember to follow the best practices and guidelines while using this library. If you encounter any issues or have suggestions for improvements, feel free to contribute to the repository or reach out to the creator for support.

By using rn-alertify, you agree to comply with the terms and conditions of the MIT License.

Made with create-react-native-library