# react-native-input-search-bar > A simple search bar component for React Native. Latest version **0.0.8** (published 2022-12-03) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-input-search-bar pnpm add react-native-input-search-bar yarn add react-native-input-search-bar bun add react-native-input-search-bar ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.8 | | Published | 2022-12-03 | | First published | 2022-11-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 23 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Leon | | Maintainers | funnyzak | | Keywords | react, react-native, react-native-search-bar | ## Links - npm: https://www.npmjs.com/package/react-native-input-search-bar - Repository: https://github.com/funnyzak/react-native-input-search-bar - Issues: https://github.com/funnyzak/react-native-input-search-bar/issues - npm.io page: https://npm.io/package/react-native-input-search-bar ## 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 - 0.0.8 (latest) — 2022-12-03 - 0.0.7 — 2022-11-28 - 0.0.6 — 2022-11-28 - 0.0.5 — 2022-11-28 - 0.0.4 — 2022-11-28 - 0.0.2 — 2022-11-28 ## README # React-Native-Input-Search-Bar A simple search bar component for React Native. [![Build Status][build-status-image]][build-status] [![license][license-image]][repository-url] [![NPM version][npm-image]][npm-url] [![Release Date][rle-image]][rle-url] [![npm download][download-image]][download-url] [repo-size-image]: https://img.shields.io/github/repo-size/funnyzak/react-native-input-search-bar [build-status-image]: https://github.com/funnyzak/react-native-input-search-bar/actions/workflows/ci.yml/badge.svg [build-status]: https://github.com/funnyzak/react-native-input-search-bar/actions [license-image]: https://img.shields.io/github/license/funnyzak/react-native-input-search-bar.svg?style=flat-square [repository-url]: https://github.com/funnyzak/react-native-input-search-bar [npm-image]: https://img.shields.io/npm/v/react-native-input-search-bar.svg?style=flat-square [npm-url]: https://npmjs.org/package/react-native-input-search-bar [download-image]: https://img.shields.io/npm/dm/react-native-input-search-bar.svg?style=flat-square [download-url]: https://npmjs.org/package/react-native-input-search-bar [sg-image]: https://img.shields.io/badge/view%20on-Sourcegraph-brightgreen.svg?style=flat-square [sg-url]: https://sourcegraph.com/github.com/funnyzak/react-native-input-search-bar [rle-image]: https://img.shields.io/github/release-date/funnyzak/react-native-input-search-bar.svg [rle-url]: https://github.com/funnyzak/react-native-input-search-bar/releases/latest ## TOC - [React-Native-Input-Search-Bar](#react-native-input-search-bar) - [TOC](#toc) - [Preview](#preview) - [Installation](#installation) - [Getting Started](#getting-started) - [Basic usage](#basic-usage) - [Props](#props) - [Props for ReactNativeInputSearchBar](#props-for-reactnativeinputsearchbar) - [TypeDefine for ReactNativeInputSearchBar](#typedefine-for-reactnativeinputsearchbar) - [Reference](#reference) - [Contribution](#contribution) - [License](#license) ## Preview [![preview](https://raw.githubusercontent.com/funnyzak/react-native-input-search-bar/main/.github/docs/images/preview.png)](https://github.com/funnyzak/react-native-input-search-bar) ## Installation [![NPM](https://nodei.co/npm/react-native-input-search-bar.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-native-input-search-bar/) - 1.Run `npm i react-native-svg react-native-input-search-bar --save` - or `yarn add react-native-svg react-native-input-search-bar` - 2.`import ReactNativeInputSearchBar from 'react-native-input-search-bar'` - 3. Run `npx pod-install` if you are using iOS, and `react-native link` if you are using Android. (this step is for `react-native-svg`) **Notes:** You need to install `react-native-svg` first, because this component depends on it to render the search icon. ## Getting Started Add `react-native-input-search-bar` to your js file. `import ReactNativeInputSearchBar from 'react-native-input-search-bar'` Inside your component's render method, use ReactNativeInputSearchBar: ```javascript render() { return ( { console.log(_val); }} ... buttonText="Search" /> ); } ``` ### Basic usage ```javascript import ReactNativeInputSearchBar from 'react-native-input-search-bar' import { useState } from 'react' const SearchBar = () => { const [query, setQuery] = useState('') const [activeSearch, setActiveSearch] = useState(false) const onSubmitSearch = (val: string) => { setQuery(val) } return ( ) } export default SearchBar ``` ## Props ### Props for ReactNativeInputSearchBar | Prop | Type | Default | Description | | ------------------------ | -------- | ------- | ---------------------------------------------------- | | onSubmitSearch | function | | Callback function when the search button is pressed. | | onActiveSearch | function | | Callback function when the search bar is active. | | inputTextStyle | object | | Style for the input text. | | buttonStyle | object | | Style for the search button. | | buttonTextStyle | object | | Style for the search button text. | | searchToolContainerStyle | object | | Style for the search tool container. | | inputContainerStyle | object | | Style for the input container. | | inputProps | object | | Props for the input. | | buttonText | string | | Text for the search button. | | clearButton | boolean | true | Whether to show the clear button. | | inputActiveColor | string | | Color for the input when active. | | inputInactiveColor | string | | Color for the input when inactive. | | iconStyle | object | | Style for the search icon. | | customIcon | element | | Custom icon for the search input icon. | ### TypeDefine for ReactNativeInputSearchBar ```typescript interface RNInputSearchBarProps { searchToolContainerStyle?: StyleProp clearButton?: boolean onActiveSearch: (val: boolean) => void onSubmitSearch: (val: string) => void inputActiveColor?: ColorValue inputInactiveColor?: ColorValue inputContainerStyle?: StyleProp inputTextStyle?: StyleProp inputProps?: TextInputProps customIcon?: ReactNode iconStyle?: StyleProp buttonStyle?: StyleProp buttonText?: string buttonTextStyle?: StyleProp } ``` ## Reference - [React Native](https://facebook.github.io/react-native/) is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. ## Contribution If you have any questions or suggestions, please feel free to open an issue or pull request. ## License MIT License © 2022 [funnyzak](https://github.com/funnyzak) --- _Source: https://npm.io/package/react-native-input-search-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._