# Get Started Component

### Components 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%2FUPgp2IePyEXDDYf3MyI9%2Fget%20started2.png?alt=media&#x26;token=01c3e594-3e9b-448e-b1a5-badebc815682" 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%2F0KhCNT68ORyMTxXdL1i6%2Fgetstarted%20temp2.png?alt=media&#x26;token=8acf219b-422e-447c-9653-8d2347cd911e" alt=""><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 `GetStarted` component into your React native application, follow these steps.

* **Import useGetStarted Hook:** Import the `useGetStarted` component from the `@questlabs/react-sdk` package.
* **Import the GetStarted Component**: Import the `GetStarted` component from the `@questlabs/react-sdk` package.
* **Pass the Required Props**:  Pass the required props to the `useGetStarted`.  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 { useGetStarted, GetStarted } from "@questlabs/react-native-sdk";
```

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

## Props of GetStarted Component

The GetStarted component accepts the following props.

<table><thead><tr><th width="211">Props Name</th><th width="126">Type</th><th width="106">Require</th><th>Details</th></tr></thead><tbody><tr><td>questId</td><td>string</td><td>optional</td><td>ID of the Quest.</td></tr><tr><td>questUserId</td><td>string</td><td>optional</td><td>User ID for authentication.</td></tr><tr><td>userToken</td><td>string</td><td>optional</td><td>Authentication token.</td></tr><tr><td>campaignVariationId</td><td>string</td><td>optional</td><td>Id For verification.</td></tr><tr><td>showDetailed</td><td>boolean</td><td>optional</td><td>show detaile mode.</td></tr><tr><td> onClose</td><td>Function</td><td>optional</td><td>Create the function for onClose.</td></tr><tr><td>isModal</td><td>boolean</td><td>optional</td><td>Open as Modal.</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>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>Require</td><td>Component title.</td></tr><tr><td>description</td><td>string</td><td>Require</td><td>Component Descroption.</td></tr><tr><td>onClick</td><td>Funtion</td><td>optional</td><td>when it offline the create own Funtion.</td></tr><tr><td>isOffline</td><td>boolean</td><td>optional</td><td>for verification.</td></tr><tr><td>onError</td><td>Function</td><td>optional</td><td>For Showing the Error.</td></tr><tr><td>showProgressBar </td><td>boolean</td><td>optional</td><td>User Want to show progressBar or not</td></tr><tr><td>showFooter </td><td>boolean</td><td>optional</td><td>user Want to show the footer or not</td></tr><tr><td>ButtonType</td><td>"Buttons" | "Arrow"</td><td>optional</td><td>Want kind of button 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;
  Heading?: TextStyle;
  Description?: TextStyle;
  PrimaryButton?: ViewStyle | TextStyle;
  SecondaryButton?: ViewStyle | TextStyle;
  Footer?: {
    FooterStyle?: ViewStyle;
    FooterText?: TextStyle;
    FooterIcon?: TextStyle;
  };
  Card?: ViewStyle;
  ProgressBar?: {
    barColor?: string;
    ProgressText?: string;
    barParentColor?: string;
  };
  CardContainer?: ViewStyle;
  Icon?: ViewStyle;
  TopBar?: ViewStyle;
  Arrow?: {
    Background?: string;
    IconColor?: string;
    CompletedBackground?: string;
    CompletedIconColor?: string;
  };
}
```

### 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 {GetStarted,useGetStarted} from "@questlabs/react-native-sdk";
const DemoComponent = () => {
  // const getStarted = useGetStarted({
  //   questId: "Your-Quest_ID" ,
  //   userId:"5235trfet365try67ywry5"
  //   })

  const getStarted = useGetStarted({
    questId: "Your-Quest_ID" ,
    questUserId: "Your-user-id",
    questToken: "Your-Token-id" 
    });
  return (
    <>
      <GetStarted
        actions={getStarted.actions}
        // actions={[
        //   {
        //     actionId: "123",
        //     completed: false,
        //     description: 'first description',
        //     imageUrl: "url",
        //     postlink: "https://google.com",
        //     title: 'first title',
        //     buttonText: 'start',
        //     demoButtonText: 'demo visit',
        //     demoLink: "https://zoho.com"
        //   },
        //   {
        //     actionId: "456",
        //     completed: false,
        //     description: '2nd description',
        //     imageUrl: "url",
        //     postlink: "https://facebook.com",
        //     title: '2nd title',
        //     buttonText: 'facebook',
        //     demoButtonText: 'demo visit',
        //     demoLink: "https://clickup.com"
        //   },
        //   {
        //     actionId: "4356",
        //     completed: false,
        //     description: '3nd description',
        //     imageUrl: "url",
        //     postlink: "https://facebook.com",
        //     title: '2nd title',
        //     buttonText: 'facebook',
        //     demoButtonText: 'demo visit',
        //     demoLink: "https://clickup.com"
        //   },
        //   {
        //     actionId: "4546",
        //     completed: false,
        //     description: '24nd description',
        //     imageUrl: "url",
        //     postlink: "https://facebook.com",
        //     title: '24nd title',
        //     buttonText: 'facebook',
        //     demoButtonText: 'demo visit',
        //     demoLink: "https://clickup.com"
        //   },

        // ]}
        description={getStarted.description}
        loading={getStarted.loading}
        questId={getStarted.questId}
        title={getStarted.title}
        userToken={getStarted.userToken}
        questUserId={getStarted.questUserId}
        showDetailed={false}
        campaignVariationId={getStarted.campaignVariationId}
        ButtonType="Arrow"
        showProgressBar={true}
        showFooter={true}
        isModal={true}
      // onClick={() => console.log(" click")}
      // onClose={() => console.log('close')}
      // styleConfig={{
      //   Card: {
      //     backgroundColor: 'lightgray'
      //   },
      //   CardContainer: {
      //     backgroundColor: "red"
      //   },
      //   Heading: {
      //     color: "blue"
      //   },

      //   Description: {
      //     color: "red"
      //   },
      //   Form: {
      //     backgroundColor: "yellow"
      //   },
      //   Arrow: {
      //     Background: "yellow",
      //     CompletedBackground: "blue",
      //     CompletedIconColor: "white",
      //     IconColor: "red"
      //   },
      //   Footer: {
      //     FooterIcon: {
      //       color: "red"
      //     },
      //     FooterStyle: {
      //       backgroundColor: "orange"
      //     },
      //     FooterText: {
      //       color: "blue"
      //     },

      //   },
      //   Icon: {
      //     backgroundColor: "red"
      //   },
      //   PrimaryButton: {

      //   },
      //   ProgressBar: {

      //   },
      //   SecondaryButton: {

      //   },
      //   TopBar: {

      //   }
      // }}

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

```

## Demo

{% embed url="<https://www.loom.com/share/8c6725cb58894123ad4f58d1fd8a323d?sid=621e0f65-7eba-4b70-89c8-9ec3f7219303>" %}