> 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/gamification/challenges-component.md).

# Challenges Component

## Components Visuals 

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

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

{% tab title="Visual 1" %}

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

{% tab title="Visual 2" %}

<figure><img src="/files/dk7mX7jMGm3kz5b1Vcin" 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 `useChallenges` component into your React native application, follow these steps.

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

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

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

## Props of Challenges Component

The Challenges component accepts the following props

<table><thead><tr><th width="157">Props Name</th><th width="154">Type</th><th width="103">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>template</td><td>"basic" | "detail"</td><td>Optional</td><td>For change the template (template2)</td></tr><tr><td>title</td><td>string</td><td>Optional</td><td>Title for list.</td></tr><tr><td>header</td><td>string</td><td>Optional</td><td>Header text for component.</td></tr></tbody></table>

### Styles Props

<table><thead><tr><th width="232">Props Name</th><th width="128">Type</th><th width="115">Require </th><th>Details</th></tr></thead><tbody><tr><td>mainModalContainer</td><td>ViewStyle</td><td>Optional</td><td>Style for outter modal style</td></tr><tr><td>mainViewStyle</td><td>ViewStyle</td><td>Optional</td><td>Main View Styles</td></tr><tr><td>headerTextStyle</td><td>TextStyle</td><td>Optional</td><td>Header Text Style</td></tr><tr><td>iconBackgroundView</td><td>ViewStyle</td><td>Optional</td><td>Icon Background View</td></tr><tr><td>questionBackgroundViewStyle</td><td>ViewStyle</td><td>Optional</td><td>Question Background View Style</td></tr><tr><td>questionHeaderTextStyle</td><td>TextStyle</td><td>Optional</td><td>Question header 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><tr><td>progressBarTextStyle</td><td>TextStyle</td><td>Optional</td><td>Progress bar text style</td></tr><tr><td>progressBar</td><td>ViewStyle</td><td>Optional</td><td>Progress bar outter bar stlye</td></tr><tr><td>progressBarInnerStyle</td><td>ViewStyle</td><td>Optional</td><td>Progress bar inner style</td></tr><tr><td>searchInput</td><td>ViewStyle</td><td>Optional</td><td>Search input view stlye</td></tr><tr><td>listItemView</td><td>ViewStyle</td><td>Optional</td><td>List item view style</td></tr><tr><td>listItemTitle</td><td>TextStyle</td><td>Optional</td><td>list item title text style</td></tr><tr><td>listItemDescription</td><td>TextStyle</td><td>Optional</td><td>List item description style</td></tr><tr><td>imageView</td><td>ViewStyle</td><td>Optional</td><td>Image view style</td></tr><tr><td>itemTitle</td><td>TextStyle</td><td>Optional</td><td>Item title text style</td></tr></tbody></table>

### 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 {chellenges,useChallenges} from "@questlabs/react-native-sdk";
const DemoComponent = () => {
  // const chellenges= useChallenges({
  //   questId: "Your-Quest_ID" ,
  //   userId:"5235trfet365try67ywry5"
  //   })

  const chellenges= useChallenges({
    questId: "Your-Quest_ID" ,
    questUserId: "Your-user-id",
    questToken: "Your-Token-id" 
    });
  return (
    <>
      <Challenges
        actions={chellenges.actions}
        // actions={[
        //   {
        //     actionId: "123",
        //     completed: false,
        //     isLocked: false,
        //     metricCount: "23",
        //     progressData: 12,
        //     progressPercent: 10,
        //     title: "first",
        //   },

        //   {
        //     actionId: "456",
        //     completed: false,
        //     isLocked: true,
        //     metricCount: "23",
        //     progressData: 12,
        //     progressPercent: 40,
        //     title: "first",
        //   },

        //   {
        //     actionId: "532",
        //     completed: false,
        //     isLocked: true,
        //     metricCount: "23",
        //     progressData: 12,
        //     progressPercent: 80,
        //     title: "first",
        //   },

        //   {
        //     actionId: "342",
        //     completed: false,
        //     isLocked: true,
        //     metricCount: "23",
        //     progressData: 12,
        //     progressPercent: 100,
        //     title: "first",
        //   },
        // ]}


        title="my list"
        header="Somting"
        
        // loading={chellenges.loading}
        template="basic"
      />
    </>
  );
};
export default DemoComponent;
```

## Demo

{% embed url="<https://www.loom.com/share/4ef73f2a0527487fa2de72da5949837b?sid=c3c1f5a0-7cd2-44a8-a9ed-0b7ab4ccbc07>" %}