# Modal

## Components Visuals 

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

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FMMBBdqro6tmkbSvvdHoP%2Fmodel.png?alt=media&#x26;token=b25dd669-322e-436d-9d27-23013441cb06" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F2J7XV8VB8M8yJa1YQ4Pk%2FModal%20upload.png?alt=media&#x26;token=222fd847-44ed-4d26-a32c-28ba499ae6a2" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FahjI5whRnxx1qykJA1ke%2FModal%20fail.png?alt=media&#x26;token=dc100a64-86a9-45cb-b72b-7c1cc2e736dc" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 3" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FMKcrQHEZTmAOYHtv8OWK%2Fmodel%20vidieo.png?alt=media&#x26;token=1ae5d442-8303-415e-866c-72e9369bb4f2" 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>" %}