Quiz component

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 Gamified component into your React native application, follow these steps

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

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

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

Props of Onboarding Component

The Onboarding component accepts the following props

Props NameTypeRequire Details

submitError

string

Optional

About Submit error.

mainModalContainer

ViewStyle

Optional

Main Modal View Style

mainViewStyle

ViewStyle

Optional

Main View Style

headerTextStyle

TextStyle

Optional

Header Text Style

iconBackgroundView

ViewStyle

Optional

Icon background Style

questionBackgroundViewStyle

ViewStyle

Optional

Question Background view style

questionHeaderTextStyle

TextStyle

Optional

Question header Text Style

questionTextStyle

TextStyle

Optional

question text style

optionsViewStyle

ViewStyle

Optional

option view style

optionTextStyle

TextStyle

Optional

option text style

buttonViewStyle

ViewStyle

Optional

button view style

cancelButtonViewStyle

ViewStyle

Optional

cancel button view style

nextButtonViewStyle

ViewStyle

Optional

next button view style

footerViewStyle

ViewStyle

Optional

footer view style

footerTextStyle

TextStyle

Optional

footer text style

successFooterViewStyle

ViewStyle

Optional

success footer view style

successFooterTextStyle

TextStyle

Optional

success footer text style

submitButtonViewStyle

ViewStyle

Optional

submit button view style

submitButtonTextStyle

TextStyle

Optional

submit button text style

successHeaderTextStyle

TextStyle

Optional

succes header text style

successDescriptionTextStyle

TextStyle

Optional

succes description text style

successModalViewStyle

ViewStyle

Optional

success modal view style

inputViewStyle

ViewStyle

Optional

input view style

Example Usage

import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {Gamified,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-Entity-id"
         >
       <Gamified
         entityId="Your-Api-entityId"
        userId="Your-usertId"
        token="Your-token"
        />
     </QuestProvider>
    
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "lightgray",
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
});

Demo

Last updated