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 )

Author

FreakyCoder, [email protected]

License

React Native Bottom Search Bar Library is available under the MIT license. See the LICENSE file for more info.