How to implement animated searchbar in react-native

Question

I want an animated search bar like google apps ( Gmail, maps, etc.) in my reactnative app. I didn't found any packages that do this. I found many package that

How to build Gmail like search box in the action bar?

Creating a SearchView that looks like the material design guidelines

How to implement Search Bar like gmail app in android?

So please help me to do this..

this is an example of what I want ( I don't know how to work with animation )

Try using https://www.npmjs.com/package/react-native-animated-searchbar and https://github.com/react-native-vietnam/react-native-search-box — Nooruddin Lakhani, Jan 01 '21 at 07:07
I already install these packages in my app but it's too different from what I want. — Mitesh K, Jan 01 '21 at 07:11

score 2 · Answer 1 · answered Jan 13 '22 at 19:30

You can use react-native-animated-searchbox

Usage (from docs) :

//Call for the open  
openSearchBox = () => this.refSearchBox.open();  
  
//Call for the close  
closeSearchBox = () => this.refSearchBox.close();  
  
render() {  
 return ( 
    <View>
  
        <ReactNativeAnimatedSearchbox 
            ref={(ref) => this.refSearchBox = ref} 
            placeholder={"Search..."} 
        />
         
    </View>  
 )}

score 0 · Answer 2 · answered Jan 16 '22 at 11:58

hear is the one example

import React, { useEffect, useState, useRef } from "react";
import {
  Text,
  View,
  StyleSheet,
  ImageBackground,
  TouchableOpacity,
} from "react-native";

import ReactNativeAnimatedSearchbox from "react-native-animated-searchbox";

function App() {
  const refSearchBox = useRef();
  const [searchIconColor, setSearchIconColor] = useState("#555");

  useEffect(() => {
    openSearchBox();
  }, []);

  const openSearchBox = () => refSearchBox.current.open();
  const closeSearchBox = () => refSearchBox.current.close();

  return (
    <View style={styles.container}>
      <ImageBackground
        style={styles.bgImage}
        source={require("./../../../assets/img/bg.png")}
      >
        <ReactNativeAnimatedSearchbox
          ref={refSearchBox}
          placeholder={"Search..."}
          searchIconColor={searchIconColor}
          onClosed={() => {
            setSearchIconColor("#fff");
          }}
          onOpening={() => {
            setSearchIconColor("#555");
          }}
        />

        <View style={styles.buttonsArea}>
          <View style={styles.row}>
            <TouchableOpacity
              style={styles.buttonContainer}
              onPress={openSearchBox}
            >
              <Text style={styles.buttonText}>OPEN</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.buttonContainer}
              onPress={closeSearchBox}
            >
              <Text style={styles.buttonText}>CLOSE</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ImageBackground>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bgImage: {
    flex: 1,
    resizeMode: "cover",
    paddingTop: 50,
    paddingLeft: 15,
    paddingRight: 15,
  },
  buttonsArea: {
    flex: 1,
    marginBottom: 15,
    justifyContent: "flex-end",
  },
  row: {
    flex: 1,
    justifyContent: "center",
    flexDirection: "row",
    marginLeft: -10,
    marginRight: -10,
    maxHeight: 50,
    marginTop: 5,
  },
  buttonContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(255,255,255,0.80)",
    margin: 10,
    height: 40,
    borderRadius: 40,
  },
  buttonText: {
    fontWeight: "bold",
    color: "#555",
  },
});

How to implement animated searchbar in react-native

2 Answers2