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

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.

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 NameTypeRequiredDetails

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.

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";

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.

Last updated