refactor: searchbar component by MrMuzyk · Pull Request #5020 · callstack/react-native-paper

MrMuzyk · 2026-07-01T11:27:13Z

Motivation

Modernizes the Searchbar to the latest MD3 (Expressive) search spec by adopting the shared theme tokens (shape, motion, colors), extracting component-specific tokens, and adding the missing results container - following the token/structure conventions of the already-modernized TextInput/Switch/Checkbox/FAB. Also fixes the long-standing swapped input/placeholder colors and adds the missing focus transition.

Changes

Colors (tokens.ts / utils.ts)

Fixed swapped roles: input text onSurfaceVariant → onSurface; placeholder onSurface → onSurfaceVariant (MD3 order).
Container background resolved from the container token (surfaceContainerHigh) via getSearchbarColors, instead of a hardcoded color.

Shape

contained → corner.extraLarge (28dp), divided → none (0), resolved through the shared resolveCornerRadius util (src/theme/utils/shape.ts).

Motion - focus transition (new)

The contained bar grows a little wider when focused: its side margins shrink from 24dp to 12dp, then expand back on blur. It's a spring animation (Reanimated) and respects the OS "reduce motion" setting.
Note: contained mode (now the default) has side margins, where the old bar mode was full-width. Set a horizontal margin in style to override it — that also turns the focus animation off.

Structure

Moved Searchbar.tsx into its own src/components/Searchbar/ directory with tokens.ts (sizes/shape/colors), utils.ts (getSearchbarColors, getSearchbarInputFont), and
index.tsx (attaches Results as a static sub-component) - mirroring Switch/Checkbox/FAB.

New sub-component — Searchbar.Results (SearchbarResults.tsx)

A Surface container for the results/suggestions list (MD3 search anatomy element 6). It provides only the surface; result grouping is left to the consumer. SearchbarResultsProps is exported from the package root.

Breaking change

Mode values are renamed to MD3 terminology

   // Before (v5)                                                                                                                                                          
   <Searchbar mode="bar" ... />   // default                                                                                                                               
   <Searchbar mode="view" ... />                                                                                                                                           
                                                                                                                                                                           
   // After (v6)                                                                                                                                                           
   <Searchbar mode="contained" ... />  // default                                                                                                                          
   <Searchbar mode="divided" ... />    // deprecated in M3 Expressive

Related issue

#4978

Test plan

yarn typescript
yarn lint
yarn test
Visual verification (yarn example web):
- Contained bar grows wider on focus; reduced-motion disables the animation
- Input vs placeholder colors correct (input onSurface, placeholder onSurfaceVariant)
- Divided mode: square corners + bottom divider; showDivider={false} hides it
- Trailering icon / right item / loading states render correctly
- Searchbar.Results renders the results list below the bar

searchbar.mp4

MikitasK

great job 👍
just a few things comments from my side:

MikitasK · 2026-08-19T18:08:45Z

+
+  return (
+    <Reanimated.View
+      style={applyFocusMargin ? containedMarginStyle : null}
+      testID={`${testID}-wrapper`}
+    >
+      <Surface
+        style={[
+          styles.container,
+          { backgroundColor: containerColor, borderRadius },
+          style,
+        ]}
+        testID={`${testID}-container`}
+        elevation={elevation}
+        container
+        theme={theme}
+      >


could we apply parent-facing layout styles to this wrapper?
currently flex, position, alignSelf & similar props remain on nested Surface, so they no longer affect Searchbar relative to its parent

we could split layout & visual styles using existing splitStyles helper

Suggested change

return (

<Reanimated.View

style={applyFocusMargin ? containedMarginStyle : null}

testID={`${testID}-wrapper`}

>

<Surface

style={[

styles.container,

{ backgroundColor: containerColor, borderRadius },

style,

]}

testID={`${testID}-container`}

elevation={elevation}

container

theme={theme}

>

const [surfaceStyle, wrapperStyle] = splitStyles(flatStyle || {}, (key) => key.startsWith('margin') || ['position', 'alignSelf', 'top', 'right' ...].includes(key)

);

return (

<Reanimated.View

style={[wrapperStyle, applyFocusMargin ? containedMarginStyle : null]}

testID={`${testID}-wrapper`}

>

<Surface

style={[

styles.container,

{ backgroundColor: containerColor, borderRadius },

surfaceStyle,

]}

testID={`${testID}-container`}

elevation={elevation}

container

theme={theme}

>

MikitasK · 2026-08-19T18:11:06Z

+const HORIZONTAL_MARGIN_KEYS = [
+  'margin',
+  'marginHorizontal',
+  'marginLeft',
+  'marginRight',
+  'marginStart',
+  'marginEnd',
+] as const;


what about including logical horizontal margin props here?
marginInline, marginInlineStart, marginInlineEnd are supported by RN, but currently they don’t disable built-in focus margin (RN docs)

Suggested change

const HORIZONTAL_MARGIN_KEYS = [

'margin',

'marginHorizontal',

'marginLeft',

'marginRight',

'marginStart',

'marginEnd',

] as const;

const HORIZONTAL_MARGIN_KEYS = [

'margin',

'marginHorizontal',

'marginLeft',

'marginRight',

'marginStart',

'marginEnd',

'marginInline',

'marginInlineStart',

'marginInlineEnd',

] as const;

MikitasK

updated implementation to preserve consumer layout styles on outer wrapper while keeping focus-margin animation on a separate Reanimated view
expanded HORIZONTAL_MARGIN_KEYS to include marginInline, marginInlineStart, marginInlineEnd
added regression tests & updated snapshots

JKobrynski · 2026-08-25T11:00:52Z

+  // component (input was onSurfaceVariant, placeholder was onSurface).
+  input: 'onSurface',
+  placeholder: 'onSurfaceVariant',
+  leadingIcon: 'onSurfaceVariant',


md.comp.search-bar.leading-icon.color resolves to md.sys.color.on-surface, not on-surface-variant, and the view namespace agrees (md.comp.search-view.header.leading-icon.color → on-surface). The PR fixes two of the three roles; this is the third.

Watch the knock-on. Searchbar.tsx:284 derives iconColor from leadingIconColor, and :450 reuses it for the clear button, which per md.comp.search-bar.trailing-icon.color should stay on-surface-variant. It's invisible today only because both roles resolve alike.

- iconColor={value ? iconColor : 'rgba(255, 255, 255, 0)'} + iconColor={value ? trailingIconColor : 'rgba(255, 255, 255, 0)'}

JKobrynski · 2026-08-25T11:04:36Z

+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+});


The new results surface ships square corners. md.comp.search-view.contained.docked.results.shape → md.sys.shape.corner.medium = 12dp. (The 28dp corner.extra-large belongs to md.comp.search-view.docked.container.shape, which is the whole docked view, not the results block.)

Everything else in the component routes shape through SearchbarTokens + resolveCornerRadius, so this wants a results: 'medium' entry in tokens.ts rather than a bare style.

JKobrynski · 2026-08-25T11:07:05Z

+   * Search layout mode, the default value is "contained".
+   * - `contained` - the recommended M3 Expressive style: a rounded, elevated
+   *   bar whose horizontal margins animate from 24dp down to 12dp on focus
+   *   (grow-wider effect). Providing any horizontal margin via `style`
+   *   replaces the built-in margin and disables the focus transition.
+   * - `divided` - a full-bleed search view with square corners and a bottom
+   *   `Divider`. Deprecated in M3 Expressive in favor of `contained`.
+   */
+  mode?: 'contained' | 'divided';


docs/6.x/docs/guides/migration.md has a ## Components section (still only TextInput) and this PR adds nothing to it. The before/after snippet already in the PR body needs to live in the guide.

Please cover both breaks. The behavioural one is the bigger surprise: bar was full-bleed, contained inserts 24dp horizontal margins, so every existing <Searchbar /> moves. And the opt-out is undiscoverable - HORIZONTAL_MARGIN_KEYS (:74-84) includes margin, so style={{ margin: 4 }} silently disables the focus animation. Your own example had to switch to marginVertical: 4 (SearchbarExample.tsx:240) for exactly that reason.

JKobrynski · 2026-08-25T11:08:20Z

+  const hasWrapperStyle = Object.keys(wrapperStyle).length > 0;
+
+  return (
+    <Animated.View


This is React Native's Animated, now rendered at runtime - on main the import was used only in type positions. The "preserve Searchbar layout during focus animation" commit moved transform onto the outer wrapper, and the test at Searchbar.test.tsx:75-100 drives it with an Animated.Value, so the node has to be an RN Animated.View.

House rule is Reanimated only, and #5062's own note about animated elevation staying broken on web until the move to Reanimated says which way this is meant to travel.

MrMuzyk added 5 commits July 1, 2026 13:16

refactor: searchbar component

8bf580e

fix: first set of corrections

a7ceb09

fix: docs

8bc9224

fix: more corrections

b6615ba

fix: dead code removal

694f8e0

MrMuzyk marked this pull request as ready for review July 9, 2026 11:27

MikitasK reviewed Aug 19, 2026

View reviewed changes

MikitasK added 2 commits August 21, 2026 16:07

fix: preserve Searchbar layout during focus animation

6c65d92

feat: sync main into refactor/searchbar

a2086a1

MikitasK approved these changes Aug 21, 2026

View reviewed changes

JKobrynski requested changes Aug 25, 2026

View reviewed changes

MikitasK added 2 commits August 25, 2026 15:37

fix: align Searchbar with MD3 tokens and Reanimated

fc2563f

docs: document Searchbar v6 migration

4f4903a

Navigation Menu

Uh oh!

Uh oh!

refactor: searchbar component - #5020

refactor: searchbar component#5020
MrMuzyk wants to merge 9 commits into
callstack:mainfrom
MrMuzyk:refactor/searchbar

MrMuzyk commented Jul 1, 2026 •

edited

Loading

Uh oh!

MikitasK left a comment

Uh oh!

MikitasK Aug 19, 2026

Uh oh!

MikitasK Aug 19, 2026

Uh oh!

MikitasK left a comment

Uh oh!

JKobrynski Aug 25, 2026

Uh oh!

MikitasK Aug 25, 2026

Uh oh!

JKobrynski Aug 25, 2026

Uh oh!

MikitasK Aug 25, 2026

Uh oh!

JKobrynski Aug 25, 2026

Uh oh!

MikitasK Aug 25, 2026

Uh oh!

JKobrynski Aug 25, 2026

Uh oh!

MikitasK Aug 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Uh oh!

Conversation

MrMuzyk commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Changes

Colors (tokens.ts / utils.ts)

Shape

Motion - focus transition (new)

Structure

New sub-component — Searchbar.Results (SearchbarResults.tsx)

Breaking change

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!

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!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MrMuzyk commented Jul 1, 2026 •

edited

Loading