React Native Beautiful Alerts

A modern, customizable alert system for React Native applications with beautiful animations and flexible styling options.

View Live Demo • Report Bug • Request Feature

Features

• 🎨 Multiple alert types: success, error, warning, and custom messages
• ⚡ Smooth animations with Lottie integration
• 🎛️ Customizable buttons with different styles
• 🔧 Flexible styling options
• 📱 Works on both iOS and Android

Installation

Install the package:

bun install react-native-beautiful-alerts @react-native-community/blur lottie-react-native react-native-portalize react-native-reanimated

Setup

Wrap your app with the Provider component:

import { Provider } from 'react-native-beautiful-alerts'

const App = () => {
  return (
    <Provider>
      <YourApp />
    </Provider>
  )
}

Usage

Basic Alerts

Show simple alerts with automatic dismissal:

import { useAlert } from 'react-native-beautiful-alerts'

const MyComponent = () => {
  const alert = useAlert()

  const showSuccessAlert = () => {
    alert.success({
      title: 'Success!',
      description: 'Your action completed successfully'
    })
  }

  const showErrorAlert = () => {
    alert.error({
      title: 'Error',
      description: 'Something went wrong'
    })
  }

  const showWarningAlert = () => {
    alert.warning({
      title: 'Warning',
      description: 'Please check your input'
    })
  }

  return (
    <View>
      <TouchableOpacity onPress={showSuccessAlert}>
        <Text>Show Success Alert</Text>
      </TouchableOpacity>
    </View>
  )
}

Custom Alerts with Buttons

Create alerts with custom buttons and actions:

import { useAlert, ButtonStyle } from 'react-native-beautiful-alerts'

const MyComponent = () => {
  const alert = useAlert()

  const showCustomAlert = () => {
    alert.message({
      title: 'Custom Alert',
      description: 'Choose an action',
      buttons: [
        {
          text: 'Cancel',
          style: ButtonStyle.Cancel,
          onPress: () => console.log('Cancelled')
        },
        {
          text: 'Confirm',
          style: ButtonStyle.Bold,
          onPress: () => console.log('Confirmed')
        },
        {
          text: 'Delete',
          style: ButtonStyle.Danger,
          onPress: () => console.log('Deleted')
        }
      ]
    })
  }

  return (
    <View>
      <TouchableOpacity onPress={showCustomAlert}>
        <Text>Show Custom Alert</Text>
      </TouchableOpacity>
    </View>
  )
}

Button Styles

Available button styles:

• ButtonStyle.Regular - Standard button
• ButtonStyle.Bold - Bold/Primary button
• ButtonStyle.Cancel - Cancel button (positioned first or last depending on number of buttons)
• ButtonStyle.Danger - Destructive action button

Customization

You can customize fonts and styles by passing props to the Provider:

<Provider
  fonts={{
    regular: 'YourFontRegular',
    semiBold: 'YourFontSemiBold',
    bold: 'YourFontBold',
    extraBold: 'YourFontExtraBold'
  }}
  meta={{
    backgroundColor: '#FFFFFF',
    dangerColor: '#FF3B30',
    defaultColor: '#007AFF',
    buttonFontSize: 16,
    titleFontSize: 18,
    descriptionFontSize: 14
  }}
>
  <YourApp />
</Provider>

Contributing

Contributions are welcome! If you have ideas for improvements or find any issues, please open an issue or submit a pull request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

Distributed under the ISC License. See LICENSE for more information.