# General Feedback Component

## Component Visuals

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FNa7ThYJjHLRKV4z0T2cM%2FFeedback%20workflow%20temp3.png?alt=media&#x26;token=1658deef-0538-42e1-b811-2f6ad919b695" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

#### Demo

{% embed url="<https://www.loom.com/share/4f2d84a65a10418f9cff011543497d34?sid=256875e9-27da-4fdc-b458-253ddb2032fa>" %}

In this video, you'll learn:

1. How to use the component.
2. Customization options for the Banner component.

## Installation

To install the `Quest react-native-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

<table><thead><tr><th>Prop Name</th><th width="130">Type</th><th width="112">Required</th><th>Details</th></tr></thead><tbody><tr><td>ratingMainViewStyle</td><td>ViewStyle </td><td>optional</td><td>The Rating Main View Style.</td></tr><tr><td>ratingTitle</td><td>string </td><td>optional</td><td>The Rating Title.</td></tr><tr><td>mainViewStyle</td><td>ViewStyle </td><td>optional</td><td>The Main View Style.</td></tr><tr><td>headerViewStyle</td><td>ViewStyle </td><td>optional</td><td>The Header View Style.</td></tr><tr><td>headerTextStyle</td><td>TextStyle </td><td>optional</td><td>The Header Text Style.</td></tr><tr><td>detailsViewStyle</td><td>ViewStyle </td><td>optional</td><td>The Details View Style.</td></tr><tr><td>detailsTextStyle</td><td>TextStyle </td><td>optional</td><td>The Details Text Style.</td></tr><tr><td>inputMainViewStyle</td><td>ViewStyle </td><td>optional</td><td>The Input Main View Style.</td></tr><tr><td>inputBoxTitleViewStyle</td><td>ViewStyle </td><td>optional</td><td>The Input Title View Style.</td></tr><tr><td>inputBoxTitleTextStyle</td><td>TextStyle </td><td>optional</td><td>The Input Title Text Style.</td></tr><tr><td>ErrorTextStyle</td><td>TextStyle </td><td>optional</td><td>The Error Text Style.</td></tr><tr><td>inputBoxStyle</td><td>ViewStyle </td><td>optional</td><td>The Input Box Style.</td></tr><tr><td>ratingOutterView</td><td>ViewStyle </td><td>optional</td><td>The Rating Outter View.</td></tr><tr><td>ratingTextStyle</td><td>TextStyle </td><td>optional</td><td>The Rating Text Style.</td></tr><tr><td>starViewStyle</td><td>ViewStyle </td><td>optional</td><td>The Starts View Style.</td></tr><tr><td>buttonOutterViewStyle</td><td>ViewStyle </td><td>optional</td><td>The Button Outter View.</td></tr><tr><td>buttonStyle</td><td>ViewStyle </td><td>optional</td><td>The Button Styles.</td></tr><tr><td>buttonTextStyle</td><td>TextStyle </td><td>optional</td><td>The Button Text.</td></tr><tr><td>notificationTitle</td><td>string</td><td>required</td><td>The Notification Title.</td></tr><tr><td>notificationDetails</td><td>string</td><td>optional</td><td>The Notification Details.</td></tr><tr><td>notificationIcon</td><td>any</td><td>optional</td><td>The Notification Icon</td></tr><tr><td>onSubmit</td><td>(feedBack:FeedBack)</td><td></td><td></td></tr></tbody></table>

```typescript
type FeedBack ={
    name:string,
    email:string,
    message:string,
    rating:number,
}
```

## Usage

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

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

```jsx
import { Feedback } from "@questlabs/react-native-sdk";
```

## Example Usage

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

```typescript

import { Button, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {
  Feedback,
  Notification
} from "@questlabs/react-native-sdk/src/components";

export default function App() {
 

  return (
    <SafeAreaView style={styles.container}>
      <Notification.Provider notificationView={{ backgroundColor: "gray" }}>
        <Feedback
          ratingMainViewStyle={{
            backgroundColor: "white",
          }}
          onSubmit={(data) => console.log(data)}
        />
       </Notification.Provider>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    marginTop: 40,
    justifyContent: "center",
  },
});
```