It’s kind of common on the Internet where – if we fail to get what we are looking for on a website, we resort to searching. Search box has always been an essential part of any application.
Syntax
import React, { Component } from 'react';
import { Container, Header, Item, Input, Icon, Button, Text } from 'native-base';
export default class SearchBarExample extends Component {
render() {
return (
<Container>
<Header searchBar rounded>
<Item>
<Icon name="ios-search" />
<Input placeholder="Search" />
<Icon name="ios-people" />
</Item>
<Button transparent>
<Text>Search</Text>
</Button>
</Header>
</Container>
);
}
}searchBar: Prop to be used with<Header>component to have Search bar onto the Header section of your screen.- Replacing Component: React Native View
Configuration
| Property | Default | Option | Description |
|---|---|---|---|
| rounded | regular | - | Wraps the search bar with predefined border options. |