refactor: modernize non standard components to the latest MD3 spec by MrMuzyk · Pull Request #5016 · callstack/react-native-paper

MrMuzyk · 2026-06-29T13:55:22Z

Motivation

Modernizes the remaining non-standard components — Avatar, Banner, and DataTable — to the latest MD3 spec by adopting the recently added theme tokens (shape, motion, typography, colors).

Changes

Avatar (AvatarIcon, AvatarText, AvatarImage, new utils.ts)

Colors: default primary + getContrastingColor(white) → MD3 container pair primaryContainer / onPrimaryContainer. Custom backgrounds keep the getContrastingColor
luminance fallback (arbitrary per-user colors have no on- role).
Shape: borderRadius: size / 2 → cornerFull (9999) from src/theme/tokens/sys/shape.
Typography: AvatarText spreads theme.fonts.titleMedium (family/weight/letterSpacing) before its proportional fontSize/lineHeight.
Structure: new src/components/Avatar/utils.ts (DEFAULT_SIZE = 64, ICON_SIZE_RATIO = 0.6, resolveAvatarColors) shared by the three files; removes the duplicated
defaultSize constant.

Banner (Banner.tsx)

Motion: durations 250 * scale / 200 * scale → theme.motion.duration.medium1 / short4 (values unchanged), plus easing: Easing.bezier(...theme.motion.easing.standard). Dropped the legacy * scale multiplier to match how Switch/Checkbox adopted motion tokens.
Icon size: size={40} → const ICON_SIZE = 40.

DataTable (DataTableTitle, DataTableCell, DataTablePagination)

Typography: header → variant="labelMedium" (keeps 12px; lineHeight: 24 retained to stay vertically aligned with the 24dp sort icon); cell → variant="bodyMedium"; pagination labels → variant="bodySmall".
Motion: sort-arrow spin duration: 150 → theme.motion.duration.short3 (unchanged value) + easing.standard.

Visual / behavioral changes (no public API changed)

Avatar's default tone flips from solid primary + white content to the primaryContainer / onPrimaryContainer pair.
Banner & DataTable animations now use the MD3 standard easing curve (was RN's default ease-in-out); Banner no longer scales its duration by theme.animation.scale.
DataTable header gains MD3 label tracking (letterSpacing: 0.5).

Related issue

#4990

Test plan

yarn typescript
yarn lint
yarn test
Visual verification (yarn example web):
- Avatar — Icon/Text/Image render circular with the new tonal default; custom-colored avatars stay legible
- Banner — show/hide animates correctly via the FAB toggle
- DataTable — column title sits vertically centered with the sort icon, cell/pagination text reads well, sort arrow still animates on header press

banner.mp4

MikitasK

nicely done 👏
just one comment to consider before merge:

MikitasK · 2026-08-19T18:00:54Z

 // show
 Animated.timing(position, {
- duration: 250 * scale,
+ duration: duration.medium1,


could we keep using theme.animation.scale here? PaperProvider sets it to 0 here for reduced motion
Suggested change
duration: duration.medium1,
duration: duration.medium1*scale,

MikitasK · 2026-08-19T18:01:27Z

 // hide
 Animated.timing(position, {
- duration: 200 * scale,
+ duration: duration.short4,


same here
Suggested change
duration: duration.short4,
duration: duration.short4*scale,

JKobrynski · 2026-08-24T13:42:55Z

@@ -159,20 +161,22 @@ const Banner = ({
 if (visible) {
 // show
 Animated.timing(position, {
- duration: 250 * scale,
+ duration: duration.medium1 * scale,
 toValue: 1,
 useNativeDriver: false,
+ easing: Easing.bezier(...easing.standard),
 }).start(showCallback);
 } else {
 // hide
 Animated.timing(position, {
- duration: 200 * scale,
+ duration: duration.short4 * scale,
 toValue: 0,
 useNativeDriver: false,
+ easing: Easing.bezier(...easing.standard),
 }).start(hideCallback);
 }
 // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [visible, position, scale]);
+ }, [visible, position, duration, easing, scale]);


- const { scale } = theme.animation;+ const { duration, easing } = theme.motion; ... - duration: 250 * scale,+ duration: duration.medium1,
Dropping the * scale multiplier turns off reduce-motion for Banner entirely. scale isn't a legacy leftover — PaperProvider.tsx:35-37 sets it to 0 whenever useResolvedReduceMotion() resolves true, either from AccessibilityInfo.isReduceMotionEnabled or from the explicit reduceMotion prop. 250 * scale was therefore 0 for those users and the banner snapped in and out; after this change it always runs the full 250ms/200ms transition. The token adoption
itself is fine (medium1 = 250, short4 = 200, identical to the old numbers), it's only the multiplier that carries the a11y behaviour.
The PR description says this matches "how Switch/Checkbox adopted motion tokens", but those two didn't drop reduce-motion — they replaced the mechanism. Switch.tsx:169-171 and Checkbox.tsx both call useReduceMotion() from src/theme/accessibility/ReduceMotionContext and feed ReduceMotion.Always/Never into their Reanimated configs. Banner ends up honouring neither path, and it's now the only animated component in src/ that reads neither theme.animation.scale (still live in ProgressBar, Modal, Badge, Snackbar, ActivityIndicator, Chip, Card, CrossFadeIcon, DrawerCollapsedItem, RadioButtonAndroid) nor useReduceMotion().
RN's Animated.timing has no reduceMotion option, so either keep scale, or take the Switch/Checkbox route:
constreduceMotion=useReduceMotion();// ...duration: reduceMotion ? 0 : duration.medium1,

thanks for raising this up @JKobrynski 🙏
basically, this issue was addressed in recent ae2ecfc commit. both Banner durations now use theme.animation.scale & regression test covers scale: 0
as for PR description, it's stale & I can't update since I'm not the owner of this PR
but here's what it should say instead:
### Banner — Motion - Durations `250 * scale` / `200 * scale` -> `theme.motion.duration.medium1 * scale` / `theme.motion.duration.short4 * scale` (values unchanged at the default scale) + `Easing.bezier(...theme.motion.easing.standard)` - Banner continues to respect `theme.animation.scale` including `scale: 0` reduced-motion behavior ### Visual / behavioral changes - Banner & DataTable animations now use MD3 standard easing curve. Banner continues to honor `theme.animation.scale`

MikitasK · 2026-08-24T15:14:25Z

@@ -159,20 +161,22 @@ const Banner = ({
 if (visible) {
 // show
 Animated.timing(position, {
- duration: 250 * scale,
+ duration: duration.medium1 * scale,
 toValue: 1,
 useNativeDriver: false,
+ easing: Easing.bezier(...easing.standard),
 }).start(showCallback);
 } else {
 // hide
 Animated.timing(position, {
- duration: 200 * scale,
+ duration: duration.short4 * scale,
 toValue: 0,
 useNativeDriver: false,
+ easing: Easing.bezier(...easing.standard),
 }).start(hideCallback);
 }
 // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [visible, position, scale]);
+ }, [visible, position, duration, easing, scale]);


thanks for raising this up @JKobrynski 🙏
basically, this issue was addressed in recent ae2ecfc commit. both Banner durations now use theme.animation.scale & regression test covers scale: 0
as for PR description, it's stale & I can't update since I'm not the owner of this PR
but here's what it should say instead:
### Banner — Motion - Durations `250 * scale` / `200 * scale` -> `theme.motion.duration.medium1 * scale` / `theme.motion.duration.short4 * scale` (values unchanged at the default scale) + `Easing.bezier(...theme.motion.easing.standard)` - Banner continues to respect `theme.animation.scale` including `scale: 0` reduced-motion behavior ### Visual / behavioral changes - Banner & DataTable animations now use MD3 standard easing curve. Banner continues to honor `theme.animation.scale`

MrMuzyk added 3 commits June 29, 2026 10:58

refactor: non standard component; avatar
2cb2b81

refactor: banner
6e07fc7

refactor: data table
63d431e

MrMuzyk marked this pull request as ready for review June 30, 2026 06:29

artus9033 requested a review from satya164 July 8, 2026 10:24

lukemorawski mentioned this pull request Aug 18, 2026
refactor(banner): make hidden content inert and fix live region semantics #5055
Open

MikitasK reviewed Aug 19, 2026
View reviewed changes

fix: respect animation scale in Banner
ae2ecfc

oleksandrzavarzin-callstack added a commit to oleksandrzavarzin-callstack/react-native-paper that referenced this pull request Aug 21, 2026
refactor: adopt MD3 avatar tokens fromcallstack#5016
5ed8a6f

oleksandrzavarzin-callstack mentioned this pull request Aug 21, 2026
Fix/define avatar identity and fallback semantics #5058
Open
4 tasks

MikitasK approved these changes Aug 21, 2026
View reviewed changes

JKobrynski reviewed Aug 24, 2026
View reviewed changes

MikitasK approved these changes Aug 24, 2026
View reviewed changes

Navigation Menu

Uh oh!

Uh oh!

refactor: modernize non standard components to the latest MD3 spec - #5016

refactor: modernize non standard components to the latest MD3 spec#5016
MrMuzyk wants to merge 4 commits into
callstack:mainfrom
MrMuzyk:refactor/non-standard-components

MrMuzyk commented Jun 29, 2026

Uh oh!

MikitasK left a comment

Uh oh!

MikitasKAug 19, 2026

Uh oh!

MikitasKAug 19, 2026

Uh oh!

JKobrynskiAug 24, 2026

Uh oh!

MikitasKAug 24, 2026

Uh oh!

MikitasKAug 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	duration: duration.medium1,
	duration: duration.medium1*scale,

Uh oh!

Uh oh!

Conversation

MrMuzyk commented Jun 29, 2026

Motivation

Changes

Visual / behavioral changes (no public API changed)

Related issue

Test plan

Uh oh!

MikitasK left a comment

Choose a reason for hiding this comment

Uh oh!

MikitasKAug 19, 2026

Choose a reason for hiding this comment

Uh oh!

MikitasKAug 19, 2026

Choose a reason for hiding this comment

Uh oh!

JKobrynskiAug 24, 2026

Choose a reason for hiding this comment

Uh oh!

MikitasKAug 24, 2026

Choose a reason for hiding this comment

Uh oh!

MikitasKAug 24, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants