Searchbar

Searchbar is a simple input box where users can type search queries.

Usage

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

const MyComponent = () => {
  const [searchQuery, setSearchQuery] = React.useState('');

  const onChangeSearch = query => setSearchQuery(query);

  return (
    <Searchbar
      placeholder="Search"
      onChangeText={onChangeSearch}
      value={searchQuery}
    />
  );
};

export default MyComponent;

Props

clearAccessibilityLabel

Type: string

Default value: 'clear'

Accessibility label for the button. This is read by the screen reader when the user taps the button.

searchAccessibilityLabel

Type: string

Default value: 'search'

Accessibility label for the button. This is read by the screen reader when the user taps the button.

Type: string

Hint text shown when the input is empty.

value (required)

Type: string

The value of the text input.

Type: IconSource

Icon name for the left icon button (see onIconPress).

Type: (query: string) => void

Callback that is called when the text input's text changes.

Type: () => void

Callback to execute if we want the left icon to act as button.

Type: StyleProp<TextStyle>

Set style of the TextInput component inside the searchbar

Type: StyleProp<ViewStyle>

Type: Theme

Type: string

Custom color for icon, default will be derived from theme

Type: IconSource

Custom icon for clear button, default will be icon close

Methods

These methods can be accessed on the ref of the component, e.g. searchbarRef.isFocused(...args).

Returns true if the input is currently focused, false otherwise.

Removes all text from the TextInput.

Focuses the input.

Removes focus from the input.