react-native-bottom-search-bar
react-native-bottom-search-bar copied to clipboard
Published
20 hours ago •
WrathChaos
WrathChaos
Elegant & Cool also fully customizable bottom search bar for React Native.
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.
Metadata
23
Stars
2
Forks
Watchers
Owner
WrathChaos
Metadata
Elegant & Cool also fully customizable bottom search bar for React Native.