Skip to content

Accessibility setting compatible AirshipToast #5803

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 23, 2025
+6 −12
Merged

Accessibility setting compatible AirshipToast #5803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 5 additions & 11 deletions src/components/common/AirshipToast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import * as React from 'react'
import { Animated, Text } from 'react-native'
import { Animated } from 'react-native'
import type { AirshipBridge } from 'react-native-airship'

import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
import { EdgeText } from '../themed/EdgeText'

interface Props {
bridge: AirshipBridge<void>
children?: React.ReactNode

autoHideMs?: number
allowFontScaling?: boolean
// The message to show in the toast, before any other children:
message: string
}
Expand All @@ -19,13 +19,7 @@ const DEFAULT_AUTO_HIDE_MS = 3000
export const AirshipToast: React.FC<Props> = props => {
const theme = useTheme()
const styles = getStyles(theme)
const {
autoHideMs = DEFAULT_AUTO_HIDE_MS,
bridge,
children,
message,
allowFontScaling = true
} = props
const { autoHideMs = DEFAULT_AUTO_HIDE_MS, bridge, children, message } = props
// Opacity values are inlined in the animations below

// Animation state:
Expand Down Expand Up @@ -73,9 +67,9 @@ export const AirshipToast: React.FC<Props> = props => {
return (
<Animated.View style={[styles.body, { opacity }]}>
{message != null ? (
<Text style={styles.text} allowFontScaling={allowFontScaling}>
<EdgeText style={styles.text} numberOfLines={0}>
{message}
</Text>
</EdgeText>
) : null}
Comment on lines 67 to 73
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Keep AirshipToast honoring accessibility font size

Replacing the Text with EdgeText removes the allowFontScaling prop and switches the underlying element to allowFontScaling={false} (see EdgeText implementation). As a result, toast messages now ignore the user’s Dynamic Type setting and there is no way for callers to re‑enable scaling. Previously the toast respected accessibility font size by default and callers could opt out. This regression will cause unreadably small toasts for users who rely on larger fonts.

Useful? React with 👍 / 👎.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct, this is the exact goal. The theme responds to the scaling setting, not individual text elements.

{children}
</Animated.View>
Expand Down
2 changes: 1 addition & 1 deletion src/components/scenes/DevTestScene.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export const DevTestScene: React.FC<Props> = props => {
Airship.show(bridge => (
<AirshipToast
bridge={bridge}
message="Toast with allowFontScaling=true. Very long text to test wrapping and scaling behavior across different font settings."
message="Toast that ignores iOS accessibility font scaling settings. Very long text to test wrapping and scaling behavior across different font settings."
/>
)).catch((error: unknown) => {
console.log(error)
Expand Down
Loading