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';

export default class MyComponent extends React.Component {
  state = {
    firstQuery: '',
  };

  render() {
    const { firstQuery } = this.state;
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => { this.setState({ firstQuery: query }); }}
        value={firstQuery}
      />
    );
  }
}

Props

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: () => mixed

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

Type: any

Set style of the TextInput component inside the searchbar

Type: any

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.