> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/react-native-sdk-components/user-assistance/credits-popup-component.md).

# Credits Popup Component

## Component Visuals

<figure><img src="/files/NSxrYgde0YPjxvlgmwfZ" 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.questera.ai/questera-ai-sdks/react-native-sdk-components/user-assistance/credits-popup-component.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.