{"id":17700812,"url":"https://github.com/wrathchaos/react-native-subscribe-card","last_synced_at":"2025-05-08T20:37:12.625Z","repository":{"id":57340476,"uuid":"433588438","full_name":"WrathChaos/react-native-subscribe-card","owner":"WrathChaos","description":"Beautifully designed \u0026 fully customizable subscribe card for React Native","archived":false,"fork":false,"pushed_at":"2023-05-12T08:04:35.000Z","size":2292,"stargazers_count":24,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-01T13:11:21.508Z","etag":null,"topics":["android","apple","card","front-end","google","ios","mobile","premium","react","react-native","reactjs","subscribe-card"],"latest_commit_sha":null,"homepage":"https://freakycoder.com","language":"TypeScript","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/WrathChaos.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":"2021-11-30T21:15:15.000Z","updated_at":"2025-03-13T01:53:19.000Z","dependencies_parsed_at":"2024-06-21T20:22:45.022Z","dependency_job_id":"5e8090c2-e3e5-4213-b45d-66f725e56ddf","html_url":"https://github.com/WrathChaos/react-native-subscribe-card","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":"WrathChaos/react-native-typescript-library-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-subscribe-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-subscribe-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-subscribe-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-subscribe-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-native-subscribe-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253146553,"owners_count":21861424,"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":["android","apple","card","front-end","google","ios","mobile","premium","react","react-native","reactjs","subscribe-card"],"created_at":"2024-10-24T17:43:17.580Z","updated_at":"2025-05-08T20:37:12.573Z","avatar_url":"https://github.com/WrathChaos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"React Native Subsribe Card\" src=\"assets/logo.png\" width=\"1050\"/\u003e\n\n[![React Native Subsribe Card](https://img.shields.io/badge/-Beautifully%20designed%20%26%20fully%20customizable%20subscribe%20card%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-subscribe-card)\n\n[![npm version](https://img.shields.io/npm/v/react-native-subscribe-card.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-subscribe-card)\n[![npm](https://img.shields.io/npm/dt/react-native-subscribe-card.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-subscribe-card)\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 Subsribe Card\"\n        src=\"assets/Screenshots/react-native-subscibe-card.png\" /\u003e\n\u003c/p\u003e\n\n# Installation\n\nAdd the dependency:\n\n```bash\nnpm i react-native-subscribe-card\n```\n\n## Peer Dependencies\n\nZero Dependency\n\n# Usage\n\n## Import\n\n```jsx\nimport SubscribeCard from \"react-native-subscribe-card\";\n```\n\n## Fundamental Usage\n\n\u003cp align=\"left\"\u003e\n  \u003cimg alt=\"React Native Subsribe Card\"\n        src=\"assets/Screenshots/react-native-subscibe-normal-card.png\" /\u003e\n\u003c/p\u003e\n\n```jsx\n\u003cSubscribeCard\n  title=\"1 year plan\"\n  descriptionPrice=\"$224\"\n  description=\" billed every year\"\n  currency=\"$\"\n  price={12}\n  timePostfix=\"/mo\"\n  onPress={() =\u003e {}}\n/\u003e\n```\n\n## Selected Customization Usage\n\n`isSelected` prop makes the whole subscribe card changes to a new selected one.\n\n\u003cp align=\"left\"\u003e\n  \u003cimg alt=\"React Native Subsribe Card\"\n        src=\"assets/Screenshots/react-native-subscribe-selected-card.png\" /\u003e\n\u003c/p\u003e\n\n```jsx\n\u003cSubscribeCard\n  isSelected\n  title=\"Unlimited plan\"\n  descriptionPrice=\"$124\"\n  description=\" billed Unlimited plan\"\n  currency=\"$\"\n  price={8}\n  timePostfix=\"/mo\"\n  onPress={() =\u003e {}}\n/\u003e\n```\n\n## Discount / Save Optional Usage\n\n`discountText` prop makes the available for the discount/save optional component.\n\n\u003cp align=\"left\"\u003e\n  \u003cimg alt=\"React Native Subsribe Card\"\n        src=\"assets/Screenshots/react-native-subscribe-selected-card.png\" /\u003e\n\u003c/p\u003e\n\n```jsx\n\u003cSubscribeCard\n  discountText=\"Save 90%\"\n  title=\"Unlimited plan\"\n  descriptionPrice=\"$124\"\n  description=\" billed Unlimited plan\"\n  currency=\"$\"\n  price={8}\n  timePostfix=\"/mo\"\n  isSelected\n  onPress={() =\u003e {}}\n/\u003e\n```\n\n## Example Project 😍\n\nYou can checkout the example project 🥰\n\nSimply run\n\n- `npm i`\n- `react-native run-ios/android`\n\nshould work of the example project.\n\n# Configuration - Props\n\n## Fundamentals\n\n| Property         |      Type       | Required |  Default  | Description                                                        |\n| ---------------- | :-------------: | :------: | :-------: | ------------------------------------------------------------------ |\n| title            |     string      |    ✅    | undefined | change the title                                                   |\n| description      |     string      |    ❌    | undefined | change the descrition                                              |\n| descriptionPrice | string / number |    ❌    | undefined | change the descrition price                                        |\n| price            | string / number |    ✅    | undefined | change the price                                                   |\n| currency         |     string      |    ✅    | undefined | change the currency icon such as `$`                               |\n| timePostfix      |     string      |    ✅    | undefined | change the time postfix                                            |\n| isSelected       |     boolean     |    ❌    |   false   | enable the selected styling                                        |\n| discountText     |     string      |    ❌    | undefined | change the discount text                                           |\n| onPress          |    function     |    ✅    | undefined | set your own logic for the button functionality when it is pressed |\n\n## Customization (Optionals)\n\n| Property                          |       Type       | Default | Description                                                                                                             |\n| --------------------------------- | :--------------: | :-----: | ----------------------------------------------------------------------------------------------------------------------- |\n| style                             |    ViewStyle     | default | set or override the style object for the styling                                                                        |\n| containerStyle                    |    ViewStyle     | default | set or override the style object for the `container` style                                                              |\n| selectedContainerStyle            |    ViewStyle     | default | set or override the style object for the `selected container` style (when the `isSelected` prop is enable)              |\n| discountContainerStyle            |    ViewStyle     | default | set or override the style object for the `discount container` style                                                     |\n| outerContainerStyle               |    ViewStyle     | default | set or override the style object for the `outer container` style                                                        |\n| selectedOuterContainerStyle       |    ViewStyle     | default | set or override the style object for the `selected outer container` style (when the `isSelected` prop is enable)        |\n| titleTextStyle                    |    TextStyle     | default | set or override the style object for the `title` text style                                                             |\n| descriptionTextStyle              |    TextStyle     | default | set or override the style object for the `description` text style                                                       |\n| descriptionPriceTextStyle         |    TextStyle     | default | set or override the style object for the `description price` text style                                                 |\n| selectedDescriptionPriceTextStyle |    TextStyle     | default | set or override the style object for the `selected description price` text style (when the `isSelected` prop is enable) |\n| currencyTextStyle                 |    TextStyle     | default | set or override the style object for the `currency` text style                                                          |\n| selectedCurrencyTextStyle         |    TextStyle     | default | set or override the style object for the `selected currency` text style (when the `isSelected` prop is enable)          |\n| priceTextStyle                    |    TextStyle     | default | set or override the style object for the `price` text style                                                             |\n| selectedPriceTextStyle            |    TextStyle     | default | set or override the style object for the `selected price` text style (when the `isSelected` prop is enable)             |\n| timeTextStyle                     |    TextStyle     | default | set or override the style object for the `time` text style                                                              |\n| discountTextStyle                 |    TextStyle     | default | set or override the style object for the `discount` text style                                                          |\n| TextComponent                     |       Text       | default | set your own component instead of default `React Native's Text` component                                               |\n| TouchableComponent                | TouchableOpacity | default | set your own component instead of default `React Native's TouchableOpacity` component                                   |\n\n## Future Plans\n\n- [x] ~~LICENSE~~\n- [ ] Write an article about the lib on Medium\n\n## Credits\n\nBig thanks to Maxim Sirotyuk. Heavily inspired by [Maxim Sirotyuk's Amazing Design](https://www.uplabs.com/posts/subscription-winner-screens-android)\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## License\n\nReact Native Subsribe Card 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-subscribe-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-native-subscribe-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-subscribe-card/lists"}