General Feedback Component

The Feedback Form Component is an essential tool for collecting user opinions, suggestions, and comments. It allows you to gather valuable feedback to improve your product or service.

Component Visuals

To unlock early access to the component Get Access

Demo

https://www.loom.com/share/4f2d84a65a10418f9cff011543497d34?sid=256875e9-27da-4fdc-b458-253ddb2032fawww.loom.com

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:

npm install @questlabs/react-native-sdk

This command will download and install the package and its dependencies into your project.

Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.

---

Props of Feedback Component

The Feedback component accepts the following props

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

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.

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.

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",
  },
});