{"id":18348679,"url":"https://github.com/paraboly/react-native-card-button","last_synced_at":"2025-04-06T09:31:44.172Z","repository":{"id":34865986,"uuid":"185166874","full_name":"Paraboly/react-native-card-button","owner":"Paraboly","description":"Fully customizable Card Button via Paraboly for React Native.","archived":false,"fork":false,"pushed_at":"2023-03-04T03:41:46.000Z","size":2883,"stargazers_count":18,"open_issues_count":9,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-03T02:37:03.498Z","etag":null,"topics":["button","card","card-button","generic","paraboly","react","react-native"],"latest_commit_sha":null,"homepage":"https://www.paraboly.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Paraboly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-06T09:35:24.000Z","updated_at":"2023-11-03T10:47:57.000Z","dependencies_parsed_at":"2024-10-13T12:31:09.604Z","dependency_job_id":"f628a431-5b83-4f6b-84d9-d010b2f15be9","html_url":"https://github.com/Paraboly/react-native-card-button","commit_stats":{"total_commits":30,"total_committers":2,"mean_commits":15.0,"dds":"0.43333333333333335","last_synced_commit":"dccea772ebafe79b0c63d8f66e4e83f33f0a7332"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Freact-native-card-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Freact-native-card-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Freact-native-card-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Freact-native-card-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Paraboly","download_url":"https://codeload.github.com/Paraboly/react-native-card-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247463744,"owners_count":20942935,"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":["button","card","card-button","generic","paraboly","react","react-native"],"created_at":"2024-11-05T21:18:48.052Z","updated_at":"2025-04-06T09:31:43.392Z","avatar_url":"https://github.com/Paraboly.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"Paraboly React Native Card Button\" src=\"https://github.com/Paraboly/react-native-card-button/blob/master/assets/op_logo.png\" width=\"1050\"/\u003e\n\nFully customizable Card Button via Paraboly for React Native.\n\n[![npm version](https://img.shields.io/npm/v/@paraboly/react-native-card-button.svg)](https://www.npmjs.com/package/@paraboly/react-native-card-button)\n[![npm](https://img.shields.io/npm/dt/@paraboly/react-native-card-button.svg)](https://www.npmjs.com/package/@paraboly/react-native-card-button)\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"React Native Card Button\" src=\"https://github.com/Paraboly/react-native-card-button/blob/master/assets/Screenshots/example.png\" width=\"49.7%\"/\u003e\n\u003c/p\u003e\n\n\n## Installation\n\nAdd the dependency:\n\n```ruby\nnpm i @paraboly/react-native-card-button\n```\n\n## Peer Dependencies\n\n##### IMPORTANT! You need install them.\n\n```\n\"react\": \"\u003e= 16.x\",\n\"react-native\": \"\u003e= 0.55.x\",\n\"react-native-vector-icons\": \"\u003e= 6.x.x\",\n\"react-native-linear-gradient\": \"\u003e= 0.2.x\",\n\"react-native-material-ripple\": \"\u003e= 0.8.x\",\n\"react-native-dynamic-vector-icons\": \"\u003e= x.x.x\"\n```\n\n## Basic Usage\n\n```js\n\u003cCardButton text=\"Home\" /\u003e\n```\n\n## Solid Background (Non Gradient) Usage\n```js\n\u003cCardButton gradient={false} backgroundColor=\"#049134\" /\u003e\n```\n\n\n## Advanced Usage\n\n```js\n\u003cCardButton\n\twidth={75}\n\theight={75}\n\ttextSize={10}\n\tkey={layer.id}\n\ttext={layer.title}\n\ticonColor={\"white\"}\n\ttextColor={\"white\"}\n\tgradient={layer.active}\n\tgradientColor={[\"#48c6\", \"#2f3a60\"]}\n\tonPress={_.partial(this.toggle, item).bind(this)}\n\ticonComponent={\n\t\u003cView style={sharedStyle.center}\u003e\n\t  \u003cMyIcon\n\t  \tsize={50}\n\t  \tname={'map' }\n\t  \tcolor={\"white\"}/\u003e\n\t\u003c/View\u003e\n\t}\n/\u003e\n```\n\n### Configuration - Props\n\n\n| Property                    |    Type     |              Default              | Description                                                                     |\n| --------------------------- | :---------: | :-------------------------------: | ------------------------------------------------------------------------------- |\n| gradient                    |   boolean   |               true                | if you do not want to use card button with gradient color, simply make it false |\n| width                       |   number    |                90                 | change the card button's width                                                  |\n| height                      |   number    |                90                 | change the card button's height                                                 |\n| start                       |   object    |          { x: 0, y: 1 }           | change the gradient's start way                                                 |\n| end                         |   object    |          { x: 0, y: 1 }           | change the gradient's end way                                                   |\n| text                        |   string    |               Test                | use this to set card button's below text                                        |\n| gradientColors              | color array | [\"#f9f7b4\", \"#f7c77e\", \"#e8ba6b\"] | use this to set your own gradient colors                                        |\n| modalBottom                 |   number    |           height * 0.6            | use this to change where modal will be appear depends on the bottom             |\n| borderRadius                |   number    |                20                 | change the border radius                                                        |\n| iconName                    |   string    |              traffic              | change the icon itself                                                          |\n| iconSize                    |   number    |                36                 | change the icon's size                                                          |\n| iconType                    |   string    |           MaterialIcons           | change the icon's type                                                          |\n| iconColor                   |    color    |             \"#cdcfd6\"             | change the icon's color                                                         |\n| rippleColor                 |    color    |             \"#678fee\"             | change the ripple color                                                         |\n| fontFamily                  | font family |              default              | use this to set your own font family                                            |\n| backgroundColor             |    color    |             \"#fcfcfc\"             | change the background color if you want to use solid color                      |\n| rippleContainerBorderRadius |   number    |                20                 | change the ripple's border radius                                               |\n\n## Author\n\nFreakyCoder, kuray.ogun@paraboly.com || kurayogun@gmail.com\n\n## License\n\nReact Native Card Button Library is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparaboly%2Freact-native-card-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparaboly%2Freact-native-card-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparaboly%2Freact-native-card-button/lists"}