v2.0.0
Accessibility, configuration and robustness release
-
Added
Accessibility, configuration and robustness release. Breaking: see the "Upgrading to 2.0" guide in Storybook for every change that needs code edits.
- Removed (deprecated since 1.x):
useThemeColors(useuseColors), Buttonvariant="destructive"(usedanger), typographyamount/amountLarge/amountSmall(usemono*), CardlongPressHint(useaccessibilityHint), SelectselectedValue/onValueChange(usevalue/onChange), unused Select tokens (titlePadding*,cancelPaddingVertical,cancelMarginTop,minBottomPadding). - Peer ranges now start at verified versions: React 19, React Native 0.84, Reanimated 4 (required), Safe Area Context 5, DateTimePicker 9.
usePressableScalealways uses Reanimated; its result no longer hasisReanimatedandanimatedStyleis a Reanimated animated style.- Color: new
onPrimary,onSuccess,onWarning,onError,onInfotokens computed with WCAG contrast (minTextContrast, default 4.5). Light-mode primary buttons now use dark text where white was unreadable (1.7:1 on the default green).textInverseis an alias ofonPrimary. The default lighterroris now#DC2626(white on the old#EF4444was 3.8:1).getContrastTextuses WCAG luminance. New helpers:contrastRatio,resolveOnColor,withAlpha. - Config:
labels+localelocalise every string the library renders (useLabels);spacing,borderRadiusandcomponentsoverride global scales and per-component tokens (theme.components). The spacing scale gainssmPlus(12) andmdPlus(20). - Toast: the action button is reachable by screen readers, iOS announces messages, auto-dismiss is extended (or paused for actionable toasts) while a screen reader runs,
announceanddefaultDurationoptions. - Modal / BottomSheet: VoiceOver escape gesture closes them; BottomSheet adds drag-to-dismiss, keyboard avoidance,
Footer layout(row/fill/stacked),backgroundColor. - Button:
haptic,renderBackground(gradients),labelStyle,numberOfLines,accessibilityHint,testID; reportsbusyand keeps its width while loading. - HeaderBar
titleAlign,titleStyle,backButtonStyle; EmptyStatesize, nodeicon,fill. - Every component reads its dimensions from
theme.components.<name>(badge, checkbox, radio, switch, chip, input, textArea, searchBar, datePicker, card, listItem, listHeader, settingsRow, statTile, bottomTabBar, pressable, and more), acceptsStylePropstyles and forwardstestID. Defaults are unchanged. - Unicode glyphs (
✕,✓,›,▼) are replaced bySystemIcon, which renders identically on iOS and Android and mirrors in RTL. Required field labels are announced as "<label>, required". - New:
SegmentedControl,KeyboardLiftedFooter/useKeyboardLift,SystemIcon,useScreenReaderEnabled. parseDecimalInputhandles thousands grouping ("1 234,56", "1.234.567", "1'234.50") and accepts{ decimalSeparator }; trailing garbage now returnsNaNinstead of a truncated number.react-native-reanimatedis now declared as a required peer dependency (it was already imported unconditionally).- Readable text colors: new
primaryText,successText,warningText,errorText,infoTexttokens, andtextPrimary/textSecondary/textTertiaryare held tominTextContraston every surface. In the default light theme accent-colored text (ghost and secondary buttons, active tabs, selected chips and options, focus borders) becomes a darker green (#00E67Awas 1.7:1 on white) andtextTertiarygets darker; dark-mode tertiary text gets lighter.<Text>/<Heading>resolvecolor="primary"and feedback keys to the readable variants. The Bloom violet accent moves from#7c5cffto#7658f3so white labels reach AA. New helpersensureReadableandtextColorOf. - Storybook now runs every story as a Vitest browser test with axe, including color contrast, on every story (
@storybook/addon-vitest, replacing the test runner). - Visual polish: new color tokens
controlTrack,controlThumb,controlBorder(3:1 non-text contrast for Switch off tracks, ProgressBar tracks, field and checkbox borders),surfaceSelected(SegmentedControl thumb, visible in dark mode),inverseSurface/onInverseSurface/inversePrimaryText(toasts now use the inverse surface by default,components.toast.appearance: 'surface'restores the old card).textSecondaryis kept a visible step abovetextTertiary. - BottomTabBar shows an animated pill behind the active icon (
components.bottomTabBar.indicator). Sheets cap atcomponents.bottomSheet.maxWidth(640) and center on wide screens. Select's option sheet is now a BottomSheet (handle, drag, VoiceOver escape, separators, Cancel button). - Icons: every component accepts the shared
IconSlot(render function({ color, size }), node, or emoji string;renderIconSlot). ErrorBoundary uses a drawn alert icon. SystemIcon gainsplus,minus,search,more. - Keyboard focus: themed focus ring (
useFocusRing,components.focusRing) on all pressable controls, shown only for keyboard focus on web. - MarqueeText defaults its text to the theme
textPrimary(it rendered black, unreadable in dark mode); astylecolour still wins. withErrorBoundarynames wrapped anonymous componentswithErrorBoundary(Component)(it producedwithErrorBoundary()).
- Removed (deprecated since 1.x):