SearchBar

Import

import { SearchBar } from '@rn-vui/themed';

Theme Key

SearchBar

Usage

Default SearchBar

Platform specific SearchBar

iOS

Android

Interaction methods

method	description
focus	call focus on the textinput (example)
blur	call blur on the textinput (example)
clear	call clear on the textinput (example)
cancel	(Android and iOS SearchBars only) call cancel on the SearchBar (left arrow on Android, Cancel button on iOS). This will basically blur the input and hide the keyboard (example)

Calling methods on SearchBar

Store a reference to the SearchBar in your component by using the ref prop provided by React (see docs):

<SearchBar
  ref={search => this.search = search}
  ...
/>

You can then access SearchBar methods like so:

this.search.focus();
this.search.blur();
this.search.clear();
this.search.cancel(); // Only available if `platform` props is "ios" | "android"

Props

note

Includes all Input props.

Name	Type	Default	Description
cancelButtonProps	Text Style		Cancel Button Props Only with 'platform' prop set to 'ios'
cancelButtonTitle	string		Cancel Button Title Only with 'platform' prop set to 'ios'
cancelIcon	IconNode		Clear Icon Only with 'platform' prop set to 'android'
clearIcon	IconNode		Clear IconClear Icon Only with 'platform' prop set to 'ios'
containerStyle	View Style		Style for container
inputContainerStyle	View Style		Style for input container
inputStyle	Text Style		Input Style
leftIconContainerStyle	View Style		Left Icon Container Style
lightTheme	boolean
loadingProps	ActivityIndicatorProps		ActivityIndicatorProps
onCancel	(() => any) | (() => any)		Callback Function on cancel icon press Only with 'platform' prop set to 'android' or 'ios
onClear	Function
onKeyboardHide	Function		Callback Function on keyboard hides Only with 'platform' prop set to 'android'
platform	default | android | ios	default	Warning: Some props are platform specific and will not work on other platform
rightIconContainerStyle	View Style		Right Icon Container Style
round	boolean
searchIcon	IconNode		Icon for searchIcon for search Only with 'platform' prop set to 'ios'
showCancel	boolean		Show cancel Only with 'platform' prop set to 'ios'
showLoading	boolean		Show loading

Playground

Loading...