Interface SearchBarProps

interface SearchBarProps {
    autoCapitalize?: "none" | "sentences" | "words" | "characters";
    autoFocus?: boolean;
    barTintColor?: ColorValue;
    cancelButtonText?: string;
    disableBackButtonOverride?: boolean;
    headerIconColor?: ColorValue;
    hideNavigationBar?: boolean;
    hideWhenScrolling?: boolean;
    hintTextColor?: ColorValue;
    inputType?: "number" | "text" | "email" | "phone";
    obscureBackground?: boolean;
    onBlur?: ((e) => void);
    onCancelButtonPress?: ((e) => void);
    onChangeText?: ((e) => void);
    onClose?: (() => void);
    onFocus?: ((e) => void);
    onOpen?: (() => void);
    onSearchButtonPress?: ((e) => void);
    placeholder?: string;
    placement?: SearchBarPlacement;
    ref?: RefObject<SearchBarCommands>;
    shouldShowHintSearchIcon?: boolean;
    textColor?: ColorValue;
    tintColor?: ColorValue;
}

Properties

autoCapitalize? autoFocus? barTintColor? cancelButtonText? disableBackButtonOverride? headerIconColor? hideNavigationBar? hideWhenScrolling? hintTextColor? inputType? obscureBackground? onBlur? onCancelButtonPress? onChangeText? onClose? onFocus? onOpen? onSearchButtonPress? placeholder? placement? ref? shouldShowHintSearchIcon? textColor? tintColor?

Properties

Optional autoCapitalize

autoCapitalize?: "none" | "sentences" | "words" | "characters"

The auto-capitalization behavior

Optional autoFocus

autoFocus?: boolean

Automatically focuses search bar on mount

Platform

android

Optional barTintColor

barTintColor?: ColorValue

The search field background color

Optional cancelButtonText

cancelButtonText?: string

The text to be used instead of default Cancel button text

Platform

ios

Optional disableBackButtonOverride

disableBackButtonOverride?: boolean

Specifies whether the back button should close search bar's text input or not.

Platform

android

Optional headerIconColor

headerIconColor?: ColorValue

The search and close icon color shown in the header

Plaform

android

Optional hideNavigationBar

hideNavigationBar?: boolean

Indicates whether to hide the navigation bar

Platform

ios

Optional hideWhenScrolling

hideWhenScrolling?: boolean

Indicates whether to hide the search bar when scrolling

Platform

ios

Optional hintTextColor

hintTextColor?: ColorValue

The search hint text color

Plaform

android

Optional inputType

inputType?: "number" | "text" | "email" | "phone"

Sets type of the input. Defaults to text.

Platform

android

Optional obscureBackground

obscureBackground?: boolean

Indicates whether to obscure the underlying content

Optional onBlur

onBlur?: ((e) => void)

A callback that gets called when search bar has lost focus

Type declaration

Optional onCancelButtonPress

onCancelButtonPress?: ((e) => void)

A callback that gets called when the cancel button is pressed

Type declaration

Platform

ios

Optional onChangeText

onChangeText?: ((e) => void)

A callback that gets called when the text changes. It receives the current text value of the search bar.

Type declaration

Optional onClose

onClose?: (() => void)

A callback that gets called when search bar is closed

Type declaration

    • (): void

    • Returns void

Platform

android

Optional onFocus

onFocus?: ((e) => void)

A callback that gets called when search bar has received focus

Type declaration

Optional onOpen

onOpen?: (() => void)

A callback that gets called when search bar is opened

Type declaration

    • (): void

    • Returns void

Platform

android

Optional onSearchButtonPress

onSearchButtonPress?: ((e) => void)

A callback that gets called when the search button is pressed. It receives the current text value of the search bar.

Type declaration

Optional placeholder

placeholder?: string

Text displayed when search field is empty

Optional placement

placement?: SearchBarPlacement

Position of the search bar

Supported values:

  • automatic - the search bar is placed according to current layout
  • inline - the search bar is placed on the trailing edge of navigation bar
  • stacked - the search bar is placed below the other content in navigation bar

Defaults to stacked

Platform

iOS (>= 16.0)

Optional ref

ref?: RefObject<SearchBarCommands>

Reference to imperatively modify search bar.

Currently supported operations are:

  • focus - focuses the search bar
  • blur - removes focus from the search bar
  • clearText - removes any text present in the search bar input field
  • setText - sets the search bar's content to given value
  • cancelSearch - cancel search in search bar.
  • toggleCancelButton - depending on passed boolean value, hides or shows cancel button (iOS only)

Optional shouldShowHintSearchIcon

shouldShowHintSearchIcon?: boolean

Show the search hint icon when search bar is focused

Plaform

android

Default

true

Optional textColor

textColor?: ColorValue

The search field text color

Optional tintColor

tintColor?: ColorValue

The color for the cursor caret and cancel button text.

Platform

ios

On This Page