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 ☝️

JKobrynski · 2026-09-01T14:08:11Z

+
+  // A consumer-provided horizontal margin wins over the built-in one and
+  // disables the focus transition.
+  const flatStyle = StyleSheet.flatten<ViewStyle>(style);


Widening the type doesn't actually make Reanimated styles work - pass one and StyleSheet.flatten on this line silently throws it away, and Surface is still an RN Animated.View that couldn't apply it anyway. #5078 makes Surface Reanimated, so it's probably worth waiting for that.

fixed now that #5078 has landed 👌 also added a regression test

JKobrynski · 2026-09-09T10:11:50Z

This branch has a copy of built docs committed to id with 900+ files, please remove it 🙏 And also please resolve the conflicts, there've been some changes on main that will also influence this branch, like dropping default test IDs

Copilot

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

JKobrynski

Could you rebuild migration.md, Searchbar.test.tsx and SearchbarExample.tsx from main's copies and re-apply only the Searchbar changes? Right now they undo #5095, #5099 and #5117, and Git won't flag it.

JKobrynski · 2026-09-29T11:16:20Z

 - `Searchbar`: `style`
 - `Snackbar`: `style`
 - `Surface`: `style`
+- `ToggleButton`: `style`


Is the migration guide an older copy of the file? I'm afraid it puts ToggleButton back, drops the removal note for it, and rewrites the whole Test IDs section.

JKobrynski · 2026-09-29T11:17:28Z

+  return (
+    <Reanimated.View
+      style={outerStyle}
+      testID={testID ? `${testID}-wrapper` : undefined}


Have you seen that main dropped every -wrapper / -icon test ID and added searchTestID,
clearTestID and trailingTestID in their place? I'm afraid this brings the old ones back and removes the three props.

JKobrynski · 2026-09-29T11:18:05Z

+   * Icon name for the right trailering icon button.
+   * Works only when `mode` is set to "contained". It won't be displayed if `loading` is set to `true`.
+   */
+  traileringIcon?: IconSource;


Did the rename get lost in the folder move? traileringIcon and similar were corrected to trailingIcon on main, and this brings the old spellings back along with the example, the tests and the migration entry.

JKobrynski · 2026-09-29T11:19:10Z

+      testID={testID ? `${testID}-wrapper` : undefined}
+    >
+      <Reanimated.View
+        style={applyFocusMargin ? containedMarginStyle : null}


Have you tried <Searchbar style={{ height: 80 }} />? I'm afraid the bar stays its default height - the height lands on the outer wrapper and this middle view never grows. Might styles.fillWrapper here cover it?

<Reanimated.View - style={applyFocusMargin ? containedMarginStyle : null} + style={[ + shouldFillWrapper && styles.fillWrapper, + applyFocusMargin ? containedMarginStyle : null, + ]} >

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

MikitasK reviewed Aug 19, 2026

View reviewed changes

MikitasK approved these changes Aug 21, 2026

View reviewed changes

JKobrynski requested changes Aug 25, 2026

View reviewed changes

JKobrynski reviewed Aug 28, 2026

View reviewed changes

JKobrynski mentioned this pull request Aug 28, 2026

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

Open

3 tasks done

JKobrynski reviewed Sep 1, 2026

View reviewed changes

satya164 added the Contributor: Internal label Sep 3, 2026

MikitasK force-pushed the refactor/searchbar branch from 104ed60 to 98e4a84 Compare September 4, 2026 20:22

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

Copilot AI reviewed Sep 15, 2026

MikitasK force-pushed the refactor/searchbar branch 2 times, most recently from 671768a to 0c82a80 Compare September 21, 2026 17:12

refactor: modernize Searchbar component

de46718

MikitasK force-pushed the refactor/searchbar branch from 0c82a80 to de46718 Compare September 21, 2026 17:39

JKobrynski requested changes Sep 29, 2026

View reviewed changes

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JKobrynski commented Sep 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

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

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

MrMuzyk commented Jul 1, 2026 •

edited

Loading

JKobrynski commented Sep 9, 2026 •

edited

Loading