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

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

Motivation

Introduce a new Toolbar component implementing the Material Design 3 toolbars spec. Reuse theme tokens (shape, color roles, elevation) and follow the same component-tokens pattern as FAB / Checkbox.

Spec re-check (M3 toolbars)

Re-checked the M3 toolbars specs:

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.
Default (standard) colors: container/unselected-button surfaceContainer, icon/label onSurfaceVariant, selected button secondaryContainer with onSecondaryFixedVariant (light) / onSecondaryContainer (dark) icon.
vibrant colorScheme: container/unselected-button primaryContainer, icon/label onPrimaryFixedVariant (light) / onPrimaryContainer (dark), selected button falls back to surfaceContainer with onSurface icon.
Direct IconButton/Button children are auto-recolored to match colorScheme unless they already set their own color (a mode on either opts them out in favor of their own mode-based coloring).

Changes

`Toolbar` / tokens / utils

New src/components/Toolbar/{Toolbar.tsx,tokens.ts,utils.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 extends into safe-area insets via margin outside Surface's box, keeping the 64dp icon band untouched
withToolbarChildColors auto-recolors mode-less IconButton/Button children per colorScheme, without touching children that already set their own color/mode
Exported from src/index.tsx

Example / docs / tests

Example screen (ToolbarExample.tsx) covering both variants, both orientations, both color schemes, over a scrollable list
Docs page + prop table + theme colors table; 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 for both color schemes, and child auto-recoloring behavior

Scope note

Per Satyajit Sahoo's recommendation, this implementation is split into a series of PRs for easier review, rather than landing as one large change. This PR is PR 1 of the series:

PR 1 (this PR) — Floating + docked variant, static (without 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

Docs screenshots: docs/public/screenshots/toolbar_*.png.

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.

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

		@@ -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!

Uh oh!

Conversation

k0ndee commented Aug 11, 2026

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

`Toolbar` / tokens / utils