{"id":13637490,"url":"https://github.com/ananddayalan/react-native-material-design-searchbar","last_synced_at":"2025-04-19T08:34:16.967Z","repository":{"id":57338282,"uuid":"65159213","full_name":"ananddayalan/react-native-material-design-searchbar","owner":"ananddayalan","description":"react native material design searchbar","archived":false,"fork":false,"pushed_at":"2019-11-18T23:02:01.000Z","size":34,"stargazers_count":51,"open_issues_count":2,"forks_count":31,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-06T19:17:25.833Z","etag":null,"topics":["find","material-design","mdl","react","react-native","search","searchbar","searchinput"],"latest_commit_sha":null,"homepage":null,"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/ananddayalan.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":"2016-08-07T23:41:48.000Z","updated_at":"2022-02-27T09:19:30.000Z","dependencies_parsed_at":"2022-08-31T03:51:42.961Z","dependency_job_id":null,"html_url":"https://github.com/ananddayalan/react-native-material-design-searchbar","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/ananddayalan%2Freact-native-material-design-searchbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ananddayalan%2Freact-native-material-design-searchbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ananddayalan%2Freact-native-material-design-searchbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ananddayalan%2Freact-native-material-design-searchbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ananddayalan","download_url":"https://codeload.github.com/ananddayalan/react-native-material-design-searchbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223795271,"owners_count":17204137,"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":["find","material-design","mdl","react","react-native","search","searchbar","searchinput"],"created_at":"2024-08-02T00:01:18.294Z","updated_at":"2024-11-09T06:31:22.009Z","avatar_url":"https://github.com/ananddayalan.png","language":"JavaScript","funding_links":[],"categories":["React Native"],"sub_categories":["Components React Native"],"readme":"# react-native-material-design-searchbar\nA React Native Material Design SearchBar\n\n\u003cimg src='https://i1.wp.com/reactscript.com/wp-content/uploads/2016/12/React-Native-Material-Design-Searchbar-1.png' height='200'\u003e\n\n\n# Setup\n\nInstall the SearchBar from npm with `npm i -S react-native-material-design-searchbar`. Then, require it from your app's JavaScript files with `import SearchBar from 'react-native-material-design-searchbar'`.\nThis library depends on [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons). Please link it by following their installation guide.\n\n# Usage\n\nAll props are optional except height.\n\n```js\nimport React, { Component } from 'react';\nimport SearchBar from 'react-native-material-design-searchbar';\n\nexport default class ExampleComponent extends Component {\n  render() {\n    return (\n      \u003cSearchBar\n        onSearchChange={() =\u003e console.log('On Search Change')}\n        height={50}\n        onFocus={() =\u003e console.log('On Focus')}\n        onBlur={() =\u003e console.log('On Blur')}\n        placeholder={'Search...'}\n        autoCorrect={false}\n        padding={5}\n        returnKeyType={'search'}\n      /\u003e\n    );\n  }\n};\n\n```\n\n# Available Props\n\n- `onSearchChange`: Callback on search change\n- `onClear`: Callback when the 'X' button is pressed. This also calls `onSearchChange` with an empty string.\n- `searchValue`: Initializes the input field. Changing this prop does not change the input value.\n- `onBackPress`: Optional function, Callback on back icon pressed\n- `alwaysShowBackButton`: Optional bool, use if you want to always show the back button instead of search, default is `false`\n- `iconCloseName`: Optional string, use it to customize the close icon\n- `iconSearchName`: Optional string, use it to customize the search icon\n- `iconBackName`: Optional string, use it to customize the back icon\n- `iconCloseComponent`: Optional object, custom component for the close icon (overrides iconCloseName)\n- `iconSearchComponent`: Optional object, custom component for the search icon (overrides iconSearchName)\n- `iconBackComponent`: Optional object, custom component for the back icon (overrides iconBackName)\n- `iconColor`: Optional string, use it to define a different padding size, default is `#737373`\n- `placeholder`: Optional string, use it to customize the placeholder text, default is `eSearch...`\n- `placeholderColor`: Optional string, use it to define a different placeholder color, default is `#bdbdbd`\n- `returnKeyType`: Optional string, use it to customize the return key type\n- `padding`: Optional string, use it to define a different padding size, default is `5`\n- `inputStyle`: Optional string, use it to pass your style to the containing `View`\n- `inputProps`: Optional object, use it to pass additional props to the `TextInput`, for example `{autoFocus: true}`\n- `textStyle`: Optional string, use it to pass your style to the `TextInput`\n\n\nThe React packager will include the SearchBar component in your app's JS package and make it available for your app to use.\n\n\n# Contributing\n\nContributions are welcome.\n\n# LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fananddayalan%2Freact-native-material-design-searchbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fananddayalan%2Freact-native-material-design-searchbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fananddayalan%2Freact-native-material-design-searchbar/lists"}