Searchbar

Searchbar is a simple input box where users can type search queries.

Usage

import 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.

style Type: any

theme Type: Theme

Methods

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.