@selimh/react-native-toast 0.2.0 → 0.3.0
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 +6 -6
- package/lib/module/Toast.js +103 -55
- package/lib/module/Toast.js.map +1 -1
- package/lib/typescript/src/Toast.d.ts.map +1 -1
- package/lib/typescript/src/types.d.ts +1 -0
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/Toast.tsx +97 -52
- package/src/types.ts +1 -0
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# react-native-toast
|
|
1
|
+
# @selimh/react-native-toast
|
|
2
2
|
|
|
3
3
|
A beautifully animated, highly customizable, and imperative Toast library for React Native based on `react-native-reanimated`.
|
|
4
4
|
|
|
@@ -7,9 +7,9 @@ A beautifully animated, highly customizable, and imperative Toast library for Re
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
9
|
```sh
|
|
10
|
-
npm install react-native-toast
|
|
10
|
+
npm install @selimh/react-native-toast
|
|
11
11
|
# or
|
|
12
|
-
yarn add react-native-toast
|
|
12
|
+
yarn add @selimh/react-native-toast
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
You also need to install the peer dependencies:
|
|
@@ -25,7 +25,7 @@ yarn add react-native-reanimated react-native-safe-area-context
|
|
|
25
25
|
1. Wrap your root directory with `ToastProvider`:
|
|
26
26
|
|
|
27
27
|
```tsx
|
|
28
|
-
import { ToastProvider } from 'react-native-toast';
|
|
28
|
+
import { ToastProvider } from '@selimh/react-native-toast';
|
|
29
29
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
|
30
30
|
|
|
31
31
|
export default function App() {
|
|
@@ -46,7 +46,7 @@ export default function App() {
|
|
|
46
46
|
2. Call `Toast.show` from anywhere in your app:
|
|
47
47
|
|
|
48
48
|
```tsx
|
|
49
|
-
import { Toast } from 'react-native-toast';
|
|
49
|
+
import { Toast } from '@selimh/react-native-toast';
|
|
50
50
|
|
|
51
51
|
Toast.show({
|
|
52
52
|
type: 'success',
|
|
@@ -58,7 +58,7 @@ Toast.show({
|
|
|
58
58
|
```
|
|
59
59
|
|
|
60
60
|
### Dark Mode (Theme) Support
|
|
61
|
-
|
|
61
|
+
`@selimh/react-native-toast` perfectly supports light and dark modes out of the box.
|
|
62
62
|
|
|
63
63
|
1. **System Dependant (Default):** If you pass `theme="system"` to `ToastProvider` or omit it, the toast will automatically adapt to the user's iOS/Android theme.
|
|
64
64
|
2. **Forced Theme:** You can override the theme dynamically on a per-toast basis:
|
package/lib/module/Toast.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React, { useEffect } from 'react';
|
|
4
|
-
import { StyleSheet, Text, View, TouchableOpacity, useColorScheme } from 'react-native';
|
|
4
|
+
import { StyleSheet, Text, View, TouchableOpacity, useColorScheme, Platform } from 'react-native';
|
|
5
5
|
import Animated, { useSharedValue, useAnimatedStyle, withSpring, withTiming, runOnJS } from 'react-native-reanimated';
|
|
6
6
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
7
7
|
import { SuccessIcon, ErrorIcon, InfoIcon, WarningIcon } from "./icons.js";
|
|
@@ -18,7 +18,8 @@ export const Toast = ({
|
|
|
18
18
|
providerTheme = 'system',
|
|
19
19
|
onPress,
|
|
20
20
|
onAnimationEnd,
|
|
21
|
-
customView
|
|
21
|
+
customView,
|
|
22
|
+
animationType = 'fade'
|
|
22
23
|
}) => {
|
|
23
24
|
const insets = useSafeAreaInsets();
|
|
24
25
|
const systemTheme = useColorScheme();
|
|
@@ -28,32 +29,71 @@ export const Toast = ({
|
|
|
28
29
|
const opacity = useSharedValue(0);
|
|
29
30
|
useEffect(() => {
|
|
30
31
|
if (isVisible) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
})
|
|
32
|
+
if (animationType === 'fade') {
|
|
33
|
+
translateY.value = position === 'top' ? -20 : 20;
|
|
34
|
+
opacity.value = withTiming(1, {
|
|
35
|
+
duration: 300
|
|
36
|
+
});
|
|
37
|
+
translateY.value = withTiming(0, {
|
|
38
|
+
duration: 300
|
|
39
|
+
}, finished => {
|
|
40
|
+
if (finished && onAnimationEnd) {
|
|
41
|
+
runOnJS(onAnimationEnd)(true);
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
} else if (animationType === 'slide') {
|
|
45
|
+
translateY.value = position === 'top' ? -150 : 150;
|
|
46
|
+
opacity.value = withTiming(1, {
|
|
47
|
+
duration: 300
|
|
48
|
+
});
|
|
49
|
+
translateY.value = withTiming(0, {
|
|
50
|
+
duration: 300
|
|
51
|
+
}, finished => {
|
|
52
|
+
if (finished && onAnimationEnd) {
|
|
53
|
+
runOnJS(onAnimationEnd)(true);
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
} else {
|
|
57
|
+
// spring
|
|
58
|
+
translateY.value = position === 'top' ? -150 : 150;
|
|
59
|
+
opacity.value = withTiming(1, {
|
|
60
|
+
duration: 300
|
|
61
|
+
});
|
|
62
|
+
translateY.value = withSpring(0, {
|
|
63
|
+
damping: 40,
|
|
64
|
+
stiffness: 250
|
|
65
|
+
}, finished => {
|
|
66
|
+
if (finished && onAnimationEnd) {
|
|
67
|
+
runOnJS(onAnimationEnd)(true);
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
}
|
|
44
71
|
} else {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
72
|
+
if (animationType === 'fade') {
|
|
73
|
+
opacity.value = withTiming(0, {
|
|
74
|
+
duration: 300
|
|
75
|
+
});
|
|
76
|
+
translateY.value = withTiming(position === 'top' ? -20 : 20, {
|
|
77
|
+
duration: 300
|
|
78
|
+
}, finished => {
|
|
79
|
+
if (finished && onAnimationEnd) {
|
|
80
|
+
runOnJS(onAnimationEnd)(false);
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
} else {
|
|
84
|
+
opacity.value = withTiming(0, {
|
|
85
|
+
duration: 300
|
|
86
|
+
});
|
|
87
|
+
translateY.value = withTiming(position === 'top' ? -150 : 150, {
|
|
88
|
+
duration: 300
|
|
89
|
+
}, finished => {
|
|
90
|
+
if (finished && onAnimationEnd) {
|
|
91
|
+
runOnJS(onAnimationEnd)(false);
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
}
|
|
55
95
|
}
|
|
56
|
-
}, [isVisible, opacity, translateY, position, onAnimationEnd]);
|
|
96
|
+
}, [isVisible, opacity, translateY, position, onAnimationEnd, animationType]);
|
|
57
97
|
const animatedStyle = useAnimatedStyle(() => {
|
|
58
98
|
return {
|
|
59
99
|
opacity: opacity.value,
|
|
@@ -75,40 +115,43 @@ export const Toast = ({
|
|
|
75
115
|
return /*#__PURE__*/_jsx(InfoIcon, {});
|
|
76
116
|
}
|
|
77
117
|
};
|
|
78
|
-
const
|
|
118
|
+
const getPositionStyle = () => {
|
|
79
119
|
const isTop = position === 'top';
|
|
80
120
|
return [styles.container, isTop ? {
|
|
81
121
|
top: insets.top + topOffset
|
|
82
122
|
} : {
|
|
83
123
|
bottom: insets.bottom + bottomOffset
|
|
84
|
-
}
|
|
124
|
+
}];
|
|
85
125
|
};
|
|
86
126
|
const contentStyle = [styles.content, isDark ? styles.contentDark : styles.contentLight];
|
|
87
127
|
const text1Style = [styles.text1, isDark ? styles.text1Dark : styles.text1Light];
|
|
88
128
|
const text2Style = [styles.text2, isDark ? styles.text2Dark : styles.text2Light];
|
|
89
|
-
return /*#__PURE__*/_jsx(
|
|
90
|
-
|
|
91
|
-
style: getContainerStyle(),
|
|
129
|
+
return /*#__PURE__*/_jsx(View, {
|
|
130
|
+
style: getPositionStyle(),
|
|
92
131
|
pointerEvents: isVisible ? 'box-none' : 'none',
|
|
93
|
-
children: /*#__PURE__*/_jsx(
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
132
|
+
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
133
|
+
// @ts-ignore - TS2589 bypass
|
|
134
|
+
style: [...(customView ? [styles.customContent] : contentStyle), animatedStyle],
|
|
135
|
+
children: /*#__PURE__*/_jsx(TouchableOpacity, {
|
|
136
|
+
activeOpacity: 0.9,
|
|
137
|
+
onPress: onPress,
|
|
138
|
+
disabled: !onPress,
|
|
139
|
+
style: customView ? undefined : styles.touchableContent,
|
|
140
|
+
children: customView ? customView : /*#__PURE__*/_jsxs(_Fragment, {
|
|
141
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
142
|
+
style: styles.iconContainer,
|
|
143
|
+
children: getIcon()
|
|
144
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
145
|
+
style: styles.textContainer,
|
|
146
|
+
children: [text1 && /*#__PURE__*/_jsx(Text, {
|
|
147
|
+
style: text1Style,
|
|
148
|
+
children: text1
|
|
149
|
+
}), text2 && /*#__PURE__*/_jsx(Text, {
|
|
150
|
+
style: text2Style,
|
|
151
|
+
children: text2
|
|
152
|
+
})]
|
|
110
153
|
})]
|
|
111
|
-
})
|
|
154
|
+
})
|
|
112
155
|
})
|
|
113
156
|
})
|
|
114
157
|
});
|
|
@@ -126,9 +169,7 @@ const styles = StyleSheet.create({
|
|
|
126
169
|
maxWidth: 400
|
|
127
170
|
},
|
|
128
171
|
content: {
|
|
129
|
-
flexDirection: 'row',
|
|
130
172
|
borderRadius: 12,
|
|
131
|
-
padding: 16,
|
|
132
173
|
width: '100%',
|
|
133
174
|
shadowOffset: {
|
|
134
175
|
width: 0,
|
|
@@ -136,17 +177,24 @@ const styles = StyleSheet.create({
|
|
|
136
177
|
},
|
|
137
178
|
shadowOpacity: 0.1,
|
|
138
179
|
shadowRadius: 12,
|
|
139
|
-
elevation:
|
|
140
|
-
alignItems: 'center',
|
|
180
|
+
elevation: 10,
|
|
141
181
|
maxWidth: 400
|
|
142
182
|
},
|
|
183
|
+
touchableContent: {
|
|
184
|
+
flexDirection: 'row',
|
|
185
|
+
padding: 16,
|
|
186
|
+
alignItems: 'center',
|
|
187
|
+
width: '100%'
|
|
188
|
+
},
|
|
143
189
|
contentLight: {
|
|
144
190
|
backgroundColor: '#ffffff',
|
|
145
|
-
shadowColor: '#000'
|
|
191
|
+
shadowColor: Platform.OS === 'android' ? 'rgba(0,0,0,0.3)' : '#000',
|
|
192
|
+
borderWidth: 1,
|
|
193
|
+
borderColor: 'transparent'
|
|
146
194
|
},
|
|
147
195
|
contentDark: {
|
|
148
196
|
backgroundColor: '#1f2937',
|
|
149
|
-
shadowColor: '#000',
|
|
197
|
+
shadowColor: Platform.OS === 'android' ? 'rgba(0,0,0,0.3)' : '#000',
|
|
150
198
|
borderWidth: 1,
|
|
151
199
|
borderColor: '#374151'
|
|
152
200
|
},
|
package/lib/module/Toast.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","StyleSheet","Text","View","TouchableOpacity","useColorScheme","Animated","useSharedValue","useAnimatedStyle","withSpring","withTiming","runOnJS","useSafeAreaInsets","SuccessIcon","ErrorIcon","InfoIcon","WarningIcon","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Toast","isVisible","type","text1","text2","position","topOffset","bottomOffset","theme","providerTheme","onPress","onAnimationEnd","customView","insets","systemTheme","activeTheme","isDark","translateY","opacity","value","duration","
|
|
1
|
+
{"version":3,"names":["React","useEffect","StyleSheet","Text","View","TouchableOpacity","useColorScheme","Platform","Animated","useSharedValue","useAnimatedStyle","withSpring","withTiming","runOnJS","useSafeAreaInsets","SuccessIcon","ErrorIcon","InfoIcon","WarningIcon","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Toast","isVisible","type","text1","text2","position","topOffset","bottomOffset","theme","providerTheme","onPress","onAnimationEnd","customView","animationType","insets","systemTheme","activeTheme","isDark","translateY","opacity","value","duration","finished","damping","stiffness","animatedStyle","transform","getIcon","getPositionStyle","isTop","styles","container","top","bottom","contentStyle","content","contentDark","contentLight","text1Style","text1Dark","text1Light","text2Style","text2Dark","text2Light","style","pointerEvents","children","customContent","activeOpacity","disabled","undefined","touchableContent","iconContainer","textContainer","create","left","right","zIndex","alignItems","width","maxWidth","borderRadius","shadowOffset","height","shadowOpacity","shadowRadius","elevation","flexDirection","padding","backgroundColor","shadowColor","OS","borderWidth","borderColor","marginRight","flex","justifyContent","fontSize","fontWeight","marginBottom","color"],"sourceRoot":"../../src","sources":["Toast.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAiBzC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA2KtC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAErD,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY;IAC9C,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,cAAc,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAErD,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY;IAC9C,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,cAAc,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB"}
|
package/package.json
CHANGED
package/src/Toast.tsx
CHANGED
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
View,
|
|
6
6
|
TouchableOpacity,
|
|
7
7
|
useColorScheme,
|
|
8
|
+
Platform,
|
|
8
9
|
} from 'react-native';
|
|
9
10
|
import Animated, {
|
|
10
11
|
useSharedValue,
|
|
@@ -30,6 +31,7 @@ export const Toast: React.FC<ToastProps> = ({
|
|
|
30
31
|
onPress,
|
|
31
32
|
onAnimationEnd,
|
|
32
33
|
customView,
|
|
34
|
+
animationType = 'fade',
|
|
33
35
|
}) => {
|
|
34
36
|
const insets = useSafeAreaInsets();
|
|
35
37
|
const systemTheme = useColorScheme();
|
|
@@ -48,35 +50,65 @@ export const Toast: React.FC<ToastProps> = ({
|
|
|
48
50
|
|
|
49
51
|
useEffect(() => {
|
|
50
52
|
if (isVisible) {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
translateY.value = withSpring(
|
|
56
|
-
0,
|
|
57
|
-
{
|
|
58
|
-
damping: 40,
|
|
59
|
-
stiffness: 250,
|
|
60
|
-
},
|
|
61
|
-
(finished) => {
|
|
53
|
+
if (animationType === 'fade') {
|
|
54
|
+
translateY.value = position === 'top' ? -20 : 20;
|
|
55
|
+
opacity.value = withTiming(1, { duration: 300 });
|
|
56
|
+
translateY.value = withTiming(0, { duration: 300 }, (finished) => {
|
|
62
57
|
if (finished && onAnimationEnd) {
|
|
63
58
|
runOnJS(onAnimationEnd)(true);
|
|
64
59
|
}
|
|
65
|
-
}
|
|
66
|
-
)
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
position === 'top' ? -150 : 150,
|
|
71
|
-
{ duration: 300 },
|
|
72
|
-
(finished) => {
|
|
60
|
+
});
|
|
61
|
+
} else if (animationType === 'slide') {
|
|
62
|
+
translateY.value = position === 'top' ? -150 : 150;
|
|
63
|
+
opacity.value = withTiming(1, { duration: 300 });
|
|
64
|
+
translateY.value = withTiming(0, { duration: 300 }, (finished) => {
|
|
73
65
|
if (finished && onAnimationEnd) {
|
|
74
|
-
runOnJS(onAnimationEnd)(
|
|
66
|
+
runOnJS(onAnimationEnd)(true);
|
|
75
67
|
}
|
|
76
|
-
}
|
|
77
|
-
|
|
68
|
+
});
|
|
69
|
+
} else {
|
|
70
|
+
// spring
|
|
71
|
+
translateY.value = position === 'top' ? -150 : 150;
|
|
72
|
+
opacity.value = withTiming(1, { duration: 300 });
|
|
73
|
+
translateY.value = withSpring(
|
|
74
|
+
0,
|
|
75
|
+
{
|
|
76
|
+
damping: 40,
|
|
77
|
+
stiffness: 250,
|
|
78
|
+
},
|
|
79
|
+
(finished) => {
|
|
80
|
+
if (finished && onAnimationEnd) {
|
|
81
|
+
runOnJS(onAnimationEnd)(true);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
} else {
|
|
87
|
+
if (animationType === 'fade') {
|
|
88
|
+
opacity.value = withTiming(0, { duration: 300 });
|
|
89
|
+
translateY.value = withTiming(
|
|
90
|
+
position === 'top' ? -20 : 20,
|
|
91
|
+
{ duration: 300 },
|
|
92
|
+
(finished) => {
|
|
93
|
+
if (finished && onAnimationEnd) {
|
|
94
|
+
runOnJS(onAnimationEnd)(false);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
);
|
|
98
|
+
} else {
|
|
99
|
+
opacity.value = withTiming(0, { duration: 300 });
|
|
100
|
+
translateY.value = withTiming(
|
|
101
|
+
position === 'top' ? -150 : 150,
|
|
102
|
+
{ duration: 300 },
|
|
103
|
+
(finished) => {
|
|
104
|
+
if (finished && onAnimationEnd) {
|
|
105
|
+
runOnJS(onAnimationEnd)(false);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
);
|
|
109
|
+
}
|
|
78
110
|
}
|
|
79
|
-
}, [isVisible, opacity, translateY, position, onAnimationEnd]);
|
|
111
|
+
}, [isVisible, opacity, translateY, position, onAnimationEnd, animationType]);
|
|
80
112
|
|
|
81
113
|
const animatedStyle = useAnimatedStyle(() => {
|
|
82
114
|
return {
|
|
@@ -99,14 +131,13 @@ export const Toast: React.FC<ToastProps> = ({
|
|
|
99
131
|
}
|
|
100
132
|
};
|
|
101
133
|
|
|
102
|
-
const
|
|
134
|
+
const getPositionStyle = () => {
|
|
103
135
|
const isTop = position === 'top';
|
|
104
136
|
return [
|
|
105
137
|
styles.container,
|
|
106
138
|
isTop
|
|
107
139
|
? { top: insets.top + topOffset }
|
|
108
140
|
: { bottom: insets.bottom + bottomOffset },
|
|
109
|
-
animatedStyle,
|
|
110
141
|
] as any;
|
|
111
142
|
};
|
|
112
143
|
|
|
@@ -124,30 +155,39 @@ export const Toast: React.FC<ToastProps> = ({
|
|
|
124
155
|
];
|
|
125
156
|
|
|
126
157
|
return (
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
style={getContainerStyle()}
|
|
158
|
+
<View
|
|
159
|
+
style={getPositionStyle()}
|
|
130
160
|
pointerEvents={isVisible ? 'box-none' : 'none'}
|
|
131
161
|
>
|
|
132
|
-
<
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
162
|
+
<Animated.View
|
|
163
|
+
// @ts-ignore - TS2589 bypass
|
|
164
|
+
style={
|
|
165
|
+
[
|
|
166
|
+
...(customView ? [styles.customContent] : contentStyle),
|
|
167
|
+
animatedStyle,
|
|
168
|
+
] as any
|
|
169
|
+
}
|
|
137
170
|
>
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
171
|
+
<TouchableOpacity
|
|
172
|
+
activeOpacity={0.9}
|
|
173
|
+
onPress={onPress}
|
|
174
|
+
disabled={!onPress}
|
|
175
|
+
style={customView ? undefined : styles.touchableContent}
|
|
176
|
+
>
|
|
177
|
+
{customView ? (
|
|
178
|
+
customView
|
|
179
|
+
) : (
|
|
180
|
+
<>
|
|
181
|
+
<View style={styles.iconContainer}>{getIcon()}</View>
|
|
182
|
+
<View style={styles.textContainer}>
|
|
183
|
+
{text1 && <Text style={text1Style}>{text1}</Text>}
|
|
184
|
+
{text2 && <Text style={text2Style}>{text2}</Text>}
|
|
185
|
+
</View>
|
|
186
|
+
</>
|
|
187
|
+
)}
|
|
188
|
+
</TouchableOpacity>
|
|
189
|
+
</Animated.View>
|
|
190
|
+
</View>
|
|
151
191
|
);
|
|
152
192
|
};
|
|
153
193
|
|
|
@@ -164,24 +204,29 @@ const styles = StyleSheet.create({
|
|
|
164
204
|
maxWidth: 400,
|
|
165
205
|
},
|
|
166
206
|
content: {
|
|
167
|
-
flexDirection: 'row',
|
|
168
207
|
borderRadius: 12,
|
|
169
|
-
padding: 16,
|
|
170
208
|
width: '100%',
|
|
171
209
|
shadowOffset: { width: 0, height: 4 },
|
|
172
210
|
shadowOpacity: 0.1,
|
|
173
211
|
shadowRadius: 12,
|
|
174
|
-
elevation:
|
|
175
|
-
alignItems: 'center',
|
|
212
|
+
elevation: 10,
|
|
176
213
|
maxWidth: 400,
|
|
177
214
|
},
|
|
215
|
+
touchableContent: {
|
|
216
|
+
flexDirection: 'row',
|
|
217
|
+
padding: 16,
|
|
218
|
+
alignItems: 'center',
|
|
219
|
+
width: '100%',
|
|
220
|
+
},
|
|
178
221
|
contentLight: {
|
|
179
222
|
backgroundColor: '#ffffff',
|
|
180
|
-
shadowColor: '#000',
|
|
223
|
+
shadowColor: Platform.OS === 'android' ? 'rgba(0,0,0,0.3)' : '#000',
|
|
224
|
+
borderWidth: 1,
|
|
225
|
+
borderColor: 'transparent',
|
|
181
226
|
},
|
|
182
227
|
contentDark: {
|
|
183
228
|
backgroundColor: '#1f2937',
|
|
184
|
-
shadowColor: '#000',
|
|
229
|
+
shadowColor: Platform.OS === 'android' ? 'rgba(0,0,0,0.3)' : '#000',
|
|
185
230
|
borderWidth: 1,
|
|
186
231
|
borderColor: '#374151',
|
|
187
232
|
},
|