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:

const reduceMotion = 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`

JKobrynski · 2026-08-25T09:23:02Z

+      duration: duration.short3,
+      easing: Easing.bezier(...easing.standard),
      useNativeDriver: true,
    }).start();
-  }, [sortDirection, spinAnim]);
+  }, [sortDirection, spinAnim, duration, easing]);


- duration: duration.short3, + duration: duration.short3 * scale,

The latest commit restored * scale in Banner, but the sort-arrow rotation still runs at full duration when PaperProvider has zeroed theme.animation.scale for reduce-motion. Not a regression — it was a hardcoded 150 before — but you're already editing this exact Animated.timing call, and leaving the two halves of one PR on different reduce-motion stories invites the next reader to pick the wrong one. Needs const { scale } = theme.animation; and the extra dep, same as Banner.

good point, updated 👌

JKobrynski · 2026-08-27T08:48:05Z

@MikitasK let me know when this is ready for another review!

JKobrynski

LGTM! @satya164 @artus9033 all yours

JKobrynski · 2026-09-04T08:29:02Z

@MikitasK we've got conflicts

satya164 · 2026-09-09T12:04:09Z

+  const { backgroundColor, ...restStyle } = StyleSheet.flatten(style) || {};
+  const { background, textColor } = resolveAvatarColors({
+    theme,
+    backgroundColor,
+    color: rest.color,
+  });


Avoid reading StyleSheet.flatten. If user provides a custom background color, they should also provide a custom text color.

Color parsing can't handle PlatformColor, CSS custom properties etc. Remove any extra logic like this.

Also update migration guide once it's changed

satya164 · 2026-09-09T12:04:38Z

+  const theme = useInternalTheme(themeOverrides);
+  const { backgroundColor } = StyleSheet.flatten(style) || {};
+  const { background } = resolveAvatarColors({ theme, backgroundColor });


Same comment as AvatarIcon

satya164 · 2026-09-09T12:04:58Z

+  const { backgroundColor, ...restStyle } = StyleSheet.flatten(style) || {};
+  const { background, textColor } = resolveAvatarColors({
+    theme,
+    backgroundColor,
+    color: customColor,
+  });


Same comment as AvatarIcon

satya164 · 2026-09-09T12:07:10Z

      {icon}

      <Text
+        variant="labelMedium"


This won't use the passed theme overrides to DataTableTitle. Pass the overrides to Text as well.

satya164 · 2026-09-09T12:20:49Z

          </View>
        )}
      <Text
+        variant="bodySmall"


Same comment as DataTableTitle about theme overrides

satya164 · 2026-09-09T12:20:52Z

            style={styles.optionsContainer}
          >
            <Text
+              variant="bodySmall"


Same comment as DataTableTitle about theme overrides

satya164 · 2026-09-09T12:21:10Z


  return (
    <Text
+      variant="bodyMedium"


Same comment as DataTableTitle about theme overrides

satya164 · 2026-09-09T14:04:17Z

+    // A disabled animation scale settles within a frame instead of taking the
+    // full `motion.duration.medium1`.


Remove the AI generated comments. Whether it takes motion.duration.medium1 or something else with animation is irrelevant to this test.

satya164 · 2026-09-09T14:05:04Z

+  const sortIcon = () => {
+    const node = screen.getByText('arrow-up', {
+      includeHiddenElements: true,
+    }).parent;
+
+    if (!node) {
+      throw new Error('Sort icon not found');
+    }
+
+    return node;
+  };
+
+  it('uses zero-duration sort animation when animation scale is disabled', async () => {
+    const view = await render(
+      <DataTable.Title
+        sortDirection="ascending"
+        theme={{ animation: { scale: 0 } }}
+      >
+        Dessert
+      </DataTable.Title>
+    );
+
+    await view.rerender(
+      <DataTable.Title
+        sortDirection="descending"
+        theme={{ animation: { scale: 0 } }}
+      >
+        Dessert
+      </DataTable.Title>
+    );
+    await act(() => {
+      jest.advanceTimersByTime(16);
+    });
+
+    // A disabled animation scale lands on the final rotation within a frame.
+    expect(getAnimatedStyle(sortIcon())).toMatchObject({
+      transform: [{ rotate: '180deg' }],
+    });
+  });


remove this test. don't inspect internal elements.

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

satya164

Review by Claude

See the inline comments. (via Claude, verify if it makes sense)

satya164 · 2026-10-22T20:30:38Z

+- style={{ backgroundColor: '#ffcc00' }}
+ style={{ backgroundColor: '#ffcc00' }}


The style line is removed and added unchanged, so the diff reads as if style changed. Keep it as a context line so only the new color prop shows as added.

Suggested change

- style={{ backgroundColor: '#ffcc00' }}

+ style={{ backgroundColor: '#ffcc00' }}

style={{ backgroundColor: '#ffcc00' }}

(via Claude, verify if it makes sense)

satya164 · 2026-10-22T20:30:38Z

+/**
+ * Resolve background and content colors for an avatar.
+ */
+export const resolveAvatarColors = ({
+  theme,
+  color,
+}: {
+  theme: InternalTheme;
+  color?: string;
+}) => {
+  const background = theme.colors.primaryContainer;
+  const textColor = color ?? theme.colors.onPrimaryContainer;
+
+  return { background, textColor };
+};


After the StyleSheet.flatten logic was removed, resolveAvatarColors only returns theme.colors.primaryContainer and color ?? theme.colors.onPrimaryContainer. Avatar.Image calls it only to read the background. The helper adds a file and an indirection for two theme lookups. Inline the values in each component instead:

backgroundColor: theme.colors.primaryContainer, // ... <Icon source={icon} color={customColor ?? theme.colors.onPrimaryContainer} size={size * 0.6} />

ICON_SIZE_RATIO is also used only in AvatarIcon, so it can stay inline there. DEFAULT_SIZE is shared by three files and is fine to keep.

(via Claude, verify if it makes sense)

satya164 · 2026-10-22T20:30:38Z

        },
        styles.container,
-        restStyle,
+        style ?? {},


?? {} does nothing here. A style array accepts undefined, as AvatarImage already does with style.

Suggested change

style ?? {},

style,

(via Claude, verify if it makes sense)

satya164 · 2026-10-22T20:30:38Z

        },
        styles.container,
-        restStyle,
+        style ?? {},


Same as in AvatarIcon, ?? {} does nothing in a style array.

Suggested change

style ?? {},

style,

(via Claude, verify if it makes sense)

satya164 · 2026-10-22T20:30:39Z

      <Text
        style={[
          styles.text,
+          theme.fonts.titleMedium,


The DataTable changes in this PR use variant and pass theme={themeOverrides} to Text. Here the font is spread into style instead, and this Text still reads the provider theme for its own defaults. Use the same pattern as DataTable. The fontSize and lineHeight below still override the variant values, because Text applies style after the variant font.

Suggested change

<Text

style={[

styles.text,

theme.fonts.titleMedium,

<Text

variant="titleMedium"

theme={themeOverrides}

style={[

styles.text,

(via Claude, verify if it makes sense)

satya164 · 2026-10-22T20:30:39Z

 import type { Elevation, ThemeProp } from '../theme/types';

 const DEFAULT_MAX_WIDTH = 960;
+const ICON_SIZE = 40;


ICON_SIZE is used once, at the Icon below, and the name does not add information over size={40}. Keep the literal inline as before.

(via Claude, verify if it makes sense)

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 from callstack#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

JKobrynski requested changes Aug 25, 2026

View reviewed changes

fix: respect animation scale in DataTable title

e384ae1

JKobrynski approved these changes Aug 28, 2026

View reviewed changes

oleksandrzavarzin-callstack mentioned this pull request Aug 28, 2026

feat: structural accessibility for data table #5082

Open

6 tasks done

satya164 added the Contributor: Internal label Sep 3, 2026

feat: sync main into refactor/non-standard-components

2f0e874

satya164 requested changes Sep 9, 2026

View reviewed changes

satya164 requested a balanced review from Copilot September 15, 2026 20:33

Copilot AI reviewed Sep 15, 2026

MikitasK added 5 commits September 21, 2026 18:05

fix: simplify Avatar custom color handling

b318fad

fix: forward DataTable theme overrides

57c8321

test: clean up animation regression tests

6f2d053

feat: sync main into refactor/non-standard-components

44b95c1

feat: sync main into refactor/non-standard-components

628f67c

satya164 reviewed Oct 22, 2026

View reviewed changes

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

	duration: duration.short4,
	duration: duration.short4 * scale,

		// A disabled animation scale settles within a frame instead of taking the
		// full `motion.duration.medium1`.

		- style={{ backgroundColor: '#ffcc00' }}
		+ style={{ backgroundColor: '#ffcc00' }}

	- style={{ backgroundColor: '#ffcc00' }}
	+ style={{ backgroundColor: '#ffcc00' }}
	style={{ backgroundColor: '#ffcc00' }}

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JKobrynski commented Aug 27, 2026

Uh oh!

JKobrynski left a comment

Choose a reason for hiding this comment

Uh oh!

JKobrynski commented Sep 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

satya164 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!