Searchbar

Searchbar displays as a full appbar for searching

import { Searchbar } from 'material-bread';

The Searchbar component is a convenient component for displaying a full searchbar in an appbar. Usually this component is used on mobile.



Live Editing

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      search: ''
    }
  }
  render() {
    return (
      <View>
        <Searchbar
          label={'Label'}
          value={this.state.search}
          onChangeText={value => this.setState({ search: value })}
          onCloseIcon={() => this.setState({ search: '' })}
        />
      </View>
    );
  }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { Searchbar } from 'material-bread';

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      search: ''
    }
  }
  render() {
    return (
      <View>
        <Searchbar
          label={'Label'}
          value={this.state.search}
          onChangeText={value => this.setState({ search: value })}
          onCloseIcon={() => this.setState({ search: '' })}
        />
      </View>
    );
  }
}

Name

Description

Type

Default

onChangeText

Callback when text is changed

func

onCloseIcon

Callback when close icon is pressed

func

onNavigation

Callback when navigation icon is Pressed

func

style

Styles root element

object

value

Search input

string

placeholder

Placeholder for input search

string

navigationIcon

Navigation icon name

string

arrow-back

navigationIconComponent

One of the Icon components from react-native-vector-icons

function

closeIcon

Close icon name

string

closeIconComponent

One of the Icon components from react-native-vector-icons

function

Searchbar

Component #

Usage #

Props #