acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Integrate Sonner for toasts (#8839)

Browse Source 
* Integrate Sonner for toasts

* Fix animation on iOS

* Refactor API

* Update e2e file
This commit is contained in:
Eric Bailey
2025-08-14 09:51:40 -05:00
committed by GitHub
parent 221623f55a
commit 7b2e61bf4d
12 changed files with 163 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/screens/Storybook/Toasts.tsx
+26 -51
View File
@@ -2,8 +2,7 @@ import {Pressable, View} from 'react-native'
import {show as deprecatedShow} from '#/view/com/util/Toast'
import {atoms as a} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {toast} from '#/components/Toast'
import * as toast from '#/components/Toast'
import {Toast} from '#/components/Toast/Toast'
import {H1} from '#/components/Typography'
@@ -15,101 +14,77 @@ export function Toasts() {
<View style={[a.gap_md]}>
<Pressable
accessibilityRole="button"
onPress={() =>
toast.show({
type: 'default',
content: 'Default toast',
a11yLabel: 'Default toast',
})
}>
<Toast content="Default toast" type="default" />
onPress={() => toast.show(`Hey I'm a toast!`)}>
<Toast content="Hey I'm a toast!" />
</Pressable>
<Pressable
accessibilityRole="button"
onPress={() =>
toast.show({
type: 'default',
content: 'Default toast, 6 seconds',
a11yLabel: 'Default toast, 6 seconds',
toast.show(`This toast will disappear after 6 seconds`, {
duration: 6e3,
})
}>
<Toast content="Default toast, 6 seconds" type="default" />
<Toast content="This toast will disappear after 6 seconds" />
</Pressable>
<Pressable
accessibilityRole="button"
onPress={() =>
toast.show({
type: 'default',
content:
'This is a longer message to test how the toast handles multiple lines of text content.',
a11yLabel:
'This is a longer message to test how the toast handles multiple lines of text content.',
})
toast.show(
`This is a longer message to test how the toast handles multiple lines of text content.`,
)
}>
<Toast
content="This is a longer message to test how the toast handles multiple lines of text content."
type="default"
/>
<Toast content="This is a longer message to test how the toast handles multiple lines of text content." />
</Pressable>
<Pressable
accessibilityRole="button"
onPress={() =>
toast.show({
toast.show(`Success! Yayyyyyyy :)`, {
type: 'success',
content: 'Success toast',
a11yLabel: 'Success toast',
})
}>
<Toast content="Success toast" type="success" />
<Toast content="Success! Yayyyyyyy :)" type="success" />
</Pressable>
<Pressable
accessibilityRole="button"
onPress={() =>
toast.show({
toast.show(`I'm providing info!`, {
type: 'info',
content: 'Info toast',
a11yLabel: 'Info toast',
})
}>
<Toast content="Info" type="info" />
<Toast content="I'm providing info!" type="info" />
</Pressable>
<Pressable
accessibilityRole="button"
onPress={() =>
toast.show({
toast.show(`This is a warning toast`, {
type: 'warning',
content: 'Warning toast',
a11yLabel: 'Warning toast',
})
}>
<Toast content="Warning" type="warning" />
<Toast content="This is a warning toast" type="warning" />
</Pressable>
<Pressable
accessibilityRole="button"
onPress={() =>
toast.show({
toast.show(`This is an error toast :(`, {
type: 'error',
content: 'Error toast',
a11yLabel: 'Error toast',
})
}>
<Toast content="Error" type="error" />
<Toast content="This is an error toast :(" type="error" />
</Pressable>
<Button
label="Deprecated toast example"
<Pressable
accessibilityRole="button"
onPress={() =>
deprecatedShow(
'This is a deprecated toast example',
`This is a test of the deprecated API`,
'exclamation-circle',
)
}
size="large"
variant="solid"
color="secondary">
<ButtonText>Deprecated toast example</ButtonText>
</Button>
}>
<Toast
content="This is a test of the deprecated API"
type="warning"
/>
</Pressable>
</View>
</View>
)