feat: implement Toolbar component by k0ndee · Pull Request #5043 · callstack/react-native-paper

k0ndee · 2026-08-11T08:21:38Z

Motivation

Introduces Toolbar, implementing the Material Design 3 toolbars spec. It reuses existing theme tokens (shape, color roles, elevation) and follows the same per-component-tokens pattern as FAB/Checkbox.

Spec re-check (M3 toolbars)

Re-checked the M3 toolbars spec:

Two variants: floating (self-positioned pill, corner.full, elevation level 3) and docked (full-width bar pinned to the bottom edge, corner.none, no elevation, extends into safe-area insets).
floating supports horizontal/vertical orientation; docked is always horizontal per spec.
standard (default) colors: container/unselected-button surfaceContainer, icon/label onSurfaceVariant, selected button secondaryContainer with onSecondaryContainer icon.
vibrant colorScheme: container/unselected-button primaryContainer, icon/label onPrimaryContainer, selected button falls back to surfaceContainer with onSurface icon.
Mode-less IconButton/Button descendants pick up the toolbar's colorScheme automatically via context - not just direct children - unless they already set their own mode or an explicit color prop.

Changes

`Toolbar` / tokens / utils

New src/components/Toolbar/{Toolbar.tsx,tokens.ts,utils.ts,ToolbarColorContext.ts}: variant (floating/docked), orientation (horizontal/vertical, floating-only), colorScheme (standard/vibrant), containerColor override, style/contentContainerStyle, testID, aria-label, theme, ref
Container shape/elevation/spacing resolved from ToolbarTokens. docked's outer wrapper has no inset margin, so its background naturally spans edge-to-edge into the safe area, while the content row gets insets-based margin to stay clear of it - the 64dp icon band itself stays untouched
ToolbarColorContext carries theme/colorScheme down to descendants; IconButton/Button each read it directly and resolve their own color, backing off if they already have a mode or explicit color prop
Exported from src/index.tsx

Example / docs / tests

Example screen (ToolbarExample.tsx) covering both variants, both orientations, both color schemes, over a scrollable list
Prop docs and a theme-colors table entry (auto-generated docs page); screenshots for floating (horizontal/vertical) and docked, each in standard/vibrant
Unit tests (Toolbar.test.tsx) covering shape/elevation per variant, color resolution across light/dark themes, and child auto-recoloring (including nested/non-direct descendants, opt-out via mode or explicit color)

Scope note

Per Satyajit Sahoo's recommendation, this lands as a series of PRs instead of one large change. This is PR 1 of the series:

PR 1 (this PR) - Floating + docked variant, static (no animation, no FAB pairing), colorScheme standard/vibrant. Component, tokens, tests, docs, example.
PR 2 - Show/hide animation (offscreen slide + spring), generic scroll shared-value primitive.
PR 3 - FAB pairing, FAB/key-action collapse on scroll.
PR 4 - Trailing-edge overflow menu.

Related issue

Related to #4988

Test plan

yarn typecheck / yarn lint / Toolbar unit tests
Full unit test suite green
Manually verified in the example app: floating (horizontal/vertical) and docked, standard/vibrant, over scrolling content, light and dark themes

Visual verification

	standard	vibrant
floating, horizontal
floating, vertical
docked

MikitasK

nice work! 👍 overall, this looks like a solid foundation for the new Toolbar components
just a few points to address before merge:

MikitasK

LGTM 👍

JKobrynski

One minor comment

JKobrynski

I think it's the last one, and it's minor

JKobrynski · 2026-08-24T07:27:10Z

LGTM! @satya164 do you want to take a look?

JKobrynski · 2026-09-09T12:52:48Z

@@ -0,0 +1,3388 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP


I think you need to rerun these with -u after rebasing, because default testIDs were removed

You were right, the PR was still behind main branch. I rebased it and now it is up to date.

JKobrynski · 2026-09-09T13:12:25Z

+   * Style for positioning `floating`'s pill, or overriding `docked`'s
+   * default anchoring.
+   */
+  style?: StyleProp<ViewStyle>;


What happens when you pass backgroundColor|borderRadius through this prop? I'm afraid they'd silently do nothing, other components type style as styleProp<SurfaceStyle>

You are correct, fixed it by changing style type to StyleProp<SurfaceStyle>

JKobrynski · 2026-09-09T13:33:09Z

+import { resolveCornerRadius } from '../../theme/utils/shape';
+import Surface from '../Surface';
+
+export type Props = {


Other components use Omit<ViewProps, 'style'> to allow props like onLayout`, does that work here?

Fixed it, changed Props to Omit<ViewProps, 'style'>

JKobrynski · 2026-09-09T13:48:41Z

+              ? [styles.verticalAnchor, { right: insets.right + 16 }]
+              : [styles.horizontalAnchor, { bottom: insets.bottom + 24 }]


Have you checked the edge offsets against the toolbar specs? I'm afraid the two are swapped

The horizontal edge offset is incorrect, it should be 16. As for the vertical one the only spec in MD3 is that the minimum offset from screen edge should be equal to 16 so I left it as it is.

JKobrynski · 2026-09-15T12:46:47Z

+      ref={ref}
+      pointerEvents="box-none"
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+      style={[styles.dockedContainer, style as StyleProp<ViewStyle>]}


Do we really need to use as here?

Yes, it's needed. style is typed as StyleProp<SurfaceStyle>, and SurfaceStyle wraps ViewStyle in Reanimated's AnimatedStyle (so it typechecks when forwarded to Surface, which is an Animated.View). Here it's applied to a plain View instead, which only accepts plain ViewStyle - hence the mismatch.

The cast is safe in practice: this wrapper isn't animated, so no shared-value-typed style ever reaches it. I also checked whether swapping this to Reanimated's Animated.View would avoid the cast - it does typecheck, but it always renders with collapsable={false}, which is a permanent Android view-flattening cost for every Toolbar (docked or not) just to accommodate a case that doesn't apply here.

Copilot

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

k0ndee changed the title ~~@k0ndee/toolbar~~ feat: implement Toolbar component Aug 11, 2026

MikitasK reviewed Aug 11, 2026

View reviewed changes

Comment thread src/components/Toolbar/tokens.ts Outdated

Comment thread src/components/Toolbar/utils.ts Outdated

Comment thread src/components/Toolbar/Toolbar.tsx Outdated

MikitasK approved these changes Aug 13, 2026

View reviewed changes

JKobrynski requested changes Aug 18, 2026

View reviewed changes

Comment thread src/components/Toolbar/utils.ts Outdated

Comment thread src/components/Toolbar/Toolbar.tsx Outdated

Comment thread docs/src/data/themeColors.ts Outdated

Comment thread src/components/Toolbar/tokens.ts Outdated

JKobrynski reviewed Aug 19, 2026

View reviewed changes

Comment thread src/components/__tests__/Toolbar.test.tsx

JKobrynski reviewed Aug 19, 2026

View reviewed changes

Comment thread src/components/Toolbar/Toolbar.tsx

satya164 added the Contributor: Internal label Aug 21, 2026

k0ndee force-pushed the @k0ndee/toolbar branch from 87be2b8 to d4845c7 Compare September 7, 2026 08:57

JKobrynski reviewed Sep 9, 2026

View reviewed changes

k0ndee added 12 commits September 10, 2026 13:28

feat: implement Toolbar component

dc059fd

docs: add screenshots and adjust example screen for Toolbar

ff8a67d

docs: adjust Toolbar description

9c94c16

fix: enable style override for floating toolbar

aa2f32e

fix: adjust color tokens

12274c8

fix: fix coloring of selected & disabled icon button

a1cb20f

fix: remove remounting Surface on orientation change

2d0f9d3

fix: add context for Toolbar's children colors

22a1df3

test: add Toolbar recoloring nested Buttons test coverage

be130e0

docs: clarify where Toolbar's ref land for floating vs docked

075ee6b

fix: adapt Toolbar to Surface rework

7249ed8

fix: address Toolbar PR review comments

d24d47c

k0ndee force-pushed the @k0ndee/toolbar branch from d4845c7 to d24d47c Compare September 10, 2026 11:37

k0ndee added 2 commits September 10, 2026 13:47

chore: update Toolbar example app screenshots

db408d3

chore: comment and implementation cleanup

1ee241b

JKobrynski reviewed Sep 15, 2026

View reviewed changes

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

Copilot AI reviewed Sep 15, 2026

chore: trim Toolbar comments

82a52e8

		@@ -0,0 +1,3388 @@
		// Jest Snapshot v1, https://goo.gl/fbAQLP

		? [styles.verticalAnchor, { right: insets.right + 16 }]
		: [styles.horizontalAnchor, { bottom: insets.bottom + 24 }]

Uh oh!

Conversation

k0ndee commented Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Spec re-check (M3 toolbars)

Changes

Toolbar / tokens / utils

Example / docs / tests

Scope note

Related issue

Test plan

Visual verification

Uh oh!

MikitasK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MikitasK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JKobrynski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JKobrynski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JKobrynski commented Aug 24, 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!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

k0ndee commented Aug 11, 2026 •

edited

Loading

`Toolbar` / tokens / utils