Cross-Selling

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

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

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

import { QuestProvider,CrossSelling } 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 CrossSelling component is discount .

Props of CrossSelling Component

The CrossSelling component accepts the following props

Props NameTypeRequireDetails

discount

number

Require

Discount number

endDate

string | number | Date

optional

Provide the Date "Y-M-D"

handleSubmit

Function (email?: string)

optional

Create the function for submit

handleClose

Function

optional

Create the function for on Close

showEmailField

boolean

optional

Want ot show email

mainViewStyle

ViewStyle

optional

Main View style

footerViewStyle

ViewStyle

optional

Footer View Style

footerTextStyle

TextStyle

optional

Footer text Style

discountTextStyle

TextStyle

optional

Discount Text Style

discountDescriptionTextStyle

TextStyle

optional

Discount description text style

buttonViewStyle

ViewStyle

optional

Submit button view style

buttonTextStyle

TextStyle

optional

Submit button Text style

headerTextStyle

TextStyle

optional

Header Text style

descriptionTextStyle

TextStyle

optional

description Text style

inputLabelTextStyle

TextStyle

optional

Input label text style

inputTextStyle

TextStyle

optional

input text style

GohomeViewStyle

ViewStyle

optional

Go home view style

GohomeTextStyle

TextStyle

optional

Go home text style

Example Usage

import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {CrossSelling, QuestProvider} from "@questlabs/react-native-sdk";
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
     <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
        <CrossSelling
         discount={50}
         endDate={"2024-2-13"}
         showEmailField={true}
         handleClose={()=>console.log("close")}
         handleSubmit={(Email)=> console.log(Email)}
         />
    
     </QuestProvider>
    
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "lightgray",
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
});

Demo

Last updated