Fully customizable Dynamic Search Bar for React Native

react-native-dynamic-search-bar

Fully customizable Dynamic Search Bar for React Native.

Installation

Add the dependency:

React Native:

npm i react-native-dynamic-search-bar

Peer 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"

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

ToDos

• [x] LICENSE
• [ ] Write an article about the lib on Medium

GitHub