> 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/miscellaneous/modal.md).

# Modal

## Components Visuals 

{% tabs %}
{% tab title="Overview" %}

<figure><img src="/files/tjM9usDQnNmGDQ9INkFg" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="/files/XoCY6rSUXaPcxoHZFm42" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="/files/hX6yMK5hyHtZ27321WMf" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 3" %}

<figure><img src="/files/JtfLdK4aDLHk5CM7Y1Xk" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

## Installation

To install the `Quest react-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.

{% 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 %}

## Usage

To integrate the `Modal` component into your React native application, follow these steps

* **Import the Modal Component**: Import the `Modal` component from the `@questlabs/react-sdk` package.
* **Import the QuestProvider Component**: Import the `QuestProvider` component from the `@questlabs/react-sdk` package.

```jsx
import { QuestProvider,Modal } from '@questlabs/react-sdk';
```

* **Pass the Required Props**:  Pass the required props to the `QuestProvider`. The required props are `apiKey`, `apiSecret`, and `entityId`.

## Props of Modal Component

The Modal component accepts the following props

```typescript
  ?: ;
  // videoURL?: string;
  ?: string;
  ?: string;
  ?: ;
  ?: string;
  ?: string;
  ?:()=>void;
  ?:()=> void
  ?:TextStyle;
  ?:TextStyle;
  ?:TextStyle;
  ?:TextStyle;
  ?:ViewStyle
  ?:ViewStyle
?:TextStyle
?:ViewStyle
?:TextStyle
```

<table><thead><tr><th width="240">Props Name</th><th width="125">Type</th><th width="110">Require </th><th>Details</th></tr></thead><tbody><tr><td>imageURL</td><td>string</td><td>Optional</td><td>Give image url</td></tr><tr><td>title</td><td>string</td><td>Optional</td><td>Title for component</td></tr><tr><td>description</td><td>string</td><td>Optional</td><td>Description for compoent</td></tr><tr><td>number</td><td>number</td><td>Optional</td><td>Number for call</td></tr><tr><td>primaryButtonText</td><td>string</td><td>Optional</td><td>Primary button text</td></tr><tr><td>secondaryButtonText</td><td>string</td><td>Optional</td><td>secondary button text </td></tr><tr><td>handleSecoundaryButton</td><td>function</td><td>Optional</td><td>Create secoundary button funtion</td></tr><tr><td>handlePrimaryButton</td><td>function</td><td>Optional</td><td>Create primary button function</td></tr><tr><td>headerText</td><td>TextStyle</td><td>Optional</td><td>header text   style</td></tr><tr><td>descriptionText</td><td>TextStyle</td><td>Optional</td><td>description text style</td></tr><tr><td>callTextStyle</td><td>TextStyle</td><td>Optional</td><td>call text style</td></tr><tr><td>numberText</td><td>TextStyle</td><td>Optional</td><td>number text style</td></tr><tr><td>callView</td><td>ViewStyle</td><td>Optional</td><td>call view style</td></tr><tr><td>cancelButtonView</td><td>ViewStyle</td><td>Optional</td><td>cancel button view style</td></tr><tr><td>cancelText</td><td>TextStyle</td><td>Optional</td><td>cancel text style</td></tr><tr><td>availButtonView</td><td>ViewStyle</td><td>Optional</td><td>avail button view style</td></tr><tr><td>availText</td><td>TextStyle</td><td>Optional</td><td>avail text style</td></tr></tbody></table>

### Example Usage

```typescript
import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {Modal,QuestProvider} from "@questlabs/react-native-sdk";
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
     <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
       <Modal
        imageURL="https://images.freeimages.com/images/large-previews/f5d/hearts-1254000.jpg"
        title="Reward Unlocked"
        description="You have unlocked a new reward for your last transaction. Avail the reward now and enjoy!"
        secondaryButtonText="Go to home"
        primaryButtonText="Avail now"
        number={32570982475}
        // handleSecoundaryButton={()=>console.log('close')}
        // handlePrimaryButton={()=>console.log("open")}
      />
     </QuestProvider>
    
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "lightgray",
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
});
```

## Demo

{% embed url="<https://www.loom.com/share/7d23600975b44f0e917b11933cc30c41?sid=69511455-09b7-4288-b628-91ef848644fb>" %}