# Survey Form

## Component Visuals

{% tabs %}
{% tab title="Visual 1" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FFqK5mRwziZBzwNLC4B5u%2FSurveys%20Temp%201.png?alt=media&#x26;token=34441cea-44fc-4eb5-acab-8395c390c1ed" 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%2F0EcDQoY7eZ7M8n5si0uC%2FSurveys%20Temp%202.png?alt=media&#x26;token=dbf11642-9027-4bdc-af99-a6612cf9b7c5" 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%2F9pWmrWrcZui3tJHUvNcL%2FSurveys%20Temp%203.png?alt=media&#x26;token=41177e7d-97bf-4925-a93a-f5d81e899a66" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 4" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FU31ee3uaxOalwP23deYm%2FSurveys%20Temp%204.png?alt=media&#x26;token=46bbeff3-e9de-47d0-8eba-1f8f160da976" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 5" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F8hozRPOgkky22ViRGIt5%2FSurveys%20Temp%205.png?alt=media&#x26;token=41801c95-1370-4004-9bd8-41473bd48963" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Vishal 6" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2Fuvb67Y7UOativNcavBSm%2FSurveys%20Temp%206.png?alt=media&#x26;token=01e04c9d-c254-48a4-84a8-ce0db58d6315" 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

### Root Component

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

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

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

{% hint style="info" %}
To load external fonts, please refer this doc to setup [expo-font](https://docs.expo.dev/versions/latest/sdk/font/) on your expo app.
{% endhint %}

### Component Usage

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

* **Import useSurvey Hook:** Import the `useSurvey` component from the `@questlabs/react-sdk` package.
* **Import the SurveyForm Component**: Import the `SurveyForm` component from the `@questlabs/react-sdk` package.
* **Pass the Required Props**:  Pass the required props to the `useSurvey` .  The required props are `questId`, `questUserId`, and `questToken` or if user don't have quest User id then they  can pass own userId to get questUserId and Token.&#x20;

```typescript
import { useSurvey , SurveyForm } from "@questlabs/react-native-sdk";
```

{% hint style="info" %}
Don't not use QuestProvider and useSurvey Hook in same file
{% endhint %}

## Props of SurveyForm Component

The Gamified component accepts the following props

<table><thead><tr><th width="207">Props Name</th><th width="173">Type</th><th width="103">Require </th><th>Details</th></tr></thead><tbody><tr><td>questId</td><td>string</td><td>Optional</td><td>Provied questId</td></tr><tr><td>questUserId</td><td>string</td><td>Optional</td><td>Provied the userId</td></tr><tr><td>userToken</td><td>string</td><td>Optional</td><td>Provied Quest Token</td></tr><tr><td>loading</td><td>boolean</td><td>Optional</td><td>don't use in offline mode.</td></tr><tr><td>campaignVariationId</td><td>string</td><td>Optional</td><td>Id For verification.</td></tr><tr><td>onError</td><td>Function</td><td>Optional</td><td>For Showing the Error.</td></tr><tr><td>actions</td><td>ICriteria</td><td>require</td><td>in offline user need to provide the require filed data.</td></tr><tr><td>title</td><td>string</td><td>Optional</td><td>Component Header text.</td></tr><tr><td>description</td><td>string</td><td>Optional</td><td>Component Description text.</td></tr><tr><td>itemsPerPage</td><td>number</td><td>Optional</td><td>Number of pages at the time</td></tr><tr><td>ratingType</td><td>"emoji" | "number" | "colored" | "star"</td><td>Optional</td><td>What kinfd of rating user want.</td></tr><tr><td>styleConfig</td><td>Object</td><td>Optional</td><td>An object containing Styling properties for styling various components within the get started process, including form, topbar, headings, descriptions,  and buttons.</td></tr></tbody></table>

### Style Props

```typescript
styleConfig {
  Form?: ViewStyle;
  Topbar?: ViewStyle;
  Heading?: TextStyle;
  Description?: TextStyle;
  Input?: ViewStyle;
  Label?: TextStyle;
  PrimaryButton?: ViewStyle | TextStyle;
  SecondaryButton?: ViewStyle | TextStyle;
  MultiChoice?: {
    style?: ViewStyle;
    selectedStyle?: ViewStyle;
  };
  Footer?: {
    FooterStyle?: ViewStyle;
    FooterText?: TextStyle;
    FooterIcon?: TextStyle;
  };
}

```

### Example Usage

App.js

```typescript
import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
import React, { useState } from "react";
import { QuestProvider } from "@questlabs/react-native-sdk";
import DemoComponent from "./DemoComponent";

export default function App() {
return (
    <SafeAreaView style={styles.container}>
      <StatusBar />
      <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
        entityId="Your-Api-entityId"
        authenticationToken="Your-authentication-token"  
         fontFamily= "Your-Font-FamFamily"
         >
        
        <DemoComponent />
        
        </QuestProvider>
   
    </SafeAreaView>
  );
}
```

DemoComponent.tsx

```typescript
import React from "react";
import {SurveyForm,useSurvey } from "@questlabs/react-native-sdk";
const DemoComponent = () => {
  // const survey= useSurvey({
  //   questId: "Your-Quest_ID" ,
  //   userId:"5235trfet365try67ywry5"
  //   })

  const survey= useSurvey({
    questId: "Your-Quest_ID" ,
    questUserId: "Your-user-id",
    questToken: "Your-Token-id" 
    });
  return (
    <>
    <SurveyForm
        questId={survey.questId}
        userToken={survey.userToken}
        questUserId={survey.questUserId}
        actions={survey.actions}
        title={survey.title}
        description={survey.description}
        campaignVariationId={survey.campaignVariationId}
        loading={survey.loading}
        onError={console.log}
        itemsPerPage={2}
        ratingType="star"
      /*  styleConfig={{
          Description:{color:'red'},
          Footer:{FooterIcon:{color:"red"},FooterStyle:{backgroundColor:"orange"},FooterText:{color:"white"}},
          Form:{backgroundColor:"#d4c9ab"},
          Heading:{color:"yellow"},
          Input:{backgroundColor:"red"},
          Label:{color:"blue"},
          Topbar:{backgroundColor:"#c7b279",borderTopEndRadius:12,borderTopStartRadius:12},
          PrimaryButton:{backgroundColor:"#594c27"},
          SecondaryButton:{backgroundColor:"#7a6935"},

        }} */
      />
    </>
  );
};
export default DemoComponent;
```

## Demo

{% embed url="<https://www.loom.com/share/34c7c25e7e7a4bdcacf282ccc53f204f?sid=d0ebdf14-18fd-4f1d-bffe-6455767558a5>" %}