Referral

Referral, These provide functionality to enable referral programs and sharing features in your application effortlessly.

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

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

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

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

Props of Referral Component

The Referral component accepts the following props

Props NameTypeRequireDetails

title

string

optional

Title for Modal

description

string

optional

Description for modal

buttonText

string

optional

share button text

mainViewStyle

ViewStyle

optional

Main View style

headerTextStyle

TextStyle

optional

Header Text style

descriptionTextStyle

TextStyle

optional

description text style

codeViewStyle

ViewStyle

optional

Input box view style

codeTextStyle

TextStyle

optional

input box text style

inviteButtonViewStyle

ViewStyle

optional

button view style

buttonTextStyle

TextStyle

optional

button text style

headingText

TextStyle

optional

Outter heading text style

detailText

TextStyle

optional

outter detail text style

middalView

ViewStyle

optional

MIddal view style

Example Usage

import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {Referral , QuestProvider} from "@questlabs/react-native-sdk";
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
     <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
       <Referral
         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