Foundation reference
Every deprecated name in Canvas, what it was and what to use instead.
How deprecation works
Canvas once published some of its own machinery: the helpers its components build themselves from. Each of those names is now a deprecated alias. It keeps working, unchanged, until a major release, and nothing is removed before one. Your editor strikes it through, and its hover says what to use instead.
Where one component, prop or token replaces a name, the row links to its page. A name with no replacement is work the kit's components already do for you; a control the kit lacks belongs in the kit, never in a hand-built look-alike.
<Text style={tabularNums()}>1,204,118</Text>
A deprecated helper passed as a raw style at the call site. It keeps working until a major release, but it is the kit's own machinery, and the kit's styling rules bar restyling a primitive by hand.
<Typography tabular>1,204,118</Typography>
The component's own prop. Typography's tabular boolean gives every figure the same width on iOS, Android and the web, so a column of numbers lines up.
Overlay machinery
The anchored card behind Popover, Dropdown, Select, Autocomplete and the other menus and option lists, and the placement and side its decorations read.
What the anchored card does for every menu and Popover
A card opens below its trigger by default, above or beside it on request, and stays inside the window's visible area and safe area. A tap outside and Android's back close it, and Escape closes the foremost one on the web. On iOS and Android an open card is modal to VoiceOver and TalkBack and returns focus to its trigger when it closes. On the web a menu or option list moves focus in and Tab closes it and moves on, while a Popover stays non-modal. At phone width Popover opens as a sheet; menus, Select and Autocomplete stay anchored. In a right-to-left app a card follows the app's direction.
The kit's anchored card: a floating card placed against a trigger (below it by default, above it or beside it on request), fitted inside the window's visible band and safe area, over a transparent backdrop that closes it on an outside tap, on the window layer of the nearest OverlayProvider.
Kit internals: use Popover for a floating card of content, and Dropdown, Select or Autocomplete for a menu or an option list. It keeps working until a major.
The props of AnchoredOverlay.
Kit internals: use PopoverProps with Popover. It keeps working until a major.
The card's outlet-relative position (pure, so the branch logic is testable).
Kit internals: the placement Popover, Dropdown and Select apply for you. It keeps working until a major.
The resolved side plus where the trigger's center sits along the card (centerX, measured from the card edge a decoration's left inset is measured from: the physical left, or the start edge where React Native swaps left and right in a right-to-left layout) and the card's width, for a decoration that aims at the trigger.
Kit internals: the anchor a kit card's own decoration reads (Popover's beak). It keeps working until a major.
The side of its trigger an anchored card actually took once collisions were resolved (above, below, or beside at the start or end), for a decoration that points at the trigger.
Kit internals: the side a kit card's own decoration reads (Popover's beak). It keeps working until a major.
Entrance
The readiness hold an anchored card applies to itself until its placement is measured.
Testing an anchored card
A card stays invisible, untouchable and hidden from assistive technology until its placement is measured, then appears in place with no motion. A test DOM with no layout (no ResizeObserver) never measures a card hosted by an OverlayProvider, so it never shows: render the component without an OverlayProvider in such a test, where the card renders inline.
The readiness hold for an anchored card: renders children in one View that is invisible, untouchable and hidden from assistive technology until ready (and every enclosing Entrance's readiness, across a portal too) is true, then shows it in place with no motion.
Kit internals: the readiness hold every anchored card (Popover, Dropdown, Select, Autocomplete and the rest) applies to its own card until its placement is measured, so use those components. It keeps working until a major.
The props of Entrance, the readiness hold an anchored card's owner applies to it.
Kit internals: the props of the readiness hold every anchored card (Popover, Dropdown, Select, Autocomplete and the rest) applies to its own card, so use those components. It keeps working until a major.
Field label
The label of the field family: Android's floating label, the label text with its required marker, the slice of a field skin that places it, and the props that hide decorative content.
The label contract of Input, Textarea, Select and Autocomplete
Android floats the label inside the field; iOS and the web title the field from above. The label is the field's accessible name, and natively never a second stop beside it. The required star is decorative and never part of the name: the field says it is required. A long label truncates on one line while the name stays whole. The float follows the user's text size, and under Reduce Motion it moves without animating.
The Material 3 in-container floating label, which the Android skins of Input, Textarea, Select and Autocomplete render inside their field (the iOS and web skins title the field from above).
Kit internals: the label that Input, Textarea, Select and Autocomplete float for you; pass their label and required props. It keeps working until a major.
The label-placement slice a filled-field skin fulfills.
Kit skin internals: the label-placement slice of a field skin, with no replacement. It keeps working until a major.
The props that take a node out of the accessibility tree, spread together: accessibilityElementsHidden (VoiceOver), importantForAccessibility: "no-hide-descendants" (TalkBack) and aria-hidden (the web, where an aria-labelledby name computation also skips it).
Kit internals: kit components hide their own decorative content, for example Icon decorative. It keeps working until a major.
The label text plus, when required, a trailing destructive "*".
Kit internals: the label text and required marker that Input, Textarea, Select, Autocomplete, Field, Stepper and PhoneInput render from their label and required props. It keeps working until a major.
Viewport tier
The bucket a server render assumes, and React Native's own window hook.
Server rendering and the window
A server cannot measure a window, so it renders the desktop layout unless ThemeProvider's ssrBreakpoint names the bucket to assume (sm for a phone); the real window's bucket applies right after hydration. Window-level chrome reads the tier with useBreakpoint or useFormFactor, and a component measures its own width with useContainerWidth or useMeasuredWidth.
The server-render breakpoint assumption.
Kit internals: pass ThemeProvider's ssrBreakpoint prop to set the bucket a server render assumes. It keeps working until a major.
React Native's own useWindowDimensions, re-exported unchanged.
React Native's own hook, passed through: use useBreakpoint or useFormFactor for window-level chrome, useContainerWidth or useMeasuredWidth inside a component, or React Native's own useWindowDimensions for raw pixels. It keeps working until a major.
Focus and keyboard
The focus-ring reset, the field indicator, the roving arrow keys, dialog and popover focus, and the Escape and Android back that close overlays.
The Material / iOS bottom "active indicator" as a bottom border that thickens when the field becomes active, WITHOUT reflowing the field's content.
Kit internals, with no replacement: the bottom indicator Input, Select and Autocomplete draw for their own focus and open states. It keeps working until a major.
ActiveIndicatorOptions
Type
The options of activeIndicator: whether the field is active, the indicator's colour and thickness at rest and when active, and the padding kept between the content and the indicator.
Kit internals, with no replacement: the options of the bottom indicator Input, Select and Autocomplete draw for themselves. It keeps working until a major.
The style that removes the keyboard focus ring (a solid outline of width 0), for a control that paints a visible focus state of its own.
Kit internals, with no replacement: the kit's fields paint their own focus state, and Pressable, TextInput and ScrollView carry the themed focus ring, which an app never removes (WCAG 2.4.7). It keeps working until a major.
The options of useRovingFocus: the number of items, the active one, what activating an item does, which arrows move, the layout direction, whether the ends wrap, and which items are disabled.
Kit internals, with no replacement: the options of the arrow-key focus Tabs, RadioGroup and Listbox move for themselves. It keeps working until a major.
The props one item of a roving group spreads onto its pressable: its tab stop, its ref and its key handler.
Kit internals, with no replacement: the props of one item in the arrow-key focus Tabs, RadioGroup and Listbox move for themselves. It keeps working until a major.
Move focus into an attached modal panel, trap Tab, and restore on close.
Kit internals: the focus trap and return Dialog and AlertDialog apply for you, so use Dialog. It keeps working until a major.
Dismiss the foremost active overlay on web Escape; no document listener on native.
Kit internals, with no replacement: Dialog, AlertDialog, Drawer, ActionSheet, Popover and the menus close on Escape themselves. It keeps working until a major.
Close an open overlay on Android's hardware or gesture back: while active, back calls onBack and is consumed, so the app neither navigates nor exits under the overlay.
Kit internals, with no replacement: Dialog, AlertDialog, Drawer, ActionSheet, Sidebar and every anchored card close on Android's back themselves. It keeps working until a major.
Move focus into an attached nonmodal panel and restore on close.
Kit internals: the focus move and return Popover applies for you, so use Popover. It keeps working until a major.
Roving keyboard focus for a composite widget (the WAI-ARIA pattern Tabs, RadioGroup and Listbox share): the group is one tab stop, the arrows, Home and End move focus and activate the item it lands on, a disabled item is skipped and never the tab stop, and native rows keep their own focus and click support.
Kit internals, with no replacement: the arrow keys, Home and End of Tabs, RadioGroup and Listbox, which move focus and selection for themselves. It keeps working until a major.
Touch target
The platform minimum touch target (44 pt on iOS, 48 dp on Android) the kit's controls extend their touch area to.
The options of the touch area a control extends to the platform minimum: which axes.
Kit internals, with no replacement: the options of the touch area the kit's controls extend for themselves. It keeps working until a major.
The insets that bring a width x height control up to minTarget, or undefined when it already meets it.
Kit internals, with no replacement: the kit's controls meet the platform minimum touch target themselves (Button, an icon Button included, Chip, and Avatar, Card and the list rows given onPress), and a control the kit lacks belongs in the kit. It keeps working until a major.
The running platform's minimum, for a component that ships ONE shared skin across all three platforms (its look is genuinely platform-neutral, so there is nothing per-OS to declare).
Kit internals, with no replacement: the platform minimum the kit's controls meet for themselves (Button, Chip, and Avatar, Card and the list rows given onPress). It keeps working until a major.
The platform minimums, from the two platforms' own guidance.
Kit internals, with no replacement: the platform minimums (44 pt on iOS, 48 dp on Android) the kit's controls meet for themselves (Button, Chip, and Avatar, Card and the list rows given onPress). It keeps working until a major.
Skins that own a pressable declare this: the minimum, or null for none.
Kit skin internals, with no replacement: the minimum a kit skin declares for its own control. It keeps working until a major.
Measure a pressable and extend its touch area to the platform minimum.
Kit internals, with no replacement: the kit's controls extend their own touch area to the platform minimum from their first frame (Button, an icon Button included, Chip, and Avatar, Card and the list rows given onPress), and a control the kit lacks belongs in the kit, not in a hand-built Pressable. It keeps working until a major.
Press feedback
The Android ripple and the iOS and web press and disabled dims the kit's controls show.
The Android ripple of a round or icon-sized control (an avatar, an icon button): the same neutral ink, borderless, so it radiates from the touch point rather than filling a rectangle.
Kit internals, with no replacement: the borderless Android ripple the kit's round and icon-sized controls show for themselves (an icon Button, Avatar given onPress). It keeps working until a major.
The opacity each platform's own disabled controls take (the hand-off's --p-disabled): 0.4 on iOS, Material 3's 0.38 on Android and 0.5 on the web, for a skin one component shares across every platform.
Kit internals, with no replacement: the platform's disabled dim the kit's controls take for themselves when disabled. It keeps working until a major.
The press dim of iOS and the web: the given opacity while pressed (0.9 by default), and null on Android, where the ripple carries the press and a dim would signal it twice.
Kit internals, with no replacement: the iOS and web press dim the kit's controls show for themselves (Button, Chip, and Card and the list rows given onPress). It keeps working until a major.
overflow: "hidden" on Android and nothing elsewhere, for a rounded PARENT whose children carry a bounded ripple, so the ripple keeps to the parent's corners while an iOS shadow on the parent survives.
Kit internals, with no replacement: the Android clip the kit's rounded surfaces put around their own ripple. It keeps working until a major.
The Android ripple of a content surface (a card, a list row, a tile): a neutral ink, the foreground at low alpha so it reads in both schemes, bounded to the surface.
Kit internals, with no replacement: the bounded Android ripple the kit's surfaces show for themselves (Card and the list rows given onPress). It keeps working until a major.
Glass material
The material a kit component paints behind its own content under glass, and the surface style of the node it paints behind.
The glass material of a host's layer, painted as the host's first child: an absolutely filled, pointer-transparent layer behind the host's content, clipped to the host's corners, for a host that keeps its own node because it owns something else (a Pressable's press and ripple, a live region, a native text input).
Kit internals: every kit control, card and field paints its own material on its layer under ThemeProvider glass, so use that component (Card for a content pane, Button, Chip or Input for a control). It keeps working until a major.
The props of GlassPane: the layer and material options of the host it paints behind, the host's shape, and its tint.
Kit internals: use the props of the kit component that paints the material, such as CardProps or ButtonProps. It keeps working until a major.
The style the kit gave a TextInput beside a GlassPane, position: relative, kept for compatibility.
Kit internals, with no replacement: a no-op the kit kept for a text field beside a GlassPane. It keeps working until a major.
A surface style for a node that renders a GlassPane behind its content.
Kit internals, with no replacement: the surface style of a node that paints a GlassPane behind its content, which every kit component sets for itself under ThemeProvider glass. It keeps working until a major.
Glass fills
The fills the kit's components paint inside a glass surface, and whether glass paints at all.
The fill a role paints inside a surface: the opaque token in solid mode, an ink tint under glass.
Kit internals, with no replacement: the fill a kit component paints inside a glass surface (a hovered or selected row, a header band), which every component paints for itself under ThemeProvider glass. It keeps working until a major.
The opaque role a fill inside a glass surface stands for: muted, secondary or accent.
Kit internals, with no replacement: the roles of the fills a kit component paints inside a glass surface for itself. It keeps working until a major.
How strong a fill inside a glass surface is: faint (a hover, an alternating row), soft (a selected row, a resting chip) or firm (a pressed or active fill).
Kit internals, with no replacement: the strengths of the fills a kit component paints inside a glass surface for itself. It keeps working until a major.
The dense-layer tint for an INVERSE surface: a tooltip bubble, which paints the scheme's ink as its fill and the page colour as its text, or the M3 snackbar, which paints the toast pill (inverse) with its own light ink.
Kit internals, with no replacement: the glass under-fill of the kit's inverse surfaces, Tooltip's bubble and Toast. It keeps working until a major.
Whether the theme is painting the glass material right now (the layered model).
Kit internals: whether the glass material paints right now; read surface, reducedTransparency and increasedContrast from useTheme. It keeps working until a major.
A skin fill INSIDE a glass pane: under glass its opaque backgroundColor is replaced by the ink tint of the given strength (so a header band, a stripe or a pressed row stays translucent over the material); in solid mode the style is returned as is.
Kit internals, with no replacement: a skin fill turned translucent inside a glass surface, which every kit component does for itself under ThemeProvider glass. It keeps working until a major.
Motion
The native-driver gate and the loop easings behind the kit's functional motion.
enableAndroidLayoutAnimations
Turn on React Native's LayoutAnimation where it needs turning on, the old architecture on Android, and do nothing elsewhere (the New Architecture enables it, and its flag only logs a warning there).
Kit internals, with no replacement: Accordion and Collapsible enable React Native's layout animations on Android for themselves. It keeps working until a major.
Shape one loop iteration as a hold followed by a sweep: the value stays parked at 0 for the first hold fraction of the cycle (0..1), then easing carries it 0 to 1 over the remainder.
Kit internals, with no replacement: a loop easing behind the kit's own functional motion; shape an app's own easing with React Native's Easing. It keeps working until a major.
Shape one loop iteration from keyframes: points are [t, value] pairs with t rising from 0 to 1, joined by straight lines, so a blink (visible, a quick fade out, hidden, a quick fade in) is a single Animated.timing whose easing IS the schedule.
Kit internals, with no replacement: a loop easing behind the kit's own functional motion (the InputOTP caret); shape an app's own easing with React Native's Easing. It keeps working until a major.
Whether React Native's native animated driver exists, so useNativeDriver: true runs an animation off the JS thread: true on iOS and Android, false on the web, where a true flag freezes a loop after one pass.
Kit internals, with no replacement: whether React Native's native animated driver exists, false on the web; an app's own Animated code reads Platform.OS. It keeps working until a major.
Shape one loop iteration as an out-and-back: easing carries the value from 0 to 1 over the first half of the cycle and back down over the second, so a pulse, a breath or a shimmer is a single Animated.timing from 0 to 1 that ends where it began.
Kit internals, with no replacement: a loop easing behind the kit's own functional motion (the Skeleton shimmer); shape an app's own easing with React Native's Easing. It keeps working until a major.
Gestures
GeoMap's wheel and pinch zoom.
The style that keeps the browser from claiming a touch gesture (touchAction: "none"), so a pinch on a kit component that owns one reaches it instead of zooming the page; a no-op natively.
Kit internals, with no replacement: the touch surface GeoMap claims from the browser for its pinch zoom. It keeps working until a major.
Scroll travel in pixels, whatever unit deltaMode says the browser used.
Kit internals, with no replacement: the wheel travel GeoMap reads for its zoom. It keeps working until a major.
Wheel and trackpad-pinch zoom on the web: while active, a non-passive wheel listener on the returned ref's node reports each gesture in pixels with the pointer's position, and suppresses the page's scroll only when onWheel claims it.
Kit internals, with no replacement: GeoMap's wheel and trackpad pinch zoom. It keeps working until a major.
One notch or trackpad swipe, normalized.
Kit internals, with no replacement: one wheel gesture as GeoMap's zoom reads it. It keeps working until a major.
Type and colour
Tabular figures, the theme's typefaces, the monospace face, and colour values the kit no longer paints with.
The brand orb colours of the removed Backdrop organism, keyed by their historical hue names; nothing in the kit reads them.
The brand orbs painted the removed Backdrop organism, and the kit's colors are Dark Factory's now; nothing in the kit reads these. Kept, with their former values, until an owner-authorized major removes them (the --orb-* custom properties too).
Apply the theme's faces to a text style.
Kit internals: the kit's Text and TextInput apply the theme's typefaces (ThemeProvider fonts) themselves, so use Text, or Typography for a role of the type scale. It keeps working until a major.
The alpha of a hue's 500 step painted as a wash under the glass material, per scheme: the tinted pane of an Alert, a status Badge, a coloured Chip, before Dark Factory's soft washes replaced it.
The kit no longer paints with it: Dark Factory's soft washes replaced it (statusColors for the status tones, and a Chip's free hue at Dark Factory's soft alpha). Kept, unchanged, for code that reads it, until a major release removes it.
The kit's monospace face per platform: Menlo on iOS, and the monospace alias on Android and on the web, where react-native-web maps it onto the browser's stack.
Kit internals: the monospace face the mono and code roles of Typography set, so use Typography mono, or code for an inline code pill. It keeps working until a major.
Tabular figures: every digit the same width.
Kit internals: set figures read down a column or updated in place with Typography's tabular prop. It keeps working until a major.
Layout
Container's and Grid's own layout math, and the layout direction.
The root style for a measure: full width, capped at the step, centered or pinned to the start.
Kit internals: the root style Container resolves from its step booleans (sm, lg, page and the rest) and start, so use Container. It keeps working until a major.
The default measure: no cap, the container conforms to its parent.
Kit internals: the measure a Container with no step resolves to, the full width of its parent, so use Container. It keeps working until a major.
The px width of one cell when cols cells and their gaps split width.
Kit internals: the width Grid gives each cell from its own measured width, so use Grid. It keeps working until a major.
How many tiles of at least minTileWidth fit width with gap between them: at least 1, capped at columns when given.
Kit internals: how many columns Grid fits from its minTileWidth and columns, so use Grid. It keeps working until a major.
Whether the layout runs right to left, read through the one accessor React Native and react-native-web both implement (I18nManager.getConstants().isRTL).
Kit internals, with no replacement: the kit's components mirror themselves in a right-to-left layout, and an app reads React Native's I18nManager.getConstants().isRTL. It keeps working until a major.
The measure a Container resolves: a step of the width scale, or fluid for none.
Kit internals: the width-scale step a Container resolves, which its step booleans name (MeasureProps). It keeps working until a major.
The measure a Container's props resolve to: fluid, else the narrowest step passed, else fluid.
Kit internals: the step Container resolves from its step booleans, so use Container. It keeps working until a major.
State and warnings
The controlled and uncontrolled state every kit control shares, and the kit's development warnings.
Warn once per unique message, in development only.
Kit internals, with no replacement: the kit's own development warnings for data it resolves silently. It keeps working until a major.
Clear the once-per-message cache.
Kit test internals, with no replacement: clears the kit's own development warnings between tests. It keeps working until a major.
One component's value, controlled by its parent or held by the component itself: the mode is latched at mount (a controlled value then means controlled), the change callback fires in both modes, and a controlled value cleared to undefined keeps the last one the parent gave.
Kit internals, with no replacement: every kit control takes a controlled value with its change callback (value, checked, open and the like) or a default for uncontrolled use, and an app holds its own state with React's useState. It keeps working until a major.
CodeBlock internals
CodeBlock's own syntax highlighter.
One span of a highlighted line: its text and its kind.
Kit internals: one span of CodeBlock's own highlighter; pass code and language to CodeBlock. It keeps working until a major.
The theme-aware color for a token kind.
Kit internals: the ink CodeBlock paints a token kind in for the scheme; pass code and language to CodeBlock. It keeps working until a major.
Tokenize code into per-line spans for the given language.
Kit internals: CodeBlock's own highlighter; pass code and language to CodeBlock. It keeps working until a major.
What one span of highlighted code is: plain text, a comment, a string, a keyword, a number, a tag, an attribute, a function name or a variable.
Kit internals: the token kinds CodeBlock's highlighter tells apart; pass code and language to CodeBlock. It keeps working until a major.
DashboardGrid internals
DashboardGrid's tiers, spans and reorder logic.
The board's column count: every span is a number of these 12 columns.
Kit internals: the 12 columns DashboardGrid lays every widget's span on, so use DashboardGrid. It keeps working until a major.
The layout tier the grid renders at, resolved from the grid's OWN measured width (never the window).
Kit internals: the tier DashboardGrid resolves from its own measured width, so use DashboardGrid. It keeps working until a major.
The width in columns widget occupies on tier, always within 1..12.
Kit internals: the span DashboardGrid gives a widget at its tier, from the widget's span and narrowSpan, so use DashboardGrid. It keeps working until a major.
Move dragId immediately before or after targetId within the id order, returning a NEW array (input untouched).
Kit internals: the reorder DashboardGrid applies on a drop; use DashboardGrid's order, defaultOrder and onOrderChange. It keeps working until a major.
Arrange widgets by the id order, returning a NEW array (inputs untouched).
Kit internals: how DashboardGrid reconciles an order with its widgets; pass order or defaultOrder to DashboardGrid. It keeps working until a major.
React Native pass-throughs
React Native's own names, re-exported unchanged.
React Native's own StyleSheet, re-exported unchanged.
React Native's own StyleSheet, passed through, with no replacement in the kit: Canvas components take semantic props, never styles, so an app built from them needs none, and app-frame scaffolding the kit does not cover imports it from react-native. It keeps working until a major.
Accessibility
The deprecated names were the machinery behind the kit's keyboard, screen reader and touch behaviour, and the components that replace them keep all of it.
Keyboard. Tabs, RadioGroup and Listbox are one Tab stop each: the arrow keys move between the options, and Home and End take the first and last. Tabs, RadioGroup and a single-select Listbox select the option focus lands on; a multi-select Listbox only moves focus, and Enter or Space toggles the focused row. A disabled tab or radio is skipped and is never the stop. Dialog and AlertDialog hold Tab inside and return focus to what opened them, a Popover moves focus in and back, and Escape closes the foremost overlay on the web.
Screen readers. On iOS and Android an open menu, option list or Popover is modal to VoiceOver and TalkBack and returns focus to its trigger, and a card still being placed is hidden from them. A field's label is its accessible name, never a second stop, and its required star is not read. Decorative content is hidden on all three platforms.
Touch. Every kit control meets the 44 pt (iOS) and 48 dp (Android) minimum from its first frame by growing its touch area, never its shape, and Android's back closes an open overlay. Where two touch areas overlap the later one takes the tap, so leave twice the extra area between two small controls you place side by side.
Focus and motion. Every control keeps the themed focus ring, and only a field that paints its own focus state replaces it. The kit's functional motion follows Reduce Motion.