@ocean28799/react-native-animated-searchbox v1.0.2

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

And also supporting props all of the TextInput Component of React Native.

Events

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.