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.

JKobrynski · 2026-08-27T08:42:58Z

@MikitasK can you resolve the comments that were addressed?

MikitasK · 2026-08-27T08:46:39Z

@MikitasK can you resolve the comments that were addressed?

hey, actually, I can't do that due to lack of access
maybe we can ask @MrMuzyk or try resolve it ourself

JKobrynski · 2026-08-28T08:26:10Z

+   * Set style of the TextInput component inside the searchbar
+   */
+  inputStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle>;


Shouldn't that be StyleProp<AnimatedStyle<ViewStyle>> just like in #5078?

yep, good catch 👍 updated it

JKobrynski · 2026-08-28T08:27:09Z

@MikitasK just one comment this time ☝️

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

JKobrynski reviewed Aug 28, 2026

View reviewed changes

fix: allow Reanimated styles in Searchbar

0fcb799

JKobrynski mentioned this pull request Aug 28, 2026

refactor(dialog): MD3 updates, updated Dialog API #5072

Open

3 tasks

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!

JKobrynski commented Aug 27, 2026

Uh oh!

MikitasK commented Aug 27, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JKobrynski commented Aug 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MrMuzyk commented Jul 1, 2026 •

edited

Loading