react-native-dynamic-search-bar

v2.0.2

Published

2 years ago

Fully customizable and dynamic Search Bar for React Native.

Downloads

1,992

0High
0Medium
0Low

freakycoder

gradient card search search-bar dynamic dynamic-search-bar FreakyCoder freakycoder kuray Kuray react react-native javascript ui-lib rn

Version 2.0 🥳

Version 2.0 is here 🥳

Completely re-written from scratch 💪
Much better coding for maintenance and less dependency
3 dependencies are removed 😱
Better prop management and cool customizations are possible now
Dark Mode integration 🌙

I can't waiting to see what you're going to make with this SearchBar 😍

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-native-animated-spinkit": "^1.4.1",
"@freakycoder/react-native-bounceable": ">= 0.2.2",

Usage

Import

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

Component Options

There are two modes in the library:

Basic Usage

<SearchBar
  placeholder="Search here"
  onPress={() => alert("onPress")}
  onChangeText={(text) => console.log(text)}
/>

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)}
  onSearchPress={() => console.log("Search Icon is pressed")}
  onClearPress={() => 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 (
      <View>
        <SearchBar
          height={50}
          fontSize={24}
          fontColor="#fdfdfd"
          iconColor="#fdfdfd"
          shadowColor="#282828"
          cancelIconColor="#fdfdfd"
          backgroundColor="#ba312f"
          spinnerVisibility={spinnerVisibility}
          placeholder="Search any cosmetics ..."
          fontFamily="BurbankBigCondensed-Black"
          shadowStyle={styles.searchBarShadowStyle}
          onChangeText={this.handleOnChangeText}
        />
      </View>
    );
  }
}

Configuration - Props

| Property | Type | | --------------------- | :--------: | style | ViewStyle | | darkMode | boolean | | onChangeText | function | | onPress | function | | onSearchPress | function | | onClearPress | function | | onBlur | function | | onFocus | function | | textInputStyle | TextStyle | | searchIconImageStyle | ImageStyle | | clearIconImageStyle | ImageStyle | | ImageComponent | component | | searchIconComponent | component | | clearIconComponent | component | | searchIconImageSource | ISource | | clearIconImageSource | ISource | | clearIconImageSource | ISource | | placeholder | string | placeholderTextColor | color | spinnerColor | color | | spinnerSize | number | | SpinnerType | component | | spinnerVisibility | boolean | Default | Description | | :--------------: | ------------------------------------------------------------------------ | default | set or override the style object for the main search view | false | enable the dark mode | function | set your own function for the onChangeText logic | function | set your own function for the onPress functionality | function | set your own function for the search button's onPress functionality | function | set your own function for the clear button's onPress functionality | function | set your own function for the text input's onBlur functionality | function | set your own function for the text input's onBlur functionality | default | set or override the style object for the text input | default | set or override the style object for the search icon image style | default | set or override the style object for the clear icon image style | Image | set your own Image component instead of react-native's default Image one | default | set your own component instead of Icon for the search component | default | set your own component instead of Icon for the clear component | default | change the search icon image source | default | change the clear icon image source | default | change the clear icon image source | | "Search here..." | set your own placeholder string | | undefined | set placeholder text color | #fdfdfd | change the spinner color | default | change the spinner size | Circle | change the spinner type | false | change the spinner visibility |

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

[x] ~~Completely rewritten with better coding and less dependency~~
[x] ~~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~~

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Version 2.0 🥳

Installation

React Native

Expo Version

Peer Dependencies

IMPORTANT! You need install them

Usage

Import

Component Options

Basic Usage

Advanced Usage

Advanced Built-in Spinner Usage

Configuration - Props

Expo Compatibility

Known Issues

Android

Vector Icons are not showing :O

Animations are not working on the Android like the example?

Roadmap

Changelog

2.0.0 (2020-10-18)

Version 2.0 🥳

1.3.1 (2020-08-11)

1.2.1 (2020-06-21)

1.2.0 (2020-05-29)

1.1.0 (2020-05-25)

1.0.4 (2020-05-24)

1.0.2 (2020-04-23)

1.0.1 (2020-04-11)

1.0.0 (2020-04-11)

0.3.1 (2019-12-24)

0.3.0 (2019-12-06)

0.2.1 (2019-09-02)

0.2.0 (2019-07-09)

0.1.11 (2019-04-20)

0.1.1 (2019-04-18)

0.0.13 (2019-04-02)

0.0.12 (2019-04-02)

0.0.11 (2019-04-02)

0.0.1 (2019-03-31)

Author

License