[](https://github.com/WrathChaos/react-native-bottom-search-bar)
[](https://github.com/WrathChaos/react-native-bottom-search-bar)
[](https://www.npmjs.com/package/react-native-bottom-search-bar)
[](https://www.npmjs.com/package/react-native-bottom-search-bar)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
## Installation
Add the dependency:
### Pure React Native:
```ruby
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
```ruby
```
## Advanced Usage
```ruby
{}}
onChangeText={(text)=> {console.log(text)}}
homeButtonIconComponent={
Custom Component instead of default Home Button Icon
}
/>
```
# 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](https://www.uplabs.com/posts/joo-find))
Thank you for this awesome concept work [FireArt Studio ](https://www.uplabs.com/fireart))
## Author
FreakyCoder, kurayogun@gmail.com
## License
React Native Bottom Search Bar Library is available under the MIT license. See the LICENSE file for more info.