react-native-dynamic-search-bar

by WrathChaos

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

176 Stars 30 Forks Last release: 3 months ago (1.3.1) MIT License 125 Commits 18 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Native Dynamic Search Bar

Battle Tested βœ…

Fully customizable Dynamic Search Bar for React Native

npm version npm expo-compatible Platform - Android and iOS License: MIT

React Native Dynamic Search Bar

React Native Dynamic Search Bar React Native Dynamic Search Bar

Built-in Spinner

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-spinkit": ">= 1.5.0",
"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

 {
    console.log(text);
  }}
  onPressCancel={() => {
    this.filterList("");
  }}
  onPress={() => alert("onPress")}
/>

Advanced Usage

You can check the example for the advanced usage

 {
    this.filterList(text);
  }}
  onPressCancel={() => {
    this.filterList("");
  }}
  onPress={() => alert("onPress")}
/>

Advanced Built-in Spinner Usage

You can check the example for the advanced built-in spinner usage

import React, { Component } from "react";
import { View } from "react-native";
import SearchBar from "react-native-dynamic-search-bar";

export default class Test extends Component { handleOnChangeText = (text) => { // ? Visible the spinner this.setState({ searchText: text, spinnerVisibility: true, });

// ? After you've done to implement your use-case
// ? Do not forget to set false to spinner's visibility
this.setState({
  spinnerVisibility: false,
});

};

render() { const { spinnerVisibility } = this.state; return ( ); } }

Configuration - Props

| Property | Type | Default | Description | | ------------------- | :-------------: | :---------------: | ----------------------------------------------------------------------------------------------------- | | autoFocus | boolean | true | change the autoFocus mode for the TextInput | | backgroundColor | color | #fff | change the background color of the search bar | | borderRadius | number | 10 | change the border radius of the search bar | | cancelButtonDisable | boolean | false | disable cancel button component | | cancelComponent | component | component | set your own component instead of cancel component | | cancelIconColor | color | #b3b6c3 | change the cancel icon color | | cancelIconComponent | component | Icon | set your own component instead of Icon for the cancel component (right component) | | cancelIconName | string | clear | change the cancel icon | | cancelIconSize | number | 23 | change the cancel icon size | | cancelIconType | string | MaterialIcons | change the cancel icon style | | fontColor | color | #b3b6c3 | change the font color | | fontFamily | string | undefined | set the font family for the text input in the search bar | | fontSize | number | 13 | change the font size | | height | string / number | 35 | change the height of the search bar | | iconColor | color | #807DE7 | change the icon color | | iconComponent | component | Icon | set your own component instead of Icon | | iconName | string | search | change the icon | | iconSize | number | 20 | change the icon size | | iconType | string | Octicons | change the icon style | | noExtraMargin | boolean | false | remove extra padding on iPhone X devices | | onChangeText | function | function | set your own function for the onChangeText logic | | onPress | function | function | set your own function for the onPress functionality | | onPressCancel | function | function | set your own function for the cancel button's onPress functionality | | onPressToFocus | boolean | false | when enable it, onPress will automatically focus on the TextInput and opens the soft virtual keyboard | | placeholder | string | null | set your own placeholder string | | shadowColor | color | #757575 | change the shadow color | | shadowStyle | style | shadow style | set your own shadow style | | spinnerColor | color | #fdfdfd | change the spinner color | | spinnerSize | number | default | change the spinner size | | spinnerType | string | Circle | change the spinner type | | spinnerVisibility | boolean | false | change the spinner visibility | | textInputComponent | component | Text OR TextInput | set your own component instead of Text OR TextInput for the center component | | textInputDisable | boolean | false | disable the text input, and Text component will be available instead | | textInputValue | string | value | set the value of the text input | | width | string / number | ScreenWidth*0.93 | change the width of the search bar |

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

  • [ ] Full code refactoring with better Typescript
  • [x] ~~LICENSE~~
  • [x] ~~Write an article about the lib on Medium~~
  • [x] ~~Typescript Challenge!~~
  • [x] ~~Update the Expo version to latest features~~

Changelog

1.3.1 (2020-08-11)

Full Changelog

  • Finally
    height
    and
    width
    props are working properly. πŸ”₯
  • TextInput's
    height
    bug is fixed. (That ugly thing is finally fixed) πŸ₯³
  • Better typescript refactoring is incoming with the next version ⏳

Closed issues:

  • Just Doesn't Work And Contains NODE_MODULES #32
  • Documentation: Missing Props #27

Merged pull requests:

1.2.1 (2020-06-21)

Full Changelog

1.2.0 (2020-05-29)

Full Changelog

1.1.0 (2020-05-25)

Full Changelog

1.0.4 (2020-05-24)

Full Changelog

Fixed bugs:

  • shadowStyle prop is not passed through #26

Closed issues:

  • NPM error trying to install expo version #30
  • Add instructions on how to run the Example #28

Merged pull requests:

  • Adds README with instructions on how to run the example #29 (tiagostutz)

1.0.2 (2020-04-23)

Full Changelog

Fixed bugs:

  • Expo version is not found #25

Merged pull requests:

1.0.1 (2020-04-11)

Full Changelog

  • Typescript 😍
  • Fully refactored the code base πŸ˜‡
  • Finally version 1.0 πŸ₯³
  • README is updated with new screenshots

1.0.0 (2020-04-11)

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:

0.3.1 (2019-12-24)

Full Changelog

Implemented enhancements:

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

0.3.0 (2019-12-06)

Full Changelog

Closed issues:

  • Request To Add Product in Start React #10

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:

0.2.0 (2019-07-09)

Full Changelog

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)

Full Changelog

* This Changelog was automatically generated by githubchangeloggenerator

Author

FreakyCoder, [email protected]

License

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.