Onboarding Component

OnBoarding component is a versatile React Native component designed for creating interactive onboarding experiences. It allows you to guide users through a series of screens, collect their responses.

Components Visuals

To unlock early access to the component Get Access

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.

Usage

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

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

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

import { QuestProvider,Onboarding } 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 Onboarding component are userId, questId, token, sections.

Props of Onboarding Component

The Onboarding component accepts the following props

Props NameTypeRequireDetails

template

"multipage" | "single" | "oneQuestion";

optional

What kind of template you need.

multipleChoice

"checkbox" | "fill";

optional

What kind of multichoice you need.

onCross

Function

optional

create the function for onCross.

style

styles

optional

onSuccess

Function

optional

Create the function for onSuccess.

onError

Function

optional

Create the function for onError.

Styles Props

The Onboarding component style accepts the following props

Props NameTypeRequireDetails

mainView

ViewStyle

optional

Main View Style

lineStyle

ViewStyle

optional

Section Line Style

sectionText

TextStyle

optional

Section Text Style

headerText

TextStyle

optional

Header Text Style

description

TextStyle

optional

description Text Style

inputHeaderText

TextStyle

optional

Input header text style.

getStartButtonViewStyle

ViewStyle

optional

submit button view style

previousButtonViewStyle

ViewStyle

optional

back button view style

footerView

ViewStyle

optional

footer view style

Example Usage

import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {Onboarding,QuestProvider} 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"
        > 
       <Onboarding
          style={{mainView:{height:"auto"}}}
          template="oneQuestion"
          onCross={()=>console.log("out")}
          multipleChoice="checkbox"
          questId="Your-Quest_ID"  
          userId="Your-user-id"
          token="Your-Token-id"
          //For tempalte oneQustion or singal user have to use this kind of sections
          sections={[
              {
                criteriaNames: [
                  "First name",
                  "Last name",
                  "Email",
                  "Gender",
                  "Colors",
                  "Add your address",
                  "What is your company name?",
                  "Your hobbies?",
                  "What is your role in the company?",
                ],
              },
             
            ]}
            
          //only for Multipage you need to use this kind of sections
          // sections={[
          //   {
          //     name: "details",
          //     criteriaNames: [
          //       "First name",
          //       "Last name",
          //       "Add your address",
          //       "Email",
          //       "Gender",
          //       "Colors",
          //     ],
          //   },
          //   {
          //     name: "Company",

          //     criteriaNames: [
          //       "First name",
          //       "Last name",
          //       "Email",
          //       "Gender",
          //       "Colors",

          //     ],
          //   },
          //   {
          //     name: "Connection",
          //     criteriaNames: [
          //       "First name",
          //       "Last name",
          //       "Email",
          //       "Gender",
          //       "Colors",

          //     ],
          //   },
          // ]}
        
        />
     </QuestProvider>
    
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    justifyContent: "center",
    alignItems: "center",
  },
});

Demo

Last updated