react-native-earl-toastify 1.0.0 → 1.0.2
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/CHANGELOG.md +19 -0
- package/README.md +56 -143
- package/dist/Toast.d.ts.map +1 -1
- package/dist/Toast.js +11 -1
- package/dist/Toast.js.map +1 -1
- package/dist/ToastContainer.d.ts +1 -0
- package/dist/ToastContainer.d.ts.map +1 -1
- package/dist/ToastContainer.js +1 -0
- package/dist/ToastContainer.js.map +1 -1
- package/dist/ToastProvider.d.ts.map +1 -1
- package/dist/ToastProvider.js +15 -1
- package/dist/ToastProvider.js.map +1 -1
- package/package.json +1 -1
- package/src/Toast.tsx +16 -0
- package/src/ToastContainer.tsx +1 -0
- package/src/ToastProvider.tsx +24 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,25 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [1.0.2] - 2026-01-17
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- ✨ **Example Images & Video**: Added example images and video for better documentation
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## [1.0.1] - 2026-01-17
|
|
17
|
+
|
|
18
|
+
### Added
|
|
19
|
+
|
|
20
|
+
- ✨ **Smooth Layout Animations**: Remaining toasts now slide smoothly when one is dismissed
|
|
21
|
+
- Uses React Native's LayoutAnimation with easeInEaseOut timing (200ms)
|
|
22
|
+
- Enabled for both iOS and Android platforms
|
|
23
|
+
- No more jumpy transitions when multiple toasts are stacked
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
8
27
|
## [1.0.0] - 2026-01-17
|
|
9
28
|
|
|
10
29
|
### Added
|
package/README.md
CHANGED
|
@@ -18,6 +18,46 @@ A beautiful, customizable toast notification library for React Native with smoot
|
|
|
18
18
|
- 📱 **Full-Width Edge Styling**: No rounded corners for top/bottom toasts
|
|
19
19
|
- 🪶 **Zero Dependencies**: Uses only React Native's built-in Animated API
|
|
20
20
|
|
|
21
|
+
## 📸 Preview
|
|
22
|
+
|
|
23
|
+
<!-- Add your screenshots here -->
|
|
24
|
+
<!--  -->
|
|
25
|
+
<!--  -->
|
|
26
|
+
|
|
27
|
+
<table>
|
|
28
|
+
<tr>
|
|
29
|
+
<td align="center">
|
|
30
|
+
<b>Success</b><br/>
|
|
31
|
+
<img src="https://raw.githubusercontent.com/Swif7ify/react-native-earl-toastify/main/example/1.png" width="220"/>
|
|
32
|
+
</td>
|
|
33
|
+
<td align="center">
|
|
34
|
+
<b>Warning</b><br/>
|
|
35
|
+
<img src="https://raw.githubusercontent.com/Swif7ify/react-native-earl-toastify/main/example/2.png" width="220"/>
|
|
36
|
+
</td>
|
|
37
|
+
<td align="center">
|
|
38
|
+
<b>Error</b><br/>
|
|
39
|
+
<img src="https://raw.githubusercontent.com/Swif7ify/react-native-earl-toastify/main/example/3.png" width="220"/>
|
|
40
|
+
</td>
|
|
41
|
+
</tr>
|
|
42
|
+
<tr>
|
|
43
|
+
<td align="center">
|
|
44
|
+
<b>Info</b><br/>
|
|
45
|
+
<img src="https://raw.githubusercontent.com/Swif7ify/react-native-earl-toastify/main/example/4.png" width="220"/>
|
|
46
|
+
</td>
|
|
47
|
+
<td align="center">
|
|
48
|
+
<b>Show</b><br/>
|
|
49
|
+
<img src="https://raw.githubusercontent.com/Swif7ify/react-native-earl-toastify/main/example/5.png" width="220"/>
|
|
50
|
+
</td>
|
|
51
|
+
<td></td>
|
|
52
|
+
</tr>
|
|
53
|
+
</table>
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
### 🎥 Demo Video
|
|
57
|
+
https://github.com/user-attachments/assets/0c96e622-eb7e-4074-ac0a-97a0d04a5d31
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
21
61
|
## 📦 Installation
|
|
22
62
|
|
|
23
63
|
```bash
|
|
@@ -69,184 +109,57 @@ function MyComponent() {
|
|
|
69
109
|
|
|
70
110
|
## 🛠️ Creating a Toast Utility (Recommended)
|
|
71
111
|
|
|
72
|
-
For easier usage across your app, create a utility file that exposes toast functions globally
|
|
112
|
+
For easier usage across your app, create a utility file that exposes toast functions globally:
|
|
73
113
|
|
|
74
114
|
### 1. Create `utils/Toast.tsx`
|
|
75
115
|
|
|
76
116
|
```tsx
|
|
77
117
|
// utils/Toast.tsx
|
|
118
|
+
import React, { createRef } from "react";
|
|
78
119
|
import { ToastContextValue, ToastConfig } from "react-native-earl-toastify";
|
|
79
|
-
// Optional: import your icon library
|
|
80
|
-
// import { CheckCircle, AlertTriangle, XCircle, Info } from "lucide-react-native";
|
|
81
|
-
|
|
82
|
-
// ============================================
|
|
83
|
-
// Store toast context reference (simple variable)
|
|
84
|
-
// ============================================
|
|
85
|
-
let toastContext: ToastContextValue | null = null;
|
|
86
|
-
|
|
87
|
-
export const setToastContext = (context: ToastContextValue) => {
|
|
88
|
-
toastContext = context;
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
// ============================================
|
|
92
|
-
// 🎨 CUSTOMIZE YOUR TOAST DEFAULTS HERE
|
|
93
|
-
// ============================================
|
|
94
|
-
|
|
95
|
-
const CUSTOM_DEFAULTS: Record<string, Partial<ToastConfig>> = {
|
|
96
|
-
// Custom success style - your own green, animation, etc.
|
|
97
|
-
success: {
|
|
98
|
-
backgroundColor: "#D1FAE5", // Light green
|
|
99
|
-
textColor: "#065F46", // Dark green
|
|
100
|
-
borderColor: "#10B981", // Green border
|
|
101
|
-
animationIn: "up",
|
|
102
|
-
animationOut: "down",
|
|
103
|
-
position: "bottom",
|
|
104
|
-
duration: 3000,
|
|
105
|
-
// icon: <CheckCircle color="#10B981" size={20} />,
|
|
106
|
-
},
|
|
107
|
-
|
|
108
|
-
// Custom error style
|
|
109
|
-
error: {
|
|
110
|
-
backgroundColor: "#FEE2E2", // Light red
|
|
111
|
-
textColor: "#991B1B", // Dark red
|
|
112
|
-
borderColor: "#EF4444", // Red border
|
|
113
|
-
animationIn: "fade",
|
|
114
|
-
animationOut: "fade",
|
|
115
|
-
position: "top",
|
|
116
|
-
duration: 5000,
|
|
117
|
-
// icon: <XCircle color="#EF4444" size={20} />,
|
|
118
|
-
},
|
|
119
|
-
|
|
120
|
-
// Custom warning style
|
|
121
|
-
warning: {
|
|
122
|
-
backgroundColor: "#FEF3C7", // Light amber
|
|
123
|
-
textColor: "#92400E", // Dark amber
|
|
124
|
-
borderColor: "#F59E0B", // Amber border
|
|
125
|
-
animationIn: "right",
|
|
126
|
-
animationOut: "left",
|
|
127
|
-
position: "top",
|
|
128
|
-
duration: 4000,
|
|
129
|
-
// icon: <AlertTriangle color="#F59E0B" size={20} />,
|
|
130
|
-
},
|
|
131
|
-
|
|
132
|
-
// Custom info style
|
|
133
|
-
info: {
|
|
134
|
-
backgroundColor: "#DBEAFE", // Light blue
|
|
135
|
-
textColor: "#1E40AF", // Dark blue
|
|
136
|
-
borderColor: "#3B82F6", // Blue border
|
|
137
|
-
animationIn: "left",
|
|
138
|
-
animationOut: "right",
|
|
139
|
-
position: "top",
|
|
140
|
-
duration: 3000,
|
|
141
|
-
// icon: <Info color="#3B82F6" size={20} />,
|
|
142
|
-
},
|
|
143
|
-
};
|
|
144
120
|
|
|
145
|
-
//
|
|
146
|
-
|
|
147
|
-
// ============================================
|
|
148
|
-
const parseArgs = (
|
|
149
|
-
titleOrMessage: string,
|
|
150
|
-
descriptionOrConfig?: string | Partial<ToastConfig>,
|
|
151
|
-
config?: Partial<ToastConfig>,
|
|
152
|
-
): { title?: string; message: string; config?: Partial<ToastConfig> } => {
|
|
153
|
-
if (typeof descriptionOrConfig === "string") {
|
|
154
|
-
return { title: titleOrMessage, message: descriptionOrConfig, config };
|
|
155
|
-
}
|
|
156
|
-
return { message: titleOrMessage, config: descriptionOrConfig };
|
|
157
|
-
};
|
|
121
|
+
// Create a ref to hold the toast context
|
|
122
|
+
export const toastRef = createRef<ToastContextValue>();
|
|
158
123
|
|
|
159
|
-
//
|
|
160
|
-
// Toast utility with custom defaults
|
|
161
|
-
// ============================================
|
|
124
|
+
// Export convenience methods
|
|
162
125
|
const Toast = {
|
|
126
|
+
// Supports: success("message") OR success("title", "description")
|
|
163
127
|
success: (
|
|
164
128
|
titleOrMessage: string,
|
|
165
129
|
descriptionOrConfig?: string | Partial<ToastConfig>,
|
|
166
130
|
config?: Partial<ToastConfig>,
|
|
167
131
|
) => {
|
|
168
|
-
|
|
169
|
-
title,
|
|
170
|
-
message,
|
|
171
|
-
config: cfg,
|
|
172
|
-
} = parseArgs(titleOrMessage, descriptionOrConfig, config);
|
|
173
|
-
toastContext?.show({
|
|
174
|
-
...CUSTOM_DEFAULTS.success,
|
|
175
|
-
...cfg,
|
|
176
|
-
title,
|
|
177
|
-
message,
|
|
178
|
-
type: "custom", // Use custom to apply our colors
|
|
179
|
-
});
|
|
132
|
+
toastRef.current?.success(titleOrMessage, descriptionOrConfig, config);
|
|
180
133
|
},
|
|
181
|
-
|
|
182
134
|
error: (
|
|
183
135
|
titleOrMessage: string,
|
|
184
136
|
descriptionOrConfig?: string | Partial<ToastConfig>,
|
|
185
137
|
config?: Partial<ToastConfig>,
|
|
186
138
|
) => {
|
|
187
|
-
|
|
188
|
-
title,
|
|
189
|
-
message,
|
|
190
|
-
config: cfg,
|
|
191
|
-
} = parseArgs(titleOrMessage, descriptionOrConfig, config);
|
|
192
|
-
toastContext?.show({
|
|
193
|
-
...CUSTOM_DEFAULTS.error,
|
|
194
|
-
...cfg,
|
|
195
|
-
title,
|
|
196
|
-
message,
|
|
197
|
-
type: "custom",
|
|
198
|
-
});
|
|
139
|
+
toastRef.current?.error(titleOrMessage, descriptionOrConfig, config);
|
|
199
140
|
},
|
|
200
|
-
|
|
201
141
|
warning: (
|
|
202
142
|
titleOrMessage: string,
|
|
203
143
|
descriptionOrConfig?: string | Partial<ToastConfig>,
|
|
204
144
|
config?: Partial<ToastConfig>,
|
|
205
145
|
) => {
|
|
206
|
-
|
|
207
|
-
title,
|
|
208
|
-
message,
|
|
209
|
-
config: cfg,
|
|
210
|
-
} = parseArgs(titleOrMessage, descriptionOrConfig, config);
|
|
211
|
-
toastContext?.show({
|
|
212
|
-
...CUSTOM_DEFAULTS.warning,
|
|
213
|
-
...cfg,
|
|
214
|
-
title,
|
|
215
|
-
message,
|
|
216
|
-
type: "custom",
|
|
217
|
-
});
|
|
146
|
+
toastRef.current?.warning(titleOrMessage, descriptionOrConfig, config);
|
|
218
147
|
},
|
|
219
|
-
|
|
220
148
|
info: (
|
|
221
149
|
titleOrMessage: string,
|
|
222
150
|
descriptionOrConfig?: string | Partial<ToastConfig>,
|
|
223
151
|
config?: Partial<ToastConfig>,
|
|
224
152
|
) => {
|
|
225
|
-
|
|
226
|
-
title,
|
|
227
|
-
message,
|
|
228
|
-
config: cfg,
|
|
229
|
-
} = parseArgs(titleOrMessage, descriptionOrConfig, config);
|
|
230
|
-
toastContext?.show({
|
|
231
|
-
...CUSTOM_DEFAULTS.info,
|
|
232
|
-
...cfg,
|
|
233
|
-
title,
|
|
234
|
-
message,
|
|
235
|
-
type: "custom",
|
|
236
|
-
});
|
|
153
|
+
toastRef.current?.info(titleOrMessage, descriptionOrConfig, config);
|
|
237
154
|
},
|
|
238
|
-
|
|
239
|
-
// Generic show for full customization
|
|
240
155
|
show: (config: ToastConfig) => {
|
|
241
|
-
|
|
156
|
+
toastRef.current?.show(config);
|
|
242
157
|
},
|
|
243
|
-
|
|
244
158
|
hide: (id: string) => {
|
|
245
|
-
|
|
159
|
+
toastRef.current?.hide(id);
|
|
246
160
|
},
|
|
247
|
-
|
|
248
161
|
hideAll: () => {
|
|
249
|
-
|
|
162
|
+
toastRef.current?.hideAll();
|
|
250
163
|
},
|
|
251
164
|
};
|
|
252
165
|
|
|
@@ -259,7 +172,7 @@ export default Toast;
|
|
|
259
172
|
// components/ToastWrapper.tsx
|
|
260
173
|
import React, { useEffect } from "react";
|
|
261
174
|
import { useToast } from "react-native-earl-toastify";
|
|
262
|
-
import {
|
|
175
|
+
import { toastRef } from "../utils/Toast";
|
|
263
176
|
|
|
264
177
|
export const ToastWrapper: React.FC<{ children: React.ReactNode }> = ({
|
|
265
178
|
children,
|
|
@@ -267,8 +180,8 @@ export const ToastWrapper: React.FC<{ children: React.ReactNode }> = ({
|
|
|
267
180
|
const toast = useToast();
|
|
268
181
|
|
|
269
182
|
useEffect(() => {
|
|
270
|
-
//
|
|
271
|
-
|
|
183
|
+
// Assign the toast context to the ref
|
|
184
|
+
(toastRef as React.MutableRefObject<typeof toast>).current = toast;
|
|
272
185
|
}, [toast]);
|
|
273
186
|
|
|
274
187
|
return <>{children}</>;
|
package/dist/Toast.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAoB9D,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,aAAa,EAAkB,MAAM,SAAS,CAAC;AAe5E,MAAM,WAAW,UAAU;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAqNtC,CAAC"}
|
package/dist/Toast.js
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useCallback } from "react";
|
|
2
|
-
import { Animated, Text, TouchableOpacity, View, StyleSheet, AccessibilityInfo, } from "react-native";
|
|
2
|
+
import { Animated, Text, TouchableOpacity, View, StyleSheet, AccessibilityInfo, LayoutAnimation, Platform, UIManager, } from "react-native";
|
|
3
|
+
// Enable LayoutAnimation for Android
|
|
4
|
+
if (Platform.OS === "android" &&
|
|
5
|
+
UIManager.setLayoutAnimationEnabledExperimental) {
|
|
6
|
+
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
7
|
+
}
|
|
3
8
|
import { useToastAnimation } from "./useToastAnimation";
|
|
4
9
|
import { getToastColors, baseToastStyle, getPositionalStyle, titleStyle, descriptionStyle, messageStyle, textContainerStyle, iconContainerStyle, closeButtonStyle, } from "./styles";
|
|
5
10
|
import { DefaultIcons } from "./icons";
|
|
@@ -32,6 +37,11 @@ export const Toast = ({ toast, position, onHide }) => {
|
|
|
32
37
|
// Start exit animation
|
|
33
38
|
startExitAnimation(() => {
|
|
34
39
|
onHideCallback?.();
|
|
40
|
+
// Trigger layout animation RIGHT BEFORE removing from state
|
|
41
|
+
LayoutAnimation.configureNext({
|
|
42
|
+
duration: 200,
|
|
43
|
+
update: { type: LayoutAnimation.Types.easeInEaseOut },
|
|
44
|
+
});
|
|
35
45
|
onHide(id);
|
|
36
46
|
});
|
|
37
47
|
}, [id, onHide, onHideCallback, startExitAnimation]);
|
package/dist/Toast.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EACN,QAAQ,EACR,IAAI,EACJ,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"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"}
|
package/dist/ToastContainer.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export interface ToastContainerProps {
|
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
9
9
|
* Container component that positions and renders toasts
|
|
10
|
+
* Layout animations are handled by ToastProvider
|
|
10
11
|
*/
|
|
11
12
|
export declare const ToastContainer: React.FC<ToastContainerProps>;
|
|
12
13
|
//# sourceMappingURL=ToastContainer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastContainer.d.ts","sourceRoot":"","sources":["../src/ToastContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG5D,MAAM,WAAW,mBAAmB;IACnC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7B;AAED
|
|
1
|
+
{"version":3,"file":"ToastContainer.d.ts","sourceRoot":"","sources":["../src/ToastContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG5D,MAAM,WAAW,mBAAmB;IACnC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyCxD,CAAC"}
|
package/dist/ToastContainer.js
CHANGED
|
@@ -3,6 +3,7 @@ import { View, StyleSheet } from "react-native";
|
|
|
3
3
|
import { Toast } from "./Toast";
|
|
4
4
|
/**
|
|
5
5
|
* Container component that positions and renders toasts
|
|
6
|
+
* Layout animations are handled by ToastProvider
|
|
6
7
|
*/
|
|
7
8
|
export const ToastContainer = ({ toasts, position, onHide, }) => {
|
|
8
9
|
// Filter toasts for this position
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastContainer.js","sourceRoot":"","sources":["../src/ToastContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAQhC
|
|
1
|
+
{"version":3,"file":"ToastContainer.js","sourceRoot":"","sources":["../src/ToastContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAQhC;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC7D,MAAM,EACN,QAAQ,EACR,MAAM,GACN,EAAE,EAAE;IACJ,kCAAkC;IAClC,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,QAAQ,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAE/C,8CAA8C;IAC9C,MAAM,yBAAyB,GAAG,GAAG,EAAE;QACtC,QAAQ,QAAQ,EAAE,CAAC;YAClB,KAAK,KAAK;gBACT,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,sBAAsB;YAC1D,KAAK,QAAQ;gBACZ,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,0BAA0B;YACpE,KAAK,QAAQ;gBACZ,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,QAAiB,EAAE,CAAC;YACjE;gBACC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;QACpC,CAAC;IACF,CAAC,CAAC;IAEF,OAAO,CACN,CAAC,IAAI,CACJ,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,yBAAyB,EAAE,CAAC,CAAC,CACvD,aAAa,CAAC,UAAU,CAExB;GAAA,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACvC,CAAC,IAAI,CACJ,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CACd,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAE/C;KAAA,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EACzD;IAAA,EAAE,IAAI,CAAC,CACP,CAAC,CACH;EAAA,EAAE,IAAI,CAAC,CACP,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAChC,SAAS,EAAE;QACV,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,IAAI;QACf,aAAa,EAAE,UAAU;KACzB;IACD,QAAQ,EAAE;QACT,SAAS,EAAE,CAAC;KACZ;CACD,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../src/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKb,SAAS,EACT,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../src/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKb,SAAS,EACT,MAAM,OAAO,CAAC;AAQf,OAAO,EAGN,iBAAiB,EACjB,mBAAmB,EAEnB,MAAM,SAAS,CAAC;AAWjB;;GAEG;AACH,eAAO,MAAM,YAAY,yCAAgD,CAAC;AAqB1E,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyNtD,CAAC"}
|
package/dist/ToastProvider.js
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import React, { createContext, useState, useCallback, useMemo, } from "react";
|
|
2
|
-
import { View, StyleSheet } from "react-native";
|
|
2
|
+
import { View, StyleSheet, LayoutAnimation, Platform, UIManager, } from "react-native";
|
|
3
3
|
import { ToastContainer } from "./ToastContainer";
|
|
4
|
+
// Enable LayoutAnimation for Android
|
|
5
|
+
if (Platform.OS === "android" &&
|
|
6
|
+
UIManager.setLayoutAnimationEnabledExperimental) {
|
|
7
|
+
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
8
|
+
}
|
|
4
9
|
/**
|
|
5
10
|
* Toast context for accessing toast functions
|
|
6
11
|
*/
|
|
@@ -127,12 +132,21 @@ export const ToastProvider = ({ children, config = {}, }) => {
|
|
|
127
132
|
* Hide a specific toast by ID
|
|
128
133
|
*/
|
|
129
134
|
const hide = useCallback((id) => {
|
|
135
|
+
// Animate layout before removing toast
|
|
136
|
+
LayoutAnimation.configureNext({
|
|
137
|
+
duration: 200,
|
|
138
|
+
update: { type: LayoutAnimation.Types.easeInEaseOut },
|
|
139
|
+
});
|
|
130
140
|
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
131
141
|
}, []);
|
|
132
142
|
/**
|
|
133
143
|
* Hide all toasts
|
|
134
144
|
*/
|
|
135
145
|
const hideAll = useCallback(() => {
|
|
146
|
+
LayoutAnimation.configureNext({
|
|
147
|
+
duration: 200,
|
|
148
|
+
update: { type: LayoutAnimation.Types.easeInEaseOut },
|
|
149
|
+
});
|
|
136
150
|
setToasts([]);
|
|
137
151
|
}, []);
|
|
138
152
|
// Context value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastProvider.js","sourceRoot":"","sources":["../src/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACb,aAAa,EACb,QAAQ,EACR,WAAW,EACX,OAAO,GAEP,MAAM,OAAO,CAAC;AACf,OAAO,
|
|
1
|
+
{"version":3,"file":"ToastProvider.js","sourceRoot":"","sources":["../src/ToastProvider.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-earl-toastify",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A beautiful, customizable toast notification library for React Native with animations, multiple toast types, and accessibility support",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
package/src/Toast.tsx
CHANGED
|
@@ -6,7 +6,18 @@ import {
|
|
|
6
6
|
View,
|
|
7
7
|
StyleSheet,
|
|
8
8
|
AccessibilityInfo,
|
|
9
|
+
LayoutAnimation,
|
|
10
|
+
Platform,
|
|
11
|
+
UIManager,
|
|
9
12
|
} from "react-native";
|
|
13
|
+
|
|
14
|
+
// Enable LayoutAnimation for Android
|
|
15
|
+
if (
|
|
16
|
+
Platform.OS === "android" &&
|
|
17
|
+
UIManager.setLayoutAnimationEnabledExperimental
|
|
18
|
+
) {
|
|
19
|
+
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
20
|
+
}
|
|
10
21
|
import { Toast as ToastData, ToastPosition, ToastAnimation } from "./types";
|
|
11
22
|
import { useToastAnimation } from "./useToastAnimation";
|
|
12
23
|
import {
|
|
@@ -87,6 +98,11 @@ export const Toast: React.FC<ToastProps> = ({ toast, position, onHide }) => {
|
|
|
87
98
|
// Start exit animation
|
|
88
99
|
startExitAnimation(() => {
|
|
89
100
|
onHideCallback?.();
|
|
101
|
+
// Trigger layout animation RIGHT BEFORE removing from state
|
|
102
|
+
LayoutAnimation.configureNext({
|
|
103
|
+
duration: 200,
|
|
104
|
+
update: { type: LayoutAnimation.Types.easeInEaseOut },
|
|
105
|
+
});
|
|
90
106
|
onHide(id);
|
|
91
107
|
});
|
|
92
108
|
}, [id, onHide, onHideCallback, startExitAnimation]);
|
package/src/ToastContainer.tsx
CHANGED
package/src/ToastProvider.tsx
CHANGED
|
@@ -5,7 +5,13 @@ import React, {
|
|
|
5
5
|
useMemo,
|
|
6
6
|
ReactNode,
|
|
7
7
|
} from "react";
|
|
8
|
-
import {
|
|
8
|
+
import {
|
|
9
|
+
View,
|
|
10
|
+
StyleSheet,
|
|
11
|
+
LayoutAnimation,
|
|
12
|
+
Platform,
|
|
13
|
+
UIManager,
|
|
14
|
+
} from "react-native";
|
|
9
15
|
import {
|
|
10
16
|
Toast as ToastData,
|
|
11
17
|
ToastConfig,
|
|
@@ -15,6 +21,14 @@ import {
|
|
|
15
21
|
} from "./types";
|
|
16
22
|
import { ToastContainer } from "./ToastContainer";
|
|
17
23
|
|
|
24
|
+
// Enable LayoutAnimation for Android
|
|
25
|
+
if (
|
|
26
|
+
Platform.OS === "android" &&
|
|
27
|
+
UIManager.setLayoutAnimationEnabledExperimental
|
|
28
|
+
) {
|
|
29
|
+
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
30
|
+
}
|
|
31
|
+
|
|
18
32
|
/**
|
|
19
33
|
* Toast context for accessing toast functions
|
|
20
34
|
*/
|
|
@@ -219,6 +233,11 @@ export const ToastProvider: React.FC<ToastProviderProps> = ({
|
|
|
219
233
|
* Hide a specific toast by ID
|
|
220
234
|
*/
|
|
221
235
|
const hide = useCallback((id: string): void => {
|
|
236
|
+
// Animate layout before removing toast
|
|
237
|
+
LayoutAnimation.configureNext({
|
|
238
|
+
duration: 200,
|
|
239
|
+
update: { type: LayoutAnimation.Types.easeInEaseOut },
|
|
240
|
+
});
|
|
222
241
|
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
223
242
|
}, []);
|
|
224
243
|
|
|
@@ -226,6 +245,10 @@ export const ToastProvider: React.FC<ToastProviderProps> = ({
|
|
|
226
245
|
* Hide all toasts
|
|
227
246
|
*/
|
|
228
247
|
const hideAll = useCallback((): void => {
|
|
248
|
+
LayoutAnimation.configureNext({
|
|
249
|
+
duration: 200,
|
|
250
|
+
update: { type: LayoutAnimation.Types.easeInEaseOut },
|
|
251
|
+
});
|
|
229
252
|
setToasts([]);
|
|
230
253
|
}, []);
|
|
231
254
|
|