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

# Tutorial

## Component Visuals

<figure><img src="/files/DWTVrOcTFBjPhzikKMmv" 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/fd20d816105044819332ddff7ef628a0?sid=501117f2-52d6-4393-8e39-f32717085ac9>" %}

In this video, you'll learn:

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

## 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 %}

***

## Props of Login Component

The `Tutorial` component accepts the following props

<table><thead><tr><th width="253">Prop Name</th><th width="134">Type</th><th width="99">Required</th><th>Details</th></tr></thead><tbody><tr><td>data</td><td>TutorialData</td><td>required</td><td>The Tutorial Data.</td></tr><tr><td>heading</td><td>string</td><td>required</td><td>The Heading of the Screen.</td></tr><tr><td>description</td><td>string</td><td>required</td><td>The Description of the Screen.</td></tr><tr><td>mainStyle</td><td>ViewStyle</td><td>optional</td><td>The Background View Style.</td></tr><tr><td>outerCircleCompleteStyle</td><td>ViewStyle</td><td>optional</td><td>The Complete component outer Circle Style.</td></tr><tr><td>taskViewCompleteStyle</td><td>ViewStyle</td><td>optional</td><td>The Complete component View Style.</td></tr><tr><td>lableIconStyle</td><td>ImageStyle</td><td>optional</td><td>The Label style.</td></tr><tr><td>labelTextStyle</td><td>TextStyle</td><td>optional</td><td>The Label text Style.</td></tr><tr><td>labelViewStyle</td><td>ViewStyle</td><td>optional</td><td>The Label View Style.</td></tr><tr><td>completeTextStyle</td><td>TextStyle</td><td>optional</td><td>The complete, pending, lock Text Style.</td></tr><tr><td>completeViewStyle</td><td>ViewStyle</td><td>optional</td><td>The complete, pending, lock view Style.</td></tr><tr><td>taskTitleTextStyle</td><td>TextStyle</td><td>optional</td><td>The task title text style.</td></tr><tr><td>taskHeaderStyle</td><td>ViewStyle</td><td>optional</td><td>The task header view style.</td></tr><tr><td>taskViewStyle</td><td>ViewStyle</td><td>optional</td><td>The task incomplete View Style.</td></tr><tr><td>innerCircleCompletedStyle</td><td>ViewStyle</td><td>optional</td><td>The inner Circle Completed View Style.</td></tr><tr><td>innerCircleStyle</td><td>ViewStyle</td><td>optional</td><td>The inner Circle in Complete View Style</td></tr><tr><td>outerCircleStyle</td><td>ViewStyle</td><td>optional</td><td>The outer Circle in Complete View Style.</td></tr><tr><td>modelViewStyle</td><td>ViewStyle</td><td>optional</td><td>The model View Style.</td></tr><tr><td>descriptionTextStyle</td><td>TextStyle</td><td>optional</td><td>The description Text Style.</td></tr><tr><td>descriptionViewStyle</td><td>ViewStyle</td><td>optional</td><td>The description View Style.</td></tr><tr><td>headerTextStyle</td><td>TextStyle</td><td>optional</td><td>The header Text Style.</td></tr><tr><td>headerViewStyle</td><td>ViewStyle</td><td>optional</td><td>The header View Style.</td></tr></tbody></table>

```typescript
// Types
type TutorialData = {
    title:string;
    completed: boolean;
    locked: boolean;
    inProgress: boolean;
    labels: Label[];
}
```

## Usage

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

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

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

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Tutorial
        heading="Connection Preferences"
        description="Defining Your Desired Communication and Call to Action"
        mainStyle={{ backgroundColor: "red" }}
        data={[
          {
            title: "Welcome ",
            completed: true,
            labels: [
              { text: "Publish your first post", completed: false },
              {
                text: "Stream your first live audio",
                completed: false,
                onPress: () => console.log("click"),
              },
              { text: "Host your first conversation", completed: false },
            ],
          },

          {
            title: "Lets start at the top",
            inProgress: true,
            labels: [
              { text: "Explore the Artist Dashboard", completed: false },
              {
                text: "Assign a title to your broadcast",
                completed: false,
                onPress: () => console.log("click"),
              },
              {
                text: "Add tags to a Conversation or Broadcast",
                completed: false,
              },
            ],
          },
          {
            title: "Build your community ",
            locked: true,
            labels: [
              { text: "Follow 5 artists", completed: false },
              {
                text: "Gain 5 followers",
                completed: false,
                onPress: () => console.log("click"),
              },
              { text: "Host your first conversation", completed: false },
              {
                text: "Host your first broadcast",
                completed: false,
                onPress: () => console.log("click"),
              },
            ],
          },

          {
            title: "Keep it going ",
            completed: false,
            labels: [
              { text: "Reach 50 Subscribers", completed: false },
              {
                text: "Stream for a total of 8 hours",
                completed: true,
                onPress: () => console.log("click"),
              },
              { text: "Post 20 pieces of content", completed: false },
              {
                text: "Post or Stream on 7 different days",
                completed: true,
                onPress: () => console.log("click"),
              },
            ],
          },
          {
            title: "Get even closer ",
            completed: false,
            labels: [
              { text: "Recieve 50 comments on posts", completed: false },
              {
                text: "Reach 50 Subscribers",
                completed: true,
                onPress: () => console.log("click"),
              },
              {
                text: "Get 5 users speaking in a Conversation",
                completed: false,
              },
              {
                text: "Recieve 100 messages in a Broadcast",
                completed: true,
                onPress: () => console.log("click"),
              },
            ],
          },
        ]}
      />
    </SafeAreaView>
   
  );
}

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

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