Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/WrathChaos/react-native-dynamic-search-bar
Medium Article: https://freakycoder.com/react-native-library-dynamic-search-bar-c03fea9fae36
https://github.com/WrathChaos/react-native-dynamic-search-bar
android animation customizable-dynamic-search ios mobile mobile-app mobile-development react react-native react-native-component react-native-dynamic-search-bar react-native-search-bar search-bar
Last synced: 3 months ago
JSON representation
Medium Article: https://freakycoder.com/react-native-library-dynamic-search-bar-c03fea9fae36
- Host: GitHub
- URL: https://github.com/WrathChaos/react-native-dynamic-search-bar
- Owner: WrathChaos
- License: mit
- Created: 2019-03-28T09:37:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-08T12:22:10.000Z (7 months ago)
- Last Synced: 2024-05-01T14:29:10.697Z (6 months ago)
- Topics: android, animation, customizable-dynamic-search, ios, mobile, mobile-app, mobile-development, react, react-native, react-native-component, react-native-dynamic-search-bar, react-native-search-bar, search-bar
- Language: Java
- Homepage:
- Size: 47.6 MB
- Stars: 477
- Watchers: 11
- Forks: 52
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-button)
[](https://github.com/WrathChaos/react-native-dynamic-search-bar)
[](https://www.npmjs.com/package/react-native-dynamic-search-bar)
[](https://www.npmjs.com/package/react-native-dynamic-search-bar)
[](https://opensource.org/licenses/MIT)
Built-in Spinner
# 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 wait to see what you're going to make with this `SearchBar` 😍
## Installation
Add the dependency:
### React Native
```bash
npm i react-native-dynamic-search-bar
```
```bash
npm i react-native-spinkit
```
```bash
npm i @freakycoder/react-native-bounceable
```
### Expo Version
```bash
npm i WrathChaos/react-native-dynamic-search-bar#expo
```
```bash
npm i react-native-animated-spinkit
```
```bash
npm i @freakycoder/react-native-bounceable
```
## Peer Dependencies
###### IMPORTANT! You need install them
```js
"react-native-spinkit": ">= 1.5.0",
"@freakycoder/react-native-bounceable": ">= 0.2.2",
```
## Expo Peer Dependencies
###### IMPORTANT! You need install them
```js
"react-native-animated-spinkit": ">= 1.5.0",
"@freakycoder/react-native-bounceable": ">= 0.2.2",
```
# Usage
## Import
```js
import SearchBar from "react-native-dynamic-search-bar";
```
## Basic Usage
```jsx
alert("onPress")}
onChangeText={(text) => console.log(text)}
/>
```
## Advanced Usage
You can check the example for the advanced usage
```jsx
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
```js
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 |
| --------------------- | :--------: | :--------------: | ------------------------------------------------------------------------ |
| 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 |
## Expo Compatibility
Dynamic Search Bar is usable with Expo. You just need to add a peer dependency:
```js
"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
```java
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:
```js
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~~
- [ ] Built-in Shadow Style Removal
- [ ] Wrapper Shadow Example on Documentation
- [ ] Better Example and GIFs
## Author
FreakyCoder, [email protected]
## License
React Native Dynamic Search Bar Library is available under the MIT license. See the LICENSE file for more info.