{"id":18369867,"url":"https://github.com/cawfree/react-native-search-bar-button","last_synced_at":"2025-04-06T18:32:36.330Z","repository":{"id":57339899,"uuid":"299004251","full_name":"cawfree/react-native-search-bar-button","owner":"cawfree","description":"🕊️ Is it a bird? ✈️ Is it a plane? No, it's a search-bar-button! ⚛️","archived":false,"fork":false,"pushed_at":"2020-09-27T13:58:11.000Z","size":360,"stargazers_count":22,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T13:14:37.904Z","etag":null,"topics":["animated","bar","react-native","search"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cawfree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-27T10:10:55.000Z","updated_at":"2024-03-10T03:51:32.000Z","dependencies_parsed_at":"2022-08-24T14:57:04.586Z","dependency_job_id":null,"html_url":"https://github.com/cawfree/react-native-search-bar-button","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-search-bar-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-search-bar-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-search-bar-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-search-bar-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawfree","download_url":"https://codeload.github.com/cawfree/react-native-search-bar-button/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247531350,"owners_count":20953937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","bar","react-native","search"],"created_at":"2024-11-05T23:32:48.663Z","updated_at":"2025-04-06T18:32:34.928Z","avatar_url":"https://github.com/cawfree.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-search-bar-button\n🕊️ Is it a bird? ✈️ Is it a plane? No, it's a search-bar-button! ⚛️\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./public/intro.gif\" alt=\"react-native-search-bar-button\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n## 🚀 Getting Started\n\nUsing [**Yarn**](https://yarnpkg.com):\n\n```\nyarn add react-native-search-bar-button\n```\n\nUsing [**NPM**](https://npmjs.com):\n\n```\nnpm i -s react-native-search-bar-button\n```\n\n## ✍️ Example\n\nIn the example below, we demonstrate all of the configurable properties of the [`\u003cSearchBarButton /\u003e`](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 [`\u003cTextInput /\u003e`](https://reactnative.dev/docs/textinput) using `textInputProps`.\n\n```javascript\nimport React, { useCallback, useState } from \"react\";\nimport { SafeAreaView, StyleSheet, Easing, TouchableOpacity, View, Animated } from \"react-native\";\nimport { useWindowDimensions } from \"react-native-use-dimensions\";\n\nimport { SearchBarButton } from \"react-native-search-bar-button\";\n\nexport default function App() {\n  const [value, onChangeText] = useState(\"\");\n  const [open, setOpen] = useState(false);\n  const { width } = useWindowDimensions();\n  const padding = 15;\n  const height = 55;\n  const renderButton = useCallback(\n    ({ open, onChangeText, value, progress }) =\u003e (\n      \u003cTouchableOpacity\n        style={{\n          flex: 1,\n          backgroundColor: \"red\",\n        }}\n        onPress={() =\u003e setOpen(!open)}\n      \u003e\n        \u003cAnimated.Image\n          style={{\n            transform: [\n              { rotate: progress.interpolate({\n                inputRange: [0, 1],\n                outputRange: [\"0deg\", \"360deg\"],\n              })},\n            ],\n            width: height,\n            height,\n          }}\n          source={{ uri: \"https://is3-ssl.mzstatic.com/image/thumb/Purple123/v4/97/74/dd/9774ddab-bfac-f412-9992-6715178c5b67/source/256x256bb.jpg\" }}\n        /\u003e\n      \u003c/TouchableOpacity\u003e\n    ),\n    [setOpen, height],\n  );\n  const onSubmitEditing = useCallback(\n    ({ nativeEvent: { text } }) =\u003e {\n      console.warn({ text });\n      onChangeText(\"\");\n      setOpen(false);\n    },\n    [onChangeText, setOpen],\n  );\n  return (\n    \u003c\u003e\n      \u003cSafeAreaView /\u003e\n      \u003cSearchBarButton\n        style={{\n          marginHorizontal: padding,\n          backgroundColor: \"#355BCF\",\n        }}\n        width={width - 2 * padding}\n        height={height}\n        open={open}\n        value={value}\n        onChangeText={onChangeText}\n        renderButton={renderButton}\n        textInputProps={{\n          placeholderTextColor: \"#FFFFFF99\",\n          placeholder: \"What are you looking for?\",\n          onSubmitEditing,\n          style: {\n            fontSize: 20,\n            color: \"#FFFFFF\",\n          },\n        }}\n        animationProps={{\n          easing: Easing.ease,\n          duration: 400,\n        }}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## ✌️ License\n[**MIT**](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-search-bar-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawfree%2Freact-native-search-bar-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-search-bar-button/lists"}