# Onboarding Component

## 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%2F5P0LVc0Befsqm7pERAwk%2Fonboarding%20graphics.png?alt=media&#x26;token=a61efd98-6724-4aaa-b89f-e441bab494b2" 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%2Fj9BVU7pTaKDciWs16XoR%2Fonbording%201.png?alt=media&#x26;token=397c21c6-f494-48b2-aa79-bd941e4e6184" alt=""><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%2F9TTgqY8KrI6zWEmuF2B6%2Fonbording%205.png?alt=media&#x26;token=974e6b3a-7324-4fed-8171-62bb8c30e2e9" 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%2Ftvtwv1tT1aYu8FS0LWXX%2Fonbording%206.png?alt=media&#x26;token=d85cff60-902b-43fa-b8da-b2560e5d1ba7" 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 `Onboarding` component into your React native application, follow these steps.

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

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

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

## Props of Onboarding Component

The Onboarding component accepts the following props

<table><thead><tr><th width="211">Props Name</th><th width="164">Type</th><th width="121">Require</th><th>Details</th></tr></thead><tbody><tr><td>template</td><td>"multipage" | "single" | "oneQuestion";</td><td>optional</td><td>What kind of template you need.</td></tr><tr><td>multipleChoice</td><td>"checkbox" | "fill";</td><td>optional</td><td>What kind of multichoice you need.</td></tr><tr><td>onCross</td><td>Function</td><td>optional</td><td>create the function for onCross.</td></tr><tr><td>onError</td><td>Function</td><td>optional</td><td>For Showing the Error.</td></tr><tr><td>sections</td><td>ISection[]</td><td>Require</td><td>user need to provied filled data related to the template.</td></tr><tr><td>questId</td><td>string</td><td>Require</td><td>Provied quest id</td></tr><tr><td>questUserId</td><td>string</td><td>optional</td><td>provied quest user id</td></tr><tr><td>userToken</td><td>string</td><td>optional</td><td>Provied quest token</td></tr><tr><td>actions</td><td>ICriteria[]</td><td>optional</td><td>user need to provied filled data related to the section action name.</td></tr><tr><td>loading</td><td>boolean</td><td>optional</td><td>don't use in offline mode.</td></tr><tr><td>title</td><td>string</td><td>optional</td><td>component title text</td></tr><tr><td>description</td><td>string</td><td>optional</td><td>component title description text.</td></tr><tr><td>isModal</td><td>boolean</td><td>optional</td><td>Open as Modal.</td></tr><tr><td>campaignVariationId</td><td>string</td><td>optional</td><td>Id For verification.</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>

## Styles Props

```typescript
styleConfig {
  Form?: ViewStyle;
  Topbar?: ViewStyle;
  Heading?: TextStyle;
  Description?: TextStyle;
  Input?: ViewStyle;
  Label?: TextStyle;
  PrimaryButton?: ViewStyle | TextStyle;
  SecondaryButton?: ViewStyle | TextStyle;
  MultiChoice?: {
    style?: TextStyle;
    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 {Onboarding,useOnboarding  } from "@questlabs/react-native-sdk";
const DemoComponent = () => {
  // const onboarding = useOnboarding({
  //   questId: "Your-Quest_ID" ,
  //   userId:"5235trfet365try67ywry5"
  //   })

  const onboarding = useOnboarding ({
    questId: "Your-Quest_ID" ,
    questUserId: "Your-user-id",
    questToken: "Your-Token-id" 
    });
  return (
    <>
      <Onboarding
        styleConfig={{
          Form: {
            height: "auto",
            backgroundColor: "lightgray"
          },
          Description: { color: "yellow" },
          Footer: {
            FooterIcon: { color: "red" }
          },
          Heading: { color: "red" },
          Input: {
            backgroundColor: "orange"
          },
          Label: { color: "blue" },
          MultiChoice: {
            // style: {
            //   color: "yellow"
            // },
            // selectedStyle: {
            //   backgroundColor: "red",
            //   borderColor: "black"
            // }
          },
        }}
        template="single"
        onCross={() => console.log("out")}
        isModal={false}
        multipleChoice="fill"
        questId={onboarding.questId}
        questToken={onboarding.questToken}
        questUserId={onboarding.questUserId}
        // sections={[
        //   {
        //     name: "Details",

        //     criteriaNames: [
        //       "First name",
        //       "Last name",
        //       // "Add your address",
        //       "Email",
        //       "Gender",
        //       "Colors",

        //     ],
        //   },
        //   {
        //     name: "Company",

        //     criteriaNames: [
        //       "Company name",
        //       // "Last name",
        //       "Email",
        //       // "Gender",
        //       // "Colors",

        //     ],
        //   },
        //   {
        //     name: "Connection",

        //     criteriaNames: [
        //       "First name",
        //       "Last name",
        //       "Email",
        //       "Gender",
        //       "Colors",

        //     ],
        //   },
        // ]}
        description="THis is my Onboarding"
        title="My Onboarding"
        loading={onboarding.loading}
        sections={[
          {
            criteriaNames: [
              "First name",
              "Last name",
              "Email",
              "Gender",
              "Colors",
              "Add your address",
              "What is your company name?",
              "Your hobbies?",
              "What is your role in the company?",
            ],
          },
        ]}
        actions={[
          {
            actionId: "123",
            actionType: "USER_INPUT_TEXT",
            answer: [],
            title: "First name",
          },
          {
            actionId: "32",
            actionType: "USER_INPUT_TEXT",
            answer: [],
            title: "Last name",
          },
          {
            actionId: "342",
            actionType: "USER_INPUT_SINGLE_CHOICE",
            answer: [],
            options: [1, 2, 3, 4],
            title: "Gender",
          },
          {
            actionId: "123",
            actionType: "USER_INPUT_MULTI_CHOICE",
            answer: [],
            options: ["df5", "afg", "sdgfh", "asdg"],
            title: "Colors",
          },
          {
            actionId: "5673563",
            actionType: "USER_INPUT_TEXT",
            answer: [],
            title: "What is your company name?",
          },
        ]}
        // actions={onboarding.actions}
      />
    </>
  );
};
export default DemoComponent;
```

### Demo

{% embed url="<https://www.loom.com/share/6a443eb8bb9644f8a8f9f7d34d5ededf?sid=80496249-2995-473c-ab0d-7e1996a83410>" %}