Survey Form

This Component is a versatile tool for collecting valuable insights and feedback from your target audience. Use this component to create customizable surveys and gather essential data.

Component Visuals

To unlock early access to the component Get Access

Demo

In this video, you'll learn:

  1. How to use the component.

  2. Customization options for the Survey 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 Survey Component

The Survey component accepts the following props.

Prop NameTypeRequiredDetails

data

DataType

required

onSave

(answers:Answer[])

mainViewStyle

ViewStyle

optional

The Main View.

outterViewStyle

ViewStyle

optional

The Outter View.

dataViewStyle

ViewStyle

optional

The Data View Style.

dataTitleStyle

TextStyle

optional

The Data Titles Style.

answerViewStyle

ViewStyle

optional

The Answer View Style.

inputViewStyle

ViewStyle

optional

The Outter Answer View Style.

textInputStyle

ViewStyle

optional

The Input style.

dotViewStyle

ViewStyle

optional

The Dot View Style.

dotStyle

ViewStyle

optional

The Dot Style.

buttonViewStyle

ViewStyle

optional

The Buttons View Style.

previousButtonViewStyle

ViewStyle

optional

The Previous Button View Style.

saveButtonViewStyle

ViewStyle

optional

The Save Button View Style.

saveButtonTextStyle

TextStyle

optional

The Save Button text Style.

nextButtonViewStyle

ViewStyle

optional

The Next Button View Style.

export type DataType={
    id:number | string,
    question:string,
    placeholder?:string,
    inputMode?:InputModeOptions,
    isValid?:(value:string | number)=>boolean,
    validationError?:string,
   }
export type Answer={
    id:number | string,
    answer:string
}

Usage

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

  • Import the Survey Component: Import the Tutorial component from the @questlabs/react--native-sdk package.

import { Survey } from "@questlabs/react-native-sdk";

Example Usage

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

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

export default function App() {
  const isValidText = (value) => {
    if (typeof value !== "string" || value === "") {
      return false;
    }
    return true;
  };

  return (
    <SafeAreaView style={styles.container}>
      <SurveyFrom
        data={[
          {
            id: "1",
            question: "What is you name",
            inputMode: "text",
            placeholder: "Name",
            isValid: isValidText,
            validationError: "Please type Text",
          },
          {
            id: "2",
            question: "ajnfag",
            inputMode: "text",
            placeholder: "audfnodng",
          },
          {
            id: "3",
            question: "ajnfag",
            inputMode: "text",
            placeholder: "audfnodng",
          },
          {
            id: "4",
            question: "ajnfag",
            inputMode: "numeric",
            placeholder: "audfnodng",
            validationError: "Please type number",
          },
          {
            id: "5",
            question: "What is your Age?",
            inputMode: "text",
            placeholder: "Age",
          },
        ]}
        onSave={(data) => console.log(data)}
      />
    </SafeAreaView>
  );
}

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

The above example not uses all the props.

Last updated