# @ocean28799/react-native-animated-searchbox > A animated search box for React Native Latest version **1.0.2** (published 2022-07-06) · MIT license · 0 weekly downloads ## Install ```sh npm install @ocean28799/react-native-animated-searchbox pnpm add @ocean28799/react-native-animated-searchbox yarn add @ocean28799/react-native-animated-searchbox bun add @ocean28799/react-native-animated-searchbox ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2022-07-06 | | First published | 2022-07-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 12.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Tran Anh Duc | | Maintainers | ocean28799 | | Keywords | animated-search, react-native-component, react-component, react-native, ios, search, animated, search-box, animation, ocean28799 | ## Links - npm: https://www.npmjs.com/package/@ocean28799/react-native-animated-searchbox - Repository: https://github.com/ocean28799/react-native-animated-searchbox - Homepage: https://github.com/ocean28799/react-native-animated-searchbox#readme - Issues: https://github.com/ocean28799/react-native-animated-searchbox/issues - npm.io page: https://npm.io/package/@ocean28799/react-native-animated-searchbox ## Alternatives - [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads - [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads - [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads - [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads - [cra-template-particles-typescript](https://npm.io/package/cra-template-particles-typescript.md) — 227 weekly downloads ## Recent versions - 1.0.2 (latest) — 2022-07-06 - 1.0.1 — 2022-07-06 - 1.0.0 — 2022-07-06 ## README # React Native - Animated Searchbox A simple search box with animation. Compatible with Expo CLI and React Native CLI. - Easy to use, - Lightweight, fast, flexible and easy customizable, - Support both IOS & Android Devices, - Also Support React Native Web ## Install We used a search SVG icon in this project. So, you need to install the [React Native SVG](https://github.com/react-native-community/react-native-svg#installation) library before continue the installation. After that; ``` npm install @ocean28799/react-native-animated-searchbox --save --- OR --- yarn add @ocean28799/react-native-animated-searchbox ``` ## Demo |![SCREENSHOT](https://raw.githubusercontent.com/gurayyarar/React-Native-Animated-Searchbox/HEAD/assets/demo/web.gif)| ## Usage ```javascript import React, { useRef } from "react"; import AnimatedSearchBox from "@ocean28799/react-native-animated-searchbox"; import { View } from "react-native"; export default function Demo() { const refSearchBox = useRef(); //Call for the open const openSearchBox = () => refSearchBox.current.open(); //Call for the close const closeSearchBox = () => refSearchBox.current.close(); return ( (refSearchBox.current = ref)} placeholder={"Search"} placeholderTextColor="#848484" backgroundColor="#f6f6f7" searchIconColor="#000" focusAfterOpened searchIconSize={18} borderRadius={12} onChangeText={(text) => { console.log("Input: ", text); }} onBlur={() => closeSearchBox()} /> ); } ``` ## Properties | Key | Description | Value Type | Is Required | Default | | -------------------- | ------------------------------------------------------------------------------------ | ---------------------------- | ----------- | ---------------------- | | height | Height of the search box | `number` | false | 48 | | borderRadius | Border radius of the search box | `number` | false | 48 | | fontSize | Font size of the search box | `number` | false | 20 | | backgroundColor | Background color of the search box | `color codes (hex,rgb,rgba)` | false | rgba(255,255,255,0.70) | | placeholderTextColor | Placeholder text color | `color codes (hex,rgb,rgba)` | false | #555555 | | searchIconSize | Search icon width and height size | `number` | false | 20 | | searchIconColor | Search icon color | `color codes (hex,rgb,rgba)` | false | #555555 | | focusAfterOpened | If true, keyboard will show after search box opened | `boolean` | false | false | | shadowColor | Box\-shadow color of the search box\. If you don't want to please type `transparent` | `color codes (hex,rgb,rgba)` | false | rgba(0,0,0,0.12\) | | placeholder | Placeholder text of the search box | `string/text` | true | | | animationSpeed | Animation speeds as miliseconds | `array ([number, number])` | false | [200, 250] | And also supporting props all of the [TextInput Component of React Native](https://reactnative.dev/docs/textinput). ## Events | Key | Description | | --------- | ------------------------------------ | | onOpening | Trigger on search box start to open | | onClosing | Trigger on search box start to close | | onOpened | Trigger on search box fully opened | | onClosed | Trigger on search box fully closed | And also supporting events all of the [TextInput Component of React Native](https://reactnative.dev/docs/textinput). ## License **React Native - Animated Searchbox** is an open source project that is licensed under the [MIT license](http://opensource.org/licenses/MIT). --- _Source: https://npm.io/package/@ocean28799/react-native-animated-searchbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._