> 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/miscellaneous/banner.md).

# Banner

## Component Visuals

<figure><img src="/files/cjRhCT8PapkvppU43QNp" 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/b0e72cde8585477bb5ff6ef6a162c22e?sid=081b0c59-f0be-4a8a-8065-936145d7ba7e>" %}

In this video, you'll learn:

1. How to use the component.
2. Customization options for the Banner 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 `Banner` component accepts the following props

<table><thead><tr><th width="163">Prop Name</th><th width="149">Type</th><th width="127">Required</th><th>Details</th></tr></thead><tbody><tr><td>mainViewStyle</td><td>ViewStyle</td><td>optional</td><td>The BackGround View of the Banner.</td></tr><tr><td>imageStyle</td><td>ImageStyle</td><td>optional</td><td>The Image Style of the Banner.</td></tr><tr><td>dotViewStyle</td><td>ViewStyle</td><td>optional</td><td>The Dot View Style.</td></tr><tr><td>dotStyle</td><td>ViewStyle</td><td>optional</td><td>The Dot Style.</td></tr><tr><td>data</td><td>Data Item</td><td>required</td><td></td></tr></tbody></table>

```typescript
// Types
type DataItem = {
  id: number;
  image: string | any;
};
```

## Usage

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

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

```jsx
import { Banner } 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 from "react";
import { Banner } from "@questlabs/react-native-sdk";

export default function App() {
  return (
 <SafeAreaView style={styles.container}>
      <Banner
        imageStyle={{ width: 400, height: 200 }}
        data={[
          {
            id: "1",
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
          },
          {
            id: "2",
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
          },
          {
            id: "3",
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
          },
          {
            id: "4",
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
          },
          {
            id: "5",
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
          },
          {
            id: "6",
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
          },
        ]}
      />
    </SafeAreaView>
  );
}

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

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