# Daily Streak Component

## Components Visuals 

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

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FP0A4RRgDUe3mRK162eNL%2FStreak.png?alt=media&#x26;token=0fa59883-fc1d-4bb8-a1f2-65947c42db2b" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FsYYkO6A3YRoKbMZdr0Mh%2FGamification%20-%20Streaks%20temp1.png?alt=media&#x26;token=db04da77-b4a2-45d8-bae6-f92a42b2d675" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Viusal 2" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FCglLf7u3w7CbJYRIIQ12%2FGamification%20-%20Streaks%20temp2.png?alt=media&#x26;token=b6e8a2b2-65e2-440d-b817-77b68bf71056" alt=""><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 `useStreaks` component into your React native application, follow these steps.

* **Import useStreaks Hook:** Import the `useStreaks` component from the `@questlabs/react-sdk` package.
* **Import the Streak Component**: Import the `Streak` component from the `@questlabs/react-sdk` package.
* **Pass the Required Props**:  Pass the required props to the `useStreaks` .  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 { useStreaks, Streak } from "@questlabs/react-native-sdk";
```

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

## Props of Streak Component

The Streak component accepts the following props

<table><thead><tr><th width="200">Prop Name</th><th width="156">Type</th><th width="121">Required</th><th>Details</th></tr></thead><tbody><tr><td>counter </td><td>number</td><td>Required</td><td>The current count for the streak.</td></tr><tr><td>header </td><td>string</td><td>Required</td><td>Header for the streak component.</td></tr><tr><td>description</td><td>string</td><td>Required</td><td>Description for the streak component.</td></tr><tr><td><strong>pendingStreakImg</strong> </td><td>string</td><td>optional</td><td>Image URL for the pending streak state.</td></tr><tr><td><strong>filledStreakImg</strong> </td><td>string</td><td>optional</td><td>Image URL for the filled streak state.</td></tr><tr><td>icon</td><td>"gift" | "fire" | string | any</td><td>optional</td><td>for icon.</td></tr><tr><td>iconData </td><td>TItemData[]</td><td>Required</td><td>in offline/ online 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></tbody></table>

### Style Props

```typescript
styleConfig {
  IconBackground?: ViewStyle;
  IconColor?: TextStyle;
  Form?: ViewStyle;
  Count?: TextStyle;
  Heading?: TextStyle;
  Description?: TextStyle;
  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"  
         fontFamily= "Your-Font-FamFamily"
        >
        
        <DemoComponent />
        
        </QuestProvider>
   
    </SafeAreaView>
  );
}
```

DemoComponent.tsx

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

   const streakItems = useStreaks({
    questId: "Your-Quest_ID" ,
    questUserId: "Your-user-id",
    questToken: "Your-Token-id" 
    });
  return (
     <Streak
        icon={"gift"}
        counter={streakItems.count}
        loading={streakItems.loading}
        description="This is the description"
        header="This is the header"
        iconData={[
          { title: "Confident reader", range: 1 },
          { title: "Responsible reader", range: 20 },
          { title: "Serious learner", range: 40 },
          { title: "Absolute reader", range: 60 },
          { title: "Professional reader", range: 80 },
        ]}
        filledStreakImg=""
        pendingStreakImg=""
       /* styleConfig={{
          Count: { color: 'red', backgroundColor: "yellow" },
          Description: { backgroundColor: "blue", color: "white" },
          Form: { backgroundColor: "orange" },
          Heading: { color: "white" },
          IconBackground: { backgroundColor: "yellow" },
          
        }} */
      />
  );
};
export default DemoComponent;
```

## Demo

{% embed url="<https://www.loom.com/share/80d1ce8ac2dc4c4587db2f774bc9cd07?sid=1731f8f6-1593-407e-9f7a-5cdc9f67e1dc>" %}