# Credits Popup Component

## Component Visuals

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F0Ldlz7TPsU6gCEEtMFyw%2FSuccess%20Celebrations.png?alt=media&#x26;token=4012d8c1-e087-42df-9f0f-1dc8f4daf297" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

### Demo

{% embed url="<https://www.loom.com/share/d7e72fa6a3c9494aa4deb9dac24b25b9?sid=03fd1489-1eab-4342-a87a-9285f867eac0>" %}

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:

```jsx
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.

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

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

## Props of Credit Component

The `Credit` component accepts the following props

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

## 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",
  },
});

```

{% hint style="info" %}
The above example not uses all the props.
{% endhint %}