Challenges Component
Last updated
Last updated
To unlock early access to the component Get Access
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.
Import the QuestProvider Component: Import the QuestProvider
component from the @questlabs/react-sdk
package.
Pass the Required Props: Pass the required props to the QuestProvider
. The required props are apiKey
, entityId,
authenticationToken
and fontFamily.
To load external fonts, please refer this doc to setup expo-font on your expo app.
To integrate the useChallenges
component into your React native application, follow these steps.
Import useQuestList Hook: Import the useChallenges
component from the @questlabs/react-sdk
package.
Import the Challenges Component: Import the Challenges
component from the @questlabs/react-sdk
package.
Pass the Required Props: Pass the required props to the useChallenges
. The required props are questId
, questUserId
, and questToken
or if user don't have quest User id then they can pass own userId to get questUserId and Token.
Don't not use QuestProvider and useChallenges Hook in same file
The Challenges component accepts the following props
App.js
DemoComponent.tsx
Props Name | Type | Require | Details |
---|---|---|---|
Props Name | Type | Require | Details |
---|---|---|---|
actions
ICriteria[]
Require
in offline user need to provide the require filed data.
loading
boolean
Optional
don't use in offline mode.
template
"basic" | "detail"
Optional
For change the template (template2)
title
string
Optional
Title for list.
header
string
Optional
Header text for component.
mainModalContainer
ViewStyle
Optional
Style for outter modal style
mainViewStyle
ViewStyle
Optional
Main View Styles
headerTextStyle
TextStyle
Optional
Header Text Style
iconBackgroundView
ViewStyle
Optional
Icon Background View
questionBackgroundViewStyle
ViewStyle
Optional
Question Background View Style
questionHeaderTextStyle
TextStyle
Optional
Question header text style
footerViewStyle
ViewStyle
Optional
Footer view style
footerTextStyle
TextStyle
Optional
Footer Text Style
progressBarTextStyle
TextStyle
Optional
Progress bar text style
progressBar
ViewStyle
Optional
Progress bar outter bar stlye
progressBarInnerStyle
ViewStyle
Optional
Progress bar inner style
searchInput
ViewStyle
Optional
Search input view stlye
listItemView
ViewStyle
Optional
List item view style
listItemTitle
TextStyle
Optional
list item title text style
listItemDescription
TextStyle
Optional
List item description style
imageView
ViewStyle
Optional
Image view style
itemTitle
TextStyle
Optional
Item title text style