> 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/user-assistance/feedback-workflow-component.md).

# Feedback Workflow Component

## Components Visuals 

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

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

{% tab title="Visual 1" %}

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

{% tab title="Visual 2" %}

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

{% tab title="Visual 3" %}

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

{% tab title="Visual 4" %}

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

## 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 `FeedBackWorkFlow` component into your React native application, follow these steps.

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

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

## Props of FeedBackWorkFlow 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>ContactUs</td><td>object</td><td>optional</td><td>For card And inner form heading and description</td></tr><tr><td>GeneralFeedback</td><td>object</td><td>optional</td><td>For card And inner form heading and description</td></tr><tr><td>ReportBug</td><td>object</td><td>optional</td><td>For card And inner form heading and description</td></tr><tr><td>RequestFeature</td><td>object</td><td>optional</td><td>For card And inner form heading and description</td></tr><tr><td>contactUrl</td><td>String</td><td>optional</td><td>Support team contact URL.</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>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>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 {
  Heading?: TextStyle;
  Description?: TextStyle;
  TopBar?: ViewStyle;
  Form?: ViewStyle;
  Label?: TextStyle;
  Input?: ViewStyle;
  PrimaryButton?: ViewStyle;
  Footer?: {
    FooterStyle?: ViewStyle;
    FooterText?: TextStyle;
    FooterIcon?: TextStyle;
  };
  listHeading?: TextStyle;
  listDescription?: TextStyle;
  Card?: ViewStyle;
  ThanksPopup?: { ShowFooter?: boolean };
}
```

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

  const FeedBackWorkFlow = useFeedBackWorkFlow({
    questId: "Your-Quest_ID" ,
    questUserId: "Your-user-id",
    questToken: "Your-Token-id" 
    });
  return (
    <>
      <FeedBackWorkFlow
        questToken={feedback.questToken}
        questUserId={feedback.questUserId}
        actions={feedback.actions}
        loading={feedback.loading}
        ContactUs={{
          // heading:"My Contact",
          description: "this is the contact info",
        }}
        GeneralFeedback={{
          formHeading:"form heading genral",
          // heading:"My Genral",
          description: "This is the genral feedback",
        }}
        ReportBug={{
          // heading:"my Bug",
          formHeading:"form heading bug",
          description: "This is the bug report",
        }}
        RequestFeature={{
          // heading:"my feature",
          description: "please request for the feature",
        }}
        onError={console.log}
        contactUrl="https://calendly.com/shubham-quest/chat"
      styleConfig={{
       Form:{backgroundColor:"#c8cde6"},
       Card:{backgroundColor:"#a1aad4",marginVertical:5,borderRadius:10},
       Description:{color:"red"},
       Footer:{
        FooterIcon:{color:"red"},
        FooterStyle:{backgroundColor:"#63677a"}
       },
       Heading:{color:"red"},
       Input:{backgroundColor:"#bec1cf"},
       Label:{color:"blue"},
       listDescription:{color:"yellow"},
       listHeading:{color:"#0c1436"},
       PrimaryButton:{backgroundColor:"#434a6e"},
       ThanksPopup:{
        ShowFooter:true
       }
      }}
      />
    </>
  );
};
export default DemoComponent;
```

## Demo

{% embed url="<https://www.loom.com/share/34fa07fc884a4b35a64cf70689a8d32c?sid=699ed047-8280-45ae-a17d-338f7d9892e7>" %}