# Badges

## Component Visuals

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F6tuPo2mDHevyPVp7CLi4%2FIn-App%20User%20Earned%20Badges.png?alt=media&#x26;token=6b570016-aa66-4b04-a520-d830e984268f" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

### Demo

{% embed url="<https://www.loom.com/share/ec1b77c1e5434971bbd3500f898d741e?sid=fa8cb09d-55cb-4f63-9887-f0542538011f>" %}

In this video, you'll learn:

1. How to use the component.
2. Customization options for the Badges component.

## Installation

To install the `Quest react-native-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 %}

***

## Props of Login Component

The `Badges`component accepts the following props

<table><thead><tr><th width="176">Prop Name</th><th width="144">Type</th><th width="128">Required </th><th>Details</th></tr></thead><tbody><tr><td>ImageSize</td><td>number</td><td>optional</td><td>The Main Image Size.</td></tr><tr><td>innerImageX</td><td>number</td><td>optional</td><td>The X of innerImage.</td></tr><tr><td>innerImageY</td><td>number</td><td>optional</td><td>The Y of InnerImage.</td></tr><tr><td>innerImageSize</td><td>number</td><td>optional</td><td>The Inner Image size.</td></tr><tr><td>innerImage</td><td>string  | any</td><td>optional</td><td>The inner Image.</td></tr><tr><td>lock</td><td>boolean</td><td>required</td><td>Ture or False.</td></tr></tbody></table>

## Usage

To integrate the Badges component into your React application, follow these steps

* **Import the Badges Component**: Import the Tutorial component from the `@questlabs/react--native-sdk` package.

```jsx
import { Badges } from "@questlabs/react-native-sdk";
```

## Example Usage

Here's an example of how to use the Banner component within your React Native application.

```
import {  SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {
  Badge,
} from "@questlabs/react-native-sdk/src/components";

export default function App() {

  return (
    <SafeAreaView style={styles.container}>
      <Badge
        lock={true}
        innerImage={require("./tickImage.png")}
        innerImageSize={30}
        innerImageX={38}
        innerImageY={28}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    marginTop: 40,
    justifyContent: "center",
  },
});
```

{% hint style="info" %}
The above example not uses all the props.
{% endhint %}