# Embedded Onboarding ToolTip

{% tabs %}
{% tab title="First Tab" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FqNcFMNaAONM2TiX6BwHr%2FWalkthrough%20tmp1.png?alt=media&#x26;token=155a22b8-4e41-43f1-9269-18458a44def5" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Second Tab" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2Ff56fUS1UStp9T87pQT0Z%2FWalkthrough%20tmp2.png?alt=media&#x26;token=a25c06fb-3f1a-4172-b4d6-161dcacb84fe" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

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

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

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

## Props of EmbeddedTips Component

The EmbeddedTips component accepts the following props.

<table><thead><tr><th width="234">Props Name</th><th width="130">Type</th><th width="141">Require</th><th>Details</th></tr></thead><tbody><tr><td>children</td><td>ReactNode</td><td>Require</td><td>Create your Button etc.</td></tr><tr><td>headerTitle</td><td>string</td><td>optional</td><td>Give the header text</td></tr><tr><td>description</td><td>string</td><td>optional</td><td>Give the description Text</td></tr><tr><td>primaryButtonText</td><td>string</td><td>optional</td><td>Give primary button Text</td></tr><tr><td>secondaryButtonText</td><td>string</td><td>optional</td><td>Give secondary Button Text</td></tr><tr><td>placement</td><td>"top" , "bottom"</td><td>Require</td><td>Give the placement .</td></tr><tr><td>visible</td><td>boolean</td><td>Require</td><td>Give the boolean value</td></tr><tr><td>setVisible</td><td>function</td><td>Require</td><td>Set The value</td></tr><tr><td>primaryButton</td><td>function</td><td>optional</td><td>Create the funtion for button</td></tr><tr><td>secondaryButton</td><td>function</td><td>optional</td><td>Create the funtion for button</td></tr><tr><td>mainViewStyle</td><td>ViewStyle</td><td>optional</td><td>Main View Styleing</td></tr><tr><td>logoViewStyle</td><td>ViewStyle</td><td>optional</td><td>Logo View Style</td></tr><tr><td>headerTextStyle</td><td>TextStyle</td><td>optional</td><td>Header Text Style</td></tr><tr><td>descriptionTextStyle</td><td>TextStyle</td><td>optional</td><td>Description text Style</td></tr><tr><td>primaryButtonViewStyle</td><td>ViewStyle</td><td>optional</td><td>Primary button view Style</td></tr><tr><td>primaryButtonStyle</td><td>TextStyle</td><td>optional</td><td>primary button text Style</td></tr><tr><td>secondaryButtonViewStyle</td><td>ViewStyle</td><td>optional</td><td>Secondary button view style</td></tr><tr><td>secondaryButtonStyle</td><td>TextStyle</td><td>optional</td><td>Secondary button text style</td></tr><tr><td>footerViewStyle</td><td>ViewStyle</td><td>optional</td><td>footer View Style</td></tr><tr><td>footerTextStyle</td><td>TextStyle</td><td>optional</td><td>footer Text Style</td></tr></tbody></table>

### Example Usage

```
import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {EmbeddedTips, QuestProvider} from "@questlabs/react-native-sdk";
export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <SafeAreaView style={styles.container}>
     <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
        entityId="Your-entityId"
        />
      <EmbeddedTips 
      primaryButton={() => console.log(111)}
          secondaryButton={() => console.log(222)}
          placement="bottom"
          style={{
            headerTextStyle: { color: "blue" },
          }}
          visible={open}
          setVisible={setOpen}
      >
      <Button title="Open Tooltip" onPress={() => setOpen(true)} />
      
      </EmbeddedTips>
     </QuestProvider>
    
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "lightgray",
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
});
```