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 library before continue the installation.

After that;

npm install @ocean28799/react-native-animated-searchbox --save

--- OR ---

yarn add @ocean28799/react-native-animated-searchbox

Demo

||

Usage

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 (
    <View style={{ width: "100%" }}>
      <AnimatedSearchBox
        ref={(ref) => (refSearchBox.current = ref)}
        placeholder={"Search"}
        placeholderTextColor="#848484"
        backgroundColor="#f6f6f7"
        searchIconColor="#000"
        focusAfterOpened
        searchIconSize={18}
        borderRadius={12}
        onChangeText={(text) => {
          console.log("Input: ", text);
        }}
        onBlur={() => closeSearchBox()}
      />
    </View>
  );
}

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.

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.

License

React Native - Animated Searchbox is an open source project that is licensed under the MIT license.