Package Exports

react-native-dynamic-search-bar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-dynamic-search-bar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Dynamic Search Bar

Installation

Add the dependency:

React Native

npm i react-native-dynamic-search-bar

Expo Version

npm i WrathChaos/react-native-dynamic-search-bar#expo
npm i WrathChaos/react-native-dynamic-vector-icons#expo

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",
"@freakycoder/react-native-helpers": ">= 0.1.0"

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
backgroundColor	color	default	change the background color of the search bar
fontFamily	string	undefined	set the font family for the text input in the search bar
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);
    }
}

Roadmap

~~LICENSE~~
~~Write an article about the lib on Medium~~
~~Typescript Challenge!~~
Update the Expo version to latest features

Changelog

1.0.1 (2020-04-11)

Typescript 😍
Fully refactored the code base 😇
Finally version 1.0 🥳
README is updated with new screenshots

Full Changelog

Fixed bugs:

[Android] Error while updating property 'backgroundColor' in shadow node of type: AndroidTextInpout #15

Closed issues:

Missing backgroundColor and fontFamily from configuration props #22
Module not found: Can't resolve '@expo/vector-icons/Fontisto' #19
Expo install method is not working #18

Merged pull requests:

Typescript is here with full refactory 🥳 #23 (WrathChaos)
Bump acorn from 5.7.3 to 5.7.4 in /example #20 (dependabot[bot])
Revert "Updating Readme" #17 (WrathChaos)
Updating Readme #16 (abhishekdewan101)

0.3.1 (2019-12-24)

Full Changelog

Closed issues:

How do you style the actual searchBar, I want to increase the height of the search bar. I don't see a prop like containerStyle #12
react-native-iphone-x-helper module not found #8