Tutorial
The Tutorials Screen is a component designed to provide users guides. It is a valuable resource for educating users about how to use the app effectively.
Component Visuals

In this video, you'll learn:
How to use the component.
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:
npm install @questlabs/react-native-sdk
This command will download and install the package and its dependencies into your project.
Props of Login Component
The Tutorial
component accepts the following props
data
TutorialData
required
The Tutorial Data.
heading
string
required
The Heading of the Screen.
description
string
required
The Description of the Screen.
mainStyle
ViewStyle
optional
The Background View Style.
outerCircleCompleteStyle
ViewStyle
optional
The Complete component outer Circle Style.
taskViewCompleteStyle
ViewStyle
optional
The Complete component View Style.
lableIconStyle
ImageStyle
optional
The Label style.
labelTextStyle
TextStyle
optional
The Label text Style.
labelViewStyle
ViewStyle
optional
The Label View Style.
completeTextStyle
TextStyle
optional
The complete, pending, lock Text Style.
completeViewStyle
ViewStyle
optional
The complete, pending, lock view Style.
taskTitleTextStyle
TextStyle
optional
The task title text style.
taskHeaderStyle
ViewStyle
optional
The task header view style.
taskViewStyle
ViewStyle
optional
The task incomplete View Style.
innerCircleCompletedStyle
ViewStyle
optional
The inner Circle Completed View Style.
innerCircleStyle
ViewStyle
optional
The inner Circle in Complete View Style
outerCircleStyle
ViewStyle
optional
The outer Circle in Complete View Style.
modelViewStyle
ViewStyle
optional
The model View Style.
descriptionTextStyle
TextStyle
optional
The description Text Style.
descriptionViewStyle
ViewStyle
optional
The description View Style.
headerTextStyle
TextStyle
optional
The header Text Style.
headerViewStyle
ViewStyle
optional
The header View Style.
// 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.
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",
},
});
Last updated