0.1.5 • Published 1 year ago

@jamesmann/react-native-get-premium-screen v0.1.5

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

React Native Get Premium Screen

npm version npm Platform - Android and iOS License: MIT styled with prettier

Installation

Add the dependency:

npm i react-native-get-premium-screen

Peer Dependencies

"react-native-animated-component": ">= 0.2.0",
"react-native-linear-gradient": ">= 2.5.6"

Usage

Import

import PremiumScreen from "react-native-get-premium-screen";

Fundamental Usage

<PremiumScreen
  title="Get Premium"
  planListTitle="Choose a plan"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa mauris, pretium bibendum orci in consectetur vulputate erat."
  onPlanSelect={(selectedPlan: IPlan) => {
    console.log(selectedPlan);
  }}
/>

Example Project 😍

You can checkout the example project 🥰

Simply run

  • npm i
  • react-native run-ios/android

should work of the example project.

Configuration - Props

Fundamentals

PropertyTypeDefaultDescription
titlestringundefinedchange the title
descriptionstringundefinedchange the descrition
planListTitlestringundefinedchange the plan list title

Customization (Optionals)

PropertyTypeDefaultDescription
backgroundColorsstring[]"#6a6b76", "#494951", "#323239"change the screen linear gradient colors
onClosePressfunctionundefinedset your own logic for the close button functionality when it is pressed
onPlanSelectfunctionundefinedset your own logic for the plan select functionality when it is pressed
disableCloseButtonbooleanfalsedisable / remove the close button
ImageComponentcomponentImageset your own component instead of Image component
TextComponentcomponentTextset your own component instead of Text component
logoImageSourceImageSourcePropTypedefaultchange the logo image source
checkImageSourceImageSourcePropTypedefaultchange the check image source
closeButtonImageSourceImageSourcePropTypedefaultchange the close button image source
logoContainerStyleViewStyledefaultset/override the logo container style
logoImageStyleImageStyledefaultset/override the logo image style
closeButtonStyleViewStyledefaultset/override the close button style
closeButtonImageStyleImageStyledefaultset/override the close button image style
titleContainerStyleViewStyledefaultset/override the title container style
titleTextStyleTextStyledefaultset/override the title text style
descriptionTextStyleTextStyledefaultset/override the description text style
premiumFeaturesContainerStyleViewStyledefaultset/override the premium features container style
premiumFeatureItemTextStyleTextStyledefaultset/override the premium features item text style
planListContainerStyleViewStyledefaultset/override the plan list container style
planListTitleTextStyleTextStyledefaultset/override the plan list title text style

Future Plans

  • LICENSE
  • Write an article about the lib on Medium

Author

FreakyCoder, kurayogun@gmail.com

Credits

Big thanks to Max ⚡️ Osichka from Dribbble, highly inspired by his/her design

License

React Native Get Premium Screen is available under the MIT license. See the LICENSE file for more info.