react-native-popify 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 qurat.ul.ain
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Popify.podspec

@@ -0,0 +1,21 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "Popify"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/Qurat-ul-ainn/react-native-popify.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+
+  install_modules_dependencies(s)
+end

package/README.md

@@ -0,0 +1,329 @@
+<div align="center">
+
+# 🎨 react-native-popify
+
+**Beautiful, animated alerts & toasts for React Native**
+
+[![npm version](https://img.shields.io/npm/v/react-native-popify.svg?style=flat-square&color=00C853)](https://www.npmjs.com/package/react-native-popify)
+[![license](https://img.shields.io/npm/l/react-native-popify.svg?style=flat-square&color=3366FF)](https://github.com/Qurat-ul-ainn/react-native-popify/blob/main/LICENSE)
+[![platform](https://img.shields.io/badge/platform-iOS%20%7C%20Android-lightgrey?style=flat-square)](https://reactnative.dev)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/Qurat-ul-ainn/react-native-popify/pulls)
+
+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.
+
+</div>
+
+---
+
+## ✨ 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
+
+```bash
+# 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
+
+```jsx
+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.
+
+```jsx
+<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.
+
+```jsx
+<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
+
+```jsx
+<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
+
+```jsx
+<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
+
+```jsx
+<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
+
+```jsx
+<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
+
+```jsx
+<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
+
+```jsx
+<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
+
+```bash
+# 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](CONTRIBUTING.md) and [Code of Conduct](CODE_OF_CONDUCT.md) before submitting a pull request.
+
+---
+
+## 📄 License
+
+MIT © [Qurat-ul-ain](https://github.com/Qurat-ul-ainn)
+
+---
+
+<div align="center">
+
+**If you found this helpful, please ⭐ the repo — it means a lot!**
+
+</div>

package/android/build.gradle

@@ -0,0 +1,77 @@
+buildscript {
+  ext.getExtOrDefault = {name ->
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['Popify_' + name]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["Popify_" + name]).toInteger()
+}
+
+android {
+  namespace "com.popify"
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += [
+        "generated/java",
+        "generated/jni"
+      ]
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+Popify_kotlinVersion=2.0.21
+Popify_minSdkVersion=24
+Popify_targetSdkVersion=34
+Popify_compileSdkVersion=35
+Popify_ndkVersion=27.1.12297006

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/popify/PopifyModule.kt

@@ -0,0 +1,23 @@
+package com.popify
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.annotations.ReactModule
+
+@ReactModule(name = PopifyModule.NAME)
+class PopifyModule(reactContext: ReactApplicationContext) :
+  NativePopifySpec(reactContext) {
+
+  override fun getName(): String {
+    return NAME
+  }
+
+  // Example method
+  // See https://reactnative.dev/docs/native-modules-android
+  override fun multiply(a: Double, b: Double): Double {
+    return a * b
+  }
+
+  companion object {
+    const val NAME = "Popify"
+  }
+}

package/android/src/main/java/com/popify/PopifyPackage.kt

@@ -0,0 +1,33 @@
+package com.popify
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import java.util.HashMap
+
+class PopifyPackage : BaseReactPackage() {
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return if (name == PopifyModule.NAME) {
+      PopifyModule(reactContext)
+    } else {
+      null
+    }
+  }
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+    return ReactModuleInfoProvider {
+      val moduleInfos: MutableMap<String, ReactModuleInfo> = HashMap()
+      moduleInfos[PopifyModule.NAME] = ReactModuleInfo(
+        PopifyModule.NAME,
+        PopifyModule.NAME,
+        false,  // canOverrideExistingModule
+        false,  // needsEagerInit
+        false,  // isCxxModule
+        true // isTurboModule
+      )
+      moduleInfos
+    }
+  }
+}

package/ios/Popify.h

@@ -0,0 +1,5 @@
+#import <PopifySpec/PopifySpec.h>
+
+@interface Popify : NSObject <NativePopifySpec>
+
+@end

package/ios/Popify.mm

@@ -0,0 +1,18 @@
+#import "Popify.h"
+
+@implementation Popify
+RCT_EXPORT_MODULE()
+
+- (NSNumber *)multiply:(double)a b:(double)b {
+    NSNumber *result = @(a * b);
+
+    return result;
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+    return std::make_shared<facebook::react::NativePopifySpecJSI>(params);
+}
+
+@end

package/lib/module/NativePopify.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { TurboModuleRegistry } from 'react-native';
+export default TurboModuleRegistry.getEnforcing('Popify');
+//# sourceMappingURL=NativePopify.js.map

package/lib/module/NativePopify.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TurboModuleRegistry","getEnforcing"],"sourceRoot":"../../src","sources":["NativePopify.ts"],"mappings":";;AAAA,SAASA,mBAAmB,QAA0B,cAAc;AAMpE,eAAeA,mBAAmB,CAACC,YAAY,CAAO,QAAQ,CAAC","ignoreList":[]}