Selection and input

SearchBar

A search field with the platform’s look.

iOSReact Native, UIKit styleAndroidReact Native, Material styleReact Native tier — renders anywhere

iOSReact Native, UIKit style

AndroidReact Native, Material style

Import

import {SearchBar} from '@hzblj/kara-ui'

Props

A search field drawn the same on both platforms — a rounded box with a magnifier, a TextInput and a clear button while there is text. The React Native tier: it needs no host.

Prop	Type	Default	Description
value*	string	—	The field's text. Controlled — pass back what `onChangeText` reports.
onChangeText	(text: string) => void	—	Every edit, and `''` when the clear button is pressed.
placeholder	string	'Search'	Shown while the field is empty. `Search` by default.
testID	string	—	Test identifier, put on the field's container view rather than on the `TextInput`.

value*

string

The field's text. Controlled — pass back what onChangeText reports.

onChangeText

(text: string) => void

Every edit, and '' when the clear button is pressed.

placeholder'Search'

string

Shown while the field is empty. Search by default.

testID

string

Test identifier, put on the field's container view rather than on the TextInput.

Platform notes

React Native tier: it hosts nothing native, so it renders outside Screen and Island too.