beautiful-snackbar 1.0.0 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -3
- package/README_NPM.md +240 -0
- package/package.json +16 -3
package/README.md
CHANGED
|
@@ -4,9 +4,16 @@ A lightweight, premium, highly customizable, and **Reanimated-free** notificatio
|
|
|
4
4
|
|
|
5
5
|
<div align="center">
|
|
6
6
|
<br />
|
|
7
|
-
<div style="background-color: #1e1e2e; border: 1px solid #313244; padding:
|
|
8
|
-
<
|
|
9
|
-
|
|
7
|
+
<div style="background-color: #1e1e2e; border: 1px solid #313244; padding: 20px; border-radius: 12px; max-width: 580px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
|
8
|
+
<p style="color: #cdd6f4; font-family: sans-serif; font-size: 14px; margin-bottom: 12px; font-weight: bold;">📸 Screenshots</p>
|
|
9
|
+
<div style="display: flex; flex-direction: row; justify-content: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;">
|
|
10
|
+
<img width="260" alt="Screenshot 1" src="https://github.com/user-attachments/assets/22e81863-c46b-414a-9ef4-b8a17ef1caf2" style="border-radius: 8px; border: 1px solid #45475a;" />
|
|
11
|
+
<img width="260" alt="Screenshot 2" src="https://github.com/user-attachments/assets/3cb11aad-3b7b-4839-a172-cf303e8b22e8" style="border-radius: 8px; border: 1px solid #45475a;" />
|
|
12
|
+
</div>
|
|
13
|
+
<div style="background-color: #11111b; padding: 12px; border-radius: 8px; border: 1px dashed #45475a;">
|
|
14
|
+
<a href="https://github.com/Satwikk1/beautiful-snackbar" target="_blank" style="color: #cdd6f4; text-decoration: none; font-family: sans-serif; font-size: 13px; font-weight: bold;">
|
|
15
|
+
🎬 Click here to watch the full Video Demo on GitHub
|
|
16
|
+
</a>
|
|
10
17
|
</div>
|
|
11
18
|
</div>
|
|
12
19
|
<br />
|
package/README_NPM.md
ADDED
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
# 🌈 Beautiful Snackbar
|
|
2
|
+
|
|
3
|
+
A lightweight, premium, highly customizable, and **Reanimated-free** notification system for React Native and Expo. Powered by standard React Native `Animated` with native driver transitions to guarantee buttery-smooth 60fps animations.
|
|
4
|
+
|
|
5
|
+
<div align="center">
|
|
6
|
+
<br />
|
|
7
|
+
<div style="background-color: #1e1e2e; border: 1px solid #313244; padding: 20px; border-radius: 12px; max-width: 580px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
|
8
|
+
<p style="color: #cdd6f4; font-family: sans-serif; font-size: 14px; margin-bottom: 12px; font-weight: bold;">📸 Screenshots</p>
|
|
9
|
+
<div style="display: flex; flex-direction: row; justify-content: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;">
|
|
10
|
+
<img width="260" alt="Screenshot 1" src="https://github.com/user-attachments/assets/22e81863-c46b-414a-9ef4-b8a17ef1caf2" style="border-radius: 8px; border: 1px solid #45475a;" />
|
|
11
|
+
<img width="260" alt="Screenshot 2" src="https://github.com/user-attachments/assets/3cb11aad-3b7b-4839-a172-cf303e8b22e8" style="border-radius: 8px; border: 1px solid #45475a;" />
|
|
12
|
+
</div>
|
|
13
|
+
<div style="background-color: #11111b; padding: 12px; border-radius: 8px; border: 1px dashed #45475a;">
|
|
14
|
+
<a href="https://github.com/Satwikk1/beautiful-snackbar" target="_blank" style="color: #cdd6f4; text-decoration: none; font-family: sans-serif; font-size: 13px; font-weight: bold;">
|
|
15
|
+
🎬 Click here to watch the full Video Demo on GitHub
|
|
16
|
+
</a>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<br />
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## 💡 Why Beautiful Snackbar?
|
|
25
|
+
|
|
26
|
+
Most React Native notification libraries either require heavy libraries like `react-native-reanimated` or wrap your entire code in complex React context providers.
|
|
27
|
+
|
|
28
|
+
`beautiful-snackbar` was built to solve this by providing:
|
|
29
|
+
* 🔋 **Zero Heavy Dependencies:** Written entirely using React Native's built-in `Animated` API with `useNativeDriver: true`.
|
|
30
|
+
* ⚡ **Singleton Architecture:** Trigger notifications from anywhere—inside a Redux action, an Axios interceptor, or a vanilla helper function—without hooks, contexts, or prop-drilling.
|
|
31
|
+
* 🎹 **True Keyboard Synchronization:** Dynamically adjusts its position as the soft keyboard slides up, taking safe areas into account so that it sits naturally at a configured height without compounding inset paddings.
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## ✨ Features
|
|
36
|
+
|
|
37
|
+
* 🚀 **Buttery-Smooth Animations:** Built-in transition presets (`slide`, `fade`, `scale`) that execute entirely on the native thread.
|
|
38
|
+
* ⌨️ **Keyboard & Safe Area Aware:** Intelligently listens to keyboard show/hide events and automatically translates above the keyboard while cleanly canceling out safe area bottom margins.
|
|
39
|
+
* 🛠️ **Custom UI Templates:** Register your own custom layouts at the root, and trigger them dynamically from anywhere by passing custom metadata.
|
|
40
|
+
* ⚙️ **Global Configuration Manager:** Tweak properties (offsets, animations, placement) dynamically at runtime via manager setters.
|
|
41
|
+
* 🧭 **Navigation Listener:** Automatically dismisses active snackbars on navigation transitions to keep user experience clean.
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## 📦 Installation
|
|
46
|
+
|
|
47
|
+
Install the package using your favorite package manager:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
# Using yarn
|
|
51
|
+
yarn add beautiful-snackbar
|
|
52
|
+
|
|
53
|
+
# Using npm
|
|
54
|
+
npm install beautiful-snackbar
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Peer Dependencies
|
|
58
|
+
To handle safe area offsets and screen layouts cleanly, ensure you have `react-native-safe-area-context` installed:
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
npx expo install react-native-safe-area-context
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## 🚀 Quick Start
|
|
67
|
+
|
|
68
|
+
### 1. Mount the Root Provider
|
|
69
|
+
Render `<BeautifulSnackbar />` at the root of your application (usually inside `_layout.tsx` or `App.tsx`). This acts as the overlay portal.
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
import React from 'react';
|
|
73
|
+
import { View } from 'react-native';
|
|
74
|
+
import { BeautifulSnackbar } from 'beautiful-snackbar';
|
|
75
|
+
|
|
76
|
+
export default function Layout() {
|
|
77
|
+
return (
|
|
78
|
+
<View style={{ flex: 1 }}>
|
|
79
|
+
{/* Your main app views (Tabs, Stack, etc.) */}
|
|
80
|
+
|
|
81
|
+
{/* Overlay container */}
|
|
82
|
+
<BeautifulSnackbar />
|
|
83
|
+
</View>
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### 2. Trigger Notifications Anywhere
|
|
89
|
+
Simply import the `snackbar` singleton instance and call `.show()` from anywhere in your codebase:
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
import { snackbar } from 'beautiful-snackbar';
|
|
93
|
+
|
|
94
|
+
// Trigger a default bottom toast
|
|
95
|
+
snackbar.show({
|
|
96
|
+
message: '✨ Profile updated successfully!',
|
|
97
|
+
backgroundColor: '#10B981', // Emerald green
|
|
98
|
+
duration: 'short',
|
|
99
|
+
});
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## 🛠️ Advanced Usage & Customization
|
|
105
|
+
|
|
106
|
+
### 1. Global Configuration Manager
|
|
107
|
+
You can modify the default behaviors dynamically. This is typically done during app startup:
|
|
108
|
+
|
|
109
|
+
```tsx
|
|
110
|
+
import { snackbar } from 'beautiful-snackbar';
|
|
111
|
+
|
|
112
|
+
// Set global configuration defaults
|
|
113
|
+
snackbar.setPosition('bottom'); // Set default position ('top' | 'bottom')
|
|
114
|
+
snackbar.setAnimationType('scale'); // Set default entry animation ('slide' | 'fade' | 'scale')
|
|
115
|
+
snackbar.setBottomOffset(24); // Set default bottom spacing in pixels
|
|
116
|
+
snackbar.setAvoidKeyboard(true); // Enable/disable soft keyboard avoidance
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### 2. Custom UI Template Registration
|
|
120
|
+
Do you need custom cards, badge overlays, or promotional layouts? Register your custom React layouts at the root using the `templates` prop:
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
import React from 'react';
|
|
124
|
+
import { View, Text, TouchableOpacity } from 'react-native';
|
|
125
|
+
import { BeautifulSnackbar } from 'beautiful-snackbar';
|
|
126
|
+
|
|
127
|
+
// Define your custom template layout
|
|
128
|
+
const customTemplates = {
|
|
129
|
+
promoCard: ({ item, dismiss }) => (
|
|
130
|
+
<View style={{ padding: 16, backgroundColor: '#31115F', borderRadius: 12 }}>
|
|
131
|
+
<Text style={{ color: '#ffffff', fontWeight: 'bold' }}>{item.message}</Text>
|
|
132
|
+
<Text style={{ color: '#C084FC' }}>{item.data?.subtitle}</Text>
|
|
133
|
+
|
|
134
|
+
<TouchableOpacity onPress={dismiss}>
|
|
135
|
+
<Text style={{ color: '#F59E0B', marginTop: 8 }}>Got it</Text>
|
|
136
|
+
</TouchableOpacity>
|
|
137
|
+
</View>
|
|
138
|
+
),
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
export default function App() {
|
|
142
|
+
return (
|
|
143
|
+
<View style={{ flex: 1 }}>
|
|
144
|
+
<BeautifulSnackbar templates={customTemplates} />
|
|
145
|
+
</View>
|
|
146
|
+
);
|
|
147
|
+
}
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
Trigger your custom UI card programmatically from anywhere:
|
|
151
|
+
```tsx
|
|
152
|
+
import { snackbar } from 'beautiful-snackbar';
|
|
153
|
+
|
|
154
|
+
snackbar.show({
|
|
155
|
+
type: 'promoCard', // Match the template key
|
|
156
|
+
message: 'Premium Feature Unlocked!',
|
|
157
|
+
data: {
|
|
158
|
+
subtitle: 'Enjoy unlimited ad-free streaming.',
|
|
159
|
+
},
|
|
160
|
+
duration: 'infinite', // Keep visible until dismissed manually
|
|
161
|
+
});
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
### 3. Actionable Buttons
|
|
165
|
+
Create standard, actionable snackbars with button press handlers:
|
|
166
|
+
|
|
167
|
+
```tsx
|
|
168
|
+
snackbar.show({
|
|
169
|
+
message: '🗑️ Message permanently deleted.',
|
|
170
|
+
backgroundColor: '#1E293B',
|
|
171
|
+
actionLabel: 'Undo',
|
|
172
|
+
actionColor: '#818CF8',
|
|
173
|
+
onActionPress: () => {
|
|
174
|
+
// Perform undo action
|
|
175
|
+
snackbar.show({ message: 'Restored!', backgroundColor: '#10B981' });
|
|
176
|
+
},
|
|
177
|
+
});
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
## 📖 API Reference
|
|
183
|
+
|
|
184
|
+
### `<BeautifulSnackbar />` Props
|
|
185
|
+
|
|
186
|
+
| Prop | Type | Default | Description |
|
|
187
|
+
| :--- | :--- | :--- | :--- |
|
|
188
|
+
| `navigation` | `any` | `undefined` | Optional React Navigation controller reference to automatically clear notifications on screen changes. |
|
|
189
|
+
| `avoidKeyboard` | `boolean` | `true` | When `true`, snackbars automatically shift up dynamically when the keyboard appears. |
|
|
190
|
+
| `templates` | `Record<string, Component>` | `undefined` | Map of key-value pairs representing custom templates. |
|
|
191
|
+
|
|
192
|
+
### `snackbar.show()` Configuration Options
|
|
193
|
+
|
|
194
|
+
| Property | Type | Default | Description |
|
|
195
|
+
| :--- | :--- | :--- | :--- |
|
|
196
|
+
| `message` | `string` | **Required** | The message string to display inside standard alerts. |
|
|
197
|
+
| `duration` | `'short' \| 'medium' \| 'long' \| 'infinite' \| number` | `'short'` | Time on screen. Short (1500ms), Medium (2750ms), Long (4000ms), Infinite (requires dismissal), or custom duration in milliseconds. |
|
|
198
|
+
| `position` | `'top' \| 'bottom'` | `'bottom'` (config) | Placement on screen. Overrides global manager position. |
|
|
199
|
+
| `animationType` | `'slide' \| 'fade' \| 'scale'` | `'slide'` (config) | Transition style preset. Overrides global manager type. |
|
|
200
|
+
| `bottomOffset` | `number` | `24` (config) | Pixel spacing from screen bottom or soft keyboard. |
|
|
201
|
+
| `topOffset` | `number` | `50` (iOS) / `24` (Android) | Pixel spacing from screen top. |
|
|
202
|
+
| `backgroundColor` | `string` | `'#1E293B'` | Custom container background color. |
|
|
203
|
+
| `textColor` | `string` | `'#F8FAFC'` | Custom color for message text. |
|
|
204
|
+
| `actionLabel` | `string` | `undefined` | Interactive button label text. |
|
|
205
|
+
| `actionColor` | `string` | `'#6366F1'` | Text color of the interactive button. |
|
|
206
|
+
| `onActionPress` | `() => void` | `undefined` | Callback function triggered when action button is clicked. |
|
|
207
|
+
| `icon` | `React.ReactNode` | `undefined` | Optional leading element (e.g. image, custom SVG, text emoji). |
|
|
208
|
+
| `dismissOnNavigation` | `boolean` | `true` | If `true`, dismisses the notification when user changes pages. |
|
|
209
|
+
| `type` | `string` | `undefined` | Key matching a registered custom template component. |
|
|
210
|
+
| `data` | `any` | `undefined` | Arbitrary context payload passed down to custom templates. |
|
|
211
|
+
|
|
212
|
+
---
|
|
213
|
+
|
|
214
|
+
## 🛠️ Testing & Running the Example App
|
|
215
|
+
|
|
216
|
+
To inspect the package interactively, run the local Expo example app:
|
|
217
|
+
|
|
218
|
+
1. **Clone and Install dependencies:**
|
|
219
|
+
Ensure `"private": true` is set in the root `package.json` before running `yarn` (this is required to prevent Yarn workspace resolution conflicts).
|
|
220
|
+
```bash
|
|
221
|
+
yarn install
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
2. **Build the parent library:**
|
|
225
|
+
```bash
|
|
226
|
+
yarn run build
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
3. **Start the Expo development server:**
|
|
230
|
+
```bash
|
|
231
|
+
cd example
|
|
232
|
+
npx expo start
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
4. Press `i` to open in iOS simulator, or `a` to open in Android.
|
|
236
|
+
|
|
237
|
+
---
|
|
238
|
+
|
|
239
|
+
## 📄 License
|
|
240
|
+
This project is licensed under the **MIT License**.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "beautiful-snackbar",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "A beautiful, highly customizable, animated snackbar for React Native.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -9,15 +9,28 @@
|
|
|
9
9
|
"url": "git+https://github.com/Satwikk1/beautiful-snackbar.git"
|
|
10
10
|
},
|
|
11
11
|
"scripts": {
|
|
12
|
-
"build": "tsc"
|
|
12
|
+
"build": "tsc",
|
|
13
|
+
"prepublishOnly": "cp README_NPM.md README.md",
|
|
14
|
+
"postpublish": "git checkout README.md"
|
|
13
15
|
},
|
|
14
16
|
"private": false,
|
|
15
17
|
"keywords": [
|
|
16
18
|
"react-native",
|
|
19
|
+
"expo",
|
|
17
20
|
"snackbar",
|
|
18
21
|
"toast",
|
|
19
22
|
"notification",
|
|
20
|
-
"animated"
|
|
23
|
+
"animated",
|
|
24
|
+
"keyboard-aware",
|
|
25
|
+
"safe-area",
|
|
26
|
+
"reanimated-free",
|
|
27
|
+
"singleton",
|
|
28
|
+
"banner",
|
|
29
|
+
"ui",
|
|
30
|
+
"custom-ui",
|
|
31
|
+
"ios",
|
|
32
|
+
"android",
|
|
33
|
+
"typescript"
|
|
21
34
|
],
|
|
22
35
|
"author": "",
|
|
23
36
|
"license": "MIT",
|