Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-dynamic-search-bar

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-dynamic-search-bar

Fully customizable and dynamic Search Bar for React Native.

  • 0.0.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
489
increased by34.71%
Maintainers
1
Weekly downloads
 
Created
Source
React Native Dynamic Search Bar

Fully customizable Dynamic Search Bar for React Native.

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Dynamic Search Bar React Native Dynamic Search Bar

Installation

Add the dependency:

React Native:

npm i react-native-dynamic-search

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"

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

PropertyTypeDefaultDescription
onPressfunctionfunctionset your own function for the onPress functionality
fontSizenumber13change the font size
fontColorcolor#b3b6c3change the font color
iconNamestringsearchchange the icon
iconTypestringOcticonschange the icon style
iconSizenumber20change the icon size
iconColorcolor#807DE7change the icon color
iconComponentcomponentIconset your own component instead of Icon
shadowColorcolor#757575change the shadow color
shadowStylestyleshadow styleset your own shadow style
placeholderstringnullset your own placeholder string
textInputDisablebooleanfalsedisable the text input, and Text component will be available instead
textInputComponentcomponentText OR TextInputset your own component instead of Text OR TextInput for the center component
textInputValuestringvalueset the value of the text input
onChangeTextfunctionfunctionset your own function for the onChangeText logic
cancelIconNamestringclearchange the cancel icon
cancelIconTypestringMaterialIconschange the cancel icon style
cancelIconSizenumber23change the cancel icon size
cancelIconColorcolor#b3b6c3change the cancel icon color
cancelIconComponentcomponentIconset your own component instead of Icon for the cancel component (right component)
onPressCancelfunctionfunctionset your own function for the cancel button's onPress functionality
cancelComponentcomponentcomponentset your own component instead of cancel component
cancelButtonDisablebooleanfalsedisable cancel button component

ToDos

  • LICENSE
  • Write an article about the lib on Medium

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.

Keywords

FAQs

Package last updated on 31 Mar 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc