{"id":17700860,"url":"https://github.com/wrathchaos/react-native-get-premium-screen","last_synced_at":"2025-05-13T10:40:12.213Z","repository":{"id":57337218,"uuid":"426948574","full_name":"WrathChaos/react-native-get-premium-screen","owner":"WrathChaos","description":"Easy to use and fully customizable get premium screen for React Native","archived":false,"fork":false,"pushed_at":"2021-11-29T20:42:29.000Z","size":4029,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T23:32:31.033Z","etag":null,"topics":["android","apple","google","ios","premium","react","react-native","reactjs","screen"],"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}},"created_at":"2021-11-11T09:50:36.000Z","updated_at":"2024-06-04T17:28:24.000Z","dependencies_parsed_at":"2022-09-10T03:53:26.338Z","dependency_job_id":null,"html_url":"https://github.com/WrathChaos/react-native-get-premium-screen","commit_stats":null,"previous_names":[],"tags_count":1,"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-get-premium-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-get-premium-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-get-premium-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-get-premium-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-native-get-premium-screen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253924618,"owners_count":21985147,"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","google","ios","premium","react","react-native","reactjs","screen"],"created_at":"2024-10-24T17:43:30.290Z","updated_at":"2025-05-13T10:40:12.171Z","avatar_url":"https://github.com/WrathChaos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"React Native Get Premium Screen\" src=\"assets/logo.png\" width=\"1050\"/\u003e\n\n[![React Native Get Premium Screen](https://img.shields.io/badge/-Easy%20to%20use%20and%20fully%20customizable%20get%20premium%20screen%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-get-premium-screen)\n\n[![npm version](https://img.shields.io/npm/v/react-native-get-premium-screen.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-get-premium-screen)\n[![npm](https://img.shields.io/npm/dt/react-native-get-premium-screen.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-get-premium-screen)\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 Get Premium Screen\"\n        src=\"assets/Screenshots/react-native-get-premium-screen.gif\" height=\"850\" /\u003e\n\u003c/p\u003e\n\n# Installation\n\nAdd the dependency:\n\n```bash\nnpm i react-native-get-premium-screen\n```\n\n## Peer Dependencies\n\n\u003ch5\u003e\u003ci\u003eIMPORTANT! You need install them\u003c/i\u003e\u003c/h5\u003e\n\n```js\n\"react-native-animated-component\": \"\u003e= 0.2.0\",\n\"react-native-linear-gradient\": \"\u003e= 2.5.6\"\n```\n\n# Usage\n\n## Import\n\n```jsx\nimport PremiumScreen from \"react-native-get-premium-screen\";\n```\n\n## Fundamental Usage\n\n```jsx\n\u003cPremiumScreen\n  title=\"Get Premium\"\n  planListTitle=\"Choose a plan\"\n  description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa mauris, pretium bibendum orci in consectetur vulputate erat.\"\n  onPlanSelect={(selectedPlan: IPlan) =\u003e {\n    console.log(selectedPlan);\n  }}\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  |  Default  | Description                |\n| ------------- | :----: | :-------: | -------------------------- |\n| title         | string | undefined | change the title           |\n| description   | string | undefined | change the descrition      |\n| planListTitle | string | undefined | change the plan list title |\n\n## Customization (Optionals)\n\n| Property                      |        Type         |              Default              | Description                                                              |\n| ----------------------------- | :-----------------: | :-------------------------------: | ------------------------------------------------------------------------ |\n| backgroundColors              |      string[]       | [\"#6a6b76\", \"#494951\", \"#323239\"] | change the screen linear gradient colors                                 |\n| onClosePress                  |      function       |             undefined             | set your own logic for the close button functionality when it is pressed |\n| onPlanSelect                  |      function       |             undefined             | set your own logic for the plan select functionality when it is pressed  |\n| disableCloseButton            |       boolean       |               false               | disable / remove the close button                                        |\n| ImageComponent                |      component      |               Image               | set your own component instead of `Image` component                      |\n| TextComponent                 |      component      |               Text                | set your own component instead of `Text` component                       |\n| logoImageSource               | ImageSourcePropType |              default              | change the logo image source                                             |\n| checkImageSource              | ImageSourcePropType |              default              | change the check image source                                            |\n| closeButtonImageSource        | ImageSourcePropType |              default              | change the close button image source                                     |\n| logoContainerStyle            |      ViewStyle      |              default              | set/override the logo container style                                    |\n| logoImageStyle                |     ImageStyle      |              default              | set/override the logo image style                                        |\n| closeButtonStyle              |      ViewStyle      |              default              | set/override the close button style                                      |\n| closeButtonImageStyle         |     ImageStyle      |              default              | set/override the close button image style                                |\n| titleContainerStyle           |      ViewStyle      |              default              | set/override the title container style                                   |\n| titleTextStyle                |      TextStyle      |              default              | set/override the title text style                                        |\n| descriptionTextStyle          |      TextStyle      |              default              | set/override the description text style                                  |\n| premiumFeaturesContainerStyle |      ViewStyle      |              default              | set/override the premium features container style                        |\n| premiumFeatureItemTextStyle   |      TextStyle      |              default              | set/override the premium features item text style                        |\n| planListContainerStyle        |      ViewStyle      |              default              | set/override the plan list container style                               |\n| planListTitleTextStyle        |      TextStyle      |              default              | set/override the plan list title text style                              |\n\n## Future Plans\n\n- [x] ~~LICENSE~~\n- [ ] Write an article about the lib on Medium\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## Credits\n\n[Big thanks to Max ⚡️ Osichka from Dribbble, highly inspired by his/her design](https://dribbble.com/shots/9533056-Get-Premium/attachments/1560148?mode=media)\n\n## License\n\nReact Native Get Premium Screen 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-get-premium-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-native-get-premium-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-get-premium-screen/lists"}