# Spotlight Searc

## 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`, `apiSecret`, `entityId` and `authenticationToken.`

### Component Usage

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

* **Import useSearchBar Hook:** Import the `useSearchBar` component from the `@questlabs/react-sdk` package.
* **Import the SearchBar Component**: Import the `QuestList` component from the `@questlabs/react-sdk` package.
* **Pass the Required Props**:  Pass the required props to the `useSearchBar`.  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. 

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

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

## Props of SearchBar Component

The SearchBar component accepts the following props

<table><thead><tr><th width="144">Props</th><th width="136">Type</th><th width="129">Require</th><th>Details</th></tr></thead><tbody><tr><td>actions</td><td>ICriteria[]</td><td>Require</td><td>In offline user need to provide the require filed data.</td></tr><tr><td>loading</td><td>boolean</td><td>optional</td><td>don't use in offline mode.</td></tr><tr><td>onError</td><td>Function</td><td>optional</td><td>For Showing the Error.</td></tr><tr><td>visible</td><td>boolean</td><td>Require</td><td>To show the component as modal</td></tr><tr><td>setVisible</td><td>Function</td><td>Require</td><td>Create a fucntion for close comopnent</td></tr><tr><td>styleConfig</td><td>styleConfig</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 Props

```typescript
styleConfig {
  Form?: ViewStyle;
  Topbar?: ViewStyle;
  Heading?: TextStyle;
  Description?: TextStyle;
  ListCard?:ViewStyle;
  Footer?: {
    FooterStyle?: ViewStyle;
    FooterText?: TextStyle;
    FooterIcon?: TextStyle;
  };
}
```

### 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"  >
        
        <DemoComponent />
        
        </QuestProvider>
   
    </SafeAreaView>
  );
}
```

**DemoComponent.tsx**

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

  const searchBar= useSearchBar({
    questId: "Your-Quest_ID" ,
    questUserId: "Your-user-id",
    questToken: "Your-Token-id" 
    });
  return (
    <>
      <TouchableOpacity style={{ padding: 10, backgroundColor: "red" }} onPress={() => setOpen(true)}>
        <Text>Open</Text>
      </TouchableOpacity>
      <SearchBar
        actions={searchBar.actions}
        visible={open}
        loading={searchBar.loading}
        setVisible={() => setOpen(false)}
      // styleConfig={{
      //  Description:{color:"red"},
      //  Footer:{
      //   FooterIcon:{color:"red"}
      //  },
      //  Form:{backgroundColor:"lightgray"},
      //  Heading:{color:"yellow"},
      //  ListCard:{backgroundColor:"blue",margin:5,borderRadius:10},
      //  Topbar:{backgroundColor:"orange"}
      // }}
      />
    </>
  );
};
export default DemoComponent;
```

## Demo