https://github.com/cawfree/react-native-search-bar-button
🕊️ Is it a bird? ✈️ Is it a plane? No, it's a search-bar-button! ⚛️
https://github.com/cawfree/react-native-search-bar-button
animated bar react-native search
Last synced: about 1 year ago
JSON representation
🕊️ Is it a bird? ✈️ Is it a plane? No, it's a search-bar-button! ⚛️
- Host: GitHub
- URL: https://github.com/cawfree/react-native-search-bar-button
- Owner: cawfree
- License: mit
- Created: 2020-09-27T10:10:55.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-09-27T13:58:11.000Z (over 5 years ago)
- Last Synced: 2025-03-18T13:14:37.904Z (about 1 year ago)
- Topics: animated, bar, react-native, search
- Language: JavaScript
- Homepage:
- Size: 352 KB
- Stars: 22
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-search-bar-button
🕊️ Is it a bird? ✈️ Is it a plane? No, it's a search-bar-button! ⚛️
## 🚀 Getting Started
Using [**Yarn**](https://yarnpkg.com):
```
yarn add react-native-search-bar-button
```
Using [**NPM**](https://npmjs.com):
```
npm i -s react-native-search-bar-button
```
## ✍️ Example
In the example below, we demonstrate all of the configurable properties of the [``](https://github.com/cawfree/react-native-search-bar-button/blob/main/src/components/SearchBarButton.js). Most notably, you can render a custom button component using [`renderButton`](https://github.com/cawfree/react-native-search-bar-button/blob/d50dccb4907ce3736bdc6932c8cd0d63bf8da8d8/src/components/SearchBarButton.js#L128) and declare complete control over the behaviour of the [``](https://reactnative.dev/docs/textinput) using `textInputProps`.
```javascript
import React, { useCallback, useState } from "react";
import { SafeAreaView, StyleSheet, Easing, TouchableOpacity, View, Animated } from "react-native";
import { useWindowDimensions } from "react-native-use-dimensions";
import { SearchBarButton } from "react-native-search-bar-button";
export default function App() {
const [value, onChangeText] = useState("");
const [open, setOpen] = useState(false);
const { width } = useWindowDimensions();
const padding = 15;
const height = 55;
const renderButton = useCallback(
({ open, onChangeText, value, progress }) => (
setOpen(!open)}
>
),
[setOpen, height],
);
const onSubmitEditing = useCallback(
({ nativeEvent: { text } }) => {
console.warn({ text });
onChangeText("");
setOpen(false);
},
[onChangeText, setOpen],
);
return (
<>
>
);
}
```
## ✌️ License
[**MIT**](./LICENSE)