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.
Last updated
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.
Last updated
To unlock early access to the component Get Access
In this video, you'll learn:
How to use the component.
Customization options for the Tutorial component.
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:
This command will download and install the package and its dependencies into your project.
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
The Tutorial
component accepts the following props
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.
Here's an example of how to use the Daily Visit Streak component within your React Native application.
The above example not uses all the props.
Prop Name | Type | Required | Details |
---|---|---|---|
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.