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: ReactNativePaper.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