{"id":19510622,"url":"https://github.com/sevvaleygul0/react-native-category-card","last_synced_at":"2025-04-26T03:32:21.322Z","repository":{"id":38823708,"uuid":"293618940","full_name":"sevvaleygul0/react-native-category-card","owner":"sevvaleygul0","description":"Fully customizable category card.","archived":false,"fork":false,"pushed_at":"2023-10-03T01:42:24.000Z","size":33687,"stargazers_count":10,"open_issues_count":3,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-17T13:05:31.836Z","etag":null,"topics":["card","category-card","javascript","library","mobile","react-nativ-category-card","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/sevvaleygul0.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-07T19:50:22.000Z","updated_at":"2024-02-11T02:56:44.000Z","dependencies_parsed_at":"2023-02-09T19:45:34.856Z","dependency_job_id":null,"html_url":"https://github.com/sevvaleygul0/react-native-category-card","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sevvaleygul0%2Freact-native-category-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sevvaleygul0%2Freact-native-category-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sevvaleygul0%2Freact-native-category-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sevvaleygul0%2Freact-native-category-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sevvaleygul0","download_url":"https://codeload.github.com/sevvaleygul0/react-native-category-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250134338,"owners_count":21380422,"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":["card","category-card","javascript","library","mobile","react-nativ-category-card","react-native"],"created_at":"2024-11-10T23:16:35.250Z","updated_at":"2025-04-26T03:32:16.312Z","avatar_url":"https://github.com/sevvaleygul0.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"React Native Category Card\" src=\"assets/logo.png\" width=\"686\"/\u003e\n\n# Demo\n\n\u003ctable\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg alt=\"React Native Category Cards\"\n        src=\"assets/Screenshots/screen-3.png\" width=\"680px\"/\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg alt=\"React Native Category Card Library\"\n        src=\"assets/Gifs/category-card.gif\"\n         /\u003e\n      \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n# Installation\n\nAdd the dependency:\n\n```ruby\nnpm i react-native-category-card\n```\n\n## Peer Dependencies\n\n###### IMPORTANT! You need install them\n\n```js\n\"react-native-androw\": \"\u003e= 0.0.34\",\n\"react-native-linear-gradient\": \"\u003e= 2.5.6\",\n\"@freakycoder/react-native-bounceable\": \"\u003e= 0.1.1\"\n```\n\n# Usage\n\n## Import\n\n```js\nimport CategoryCard from \"react-native-category-card\";\n```\n\n## CategoryCard Usage\n\n```js\n\u003cCategoryCard onPress={() =\u003e console.log(\"Fruits\")} /\u003e\n```\n\n```js\n\u003cCategoryCard\n  titleText={\"Meat \u0026 Poultry\"}\n  descriptionText={\"Butcher\"}\n  count={1}\n  disableRightButton\n  titleColor=\"#E8B730\"\n  descriptionColor=\"#edd695\"\n  onPress={() =\u003e console.log(\"Meat \u0026 Poultry\")}\n/\u003e\n```\n\n```js\n\u003cCategoryCard\n  titleText={\"Pantry\"}\n  descriptionText=\"Fresh Food\"\n  disableRightButton\n  count={8}\n  gradientColors={[\"#E5D1FA\", \"#C69CF4\", \"#A866EE\"]}\n  imageSource={require(\"./lib/asset/star.png\")}\n  onPress={() =\u003e console.log(\"Pantry\")}\n/\u003e\n```\n\n# Configuration - Props\n\n| Property                   |   Type    |              Default              | Description                                                |\n| -------------------------- | :-------: | :-------------------------------: | ---------------------------------------------------------- |\n| shadowStyle                |   style   |              default              | change the shadowStyle                                     |\n| shadowColor                |  string   |             '#757575'             | change the shadowColor                                     |\n| height                     |  number   |                                   | change the containers height                               |\n| width                      |  number   |        ScreenWidth \\* 0.8         | change the the containers width                            |\n| borderRadius               |  number   |                16                 | change the the containers borderRadius                     |\n| backgroundColor            |  string   |              '#fff'               | change the containers backgroundColor                      |\n| gradientColors             |   array   | ['#9CF4DF', '#30C9E8', '#107C91'] | change the Linear Gradient Colors                          |\n| imageStyle                 |   style   |              default              | change the left image style                                |\n| imageSource                |   asset   |              default              | change the image source                                    |\n| customImageComponent       | component |              default              | set your own custom component instead of default Image one |\n| titleText                  |   style   |              default              | change the title text                                      |\n| titleColor                 |  string   |             \"#4B4B4B\"             | change the title text color                                |\n| customTitleTextComponent   | component |              default              | set your own custom component instead of default Text one  |\n| descriptionText            |  string   |                                   | change the description text                                |\n| descriptionColor           |  string   |             \"#B4B4B4\"             | change the description text color                          |\n| customDescriptionComponent | component |              default              | set your own custom component instead of default Text one  |\n| count                      |  number   |                10                 | change the count                                           |\n| customCountTextComponent   | component |              default              | set your own custom component instead of default Text one  |\n| onPress                    | function  |                ()                 | set your own function when onPress                         |\n| rightButtonImageSource     |   asset   |              default              | change the right button image source                       |\n| buttonImageStyle           |   style   |              default              | change the button image style                              |\n| disableRightButton         |  boolean  |               true                | disable the right button                                   |\n\n## Future Plans\n\n- [x] ~~LICENSE~~\n\n# Change Log\n\nChange log will be here !\n\n## Author\n\nSevval Eygul, sevvalleygull@gmail.com\n\n## License\n\nReact Native Category Card is available under the MIT license. See the LICENSE file for more info.\n\n```\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsevvaleygul0%2Freact-native-category-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsevvaleygul0%2Freact-native-category-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsevvaleygul0%2Freact-native-category-card/lists"}