https://github.com/timelessco/react-native-search-component
🎉 React Native Search Bar 🕵🏽♂️ inspired by iOS UISearchBar with Dark Mode 🌚
https://github.com/timelessco/react-native-search-component
react-native react-native-search reanimated
Last synced: 5 months ago
JSON representation
🎉 React Native Search Bar 🕵🏽♂️ inspired by iOS UISearchBar with Dark Mode 🌚
- Host: GitHub
- URL: https://github.com/timelessco/react-native-search-component
- Owner: timelessco
- License: mit
- Created: 2020-07-19T10:59:03.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T20:09:14.000Z (over 2 years ago)
- Last Synced: 2025-09-29T00:58:28.319Z (9 months ago)
- Topics: react-native, react-native-search, reanimated
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-search-component
- Size: 3.08 MB
- Stars: 81
- Watchers: 6
- Forks: 12
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-native-search-component)
[](https://www.npmjs.com/package/react-native-search-component)
[](https://badgen.net/npm/types/tslib)
React Native Search Component
## :anchor: Installation
```sh
yarn add react-native-search-component
# or
npm i react-native-search-component
```
## :family: Dependencies
##### React Native Reanimated
```sh
npm install react-native-reanimated
```
For iOS
```sh
cd ios && pod install && cd ..
```
For Android
1. Turn on Hermes engine by editing android/app/build.gradle
```code
project.ext.react = [
enableHermes: true // <- here | clean and rebuild if changing
]
```
2. Plug Reanimated in MainApplication.java
```code
import com.facebook.react.bridge.JSIModulePackage; // <- add
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
...
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
@Override
protected String getJSMainModuleName() {
return "index";
}
@Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage(); // <- add
}
};
...
```
> For detailed instructions check it out [here](https://docs.swmansion.com/react-native-reanimated/docs/next/installation)
##### React Native SVG
```sh
npm install react-native-svg
```
For iOS
```sh
cd ios && pod install && cd ..
```
> For detailed instructions check it out [here](https://github.com/react-native-community/react-native-svg)
> Rebuild the project after adding the dependencies
## :mag: Usage
```js
import React, { useState } from "react";
import { SafeAreaView, StyleSheet, Text, TouchableOpacity } from "react-native";
import SearchComponent from "react-native-search-component";
const App = () => {
const [theme, setTheme] = React.useState("LIGHT");
const [searchTerm, setSearchTerm] = useState("");
const toggleTheme = () =>
theme === "LIGHT" ? setTheme("DARK") : setTheme("LIGHT");
const themeBasedContainer = [
styles.container,
{ backgroundColor: theme === "LIGHT" ? "white" : "black" },
];
const themeBasedTextStyle = [
styles.textStyle,
{ color: theme === "LIGHT" ? "black" : "white" },
];
const onChange = (e) => {
setSearchTerm(e?.nativeEvent?.text);
};
const onSearchClear = () => setSearchTerm("");
return (
React Native Search Component
Toggle Theme
{" "}
Search Term : {searchTerm}
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
},
textStyle: {
fontSize: 24,
textAlign: "center",
paddingVertical: 10,
},
});
export default App;
```
## :camera: Screenshot
## :wrench: Props
| Name | Description | Required | Type | Default |
| -------------------- | ------------------------------------------------ | -------- | -------------------- | -------------- |
| value | A search term Value | Yes | String | '' |
| placeholder | A placeholder value | No | String | '' |
| placeholderTextColor | Tintcolor for Placeholder | No | Color | Based on theme |
| onChange | A Callback function returning TextInput onChange | Yes | Function | () => {} |
| onSearchClear | A Callback function on Close Icon click | No | Function | () => {} |
| theme | App Theme | NO | oneOf['LIGHT','DARK] | 'LIGHT' |
| isLoading | Loading state Indicator on search | NO | Boolean | false |
| loadingTintColor | The tint color of spinner | NO | Color | '#636366' |
| cancelColor | The tint color of 'Cancel' text | NO | Color | '#007AFF' |
| customSearchInputStyle | The styles, that will rewrite default searchInputStyle | NO | Object | [Check here](https://github.com/timelessco/react-native-search-component#wrench-style-objects) |
| customCancelTextStyle | The styles, that will rewrite default "cancel" text Style | NO | Object | [Check here](https://github.com/timelessco/react-native-search-component#wrench-style-objects) |
## :wrench: Style Objects
```
default value of Custome Search Input
{
fontSize: 18,
fontWeight: '400',
lineHeight: 22,
letterSpacing: 0.5,
paddingHorizontal: 12,
paddingVertical: 10,
borderRadius: 12,
paddingLeft: 32
}
default value of Custom Cancel Text Style
{
paddingLeft: 16,
fontSize: 17,
color: props.cancelColor
}
```
## :wrench: Methods
```
.searchInputRef()
```
Returns searchTextInput ref. Useful for directly control search input.
Example:
```js
import { useEffect, useRef } from 'react';
[...]
const searchInput = useRef();
[...]
const toggleFocus = () => {
const isFocused = searchInput.current.searchInputRef().isFocused();
if (isFocused) {
searchInput.current.searchInputRef().blur();
} else {
searchInput.current.searchInputRef().focus();
}
};
```
## :tada: Example
Checkout the example [here](https://github.com/timelessco/react-native-search-component/tree/master/example/RNSearch).
## :notebook: Blog
Checkout my blog [here](https://medium.com/timeless/react-native-search-component-de0be89df6e1).
## :snowman: Built with ❤️ and
- [react-native](https://www.npmjs.com/package/react-native)
- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/)
- [react-native-svg](https://github.com/react-native-community/react-native-svg)
## :v: Contributing
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
## :man: Author
[Karthik B](https://twitter.com/_iam_karthik)
## :clipboard: License
MIT