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

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

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

inputStyle Type: any

Set style of the TextInput component inside the searchbar

style Type: any

theme Type: 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

Methods

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

isFocused

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

clear

Removes all text from the TextInput.

focus

Focuses the input.

blur

Removes focus from the input.