Logo

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

Type: string
Default value: 'clear'

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

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.

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.

elevation
Available in v5.x with theme version 3
Type: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value
Default value: 1

Changes Searchbar shadow and background on iOS and Android.

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

Edit this page