# react-native-platform-searchbar

> A searchbar component for React Native

Latest version **1.2.3** (published 2021-12-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-platform-searchbar
pnpm add react-native-platform-searchbar
yarn add react-native-platform-searchbar
bun add react-native-platform-searchbar
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2021-12-22 |
| First published | 2020-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 152 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Author | Benedikt |
| Maintainers | bviebahn |
| Keywords | react-native, react, native, ios, android, search, searchbar |

## Links

- npm: https://www.npmjs.com/package/react-native-platform-searchbar
- Repository: https://github.com/bviebahn/react-native-platform-searchbar
- Homepage: https://github.com/bviebahn/react-native-platform-searchbar#readme
- Issues: https://github.com/bviebahn/react-native-platform-searchbar/issues
- npm.io page: https://npm.io/package/react-native-platform-searchbar

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.3 (latest) — 2021-12-22
- 1.1.2 — 2021-10-04
- 1.1.1 — 2021-10-04
- 1.1.0 — 2021-08-01
- 1.0.2 — 2020-10-07
- 1.0.1 — 2020-08-01
- 1.0.0 — 2020-07-31
- 0.1.2 — 2020-07-31
- 0.1.1 — 2020-07-31
- 0.1.0 — 2020-07-30

## README

# react-native-platform-searchbar

[![npm version](https://badge.fury.io/js/react-native-platform-searchbar.svg)](https://badge.fury.io/js/react-native-platform-searchbar)

A customizable SearchBar component for React Native. Includes platform specific designs for iOS and Android. Written in Typescript.

<img src="https://github.com/benediktviebahn/react-native-platform-searchbar/raw/master/media/demo.gif" width="414" />

## Installation

1. install react-native-platform-searchbar
   `npm install react-native-platform-searchbar --save` or `yarn add react-native-platform-searchbar`
2. if not already installed, add [react-native-svg](https://github.com/react-native-community/react-native-svg)

## Usage

### Basic

```js
import SearchBar from 'react-native-platform-searchbar';

const Example = () => {
    const [value, setValue] = useState('');
    <SearchBar
        value={value}
        onChangeText={setValue}
        style={styles.searchBar}
    />;
};
```

### With children

![ActivityIndicator Example](https://github.com/benediktviebahn/react-native-platform-searchbar/raw/master/media/activityIndicator.png)

```js
import SearchBar from 'react-native-platform-searchbar';

const Example = () => {
    const [value, setValue] = useState('');
    <SearchBar
        value={value}
        onChangeText={setValue}
        placeholder="Search"
        theme="light"
        platform="ios"
        style={styles.searchBar}
    >
        {loading ? (
            <ActivityIndicator style={{ marginRight: 10 }} />
        ) : undefined}
    </SearchBar>;
};
```

## Props

| Name                 | Type                            | Default                                                  | Description                                                     |
| -------------------- | ------------------------------- | -------------------------------------------------------- | --------------------------------------------------------------- |
| value                | string                          | **REQUIRED**                                             | SearchBar value                                                 |
| onChangeText         | (string) => void                | **REQUIRED**                                             | called when SearchBar value changes                             |
| theme                | "light" \| "dark"               | "light"                                                  | SearchBar theme                                                 |
| platform             | "default" \| "ios" \| "android" | "default"                                                | which SearchBar version to use. "default" uses current platform |
| cancelText           | string                          | "Cancel"                                                 | cancel button text. Only visible in iOS SearchBar               |
| placeholderTextColor | string                          | different shades of gray depending on theme and platform | Color of placeholderText                                        |
| iconColor            | string                          | same as placeholderTextColor                             | color of icons (Search, Clear...)                               |
| leftIcon             | ReactElement                    | search icon                                              | custom icon to show on the left                                 |
| style                | object (ViewStyle)              | undefined                                                | custom style for the outer container view                       |
| inputStyle           | object (TextStyle)              | undefined                                                | custom style for the TextInput component                        |
| onCancel             | () => void                      | undefined                                                | callback that gets called when cancel button is pressed         |
| onClear              | () => void                      | undefined                                                | callback that gets called when clear button is pressed          |

All [TextInput](https://reactnative.dev/docs/textinput) Props are also supported.

---
_Source: https://npm.io/package/react-native-platform-searchbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._