Embedded Onboarding ToolTip

First Tab

Second Tab

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

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

Props of EmbeddedTips Component

The EmbeddedTips component accepts the following props.

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

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",
  },
});