> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/react-native-sdk-components/expansion/cross-selling.md).

# Cross-Selling

## Components Visuals 

{% tabs %}
{% tab title="Overview" %}

<figure><img src="/files/yu4xomXYxbflD9iFZxsd" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="/files/pYwNyT3TZMNGoMScMBhu" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="/files/xoqPffAv0VGjq9bfZe90" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

## 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:

```jsx
npm install @questlabs/react-native-sdk
```

> This command will download and install the package and its dependencies into your project.

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

## Usage

### Root Component

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

```jsx
import { QuestProvider } from '@questlabs/react-sdk';
```

* **Pass the Required Props**:  Pass the required props to the `QuestProvider`. The required props are `apiKey`,  `entityId,` `authenticationToken` and `fontFamily.`

{% hint style="info" %}
To load external fonts, please refer this doc to setup [expo-font](https://docs.expo.dev/versions/latest/sdk/font/) on your expo app.
{% endhint %}

### Component Usage

To integrate the `CrossSelling` component into your React native application, follow these steps.

* **Import useCrossSelling Hook:** Import the **useCrossSelling** component from the `@questlabs/react-sdk` package.
* **Import the CrossSelling Component**: Import the `CrossSelling` component from the `@questlabs/react-sdk` package.
* **Pass the Required Props**:  Pass the required props to the `useCrossSelling` .  The required props are `questId`, `questUserId`, and `userToken` or if user don't have quest User id then they  can pass own userId to get questUserId and Token.&#x20;

```typescript
import { useCrossSelling, CrossSelling } from "@questlabs/react-native-sdk";
```

{% hint style="info" %}
Don't not use QuestProvider and useOnboarding Hook in same file.
{% endhint %}

## Props of CrossSelling Component

The CrossSelling component accepts the following props

<table><thead><tr><th width="243">Props Name</th><th width="157">Type</th><th width="104">Require</th><th>Details</th></tr></thead><tbody><tr><td>heading</td><td>string</td><td>Optional</td><td>Component heading</td></tr><tr><td>expiryDate</td><td>string | number | Date</td><td>Require</td><td>Provide the Date "Y-M-D"</td></tr><tr><td>claimRewardHandler</td><td>Function (email?: string)</td><td>optional</td><td>Create the function for submit</td></tr><tr><td>onClose</td><td>Function</td><td>optional</td><td>Create the function for on Close</td></tr><tr><td>isEmail</td><td>boolean</td><td>optional</td><td>Want ot show email </td></tr><tr><td>showFooter</td><td>boolean</td><td>optional</td><td>Want to show footer.</td></tr><tr><td>description</td><td>string</td><td>optional</td><td>Modal Description Text.</td></tr><tr><td>shareButtonText</td><td>string</td><td>optional</td><td>Button Text.</td></tr><tr><td>primaryHeading</td><td>string</td><td>optional</td><td>Component Header Text</td></tr><tr><td>primaryDescription</td><td>string</td><td>optional</td><td>Component Description.</td></tr><tr><td>styleConfig</td><td>Object</td><td>optional</td><td>An object containing Styling properties for styling various components within the get started process, including form, topbar, headings, descriptions, and buttons.</td></tr></tbody></table>

### Style Prop

```typescript
styleConfig {
  BackgroundWrapper?: ViewStyle;
  Description?: TextStyle;
  Footer?: {
    FooterStyle?: ViewStyle;
    FooterText?: TextStyle;
    FooterIcon?: TextStyle;
  };
  Form?: ViewStyle;
  Heading?: TextStyle;
  PrimaryButton?: ViewStyle;
  SecondaryButton?: ViewStyle;
  Timer?: {
    backgroundColor?: string;
    primaryColor?: string;
    secondaryColor?: string;
  };
}

```

## Example Usage

**App.js**

```typescript
import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
import React, { useState } from "react";
import { QuestProvider } from "@questlabs/react-native-sdk";
import DemoComponent from "./DemoComponent";

export default function App() {
return (
    <SafeAreaView style={styles.container}>
      <StatusBar />
      <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
        entityId="Your-Api-entityId"
        authenticationToken="Your-authentication-token"  
         fontFamily= "Your-Font-FamFamily"
        >
        
        <DemoComponent />
        
        </QuestProvider>
   
    </SafeAreaView>
  );
}
```

DemoComponent.tsx

```typescript
import React from "react";
import { CrossSelling, useCrossSelling} from "@questlabs/react-native-sdk";
const DemoComponent = () => {
  //const crossSelling = useCrossSelling({
  //   questId: "Your-Quest_ID" ,
  //   userId:"5235trfet365try67ywry5"
  //   })

  const crossSelling = useCrossSelling({
    questId: "Your-Quest_ID" ,
    questUserId: "Your-user-id",
    questToken: "Your-Token-id" 
    });
  return (
    <>
     <CrossSelling
        claimRewardHandler={(email) => console.log(email)}
        heading={"50% off on limited products"}
        description={"bla bla blka bal"}
        primaryDescription={"hello thasfgaib"}
        primaryHeading={"mast cize hai"}
        expiryDate={"2024-07-17"}
        // expiryDate={expiryDate} 
        isEmail={true}
        showFooter={true}
        styleConfig={{
          BackgroundWrapper: { backgroundColor: "red" },
          Description: { color: "yellow" },
          Footer: {
            FooterIcon: { color: "red" },
            FooterStyle: { backgroundColor: "orange" },
            FooterText: { color: "red" }
          },
          Form: {
            backgroundColor: "gray"
          },
          Heading: { color: "blue" },
          PrimaryButton: { backgroundColor: "red" },
          SecondaryButton: { backgroundColor: "yellow" },
          Timer: {
            backgroundColor: "white",
            primaryColor: "red",
            secondaryColor: "blue"
          }
        }}

      />
    </>
  );
};
export default DemoComponent;
```

## Demo

{% embed url="<https://www.loom.com/share/e3362157d6c841c596cc3fd64d9a4f41?sid=66dbebe2-07be-4ca9-a012-a0c5344001a2>" %}