Repository navigation
docs(v6): write v5 to v6 migration guide - #5059
mikolajadamowicz wants to merge 3 commits into
Conversation
- Replace the TBC placeholder with complete coverage of packaging, theming, typography, accessibility, and per-component breaking changes for the 6.0 alpha, plus a "Planned for 6.0 stable" section for pending PRs.
|
The full migration is not done yet so i've put PRs that are already open in the Planned section so that this can become live document of some sort. Alternatively we can just keep this PR alive until the full migration is done and then update it. |
| ## Installation and packaging | ||
|
|
||
| The Paper 6.x `TextInput` is a complete rewrite with a new API. Import the component the same way, but note that the props and behavior have changed significantly. | ||
| ### New peer dependencies | ||
|
|
||
| #### Types | ||
| Animations now run on Reanimated. Install it and its worklets runtime next to the existing `react-native-safe-area-context` peer: | ||
|
|
||
| ```tsx | ||
| import { TextInput, type TextInputProps } from 'react-native-paper'; | ||
| ```bash npm2yarn | ||
| npm install react-native-reanimated react-native-worklets | ||
| ``` | ||
|
|
||
| #### Variant | ||
| | v5 peer dependencies | v6 peer dependencies | | ||
| | ----------------------------------------------------- | ------------------------------------------------------------------------------------------- | | ||
| | `react`, `react-native`, `react-native-safe-area-context` | `react`, `react-native`, `react-native-safe-area-context`, **`react-native-reanimated >=4.3.0`**, **`react-native-worklets >=0.8.1`** | |
There was a problem hiding this comment.
The guide misses the icon package change, which is the one item here that breaks apps silently rather than at compile time.
In 5.15.1, MaterialCommunityIcon.tsx resolved its icon module through a three-step chain: @react-native-vector-icons/material-design-icons, then @expo/vector-icons/MaterialCommunityIcons, then react-native-vector-icons/MaterialCommunityIcons. On main (src/components/MaterialCommunityIcon.tsx:37-43) only the first is tried; anything else falls through to FallbackIcon, which renders □ and logs a warning. So every Expo app using @expo/vector-icons, and everyone still on the 10.x single package, loses all of its icons on upgrade with nothing in the guide to explain it.
Worth a subsection under "Installation and packaging" saying the only supported renderer is @react-native-vector-icons/material-design-icons, and that the alternative is a custom renderer via PaperProvider settings={{ icon }}. docs/6.x/docs/guides/icons.mdx:34-39 still points people at both dropped packages, which is a separate follow-up but the same root cause.
There was a problem hiding this comment.
will add it, thanks for the review!
There was a problem hiding this comment.
@JKobrynski I can see more things are outdated in docs/6.x/docs/guides/icons.mdx. Should I add icons.mdx updates to this PR as well?
|
@mikolajadamowicz let me know when this is ready for another review |
JKobrynski
left a comment
JKobrynski
left a comment
There was a problem hiding this comment.
LGTM, @satya164 @artus9033 mind taking a look?
There was a problem hiding this comment.
🟡 Changes recommended
Several migration-guide examples and API descriptions need correction before approval.
Get a fresh assessment by requesting another Copilot review.
Pull request overview
Expands the v5-to-v6 migration documentation and updates v6 icon and installation guidance.
Changes:
- Documents packaging, theming, typography, accessibility, and component API changes.
- Adds planned stable migration notes and React Navigation guidance.
- Updates icon detection and dependency setup instructions.
File summaries
| File | Description |
|---|---|
docs/6.x/docs/guides/migration.md |
Comprehensive v5-to-v6 migration guide |
docs/6.x/docs/guides/icons.mdx |
Updated v6 icon package guidance |
docs/6.x/docs/guides/getting-started.mdx |
Updated dependency and icon setup |
Review details
Suppressed comments (8)
docs/6.x/docs/guides/migration.md:15
- This overstates the implementation: v6 still uses React Native's
Animatedin components such asBottomNavigation, so not all Paper animations run on Reanimated. Please scope this to the components that use the new Reanimated-based animations; Reanimated/worklets are required peers, but they are not the runtime for every animation.
Animations now run on Reanimated. Install it and its worklets runtime next to the existing `react-native-safe-area-context` peer:
docs/6.x/docs/guides/migration.md:163
ColorValuemay be a platform-color object, soString(theme.colors.primary)can produce an invalid"[object Object]"color. This recommendation can turn a valid platform theme into a runtime failure; advise readers to narrow to a string or use a concrete string only when the consuming API cannot acceptColorValue.
- **`theme.colors.*` is typed `ColorValue`, not `string`.** Code that does string operations on a theme color (`theme.colors.primary.toUpperCase()`, passing it to a `string`-typed prop of another library) needs a cast or `String(...)`. To match, most component color props (`color`, `iconColor`, `buttonColor`, `textColor`, `selectedColor`, `containerColor`, `uncheckedColor`, …) and render prop callbacks (`left({ color })`, `renderIcon({ color })`) changed from `string` to `ColorValue` as well.
docs/6.x/docs/guides/migration.md:508
- The Switch reads three additional theme roles for states not covered by this table:
onSurfaceandsurfacefor disabled visuals, andsecondaryfor the focus indicator. Users following this migration entry would otherwise be unable to reproduce those colors; include these roles in the replacement guidance.
| `color` | removed. Override `theme.colors` (`primary`, `onPrimary`, `primaryContainer`, `surfaceContainerHighest`, `outline`, `onSurfaceVariant`) |
docs/6.x/docs/guides/migration.md:92
- The migration example ignores React Navigation's
tabBarLabeloption and always usestitleor the route name, so apps that customized tab labels will display different labels after following it. Resolveoptions.tabBarLabelbeforeoptions.title, matching the existing BottomNavigation integration guide.
getLabelText={({ route }) => descriptors[route.key].options.title ?? route.name}
docs/6.x/docs/guides/migration.md:238
- The list of accessibility props that retain their v5 names is incomplete:
Modal.overlayAccessibilityLabelis still a public v6 prop, but it is omitted here. Add it to this exception list so users do not incorrectly rename or remove it.
**Not renamed** (still the v5 name): `Button.accessibilityHint`, `Chip.closeIconAccessibilityLabel`, `DataTable.Pagination.selectPageDropdownAccessibilityLabel`, `Menu.overlayAccessibilityLabel`, `Searchbar.searchAccessibilityLabel` / `clearAccessibilityLabel` / `traileringIconAccessibilityLabel`, `Snackbar.iconAccessibilityLabel`.
docs/6.x/docs/guides/migration.md:578
- This replacement no longer matches the preceding v5 example:
HelperTextwas visible only whenhasError, but thissupportingTextis rendered unconditionally. Pass the same conditional value so the error message stays hidden when there is no error.
+ <TextInput label="Email" error={hasError} disabled={isDisabled} supportingText="Enter a valid email" />
docs/6.x/docs/guides/migration.md:228
- The route objects for
BottomNavigationandBottomNavigation.Barare generic (Route extends BaseRoute), so an inline route containingaccessibilityLabelcan still be inferred as a widerRouteand type-check. It is ignored at runtime because the default getter readsroute['aria-label']; please qualify this as an explicit/documented route type issue instead of promising a compile-time error.
**Where `accessibilityLabel` no longer type-checks** (the component has a closed prop set, so the old name is gone): `Checkbox.Item`, `FAB`, `FAB.Extended`, `FAB.Menu` (inside the `trigger` and `items` objects), `List.Accordion`, `Menu.Item`, `RadioButton.Item`, `SegmentedButtons` (inside `buttons[]`), `Switch`, `ToggleButton`, and `BottomNavigation` / `BottomNavigation.Bar` route objects.
docs/6.x/docs/guides/migration.md:244
- This blanket statement is not true for the alpha's
BottomNavigation.Bar: the current implementation still passesrippleColor: 'transparent'to every tab, so its interaction feedback is suppressed until the planned navigation-bar work. Please scope this claim or call out that exception; otherwise users will expect token-driven feedback that this alpha does not render.
The per-component ripple color override was dropped. Ripples and state layers now come from the MD3 tokens of each component. There is no replacement.
- Files reviewed: 3/3 changed files
- Comments generated: 2
- Review effort level: Lite (auto)
Note
Copilot is running an experiment and ran this review at Lite.
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| <BottomNavigation.Bar | ||
| navigationState={state} | ||
| safeAreaInsets={insets} | ||
| onTabPress={({ route }) => navigation.navigate(route.name, route.params)} |
|
|
||
| ### `ref` is no longer part of many `Props` types | ||
|
|
||
| Components whose props extended `React.ComponentPropsWithRef<typeof View>` now extend `ViewProps` (likewise `ImageProps` for `Card.Cover`, `PressableProps` for `DataTable.Title`, `TextProps` for `Badge`). Affected: `ActivityIndicator`, `Avatar.*`, `Badge`, `Card.Actions` / `Content` / `Cover` / `Title`, `DataTable.*`, `Dialog.Actions` / `Content` / `ScrollArea`, `Drawer.*`, `List.Section`, `ProgressBar`, `Surface`. Passing a `ref` still works where the component forwards one. The difference is that `ref` is no longer visible in the `…Props` type. Components that previously used `forwardRef` (`Appbar.Action`, `Appbar.BackAction`, `Button`, `IconButton`, `ToggleButton`, `FAB`, `Surface`) take `ref` as a regular prop typed `React.Ref<View>` instead of `React.RefObject<View>`. |
satya164
left a comment
satya164
left a comment
There was a problem hiding this comment.
Review by Claude
- This branch conflicts with
main, and the rewrite replaces the whole file. Since the branch point,mainadded content to this guide: Animations, Elevation, Styles and Test IDs under "General changes", plus sections for Appbar, Surface, Modal, Dialog, Menu, Searchbar, Card, List and the ToggleButton removal. Please keep that content when you resolve the conflict. Several statements in this PR now contradict it. The inline comments list them. - The new text changes the voice of the guide. The sections on
mainaddress the reader as "you" and use "we" for the maintainers ("We have added thecontentElevationprop"). Some new sentences also make things the actor, for example "Paper looked for an icon package", "PaperProviderignores it" and "Metro and Re.Pack handle this out of the box". Please match the existing voice, for example "theme.versionis ignored". (via Claude, verify if it makes sense)
| ```tsx | ||
| // Before (v5) | ||
| <TextInput mode="flat" label="Filled" /> | ||
| <TextInput mode="outlined" label="Outlined" /> | ||
| <Tab.Navigator | ||
| tabBar={({ navigation, state, descriptors, insets }) => ( | ||
| <BottomNavigation.Bar | ||
| navigationState={state} | ||
| safeAreaInsets={insets} | ||
| onTabPress={({ route }) => navigation.navigate(route.name, route.params)} | ||
| renderIcon={({ route, focused, color }) => | ||
| descriptors[route.key].options.tabBarIcon?.({ focused, color, size: 24 }) ?? null | ||
| } | ||
| getLabelText={({ route }) => descriptors[route.key].options.title ?? route.name} | ||
| /> | ||
| )} | ||
| > | ||
| {/* screens */} | ||
| </Tab.Navigator> | ||
| ``` |
There was a problem hiding this comment.
This snippet does not type-check. With @react-navigation/bottom-tabs 8 (the version in the example app), tsc reports Property 'insets' does not exist on type 'BottomTabBarProps', and the tabBarIcon?.(...) call fails because tabBarIcon can also be an icon object. With React Navigation 7, tabBarIcon takes color: string, but Paper's renderIcon passes a ColorValue, so that is a type error too.
The BottomNavigation with React Navigation guide linked above already has a full example that uses useSafeAreaInsets and handles tabPress and tabBarLabel. Consider keeping only the import diff here and pointing to that guide, so the two examples cannot drift apart. (via Claude, verify if it makes sense)
| | `MD3Theme` (type) | `Theme` | | ||
| | `ThemeBase` (type) | `Theme` | | ||
| | `MD3Elevation` (type) | `Elevation` | | ||
| | `MD3TypescaleKey` (runtime **enum**) | `TypescaleKey` (**type-only** union of the same 15 keys). Using it as a value, like `MD3TypescaleKey.bodyLarge`, has no replacement. Write the string `'bodyLarge'` instead | |
There was a problem hiding this comment.
On main, TypescaleKey has 30 keys. #5068 added an Emphasized key for each of the 15 base keys (bodyLargeEmphasized and so on), so "the same 15 keys" is no longer accurate.
| | `MD3TypescaleKey` (runtime **enum**) | `TypescaleKey` (**type-only** union of the same 15 keys). Using it as a value, like `MD3TypescaleKey.bodyLarge`, has no replacement. Write the string `'bodyLarge'` instead | | |
| | `MD3TypescaleKey` (runtime **enum**) | `TypescaleKey` (**type-only** union of the same keys, plus a new `*Emphasized` key for each). Using it as a value, like `MD3TypescaleKey.bodyLarge`, has no replacement. Write the string `'bodyLarge'` instead | |
(via Claude, verify if it makes sense)
| | v5 | v6 | | ||
| | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | ||
| | `theme.colors.backdrop` | `theme.colors.scrim` (Paper applies a `0.32` alpha to it) | | ||
| | `theme.colors.surfaceDisabled`, `theme.colors.onSurfaceDisabled` | removed, disabled states use `theme.colors.onSurface` at `0.38` opacity | |
There was a problem hiding this comment.
The two roles had different opacities in v5. surfaceDisabled was onSurface at 0.12 (disabled containers) and onSurfaceDisabled was onSurface at 0.38 (disabled content). With this row, a custom disabled background that used surfaceDisabled becomes about three times darker.
| | `theme.colors.surfaceDisabled`, `theme.colors.onSurfaceDisabled` | removed, disabled states use `theme.colors.onSurface` at `0.38` opacity | | |
| | `theme.colors.surfaceDisabled` | removed, use `theme.colors.onSurface` at `0.12` opacity for disabled containers | | |
| | `theme.colors.onSurfaceDisabled` | removed, use `theme.colors.onSurface` at `0.38` opacity for disabled content | |
(via Claude, verify if it makes sense)
| ### Type changes | ||
|
|
||
| - **`theme.colors.*` is typed `ColorValue`, not `string`.** Code that does string operations on a theme color (`theme.colors.primary.toUpperCase()`, passing it to a `string`-typed prop of another library) needs a cast or `String(...)`. To match, most component color props (`color`, `iconColor`, `buttonColor`, `textColor`, `selectedColor`, `containerColor`, `uncheckedColor`, …) and render prop callbacks (`left({ color })`, `renderIcon({ color })`) changed from `string` to `ColorValue` as well. | ||
| - `PaperProvider` now picks light or dark from `theme.dark` (falling back to the system color scheme) and shallow-merges `theme.colors` over the base scheme. A partial `{ colors: { primary } }` override no longer wipes the other roles. `theme.version` is ignored. |
There was a problem hiding this comment.
The system color scheme is used only when no theme prop is passed. PaperProvider calls useSystemColorScheme(!props.theme), and that hook returns 'light' when a theme is given. So theme={{ colors: { primary } }} without dark renders the light scheme even when the device is in dark mode.
| - `PaperProvider` now picks light or dark from `theme.dark` (falling back to the system color scheme) and shallow-merges `theme.colors` over the base scheme. A partial `{ colors: { primary } }` override no longer wipes the other roles. `theme.version` is ignored. | |
| - `PaperProvider` now picks light or dark from `theme.dark`. Without a `theme` prop it follows the system color scheme. With a `theme` that doesn't set `dark`, it uses the light scheme. `theme.colors` is shallow-merged over the base scheme, so a partial `{ colors: { primary } }` override no longer wipes the other roles. `theme.version` is ignored. |
(via Claude, verify if it makes sense)
| - `FAB`, `FAB.Extended`, `Menu.Item`: the `accessibilityState` object prop was split into `aria-checked`, `aria-selected`, `aria-busy` and `aria-expanded`. | ||
| - `BottomNavigation` and `BottomNavigation.Bar`: route objects use `'aria-label'` instead of `accessibilityLabel` (`getAccessibilityLabel` defaults to `route['aria-label']`). | ||
|
|
||
| **Not renamed** (still the v5 name): `Button.accessibilityHint`, `Chip.closeIconAccessibilityLabel`, `DataTable.Pagination.selectPageDropdownAccessibilityLabel`, `Menu.overlayAccessibilityLabel`, `Searchbar.searchAccessibilityLabel` / `clearAccessibilityLabel` / `traileringIconAccessibilityLabel`, `Snackbar.iconAccessibilityLabel`. |
There was a problem hiding this comment.
On main, two of these were renamed. Menu.overlayAccessibilityLabel is now dismissAccessibilityLabel (#5125), and Searchbar.traileringIconAccessibilityLabel is now trailingIconAccessibilityLabel (#5117, together with the other traileringIcon* props). Modal.overlayAccessibilityLabel was renamed to dismissAccessibilityLabel too, so it does not belong in this list either. The Menu, Modal and Searchbar sections on main already describe these renames.
| **Not renamed** (still the v5 name): `Button.accessibilityHint`, `Chip.closeIconAccessibilityLabel`, `DataTable.Pagination.selectPageDropdownAccessibilityLabel`, `Menu.overlayAccessibilityLabel`, `Searchbar.searchAccessibilityLabel` / `clearAccessibilityLabel` / `traileringIconAccessibilityLabel`, `Snackbar.iconAccessibilityLabel`. | |
| **Not renamed** (still the v5 name): `Button.accessibilityHint`, `Chip.closeIconAccessibilityLabel`, `DataTable.Pagination.selectPageDropdownAccessibilityLabel`, `Searchbar.searchAccessibilityLabel` / `clearAccessibilityLabel`, `Snackbar.iconAccessibilityLabel`. |
(via Claude, verify if it makes sense)
| | ---------------------------------------------------- | --------------------------------------------------------- | | ||
| | `size` | removed, no replacement. Size is derived from `children` | | ||
| | `ref` | removed from props | | ||
| | props typed as `Animated.Text` props (`Animated.Value` accepted in `style` etc.) | plain `TextProps`. Pass static values, `visible` handles the fade | |
There was a problem hiding this comment.
On main, Badge style is StyleProp<AnimatedStyle<TextStyle>> and accepts styles from Reanimated's useAnimatedStyle (#5078). The "Animations" section on main documents this for Badge, FAB and FAB.Extended. So "Pass static values" is not accurate. The style rows for FAB (line 397) and FAB.Extended (line 417) have the same problem. Both are StyleProp<AnimatedStyle<ViewStyle>> now, not StyleProp<ViewStyle>. (via Claude, verify if it makes sense)
| | `variant: 'primary' \| 'secondary' \| 'tertiary' \| 'surface'` (default `'primary'`) | `variant: 'primary' \| 'secondary' \| 'tertiary' \| 'tonalPrimary' \| 'tonalSecondary' \| 'tonalTertiary'` (default **`'tonalPrimary'`**; `'surface'` removed) | | ||
| | `size: 'small' \| 'medium' \| 'large'` | `size: 'default' \| 'medium' \| 'large'` (56 / 80 / 96dp; `'small'` removed, `'default'` is the default) | |
There was a problem hiding this comment.
These rows keep 'primary', 'secondary', 'tertiary' and 'medium', but the same values render differently in v6. The code still type-checks, so nothing tells the user.
- v5
variant="primary"usedprimaryContainer/onPrimaryContainer. That is v6'tonalPrimary'. v6'primary'usesprimary/onPrimary. The same applies to'secondary'and'tertiary'. - v5
size="medium"was the 56dp default. In v6,'default'is 56dp and'medium'is 80dp.
In the example app on iOS, Android and web, size="medium" renders an 80dp FAB and size="default" a 56dp one. Please add the mapping, for example:
| v5 | v6 |
|---|---|
variant: 'primary' | 'secondary' | 'tertiary' (container colors, default 'primary') |
'tonalPrimary' | 'tonalSecondary' | 'tonalTertiary' (default 'tonalPrimary'). v6 'primary', 'secondary' and 'tertiary' use the solid primary, secondary and tertiary colors |
variant: 'surface' |
removed |
size: 'medium' (56dp, the default) |
size: 'default' (56dp). 'medium' is now 80dp |
size: 'small' (40dp) |
removed |
The variant row for FAB.Extended (line 413) needs the same note. (via Claude, verify if it makes sense)
| style={{ fontSize: 16 }} | ||
| /> | ||
| - **`render`** now receives `TextInputRenderProps` (the native `TextInput` props plus `ref?: React.RefObject<NativeTextInput | null>`). The v5 `RenderProps` type is gone and `ref` is an object, not a callback. Custom input integrations (masked inputs etc.) need to adapt. | ||
| - **`disabled`** is separate from `editable`. Paper sets `editable` itself, so pass `disabled` instead of `editable={false}`. |
There was a problem hiding this comment.
editable={false} still works and keeps its v5 meaning. The text is read-only, but the input can still be focused. Paper only overrides editable when disabled is set (isEditable: props.disabled ? false : props.editable in TextInput/hooks.ts). In the example app, "Readonly" gives a readOnly input on web and an enabled-looking field on iOS. "Disabled" gives a disabled input and the disabled style. So replacing editable={false} with disabled changes the behavior.
| - **`disabled`** is separate from `editable`. Paper sets `editable` itself, so pass `disabled` instead of `editable={false}`. | |
| - **`disabled`** is separate from `editable`. `editable={false}` makes the text read-only, and the input can still be focused. `disabled` also blocks focus and applies the disabled style. |
(via Claude, verify if it makes sense)
There was a problem hiding this comment.
Correction after testing on iOS and Android: there a tap on an editable={false} input does not focus it or open the keyboard, so "the input can still be focused" in the suggestion holds only on web. (via Claude, verify if it makes sense)
| ### ToggleButton | ||
|
|
||
| Only `rippleColor` was removed. See also [Planned for 6.0 stable](#planned-for-60-stable). |
There was a problem hiding this comment.
ToggleButton, ToggleButton.Group and ToggleButton.Row were removed on main in #5095. The guide on main has a ToggleButton section with the IconButton replacement. This section, the item on line 655, and the ToggleButton mentions on lines 228, 246 and 256 need to follow that. (via Claude, verify if it makes sense)
| ::: | ||
|
|
||
| - **`BottomNavigation` → `NavigationBar`** ([#5006](https://github.com/callstack/react-native-paper/pull/5006)). The scene-transition wrapper (`BottomNavigation`) and `BottomNavigation.SceneMap` are removed. `BottomNavigation.Bar` becomes a top-level `NavigationBar` meant to be driven by React Navigation or your own navigator, and the MD2 `shifting` mode goes away. The [BottomNavigation with React Navigation guide](./bottom-navigation) already shows what this migration looks like. | ||
| - **`SegmentedButtons` → `ConnectedButtonGroup`** ([#5028](https://github.com/callstack/react-native-paper/pull/5028)). Material 3 replaced segmented buttons with the connected button group. The new component keeps the `buttons` / `value` / `onValueChange` shape to make the migration easier. |
There was a problem hiding this comment.
#5028 was closed without merging. Its last comment says #5074 replaces it.
| - **`SegmentedButtons` → `ConnectedButtonGroup`** ([#5028](https://github.com/callstack/react-native-paper/pull/5028)). Material 3 replaced segmented buttons with the connected button group. The new component keeps the `buttons` / `value` / `onValueChange` shape to make the migration easier. | |
| - **`SegmentedButtons` → `ConnectedButtonGroup`** ([#5074](https://github.com/callstack/react-native-paper/pull/5074)). Material 3 replaced segmented buttons with the connected button group. The new component keeps the `buttons` / `value` / `onValueChange` shape to make the migration easier. |
(via Claude, verify if it makes sense)
|
Review by Claude Web (docs site, 390px wide)
|
satya164
left a comment
satya164
left a comment
There was a problem hiding this comment.
Review by Claude
See the inline comment. (via Claude, verify if it makes sense)
| | `icon` (optional when `label` was set) | `icon` is required | | ||
| | `uppercase`, `animated`, `loading`, `disabled`, `onLongPress`, `delayLongPress`, `labelMaxFontSizeMultiplier` | removed, no replacement | | ||
| | `accessibilityLabel`, `accessibilityState` | `aria-label`, `aria-checked` / `aria-selected` / `aria-busy` / `aria-expanded` | | ||
| | `style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>` | `style: StyleProp<ViewStyle>` | |
There was a problem hiding this comment.
At phone width (390px), this table is 561px wide, and the v6 column starts past the right edge of the screen. The reader sees only the v5 column until they scroll the table sideways. The cause is long code spans that have no break points, like Animated.WithAnimatedValue<StyleProp<ViewStyle>> on this line. The FAB.Extended table (line 417), "Material Design 2 is gone" (theme.animation.defaultAnimationDuration, line 119) and the react-native-paper/react-navigation table have the same problem. 11 of the 23 tables are wider than the screen.
This rule in docs/src/css/custom.css lets code in table cells wrap. With it, all 23 tables fit at 390px:
.rp-doc td code {
overflow-wrap: anywhere;
}
(via Claude, verify if it makes sense)
Replace the TBC placeholder with complete coverage of packaging, theming, typography, accessibility, and per-component breaking changes for the 6.0 alpha, plus a "Planned for 6.0 stable" section for pending PRs.
Motivation
v6 removes and renames public API without deprecation aliases, so the migration guide is the only place users can find out what changed.
docs/6.x/docs/guides/migration.mdwas a "TBC" stub that only coveredTextInput, and its example still imported the removedMD3LightTheme.The new guide is based on a diff of the public surface between
5.15.1(8b6b5e52) andmain:src/index.tsxexports, component statics and every exportedPropstype. It covers:react-native-reanimated/react-native-workletspeers, the ESM-only build and the JesttransformIgnorePatternsentry it needs, removal ofreact-native-paper/react-navigationandcreateMaterialBottomTabNavigator.MD2*themes,theme.version,isV3,mode,colors.accent,configureFonts({ isV3 })), theMD3*→ unprefixed renames (LightTheme,DarkTheme,Palette,Theme,TypescaleKey,Elevation),DefaultTheme,shadow,overlay,backdrop,surfaceDisabled,roundness→shapes,ColorValuetyping.Caption/Headline/Paragraph/Subheading/Title→Textvariants.accessibility*→aria-*/rolemapping, and which components still accept the old names through native prop passthrough.rippleColorremovals,*Variantprops typedTypescaleKey,refno longer part of manyPropstypes.AnimatedFAB→FAB.Extended,FAB.Group→FAB.Menu,HelperText→supportingText,TextInput.Affix,Checkbox.Android/Checkbox.IOS) and prop tables for Appbar, Badge, BottomNavigation, Button, Checkbox, Chip, DataTable, Dialog, FAB, IconButton, Menu, Searchbar, SegmentedButtons, Switch, TextInput and ToggleButton.BottomNavigation→NavigationBar(feat(navigation-bar): modernize to Material Design 3 #5006),SegmentedButtons→ConnectedButtonGroup(feat: add ConnectedButtonGroup component #5028) and the ToggleButton / Button mode removals are not in the alpha yet, so they are listed with links instead of being documented as removed.Structure and formatting follow the v4 → v5 guide:
## Componentswith###/####per component, MD3 names in italics,v5→v6tables anddiffblocks for before / after.Not included:
theming.mdx,fonts.md,getting-started.mdxandtheming-with-react-navigation.mdindocs/6.xstill referenceMD3LightTheme/roundness/version. That needs a followup i guess.Related issue
No existing issue. Part of the v6's great migration to MD3.
Test plan
yarn --cwd docs buildpasses./6.x/docs/guides/migrationlocally and check the tables, diff blocks, callouts and in-page anchors.src/index.tsx, and every replacement is exported or available as a component static.Propstypes between8b6b5e52andmain.