poonamdhomane/react-native-dynamic-search-bar

Medium Article: https://freakycoder.com/react-native-library-dynamic-search-bar-c03fea9fae36

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"

// Expo Version
"react-native-dynamic-vector-icons": "WrathChaos/react-native-dynamic-vector-icons#expo"

Usage

Import

import SearchBar from "react-native-dynamic-search-bar"

Component Options

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
noExtraMargin	boolean	false	remove extra padding on iPhone X devices
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);
    }
}

Future Plans

• LICENSE
• Write an article about the lib on Medium
• Typescript Challenge!

Change Log

0.2.1 (2019-09-02)

Full Changelog

Implemented enhancements:

• Extend length of Textfield to full length of search box...? #4
• Make the extra margin on iPhone X devices optional #9 (showcasecode)

Merged pull requests:

• Bump mixin-deep from 1.3.1 to 1.3.2 in /example #7 (dependabot[bot])
• Bump eslint-utils from 1.3.1 to 1.4.2 in /example #6 (dependabot[bot])
• Bump lodash from 4.17.11 to 4.17.14 in /example #5 (dependabot[bot])

0.2.0 (2019-07-09)

Full Changelog

Merged pull requests:

• Bump handlebars from 4.1.1 to 4.1.2 in /example #3 (dependabot[bot])
• Bump js-yaml from 3.13.0 to 3.13.1 in /example #2 (dependabot[bot])

0.1.11 (2019-04-20)

Full Changelog

Closed issues:

• on Android, there is no animation #1

0.1.1 (2019-04-18)

Full Changelog

0.0.13 (2019-04-02)

Full Changelog

0.0.12 (2019-04-02)

Full Changelog

0.0.11 (2019-04-02)

Full Changelog

0.0.1 (2019-03-31)

* This Change Log was automatically generated by github_changelog_generator

Author

FreakyCoder, kurayogun@gmail.com

License

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