Inline Feedback Component
A user-friendly tool for collecting feedback, featuring email, message, name, and star ratings for effective user input.
Components Visuals
To unlock early access to the component Get Access
Demo
InliInlineFeedBackStar
InlinInlineFeedBackThum
FeedBack Work Flow
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:
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
Feedback
component from the@questlabs/react-sdk
package.Import the QuestProvider Component: Import the
QuestProvider
component from the@questlabs/react-sdk
package.
Pass the Required Props: Pass the required props to the
QuestProvider
. The required props areapiKey
,apiSecret
, andentityId
. and required props for theFeedback
component areuserId, questId, token.
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
Last updated