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.

style
Type: any
theme
Type: Theme

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.