Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrathchaos/react-native-get-premium-screen
Easy to use and fully customizable get premium screen for React Native
https://github.com/wrathchaos/react-native-get-premium-screen
android apple google ios premium react react-native reactjs screen
Last synced: 6 days ago
JSON representation
Easy to use and fully customizable get premium screen for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-get-premium-screen
- Owner: WrathChaos
- Created: 2021-11-11T09:50:36.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2021-11-29T20:42:29.000Z (almost 3 years ago)
- Last Synced: 2024-11-02T14:51:38.041Z (13 days ago)
- Topics: android, apple, google, ios, premium, react, react-native, reactjs, screen
- Language: TypeScript
- Homepage: https://freakycoder.com
- Size: 3.84 MB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-get-premium-screen)
[](https://www.npmjs.com/package/react-native-get-premium-screen)
[](https://www.npmjs.com/package/react-native-get-premium-screen)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```bash
npm i react-native-get-premium-screen
```
## Peer Dependencies
IMPORTANT! You need install them
```js
"react-native-animated-component": ">= 0.2.0",
"react-native-linear-gradient": ">= 2.5.6"
```
# Usage
## Import
```jsx
import PremiumScreen from "react-native-get-premium-screen";
```
## Fundamental Usage
```jsx
{
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
| Property | Type | Default | Description |
| ------------- | :----: | :-------: | -------------------------- |
| title | string | undefined | change the title |
| description | string | undefined | change the descrition |
| planListTitle | string | undefined | change the plan list title |
## Customization (Optionals)
| Property | Type | Default | Description |
| ----------------------------- | :-----------------: | :-------------------------------: | ------------------------------------------------------------------------ |
| backgroundColors | string[] | ["#6a6b76", "#494951", "#323239"] | change the screen linear gradient colors |
| onClosePress | function | undefined | set your own logic for the close button functionality when it is pressed |
| onPlanSelect | function | undefined | set your own logic for the plan select functionality when it is pressed |
| disableCloseButton | boolean | false | disable / remove the close button |
| ImageComponent | component | Image | set your own component instead of `Image` component |
| TextComponent | component | Text | set your own component instead of `Text` component |
| logoImageSource | ImageSourcePropType | default | change the logo image source |
| checkImageSource | ImageSourcePropType | default | change the check image source |
| closeButtonImageSource | ImageSourcePropType | default | change the close button image source |
| logoContainerStyle | ViewStyle | default | set/override the logo container style |
| logoImageStyle | ImageStyle | default | set/override the logo image style |
| closeButtonStyle | ViewStyle | default | set/override the close button style |
| closeButtonImageStyle | ImageStyle | default | set/override the close button image style |
| titleContainerStyle | ViewStyle | default | set/override the title container style |
| titleTextStyle | TextStyle | default | set/override the title text style |
| descriptionTextStyle | TextStyle | default | set/override the description text style |
| premiumFeaturesContainerStyle | ViewStyle | default | set/override the premium features container style |
| premiumFeatureItemTextStyle | TextStyle | default | set/override the premium features item text style |
| planListContainerStyle | ViewStyle | default | set/override the plan list container style |
| planListTitleTextStyle | TextStyle | default | set/override the plan list title text style |
## Future Plans
- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium
## Author
FreakyCoder, [email protected]
## Credits
[Big thanks to Max ⚡️ Osichka from Dribbble, highly inspired by his/her design](https://dribbble.com/shots/9533056-Get-Premium/attachments/1560148?mode=media)
## License
React Native Get Premium Screen is available under the MIT license. See the LICENSE file for more info.