🎨 react-native-popify

Beautiful, animated alerts & toasts for React Native

A lightweight, zero-dependency UI library that provides stunning alert dialogs and smooth toast notifications for React Native apps — with spring animations, particle effects, dark mode, swipe-to-dismiss, and full customization.

📱 Demo

App Preview

🎬 See It in Action

✨ Features

• 4 Alert types — success, error, warning, info with unique colors & icons
• 3 Animation styles — spring, slideUp, fadeIn
• Particle burst effects — Celebrate achievements with animated particles
• Toast notifications — Slide-in toasts with progress bar & swipe-to-dismiss
• Dark mode — Built-in light & dark theme support
• Auto-close timer — With animated progress indicator
• Flexible button layouts — Horizontal, vertical, or auto
• Custom icons — Pass your own icon components
• Custom header & footer — Render anything above or below content
• Style overrides — Full control over every visual element
• Pure JS — No native linking required
• iOS & Android — Works on both platforms out of the box

📦 Installation

# npm
npm install react-native-popify

# yarn
yarn add react-native-popify

Note: This library has zero native dependencies. No pod install or linking needed!

🚀 Quick Start

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { PopifyAlert, PopifyToast } from 'react-native-popify';

export default function App() {
  const [showAlert, setShowAlert] = useState(false);
  const [showToast, setShowToast] = useState(false);

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

      <PopifyAlert
        visible={showAlert}
        type="success"
        title="Success!"
        message="Your action was completed successfully."
        onClose={() => setShowAlert(false)}
        buttons={[
          { label: 'OK', onPress: () => setShowAlert(false) },
        ]}
      />

      <PopifyToast
        visible={showToast}
        type="success"
        message="Changes saved successfully!"
        onClose={() => setShowToast(false)}
      />
    </View>
  );
}

📖 Components

PopifyAlert

A fully animated modal alert dialog with rich visuals.

<PopifyAlert
  visible={true}
  type="success"
  title="Payment Successful! 🎉"
  message="Your transaction has been processed."
  showParticles
  onClose={() => setVisible(false)}
  buttons={[
    { label: 'View Receipt', onPress: () => {} },
    { label: 'Done', onPress: () => {}, outline: true },
  ]}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | visible | boolean | false | Show or hide the alert | | type | 'success' \| 'error' \| 'warning' \| 'info' | 'info' | Alert type — sets color & icon | | title | string | — | Alert title text | | message | string | — | Alert message body | | onClose | () => void | — | Called when alert is dismissed | | buttons | Button[] | [] | Array of action buttons (see below) | | animationType | 'spring' \| 'slideUp' \| 'fadeIn' | 'spring' | Entrance animation style | | duration | number | 350 | Animation duration in ms | | autoClose | boolean | false | Auto-dismiss after timeout | | autoCloseDuration | number | 3000 | Auto-close delay in ms | | showCloseButton | boolean | true | Show the ✕ close button | | showIcon | boolean | true | Show the type icon | | showParticles | boolean | false | Enable particle burst animation | | customIcon | ReactNode | — | Custom icon component | | buttonLayout | 'horizontal' \| 'vertical' \| 'auto' | 'auto' | Button arrangement | | theme | 'light' \| 'dark' | 'light' | Color theme | | titleStyle | TextStyle | — | Custom title styles | | messageStyle | TextStyle | — | Custom message styles | | containerStyle | ViewStyle | — | Custom card container styles | | overlayStyle | ViewStyle | — | Custom overlay styles | | renderHeader | () => ReactNode | — | Custom header renderer | | renderFooter | () => ReactNode | — | Custom footer renderer |

Button Object

| Property | Type | Required | Description | |----------|------|----------|-------------| | label | string | ✅ | Button text | | onPress | () => void | ✅ | Press handler | | color | string | — | Custom button color | | outline | boolean | — | Outline style instead of filled | | style | ViewStyle | — | Custom button style | | textStyle | TextStyle | — | Custom button text style |

PopifyToast

A lightweight, swipeable toast notification.

<PopifyToast
  visible={true}
  type="error"
  title="Upload Failed"
  message="The file could not be uploaded. Try again."
  position="top"
  duration={3500}
  onClose={() => setVisible(false)}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | visible | boolean | false | Show or hide the toast | | type | 'success' \| 'error' \| 'warning' \| 'info' | 'info' | Toast type — sets color & icon | | message | string | '' | Toast message text | | title | string | — | Optional title above message | | position | 'top' \| 'bottom' | 'top' | Screen position | | duration | number | 3000 | Auto-dismiss delay in ms (0 to disable) | | onClose | () => void | — | Called when toast is dismissed | | showProgress | boolean | true | Show countdown progress bar | | showIcon | boolean | true | Show the type icon | | theme | 'light' \| 'dark' | 'light' | Color theme | | style | ViewStyle | — | Custom container style | | customIcon | ReactNode | — | Custom icon component |

Tip: Swipe up (top toast) or down (bottom toast) to dismiss!

🎯 Examples

Success Alert with Particles

<PopifyAlert
  visible={visible}
  type="success"
  title="Achievement Unlocked! 🏆"
  message="You've completed 100 tasks!"
  showParticles
  onClose={() => setVisible(false)}
  buttons={[{ label: 'Celebrate!', onPress: () => setVisible(false) }]}
/>

Dark Theme Alert

<PopifyAlert
  visible={visible}
  type="info"
  theme="dark"
  title="Dark Mode Active 🌙"
  message="Enjoy the sleek dark interface."
  onClose={() => setVisible(false)}
  buttons={[
    { label: 'Looks Great!', onPress: () => setVisible(false) },
    { label: 'Switch to Light', onPress: () => setVisible(false), outline: true },
  ]}
/>

Auto-Close Alert with Timer

<PopifyAlert
  visible={visible}
  type="info"
  title="Session Expiring"
  message="Your session will expire soon."
  autoClose
  autoCloseDuration={4000}
  showCloseButton={false}
  onClose={() => setVisible(false)}
  buttons={[{ label: 'Extend Session', onPress: () => setVisible(false) }]}
/>

Multi-Button Vertical Layout

<PopifyAlert
  visible={visible}
  type="warning"
  title="Save Changes?"
  message="You have unsaved changes. What would you like to do?"
  buttonLayout="vertical"
  onClose={() => setVisible(false)}
  buttons={[
    { label: 'Save & Exit', onPress: () => {}, color: '#00C853' },
    { label: 'Discard Changes', onPress: () => {}, color: '#FF3D71' },
    { label: 'Continue Editing', onPress: () => {}, outline: true, color: '#FFAA00' },
  ]}
/>

Slide-Up Animation

<PopifyAlert
  visible={visible}
  type="success"
  animationType="slideUp"
  title="Slide Animation ✨"
  message="Smoothly slides up with a spring bounce."
  onClose={() => setVisible(false)}
  buttons={[{ label: 'Awesome!', onPress: () => setVisible(false) }]}
/>

Bottom Toast

<PopifyToast
  visible={visible}
  type="info"
  position="bottom"
  message="You're all caught up! No new notifications."
  onClose={() => setVisible(false)}
  duration={3000}
/>

🎨 Alert Types

| Type | Color | Icon | Use Case | |------|-------|------|----------| | success | 🟢 #00C853 | ✓ | Confirmations, completions | | error | 🔴 #FF3D71 | ✕ | Failures, errors | | warning | 🟡 #FFAA00 | ! | Destructive actions, cautions | | info | 🔵 #3366FF | i | Updates, information |

🏗️ Running the Example App

# Clone the repository
git clone https://github.com/Qurat-ul-ainn/react-native-popify.git
cd react-native-popify

# Install dependencies
yarn install

# Run on iOS
cd example && yarn ios

# Run on Android
cd example && yarn android

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide and Code of Conduct before submitting a pull request.

📄 License

MIT © Qurat-ul-ain

If you found this helpful, please ⭐ the repo — it means a lot!