Fully customizable Dynamic Search Bar for React Native.
Installation
Add the dependency:
React Native:
npm i react-native-dynamic-search-barPeer Dependencies
IMPORTANT! You need install them.
"react": ">= 16.x.x", "react-native": ">= 0.55.x", "react-native-vector-icons": ">= 6,x,x", "react-native-dynamic-vector-icons": ">= x,x,x" // Expo Version "react-native-dynamic-vector-icons": "WrathChaos/react-native-dynamic-vector-icons#expo" Usage
There are two modes in the library:
- Search Button
- Search TextInput
Basic Usage
<SearchBar placeholder="Search here" onChangeText={text => { console.log(text) }} onPressCancel={() => { this.filterList(""); }} onPress={() => alert("onPress")} />Advanced Usage
You can check the example for the advanced usage
<SearchBar fontColor="#c6c6c6" iconColor="#c6c6c6" shadowColor="#282828" cancelIconColor="#c6c6c6" backgroundColor="#353d5e" placeholder="Search here" onChangeText={text => { this.filterList(text); }} onPressCancel={() => { this.filterList(""); }} onPress={() => alert("onPress")} />Configuration - Props
| Property | Type | Default | Description |
|---|---|---|---|
| onPress | function | function | set your own function for the onPress functionality |
| fontSize | number | 13 | change the font size |
| fontColor | color | #b3b6c3 | change the font color |
| iconName | string | search | change the icon |
| iconType | string | Octicons | change the icon style |
| iconSize | number | 20 | change the icon size |
| iconColor | color | #807DE7 | change the icon color |
| iconComponent | component | Icon | set your own component instead of Icon |
| shadowColor | color | #757575 | change the shadow color |
| shadowStyle | style | shadow style | set your own shadow style |
| placeholder | string | null | set your own placeholder string |
| textInputDisable | boolean | false | disable the text input, and Text component will be available instead |
| textInputComponent | component | Text OR TextInput | set your own component instead of Text OR TextInput for the center component |
| textInputValue | string | value | set the value of the text input |
| onChangeText | function | function | set your own function for the onChangeText logic |
| cancelIconName | string | clear | change the cancel icon |
| cancelIconType | string | MaterialIcons | change the cancel icon style |
| cancelIconSize | number | 23 | change the cancel icon size |
| cancelIconColor | color | #b3b6c3 | change the cancel icon color |
| cancelIconComponent | component | Icon | set your own component instead of Icon for the cancel component (right component) |
| onPressCancel | function | function | set your own function for the cancel button's onPress functionality |
| cancelComponent | component | component | set your own component instead of cancel component |
| cancelButtonDisable | boolean | false | disable cancel button component |
| autoFocus | boolean | true | change the autoFocus mode for the TextInput |
| onPressToFocus | boolean | false | when enable it, onPress will automatically focus on the TextInput and opens the soft virtual keyboard |
Expo Compatibility
Dynamic Search Bar is usable with Expo. You just need to add a peer dependency:
"react-native-dynamic-vector-icons": "WrathChaos/react-native-dynamic-vector-icons#expo" Known Issues
Android
Vector Icons are not showing :O
-> You need to add this line of code into app/gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"Animations are not working on the Android like the example ?
-> You need to enable experimental LayoutAnimation on the android. Here is how to do it:
import {UIManager} from 'react-native'; constructor() { super(); if (Platform.OS === 'android') { UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); } }ToDos
- LICENSE
- Write an article about the lib on Medium
Author
FreakyCoder, [email protected]
License
React Native Dynamic Search Bar Library is available under the MIT license. See the LICENSE file for more info.
