Credits Popup Component

The Credit Component is a versatile tool for managing and displaying credits in your application or project. It allows you to keep track of credits.

Component Visuals

To unlock early access to the component Get Access

Demo

https://www.loom.com/share/d7e72fa6a3c9494aa4deb9dac24b25b9?sid=03fd1489-1eab-4342-a87a-9285f867eac0www.loom.com

In this video, you'll learn:

1. How to use the component.

2. Customization options for the Credit component.

Installation

To install the Quest react-native-native-sdk into your project, follow these steps:

• Open your terminal/command prompt.

• Navigate to your project's root directory using the cd command if you're not already there.

• Run the following command to install the quest-sdk package using npm:

npm install @questlabs/react-native-sdk

This command will download and install the package and its dependencies into your project.

Usage

To integrate the Credit component into your React application, follow these steps

• Import the Credit Component: Import the Tutorial component from the @questlabs/react--native-sdk package.

import { Credit } from "@questlabs/react-native-sdk";

Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.

Props of Credit Component

The Credit component accepts the following props

Prop Name	Type	Required	Details
creditTitleText	string	optional	The Credit Title Text.
creditNumber	number	required	The Credit Number.
buttonText	string	optional	The Buy Button Text
upgradeText	string	optional	The Upgrade Button Text.
helpText	string	optional	The Help Button Text.
successTitleText	string	optional	The Success Title Text.
successDescriptionText	string	optional	The Success Description Text.
buttonViewStyle	ViewStyle	optional	The Buttons Outer View.
buttonInnerViewStyle	ViewStyle	optional	The Button Inner View.
buttonTitleTextStyle	TextStyle	optional	The Button Title Text Style.
creditViewStyle	ViewStyle	optional	The Credit View Style.
creditTitleTextStyle	TextStyle	optional	The Credit Title Text Style.
buyButtonViewStyle	ViewStyle	optional	The Buy Button View.
buyButtonTextStyle	TextStyle	optional	The Buy Button Text.
centeredView	ViewStyle	optional	The Modal Outer View.
modalView	ViewStyle	optional	The Modal View.
crossIconViewStyle	ViewStyle	optional	The Cross View Style.
modalInnerViewStyle	ViewStyle	optional	The Modal inner Style.
modalText	TextStyle	optional	The Modal Title Text
descritionTextStyle	TextStyle	optional	The Modal Description Text.
successImageStyle	ImageStyle	optional	The Image Style.
onBuy	Function	optional	Create your Own Buy Function.
onUpgrade	Function	optional	Create your Own Upgrade Function.
onHelp	Function	optional	Create your Own Help Function.

Example Usage

Here's an example of how to use the Credit component within your React Native application.

import {SafeAreaView, StyleSheet } from "react-native";
import React from "react";
import {
  Credit,
} from ;

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Credit
        onUpgrade={() => console.log("helo up")}
        onHelp={() => console.log("help")}
        modalView={{ backgroundColor: "gray" }}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    justifyContent: "center",
    alignItems: "center",
  },
});

The above example not uses all the props.