{"id":17700741,"url":"https://github.com/wrathchaos/react-native-circular-card-view","last_synced_at":"2025-07-07T04:10:23.485Z","repository":{"id":35107984,"uuid":"206973145","full_name":"WrathChaos/react-native-circular-card-view","owner":"WrathChaos","description":"Fully customizable Circular Card View for React Native","archived":false,"fork":false,"pushed_at":"2023-10-21T00:16:16.000Z","size":5451,"stargazers_count":21,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-08T22:29:52.895Z","etag":null,"topics":["card","circular","circular-card","design","material-design","mobile","mobile-app-development","react","react-native","software","ui","ux"],"latest_commit_sha":null,"homepage":"https://www.freakycoder.com","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/WrathChaos.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-07T13:37:13.000Z","updated_at":"2025-03-30T11:03:52.000Z","dependencies_parsed_at":"2024-10-24T21:24:36.621Z","dependency_job_id":"6b1ddc7e-89e6-4468-8d40-da8c45048694","html_url":"https://github.com/WrathChaos/react-native-circular-card-view","commit_stats":{"total_commits":52,"total_committers":4,"mean_commits":13.0,"dds":"0.46153846153846156","last_synced_commit":"13b302e2362f83c0ea9a2970a0fdd129c61611c2"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/WrathChaos/react-native-circular-card-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-circular-card-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-circular-card-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-circular-card-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-circular-card-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-native-circular-card-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-circular-card-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264010960,"owners_count":23543717,"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","circular","circular-card","design","material-design","mobile","mobile-app-development","react","react-native","software","ui","ux"],"created_at":"2024-10-24T17:42:59.691Z","updated_at":"2025-07-07T04:10:23.466Z","avatar_url":"https://github.com/WrathChaos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"React Native Circular Card View\" src=\"https://github.com/WrathChaos/react-native-circular-card-view/blob/master/assets/logo.png\" width=\"1050\"/\u003e\n\n\n[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-circular-card-view)\n\n\n[![Fully customizable Circular Card View for React Native](https://img.shields.io/badge/-Fully%20customizable%20Circular%20Card%20View%20for%20React%20Native-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-circular-card-view)\n\n\n[![npm version](https://img.shields.io/npm/v/react-native-circular-card-view.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-circular-card-view)\n[![npm](https://img.shields.io/npm/dt/react-native-circular-card-view.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-circular-card-view)\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"React Native Circular Card View\"\n        src=\"https://github.com/WrathChaos/react-native-circular-card-view/blob/master/assets/Screenshots/example.png\" width=\"49%\" /\u003e\n  \u003cimg alt=\"React Native Circular Card View\"\n        src=\"https://github.com/WrathChaos/react-native-circular-card-view/blob/master/assets/Screenshots/react-native-circular-card-view.gif\" width=\"49%\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\nAdd the dependency:\n\n### React Native:\n\n```ruby\nnpm i react-native-circular-card-view\n```\n\n## Peer Dependencies\n\n###### IMPORTANT! You need install them.\n\n```\n\"react\": \"\u003e= 16.x.x\",\n\"react-native\": \"\u003e= 0.55.x\",\n\"react-native-androw\": \"\u003e= 0.0.33\",\n\"react-native-vector-icons\": \"\u003e= 6.6.0\"\n\"react-native-material-ripple\": \"\u003e= 0.8.0\",\n\"react-native-dynamic-vector-icons\": \"\u003e= 0.2.1\",\n\"@freakycoder/react-native-helpers\": \"\u003e= 0.0.21\",\n```\n\n## Import\n\n```js\nimport { CircularCard } from \"react-native-circular-card-view\";\n```\n\n# Simple Usage \n\n```jsx\n\u003cCircularCard /\u003e\n```\n\n\n# Advanced Custom Usage \n\nPlease check the example for the custom usage\n\n```jsx\n\u003cCircularCard\n  title={title}\n  price={price}\n  color={color}\n  source={image}\n  priceText={price}\n  description={description}\n  rippleColor={rippleColor}\n/\u003e\n```\n\n\n### Configuration - Props\n\n| Property         |     Type     |      Default      | Description                             |\n| ---------------- | :----------: | :---------------: | --------------------------------------- |\n| title            |    string    |  check the code   | set the title                           |\n| description      |    string    |  check the code   | set the description                     |\n| priceText        |    string    |  check the code   | set the right bottom text               |\n| width            |    number    | ScreenWidth * 0.9 | change the card's width                 |\n| height           |    number    |        125        | change the card's height                |\n| source           | string (uri) |  Unsplash String  | set the image source as uri             |\n| shadowColor      |    color     |       #000        | change the card's shadow color          |\n| backgroundColor  |    color     |      #fcfcfc      | change the card's main background color |\n| iconOnPress      |   function   |       null        | set the icon onPress function           |\n| imageStyle       |    style     |       style       | set your own style for image            |\n| titleStyle       |    style     |       style       | set your own style for title            |\n| priceStyle       |    style     |       style       | set your own style for price            |\n| shadowStyle      |    style     |       style       | set your own style for shadow           |\n| descriptionStyle |    style     |       style       | set your own style for description      |\n\n\n### ToDos\n\n- [x] ~~LICENSE~~\n- [ ] Write an article about the lib on Medium\n\n# Change Log\n\n# Credits\n\nI could not find the artist of this design, please find me :) \n\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## License\n\nReact Native Circular Card View 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%2Fwrathchaos%2Freact-native-circular-card-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-native-circular-card-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-circular-card-view/lists"}