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.

placeholder Type: string

Hint text shown when the input is empty.

value (required) Type: string

The value of the text input.

icon Type: IconSource

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

onChangeText Type: (query: string) => void

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

onIconPress Type: () => void

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

inputStyle Type: StyleProp<TextStyle>

Set style of the TextInput component inside the searchbar

style Type: StyleProp<ViewStyle>

theme Type: ReactNativePaper.Theme

iconColor Type: string

Custom color for icon, default will be derived from theme

clearIcon Type: IconSource

Custom icon for clear button, default will be icon close

Edit this page