React-native-bottom-search-bar NPM

Installation

Add the dependency:

Pure React Native:

npm i react-native-bottom-search-bar

Peer Dependencies

IMPORTANT! You need install them.

"@freakycoder/react-native-helpers": ">= 1.0.2",
"react-native-dynamic-vector-icons": ">= x.x.x"

Basic Usage

<BottomSearchBar />

Advanced Usage

<BottomSearchBar
    height={125}
    iPhoneXHeigh={150}
    disableHomeButton
    buttonBackgroundColor="#050191"
    buttonOnPress={() => {}}
    onChangeText={(text)=> {console.log(text)}}
    homeButtonIconComponent={
        <MyIcon>
            Custom Component instead of default Home Button Icon
        </MyIcon>
    }
/>

Configuration - Props

Main Props

Property	Type	Default	Description
onChangeText	function	default	get the text input's change function
disableTextInput	boolean	false	disable the text input and instead you can use it as a button
backgroundColor	color	white	change the main component's background color
buttonText	string	Hotspot	use this to change the button's text
onButtonPress	function	function	use this to set your onPress function to the button
buttonIconComponent	component	Icon	set your own icon component for the button
disableButton	boolean	false	disable the button itself (on the right one)
disableButtonIcon	boolean	false	disable the button's icon component
disableHomeButton	boolean	false	disable the home button's itself
onHomePress	function	function	set your own onPress function for home button
homeButtonIconComponent	component	Icon	set your own icon component instead of the default one

SearchBox Props

Property	Type	Default	Description
onChangeText	function	function	set your own logic for changing text
searchBoxText	string	What are you looking for?	set the search box's text
searchBoxOnPress	function	function	set your own logic when tapping the search box itself
searchBoxWidth	number	95%	change the search box's width
searchBoxBorderRadius	number	8	change the search box's border radius
searchBoxBackgroundColor	color	#f5f5f5	change the search box's background color
iconComponent	component	Icon	set your own icon component instead of Icon
disableTextInput	boolean	false	disable or enable the text input itself

Credits

I get the inspiration from Joo Find App. This is the exact bottom search bar from their concept design. Thank you for this inspiration :) Here is the uplabs link:JooFind App Concept)
Thank you for this awesome concept work FireArt Studio )