> 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/inline-feedback-component.md).

# Inline Feedback Component

## Components Visuals 

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

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

{% tab title="Visual 1" %}

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

{% tab title="Visual 2" %}

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

{% tab title="Vishual 3" %}

<figure><img src="/files/SOCmGK7HpuelSLIGlm1f" 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 %}

## Demo

InliInlineFeedBackStar

{% embed url="<https://www.loom.com/share/54aa81fd1a0648bcbf0ebc6aa97ad636?sid=4f0363ca-b641-46aa-98da-064e5cdde4c0>" %}

InlinInlineFeedBackThum

{% embed url="<https://www.loom.com/share/5acf2750a8f74b0f84f0e76f8bb27d7d?sid=d90f2cf9-bf76-43e1-87be-f3026d105b2e>" %}

FeedBack Work Flow

{% embed url="<https://www.loom.com/share/2bcb0262bd864a5cb4f5c0f0961cac2b?sid=a8654bfd-5b66-4ba7-b2fb-c7f75bf2ebb2>" %}

## 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 %}

## Props of Feedback Component

The `Feedback` component accepts the following props

## **InlineFeedBackStar**

<table><thead><tr><th width="224">Props Name</th><th width="147">Type</th><th width="102">Required</th><th>Details </th></tr></thead><tbody><tr><td>mainViewStyle</td><td>ViewStyle</td><td>optional</td><td>Main View Styleing</td></tr><tr><td>textViewStyle</td><td>ViewStyle</td><td>optional</td><td>Rating Text View Style</td></tr><tr><td>title</td><td>TextStyle</td><td>optional</td><td>Rating Text</td></tr><tr><td>maxRating</td><td>Number</td><td>optional</td><td>Give a number for rating star</td></tr><tr><td>headerText</td><td>String</td><td>optional</td><td>Header Text Style</td></tr><tr><td>headerDescription</td><td>String</td><td>optional</td><td>Header Description Style</td></tr><tr><td>customRatingBarStyle</td><td>ViewStyle</td><td>optional</td><td>Rating View Style</td></tr><tr><td>imageViewStyle</td><td>ViewStyle</td><td>optional</td><td>Image View Style</td></tr><tr><td>ratingTextStyle</td><td>TextStyle</td><td>optional</td><td>Rating Text Style</td></tr><tr><td>headerViewStyle</td><td>ViewStyle</td><td>optional</td><td>Header View Style</td></tr><tr><td>headerTextStyle</td><td>TextStyle</td><td>optional</td><td>Header Text Style</td></tr><tr><td>headerDescriptionTextView</td><td>TextStyle</td><td>optional</td><td>Header Description View Style</td></tr><tr><td>startFillColor</td><td>ViewStyle</td><td>optional</td><td>Color For star </td></tr></tbody></table>

## InlineFeedBackThum

<table><thead><tr><th width="201">Props Name</th><th width="122">Type</th><th width="119">Require</th><th>Details</th></tr></thead><tbody><tr><td>mainViewStyle </td><td>ViewStyle</td><td>optional</td><td>Main View Style</td></tr><tr><td>TitleTextStyle </td><td>TextStyle</td><td>optional</td><td>Title Text Syle</td></tr><tr><td>DescriptionTextStyle </td><td>TextStyle</td><td>optional</td><td>Description Text Style</td></tr><tr><td>buttonViewStyle </td><td>ViewStyle</td><td>optional</td><td>Button View Style</td></tr></tbody></table>

## FeedBackFlow

<table><thead><tr><th width="222">Props Name</th><th width="133">Type</th><th width="122">Require</th><th>Details</th></tr></thead><tbody><tr><td>mainViewStyle</td><td>ViewStyle</td><td>optional</td><td>List Main View Style</td></tr><tr><td>questsView </td><td>ViewStyle</td><td>optional</td><td>Quest list View Style</td></tr><tr><td>questsNameText </td><td>TextStyle</td><td>optional</td><td>Quest List Name Text Style</td></tr><tr><td>questsDescriptionText </td><td>TextStyle</td><td>optional</td><td>Quest List Description Text Style</td></tr><tr><td>footerText </td><td>TextStyle</td><td>optional</td><td>Footer Text Style</td></tr><tr><td>modalOutterViewStyle </td><td>ViewStyle</td><td>optional</td><td>Modal Back Ground View Style</td></tr><tr><td>modalInnerViewStyle </td><td>ViewStyle</td><td>optional</td><td>Modal inner View Style.</td></tr><tr><td>modalHeaderViewStyle </td><td>ViewStyle</td><td>optional</td><td>Modal Header View</td></tr><tr><td>modalHeaderInlineViewStyle </td><td>ViewStyle</td><td>optional</td><td>Modal Header Inner View</td></tr><tr><td>modalHeaderTextStyle </td><td>TextStyle</td><td>optional</td><td>Header Text Style</td></tr><tr><td>modalHeaderDescriptionStyle </td><td>TextStyle</td><td>optional</td><td>Header Description Text Style</td></tr><tr><td>inputHeaderTextStyle </td><td>TextStyle</td><td>optional</td><td>Inputs Header text Style</td></tr><tr><td>inputViewStyle</td><td>ViewStyle</td><td>optional</td><td>inputs View Style</td></tr></tbody></table>

## Usage

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

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

```jsx
import { QuestProvider,InlineFeedBackStar, InlineFeedBackThumb,
  FeedBackFlow } from '@questlabs/react-sdk';
```

* **Pass the Required Props**:  Pass the required props to the `QuestProvider`. The required props are `apiKey`, `apiSecret`, and `entityId`. and required props for the `Feedback`component are `userId, questId, token.`

<pre class="language-jsx"><code class="lang-jsx">&#x3C;QuestProvider
  apiKey="your-api-key"
  apiSecret="your-api-secret"
  entityId="your-entity-id"
>
  &#x3C;InlineFeedBackStar getCurrentRating={(item)=> console.log(item)} maxRating={3} /> */}
   &#x3C;InlineFeedBackThumb  onThumbsDown={()=>console.log("Down")} onThumbsUp={()=>console.log("Up")}/> */}
<strong>    &#x3C;FeedBackFlow questIds={[
</strong>      "Your-Quest-Id",
        "Your-Quest-Id",
       "Your-Quest-Id",
        "Your-Quest-Id",
    ]}  userId="Your-User-Id"
    token=  "Your-token-Id",
    />
<strong>&#x3C;/QuestProvider>
</strong></code></pre>

{% hint style="info" %}
Replace `"your-api-key"`, `"your-api-secret"`, and `"your-entity-id"` with your actual Quest API credentials&#x20;
{% endhint %}

{% hint style="info" %}
Replace `"your-token"`, "contact-support",  "userid`", "your-questId"` with your actual configuration details.
{% endhint %}

***

## Example Usage

Here's an example of how to use the `Feedback` component within your React application

```jsx
import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {GetStartedScreen} from "@questlabs/react-native-sdk";
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
     <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
        entityId="Your-Api-entityId"
        > 
      
      
        <InlineFeedBackStar getCurrentRating={(item)=> console.log(item)} 
        //props
         />
        <InlineFeedBackThumb  onThumbsDown={()=>console.log("Down")} onThumbsUp={()=>console.log("Up")}
        //Props 
        />
      <FeedBackFlow questIds={[
        "q-b21cf395-xxxx-xxxx-xxxxxx-d88e2416ad9f",
        'q-general-feedback',
        'q-report-a-bug',
        'q-request-a-feature',
      ]}  userId="u-xxxxx-1917-xxxxx-b85xxx5-f13d47dfe2ed"
      token="xxxxxxx.eyJ1c2VySWQiOiJ1LWUzYmVhMWQzLTE5MTctNGI5YS1iODU1LWYxM2Q0N2RmZTJlZCIsImlhdCI6MTY5NjY3MDA5OCwiZXhwIjoxNzI4MjI3Njk4fQ.E_hQ-xxxxxxx"
      //Props
      />
       </QuestProvider>
    
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    marginTop: 40,
    padding: 20,
    justifyContent: "center",
    alignItems: "center",
  },
});
```