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

# Carousel

## Component Visuals

<figure><img src="/files/Cd6hrXW1KIxMC3rR7O6k" 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 %}

{% embed url="<https://www.loom.com/share/50839181fab64b5e9ad345f38f09c8d8?sid=a4ff15e9-a4ad-4442-aa10-3cca41b1862d>" %}

In this video, you'll learn:

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

<table><thead><tr><th width="185">Prop Name</th><th width="127">Type</th><th width="102">Required</th><th>Details</th></tr></thead><tbody><tr><td>data</td><td>ItemType</td><td>requried</td><td>The Data for items for the carousel </td></tr><tr><td>mainView</td><td>ViewStyle</td><td>optional</td><td>The BackGround View of the Carousel.</td></tr><tr><td>dotStyle</td><td>ViewStyle</td><td>optional</td><td>The dot Style of the Carousel.</td></tr><tr><td>dotViewStyle</td><td>ViewStyle</td><td>optional</td><td>The dot View Style.</td></tr><tr><td>detailsTextStyle</td><td>TextStyle</td><td>optional</td><td>The details Text Style of the Component.</td></tr><tr><td>detailViewStyle</td><td>ViewStyle</td><td>optional</td><td>The details Text View Style of the Component.</td></tr><tr><td>headerTextStyle</td><td>TextStyle</td><td>optional</td><td>The header Text Style of the Component.</td></tr><tr><td>headerViewStyle</td><td>ViewStyle</td><td>optional</td><td>The header View Style of the Component.</td></tr><tr><td>imageStyle</td><td>imageStyle</td><td>optional</td><td>The Image Style of the Component.</td></tr><tr><td>imageViewStyle</td><td>ViewStyle</td><td>optional</td><td>The Image View Style of the Component.</td></tr><tr><td>componentViewStyle</td><td>ViewStyle</td><td>optional</td><td>The Carousel Component Style.</td></tr><tr><td>innerViewStyle</td><td>ViewStyle</td><td>optional</td><td>The Back Ground  style Of the Carousel Component.</td></tr></tbody></table>

```typescript
// Types
type ItemType = {
  id: number;
  image: string | any;
  title: string;
  details: string;
  onPress?: () => void;
};
```

## Usage

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

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

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

## Example Usage

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

```
import { SafeAreaView, StyleSheet } from "react-native";
import React from "react";
import { Carousel} from "@questlabs/react-native-sdk";

export default function App() {
  return (
 <SafeAreaView style={styles.container}>
      <Carousel
        componentViewStyle={{ backgroundColor: "white", borderWidth: 1 }}
        data={[
          {
            id: 1,
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
            title: "number 1",
            details: "NUmber 1 ki details",
          },
          {
            id: 2,
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
            title: "number 2",
            details: "NUmber 2 ki details",
          },
          {
            id: 3,
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
            title: "number 3",
            details: "NUmber 3 ki details",
          },
          {
            id: 4,
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
            title: "number 4",
            details: "NUmber 4 ki details",
          },
          {
            id: 5,
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
            title: "number 5",
            details: "NUmber 5 ki details",
          },
          {
            id: 6,
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
            title: "number 6",
            details: "NUmber 6 ki details",
          },
          {
            id: 7,
            image:
              "https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_1280.jpg",
            title: "number 7",
            details: "NUmber 7 ki details",
          },
        ]}
      />
    </SafeAreaView>
  
  );
}

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

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