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 react-native-animated-searchbox --save  
  
//or  
  
yarn add react-native-animated-searchbox  

Demo

SNACK EXPO IO

https://snack.expo.io/@gurayyarar/react-native---animated-searchbox

EXPO APP ON ANDROID

AS GIF (FOR QUICK CHECK)

IOS	ANDROID	WEB

Usage

//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>  
 )}  
  

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.

FAQ

Can I use this template for personal or commercial websites/web projects? Sure, you can use both of personal and commercial websites/web projects.

Is the attribution link required? No, not required. (Though very much appreciated)

License

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

Credits

• Unsplash - Beautiful, free images and photos that you can download and use for any project.
• Ionicons - Premium designed icons for use in web, iOS, Android, and desktop apps.

Donations

Donations are greatly appreciated!

BUY ME A COFFEE