Inline Feedback Component

A user-friendly tool for collecting feedback, featuring email, message, name, and star ratings for effective user input.

Components Visuals

Overview

Visual 1

Visual 2

Vishual 3

To unlock early access to the component Get Access

Demo

InliInlineFeedBackStar

https://www.loom.com/share/54aa81fd1a0648bcbf0ebc6aa97ad636?sid=4f0363ca-b641-46aa-98da-064e5cdde4c0www.loom.com

InlinInlineFeedBackThum

https://www.loom.com/share/5acf2750a8f74b0f84f0e76f8bb27d7d?sid=d90f2cf9-bf76-43e1-87be-f3026d105b2ewww.loom.com

FeedBack Work Flow

https://www.loom.com/share/2bcb0262bd864a5cb4f5c0f0961cac2b?sid=a8654bfd-5b66-4ba7-b2fb-c7f75bf2ebb2www.loom.com

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:

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

InlineFeedBackStar

Props Name	Type	Required	Details
mainViewStyle	ViewStyle	optional	Main View Styleing
textViewStyle	ViewStyle	optional	Rating Text View Style
title	TextStyle	optional	Rating Text
maxRating	Number	optional	Give a number for rating star
headerText	String	optional	Header Text Style
headerDescription	String	optional	Header Description Style
customRatingBarStyle	ViewStyle	optional	Rating View Style
imageViewStyle	ViewStyle	optional	Image View Style
ratingTextStyle	TextStyle	optional	Rating Text Style
headerViewStyle	ViewStyle	optional	Header View Style
headerTextStyle	TextStyle	optional	Header Text Style
headerDescriptionTextView	TextStyle	optional	Header Description View Style
startFillColor	ViewStyle	optional	Color For star

InlineFeedBackThum

Props Name	Type	Require	Details
mainViewStyle	ViewStyle	optional	Main View Style
TitleTextStyle	TextStyle	optional	Title Text Syle
DescriptionTextStyle	TextStyle	optional	Description Text Style
buttonViewStyle	ViewStyle	optional	Button View Style

FeedBackFlow

Props Name	Type	Require	Details
mainViewStyle	ViewStyle	optional	List Main View Style
questsView	ViewStyle	optional	Quest list View Style
questsNameText	TextStyle	optional	Quest List Name Text Style
questsDescriptionText	TextStyle	optional	Quest List Description Text Style
footerText	TextStyle	optional	Footer Text Style
modalOutterViewStyle	ViewStyle	optional	Modal Back Ground View Style
modalInnerViewStyle	ViewStyle	optional	Modal inner View Style.
modalHeaderViewStyle	ViewStyle	optional	Modal Header View
modalHeaderInlineViewStyle	ViewStyle	optional	Modal Header Inner View
modalHeaderTextStyle	TextStyle	optional	Header Text Style
modalHeaderDescriptionStyle	TextStyle	optional	Header Description Text Style
inputHeaderTextStyle	TextStyle	optional	Inputs Header text Style
inputViewStyle	ViewStyle	optional	inputs View Style

Usage

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

• Import the Feedback Component: Import the Feedbackcomponent from the @questlabs/react-sdk package.

• Import the QuestProvider Component: Import the QuestProvider component from the @questlabs/react-sdk package.

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 Feedbackcomponent are userId, questId, token.

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

Replace "your-api-key", "your-api-secret", and "your-entity-id" with your actual Quest API credentials

Replace "your-token", "contact-support", "userid", "your-questId" with your actual configuration details.

---

Example Usage

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

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