react-native-dynamic-search-bar
Advanced tools
Weekly downloads
Readme
|
|
Version 2.0 is here 🥳
I can't waiting to see what you're going to make with this SearchBar 😍
Add the dependency:
npm i react-native-dynamic-search-bar
npm i WrathChaos/react-native-dynamic-search-bar#expo
npm i WrathChaos/react-native-dynamic-vector-icons#expo
"react-native-animated-spinkit": "^1.4.1",
"@freakycoder/react-native-bounceable": ">= 0.2.2",
import SearchBar from "react-native-dynamic-search-bar";
There are two modes in the library:
<SearchBar
placeholder="Search here"
onPress={() => alert("onPress")}
onChangeText={(text) => console.log(text)}
/>
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")}
/>
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>
);
}
}
| Property | Type | Default | Description |
|---|---|---|---|
| style | ViewStyle | default | set or override the style object for the main search view |
| darkMode | boolean | false | enable the dark mode |
| onChangeText | function | function | set your own function for the onChangeText logic |
| onPress | function | function | set your own function for the onPress functionality |
| onSearchPress | function | function | set your own function for the search button's onPress functionality |
| onClearPress | function | function | set your own function for the clear button's onPress functionality |
| onBlur | function | function | set your own function for the text input's onBlur functionality |
| onFocus | function | function | set your own function for the text input's onBlur functionality |
| textInputStyle | TextStyle | default | set or override the style object for the text input |
| searchIconImageStyle | ImageStyle | default | set or override the style object for the search icon image style |
| clearIconImageStyle | ImageStyle | default | set or override the style object for the clear icon image style |
| ImageComponent | component | Image | set your own Image component instead of react-native's default Image one |
| searchIconComponent | component | default | set your own component instead of Icon for the search component |
| clearIconComponent | component | default | set your own component instead of Icon for the clear component |
| searchIconImageSource | ISource | default | change the search icon image source |
| clearIconImageSource | ISource | default | change the clear icon image source |
| clearIconImageSource | ISource | default | change the clear icon image source |
| placeholder | string | "Search here..." | set your own placeholder string |
| placeholderTextColor | color | undefined | set placeholder text color |
| spinnerColor | color | #fdfdfd | change the spinner color |
| spinnerSize | number | default | change the spinner size |
| SpinnerType | component | Circle | change the spinner type |
| spinnerVisibility | boolean | false | change the spinner visibility |
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"
-> You need to add this line of code into app/gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
-> 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);
}
}
Version 2.0 is here :O
Merged pull requests:
Closed issues:
Merged pull requests:
Fixed bugs:
Closed issues:
Merged pull requests:
Fixed bugs:
Merged pull requests:
Fixed bugs:
Closed issues:
Merged pull requests:
Implemented enhancements:
Closed issues:
Closed issues:
Implemented enhancements:
Merged pull requests:
Closed issues:
* This Changelog was automatically generated by github_changelog_generator
FreakyCoder, kurayogun@gmail.com
React Native Dynamic Search Bar Library is available under the MIT license. See the LICENSE file for more info.
FAQs
Fully customizable and dynamic Search Bar for React Native.
The npm package react-native-dynamic-search-bar receives a total of 409 weekly downloads. As such, react-native-dynamic-search-bar popularity was classified as not popular.
We found that react-native-dynamic-search-bar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.