Skip to content

Commit c3dad9b

Browse files
committed
feat: deduplication toasts with nice animation
1 parent 2ba08b3 commit c3dad9b

88 files changed

Lines changed: 4683 additions & 24 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

README.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ toast.success('Saved!', {
141141
style: { backgroundColor: '#fff' },
142142
dismissible: true,
143143
showCloseButton: true,
144+
deduplication: true, // Prevents duplicate toasts, resets timer instead
144145
});
145146
```
146147

@@ -202,10 +203,41 @@ Available options include:
202203
- **dismissible**: Allow swipe to dismiss
203204
- **showCloseButton**: Show X button
204205
- **defaultDuration**: Default display time in ms
206+
- **deduplication**: Prevent duplicate toasts (see below)
205207
- **colors**: Custom colors per toast type
206208
- **icons**: Custom icons per toast type
207209
- **toastStyle**, **titleStyle**, **descriptionStyle**: Global style overrides
208210

211+
### Deduplication
212+
213+
When the same toast is shown repeatedly (e.g., rapid button taps), deduplication prevents stacking identical toasts. Instead, it resets the timer and plays a feedback animation:
214+
215+
- **Non-error toasts**: subtle pulse (scale bump)
216+
- **Error toasts**: shake effect
217+
218+
Enable globally:
219+
220+
```tsx
221+
<BreadLoaf config={{ deduplication: true }} />
222+
```
223+
224+
Or per-toast (overrides global config):
225+
226+
```tsx
227+
toast.success('Liked!', { deduplication: true });
228+
toast.error('Rate limited', { deduplication: true });
229+
230+
// Opt out for a specific toast even when global is on
231+
toast.info('New message', { deduplication: false });
232+
```
233+
234+
By default, a toast is considered a duplicate when it matches the **front toast** by title, type, and description. For stable matching across different content, provide an `id` — the existing toast's content will be updated:
235+
236+
```tsx
237+
toast.success('Saved item 1', { deduplication: true, id: 'save-action' });
238+
toast.success('Saved item 2', { deduplication: true, id: 'save-action' }); // updates content, resets timer
239+
```
240+
209241
## API Reference
210242

211243
| Method | Description |

example/app/(custom)/index.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,30 @@ export default function CustomScreen() {
112112
<Text style={styles.buttonText}>No Close Button</Text>
113113
</TouchableOpacity>
114114

115+
<TouchableOpacity
116+
style={[styles.button, { backgroundColor: "#f59e0b" }]}
117+
onPress={() =>
118+
toast.success("Liked!", {
119+
description: "Tap again — it won't stack",
120+
deduplication: true,
121+
})
122+
}
123+
>
124+
<Text style={styles.buttonText}>Deduplication (Pulse)</Text>
125+
</TouchableOpacity>
126+
127+
<TouchableOpacity
128+
style={[styles.button, { backgroundColor: "#dc2626" }]}
129+
onPress={() =>
130+
toast.error("Rate limited", {
131+
description: "Please wait before retrying",
132+
deduplication: true,
133+
})
134+
}
135+
>
136+
<Text style={styles.buttonText}>Deduplication (Shake)</Text>
137+
</TouchableOpacity>
138+
115139
<TouchableOpacity
116140
style={[styles.button, { backgroundColor: "#8b5cf6" }]}
117141
onPress={() =>

example/app/(global)/index.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default function GlobalConfigScreen() {
1515
const [showCloseButton, setShowCloseButton] = useState(true);
1616
const [customStyle, setCustomStyle] = useState(true);
1717
const [rtl, setRtl] = useState(false);
18+
const [deduplication, setDeduplication] = useState(true);
1819

1920
const showToast = () => {
2021
toast.success("Hello!", "This toast uses the global config");
@@ -38,6 +39,7 @@ export default function GlobalConfigScreen() {
3839
rtl,
3940
offset: 8,
4041
defaultDuration: 4000,
42+
deduplication,
4143
...(customStyle && {
4244
toastStyle: {
4345
borderRadius: 30,
@@ -146,6 +148,14 @@ export default function GlobalConfigScreen() {
146148
<Switch value={rtl} onValueChange={setRtl} />
147149
</View>
148150

151+
<View style={styles.option}>
152+
<View>
153+
<Text style={styles.optionLabel}>Deduplication</Text>
154+
<Text style={styles.optionDesc}>Pulse/shake on repeated toasts</Text>
155+
</View>
156+
<Switch value={deduplication} onValueChange={setDeduplication} />
157+
</View>
158+
149159
<View style={styles.option}>
150160
<View>
151161
<Text style={styles.optionLabel}>Custom Styling</Text>
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Android/IntelliJ
6+
#
7+
build/
8+
.idea
9+
.gradle
10+
local.properties
11+
*.iml
12+
*.hprof
13+
.cxx/
14+
15+
# Bundle artifacts
16+
*.jsbundle
Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
apply plugin: "com.android.application"
2+
apply plugin: "org.jetbrains.kotlin.android"
3+
apply plugin: "com.facebook.react"
4+
5+
def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
6+
7+
/**
8+
* This is the configuration block to customize your React Native Android app.
9+
* By default you don't need to apply any configuration, just uncomment the lines you need.
10+
*/
11+
react {
12+
entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
13+
reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
14+
hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
15+
codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
16+
17+
enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
18+
// Use Expo CLI to bundle the app, this ensures the Metro config
19+
// works correctly with Expo projects.
20+
cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
21+
bundleCommand = "export:embed"
22+
23+
/* Folders */
24+
// The root of your project, i.e. where "package.json" lives. Default is '../..'
25+
// root = file("../../")
26+
// The folder where the react-native NPM package is. Default is ../../node_modules/react-native
27+
// reactNativeDir = file("../../node_modules/react-native")
28+
// The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
29+
// codegenDir = file("../../node_modules/@react-native/codegen")
30+
31+
/* Variants */
32+
// The list of variants to that are debuggable. For those we're going to
33+
// skip the bundling of the JS bundle and the assets. By default is just 'debug'.
34+
// If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
35+
// debuggableVariants = ["liteDebug", "prodDebug"]
36+
37+
/* Bundling */
38+
// A list containing the node command and its flags. Default is just 'node'.
39+
// nodeExecutableAndArgs = ["node"]
40+
41+
//
42+
// The path to the CLI configuration file. Default is empty.
43+
// bundleConfig = file(../rn-cli.config.js)
44+
//
45+
// The name of the generated asset file containing your JS bundle
46+
// bundleAssetName = "MyApplication.android.bundle"
47+
//
48+
// The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
49+
// entryFile = file("../js/MyApplication.android.js")
50+
//
51+
// A list of extra flags to pass to the 'bundle' commands.
52+
// See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
53+
// extraPackagerArgs = []
54+
55+
/* Hermes Commands */
56+
// The hermes compiler command to run. By default it is 'hermesc'
57+
// hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
58+
//
59+
// The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
60+
// hermesFlags = ["-O", "-output-source-map"]
61+
62+
/* Autolinking */
63+
autolinkLibrariesWithApp()
64+
}
65+
66+
/**
67+
* Set this to true in release builds to optimize the app using [R8](https://developer.android.com/topic/performance/app-optimization/enable-app-optimization).
68+
*/
69+
def enableMinifyInReleaseBuilds = (findProperty('android.enableMinifyInReleaseBuilds') ?: false).toBoolean()
70+
71+
/**
72+
* The preferred build flavor of JavaScriptCore (JSC)
73+
*
74+
* For example, to use the international variant, you can use:
75+
* `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
76+
*
77+
* The international variant includes ICU i18n library and necessary data
78+
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
79+
* give correct results when using with locales other than en-US. Note that
80+
* this variant is about 6MiB larger per architecture than default.
81+
*/
82+
def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
83+
84+
android {
85+
ndkVersion rootProject.ext.ndkVersion
86+
87+
buildToolsVersion rootProject.ext.buildToolsVersion
88+
compileSdk rootProject.ext.compileSdkVersion
89+
90+
namespace 'com.alialshehri.reactnativebreadexample'
91+
defaultConfig {
92+
applicationId 'com.alialshehri.reactnativebreadexample'
93+
minSdkVersion rootProject.ext.minSdkVersion
94+
targetSdkVersion rootProject.ext.targetSdkVersion
95+
versionCode 1
96+
versionName "1.0.0"
97+
98+
buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
99+
}
100+
signingConfigs {
101+
debug {
102+
storeFile file('debug.keystore')
103+
storePassword 'android'
104+
keyAlias 'androiddebugkey'
105+
keyPassword 'android'
106+
}
107+
}
108+
buildTypes {
109+
debug {
110+
signingConfig signingConfigs.debug
111+
}
112+
release {
113+
// Caution! In production, you need to generate your own keystore file.
114+
// see https://reactnative.dev/docs/signed-apk-android.
115+
signingConfig signingConfigs.debug
116+
def enableShrinkResources = findProperty('android.enableShrinkResourcesInReleaseBuilds') ?: 'false'
117+
shrinkResources enableShrinkResources.toBoolean()
118+
minifyEnabled enableMinifyInReleaseBuilds
119+
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
120+
def enablePngCrunchInRelease = findProperty('android.enablePngCrunchInReleaseBuilds') ?: 'true'
121+
crunchPngs enablePngCrunchInRelease.toBoolean()
122+
}
123+
}
124+
packagingOptions {
125+
jniLibs {
126+
def enableLegacyPackaging = findProperty('expo.useLegacyPackaging') ?: 'false'
127+
useLegacyPackaging enableLegacyPackaging.toBoolean()
128+
}
129+
}
130+
androidResources {
131+
ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
132+
}
133+
}
134+
135+
// Apply static values from `gradle.properties` to the `android.packagingOptions`
136+
// Accepts values in comma delimited lists, example:
137+
// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
138+
["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
139+
// Split option: 'foo,bar' -> ['foo', 'bar']
140+
def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
141+
// Trim all elements in place.
142+
for (i in 0..<options.size()) options[i] = options[i].trim();
143+
// `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
144+
options -= ""
145+
146+
if (options.length > 0) {
147+
println "android.packagingOptions.$prop += $options ($options.length)"
148+
// Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
149+
options.each {
150+
android.packagingOptions[prop] += it
151+
}
152+
}
153+
}
154+
155+
dependencies {
156+
// The version of react-native is set by the React Native Gradle Plugin
157+
implementation("com.facebook.react:react-android")
158+
159+
def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
160+
def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
161+
def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
162+
163+
if (isGifEnabled) {
164+
// For animated gif support
165+
implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
166+
}
167+
168+
if (isWebpEnabled) {
169+
// For webp support
170+
implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
171+
if (isWebpAnimatedEnabled) {
172+
// Animated webp support
173+
implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
174+
}
175+
}
176+
177+
if (hermesEnabled.toBoolean()) {
178+
implementation("com.facebook.react:hermes-android")
179+
} else {
180+
implementation jscFlavor
181+
}
182+
}
2.2 KB
Binary file not shown.
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Add project specific ProGuard rules here.
2+
# By default, the flags in this file are appended to flags specified
3+
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4+
# You can edit the include path and order by changing the proguardFiles
5+
# directive in build.gradle.
6+
#
7+
# For more details, see
8+
# http://developer.android.com/guide/developing/tools/proguard.html
9+
10+
# react-native-reanimated
11+
-keep class com.swmansion.reanimated.** { *; }
12+
-keep class com.facebook.react.turbomodule.** { *; }
13+
14+
# Add any project specific keep options here:
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2+
xmlns:tools="http://schemas.android.com/tools">
3+
4+
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
5+
6+
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
7+
</manifest>
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2+
xmlns:tools="http://schemas.android.com/tools">
3+
4+
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
5+
6+
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
7+
</manifest>
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
2+
<uses-permission android:name="android.permission.INTERNET"/>
3+
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
4+
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
5+
<uses-permission android:name="android.permission.VIBRATE"/>
6+
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
7+
<queries>
8+
<intent>
9+
<action android:name="android.intent.action.VIEW"/>
10+
<category android:name="android.intent.category.BROWSABLE"/>
11+
<data android:scheme="https"/>
12+
</intent>
13+
</queries>
14+
<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false">
15+
<meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
16+
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
17+
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
18+
<activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
19+
<intent-filter>
20+
<action android:name="android.intent.action.MAIN"/>
21+
<category android:name="android.intent.category.LAUNCHER"/>
22+
</intent-filter>
23+
<intent-filter>
24+
<action android:name="android.intent.action.VIEW"/>
25+
<category android:name="android.intent.category.DEFAULT"/>
26+
<category android:name="android.intent.category.BROWSABLE"/>
27+
<data android:scheme="reactnativebreadexample"/>
28+
</intent-filter>
29+
</activity>
30+
</application>
31+
</manifest>

0 commit comments

Comments
 (0)