Members
Methods
# setCourseContentTitle(CourseContentTitle)
You can use this hook to customize the "Course Content" title and the "Expand All" function.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseContentTitle |
React.ComponentType.<CourseContentTitleProps> |
Example
...
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseContentTitle(({
global,
labels,
isCollapsable,
expanded,
hideAll,
expand,
t
}) => (
<View
style={[
global.row,
{flex: 1, justifyContent: "space-between", marginBottom: 9}
]}
>
<Text style={[global.courseRoundBoxTitleAbove, {marginBottom: 0}]}>
{t("course:contentTitle", {label: labels.course})}
</Text>
{isCollapsable && (
<TouchableWithoutFeedback
hitSlop={{top: 20, right: 20, bottom: 20, left: 20}}
onPress={() => {
if (expanded) {
hideAll();
} else {
expand();
}
}}
>
<Text style={[global.link, {fontSize: 17}]}>
{expanded ? t("courses:collapseAll") : t("courses:expandAll")}
</Text>
</TouchableWithoutFeedback>
)}
</View>
));
}# setCourseContentTitle(CourseContentTitle)
You can use this hook to customize the "Course Content" title and the "Expand All" function.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseContentTitle |
React.ComponentType.<CourseContentTitleProps> |
Example
...
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseContentTitle(({
global,
labels,
isCollapsable,
expanded,
hideAll,
expand,
t
}) => (
<View
style={[
global.row,
{flex: 1, justifyContent: "space-between", marginBottom: 9}
]}
>
<Text style={[global.courseRoundBoxTitleAbove, {marginBottom: 0}]}>
{t("course:contentTitle", {label: labels.course})}
</Text>
{isCollapsable && (
<TouchableWithoutFeedback
hitSlop={{top: 20, right: 20, bottom: 20, left: 20}}
onPress={() => {
if (expanded) {
hideAll();
} else {
expand();
}
}}
>
<Text style={[global.link, {fontSize: 17}]}>
{expanded ? t("courses:collapseAll") : t("courses:expandAll")}
</Text>
</TouchableWithoutFeedback>
)}
</View>
));
}# setCourseDescriptionReadMoreComponent(CourseDescriptionReadMoreComponent)
You can use this hook to customize the "Read More" text that shows the course description in a modal when pressed.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseDescriptionReadMoreComponent |
React.ComponentType.<CourseDescriptionReadMoreComponentProps> |
Example
...
import AppTouchableWithoutFeedback from "@src/components/AppTouchableWithoutFeedback";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseDescriptionReadMoreComponent(({
courseVM,
openDescriptionModal,
global,
t
}) => {
if (courseVM.contentNative.length > 1) {
return <View style={{alignItems: "center"}}>
<AppTouchableWithoutFeedback
onPress={openDescriptionModal}
>
<Text
style={[
global.linkRegular,
{
paddingHorizontal: 20,
paddingVertical: 10
}
]}
>
{t("courses:readMore")}
</Text>
</AppTouchableWithoutFeedback>
</View>
}
return null
})
}# setCourseDescriptionReadMoreComponent(CourseDescriptionReadMoreComponent)
You can use this hook to customize the "Read More" text that shows the course description in a modal when pressed.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseDescriptionReadMoreComponent |
React.ComponentType.<CourseDescriptionReadMoreComponentProps> |
Example
...
import AppTouchableWithoutFeedback from "@src/components/AppTouchableWithoutFeedback";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseDescriptionReadMoreComponent(({
courseVM,
openDescriptionModal,
global,
t
}) => {
if (courseVM.contentNative.length > 1) {
return <View style={{alignItems: "center"}}>
<AppTouchableWithoutFeedback
onPress={openDescriptionModal}
>
<Text
style={[
global.linkRegular,
{
paddingHorizontal: 20,
paddingVertical: 10
}
]}
>
{t("courses:readMore")}
</Text>
</AppTouchableWithoutFeedback>
</View>
}
return null
})
}# setCourseDescriptionSectionTitle(CourseDescriptionSectionTitle)
You can use this hook to customize the component that displays the "Course Description" text.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseDescriptionSectionTitle |
React.ComponentType.<CourseDescriptionSectionTitleProps> |
Example
...
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseDescriptionSectionTitle(
({shouldRenderBlocks, courseVM, global, labels, t}) => {
if (shouldRenderBlocks || courseVM.content) {
return (
<Text style={[global.courseRoundBoxTitleAbove]}>
{t("course:descriptionTitle", {
label: labels.course
})}
</Text>
);
}
return null;
}
);
}# setCourseDescriptionSectionTitle(CourseDescriptionSectionTitle)
You can use this hook to customize the component that displays the "Course Description" text.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseDescriptionSectionTitle |
React.ComponentType.<CourseDescriptionSectionTitleProps> |
Example
...
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseDescriptionSectionTitle(
({shouldRenderBlocks, courseVM, global, labels, t}) => {
if (shouldRenderBlocks || courseVM.content) {
return (
<Text style={[global.courseRoundBoxTitleAbove]}>
{t("course:descriptionTitle", {
label: labels.course
})}
</Text>
);
}
return null;
}
);
}# setCourseHeaderDetails(CourseHeaderDetails)
You can use this hook to customize the Course Status component of the LearnDash course details if a course is not yet in progress. For example, you can use this to change the course's preview video, featured image or the "Course Includes" details.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseHeaderDetails |
React.ComponentType.<CourseHeaderDetailsProps> |
Example
import Icon from "@src/components/Icon";
import AppImageBackground from "@src/components/AppImageBackground";
import {CourseVideo} from "@src/components/Course/CourseStatus";
import AppAvatar from "@src/components/AppAvatar";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseHeaderDetails(props => {
const {
courseVM,
global,
labels,
colors,
t,
navigation,
shouldShowParticipants,
shouldShowImageBackground,
shouldShowVideo,
shouldShowCourseIncludesTitle,
shouldShowLessonsText,
shouldShowTopicsText,
shouldShowQuizzesText,
shouldShowCertificatesText,
lessonsText,
topicsText,
quizzesText,
enrolledText,
styles
} = props;
const size = 26;
return (
<>
<View style={styles.mediaContainer}>
{shouldShowImageBackground && (
<AppImageBackground
source={{uri: courseVM.featuredUrl}}
style={{width: "100%", height: 200}}
/>
)}
{shouldShowVideo && (
<CourseVideo
url={courseVM.videoUrl}
feature={courseVM.featuredUrl}
global={global}
colors={colors}
navigation={navigation}
/>
)}
</View>
<View style={styles.container}>
{shouldShowParticipants && (
<View style={{...global.row}}>
{courseVM.members
.map(x => x.member_rest?.avatar?.thumb || "")
.map((url, index) => (
<AppAvatar
key={url}
style={[
styles.avatar,
{
left: index === 0 ? 0 : -10 * index,
zIndex: index
}
]}
borderRadius={size / 2}
size={size}
source={{
uri: url
}}
/>
))}
<Text style={styles.enrolledText}>{enrolledText}</Text>
</View>
)}
{shouldShowCourseIncludesTitle && (
<Text style={styles.courseIncludesTitle}>
{t("course:includesTitle", {label: labels.course})}
</Text>
)}
{shouldShowLessonsText && (
<View style={{flexDirection: "row"}}>
<Icon
webIcon={"IconAndroidGroup"}
tintColor={colors.descLightTextColor}
icon={require("@src/assets/img/book.png")}
/>
<Text style={styles.courseIncludesText}>{lessonsText}</Text>
</View>
)}
{shouldShowTopicsText && (
<View style={{flexDirection: "row"}}>
<Icon
webIcon={"IconAndroidGroup"}
tintColor={colors.descLightTextColor}
icon={require("@src/assets/img/topic.png")}
/>
<Text style={styles.courseIncludesText}>{topicsText}</Text>
</View>
)}
{shouldShowQuizzesText && (
<View style={{flexDirection: "row"}}>
<Icon
webIcon={"IconAndroidGroup"}
tintColor={colors.descLightTextColor}
icon={require("@src/assets/img/quiz.png")}
/>
<Text style={styles.courseIncludesText}>{quizzesText}</Text>
</View>
)}
{shouldShowCertificatesText && (
<View style={{flexDirection: "row"}}>
<Icon
webIcon={"IconAndroidGroup"}
tintColor={colors.descLightTextColor}
icon={require("@src/assets/img/small-certificate.png")}
/>
<Text style={styles.courseIncludesText}>
{t("course:certificate", {label: labels.course})}
</Text>
</View>
)}
</View>
</>
);
});
}# setCourseHeaderDetails(CourseHeaderDetails)
You can use this hook to customize the Course Status component of the LearnDash course details if a course is not yet in progress. For example, you can use this to change the course's preview video, featured image or the "Course Includes" details.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseHeaderDetails |
React.ComponentType.<CourseHeaderDetailsProps> |
Example
import Icon from "@src/components/Icon";
import AppImageBackground from "@src/components/AppImageBackground";
import {CourseVideo} from "@src/components/Course/CourseStatus";
import AppAvatar from "@src/components/AppAvatar";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseHeaderDetails(props => {
const {
courseVM,
global,
labels,
colors,
t,
navigation,
shouldShowParticipants,
shouldShowImageBackground,
shouldShowVideo,
shouldShowCourseIncludesTitle,
shouldShowLessonsText,
shouldShowTopicsText,
shouldShowQuizzesText,
shouldShowCertificatesText,
lessonsText,
topicsText,
quizzesText,
enrolledText,
styles
} = props;
const size = 26;
return (
<>
<View style={styles.mediaContainer}>
{shouldShowImageBackground && (
<AppImageBackground
source={{uri: courseVM.featuredUrl}}
style={{width: "100%", height: 200}}
/>
)}
{shouldShowVideo && (
<CourseVideo
url={courseVM.videoUrl}
feature={courseVM.featuredUrl}
global={global}
colors={colors}
navigation={navigation}
/>
)}
</View>
<View style={styles.container}>
{shouldShowParticipants && (
<View style={{...global.row}}>
{courseVM.members
.map(x => x.member_rest?.avatar?.thumb || "")
.map((url, index) => (
<AppAvatar
key={url}
style={[
styles.avatar,
{
left: index === 0 ? 0 : -10 * index,
zIndex: index
}
]}
borderRadius={size / 2}
size={size}
source={{
uri: url
}}
/>
))}
<Text style={styles.enrolledText}>{enrolledText}</Text>
</View>
)}
{shouldShowCourseIncludesTitle && (
<Text style={styles.courseIncludesTitle}>
{t("course:includesTitle", {label: labels.course})}
</Text>
)}
{shouldShowLessonsText && (
<View style={{flexDirection: "row"}}>
<Icon
webIcon={"IconAndroidGroup"}
tintColor={colors.descLightTextColor}
icon={require("@src/assets/img/book.png")}
/>
<Text style={styles.courseIncludesText}>{lessonsText}</Text>
</View>
)}
{shouldShowTopicsText && (
<View style={{flexDirection: "row"}}>
<Icon
webIcon={"IconAndroidGroup"}
tintColor={colors.descLightTextColor}
icon={require("@src/assets/img/topic.png")}
/>
<Text style={styles.courseIncludesText}>{topicsText}</Text>
</View>
)}
{shouldShowQuizzesText && (
<View style={{flexDirection: "row"}}>
<Icon
webIcon={"IconAndroidGroup"}
tintColor={colors.descLightTextColor}
icon={require("@src/assets/img/quiz.png")}
/>
<Text style={styles.courseIncludesText}>{quizzesText}</Text>
</View>
)}
{shouldShowCertificatesText && (
<View style={{flexDirection: "row"}}>
<Icon
webIcon={"IconAndroidGroup"}
tintColor={colors.descLightTextColor}
icon={require("@src/assets/img/small-certificate.png")}
/>
<Text style={styles.courseIncludesText}>
{t("course:certificate", {label: labels.course})}
</Text>
</View>
)}
</View>
</>
);
});
}# setCourseMaterialsComponent(CourseMaterialsComponent)
Sets a component that overrides the content added in course materials field found in BuddyBoss site > Learndash LMS > Courses > [Selected Course] > Settings.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseMaterialsComponent |
React.ComponentType.<CourseMaterialsProps> |
Example
Use a different component depending on the logged-in user
...
const DEVICE_WIDTH = Dimensions.get("window").width;
import { useSelector } from "react-redux";
import WebView from "react-native-webview";
const ent = require("ent");
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseMaterialsComponent(({
tagsStyles,
materialsStyles,
baseFontStyle,
materials,
onLinkPress,
global
}) => {
const CourseMaterial = () => {
const user = useSelector((state) => state.user.userObject);
return user.id === 1 ?
<>
<Text style={{ marginBottom: 20 }}> Welcome back {user.name}! We prepared the materials for you. </Text>
<WebView source={{ uri: 'https://buddyboss.com' }} style={{ width: "auto", height: 300 }} />
</>
:
<View style={global.courseRoundBox}>
{typeof materials === "string" && (
<View style={{ paddingHorizontal: 15 }}>
<HTML
tagsStyles={{ ...tagsStyles, ...materialsStyles }}
baseFontStyle={baseFontStyle(15)}
html={ent.decode(materials)}
imagesMaxWidth={DEVICE_WIDTH - 32}
onLinkPress={onLinkPress}
/>
</View>
)}
</View>
}
return <CourseMaterial />
})
}# setCourseMaterialsComponent(CourseMaterialsComponent)
Sets a component that overrides the content added in course materials field found in BuddyBoss site > Learndash LMS > Courses > [Selected Course] > Settings.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseMaterialsComponent |
React.ComponentType.<CourseMaterialsProps> |
Example
Use a different component depending on the logged-in user
...
const DEVICE_WIDTH = Dimensions.get("window").width;
import { useSelector } from "react-redux";
import WebView from "react-native-webview";
const ent = require("ent");
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseMaterialsComponent(({
tagsStyles,
materialsStyles,
baseFontStyle,
materials,
onLinkPress,
global
}) => {
const CourseMaterial = () => {
const user = useSelector((state) => state.user.userObject);
return user.id === 1 ?
<>
<Text style={{ marginBottom: 20 }}> Welcome back {user.name}! We prepared the materials for you. </Text>
<WebView source={{ uri: 'https://buddyboss.com' }} style={{ width: "auto", height: 300 }} />
</>
:
<View style={global.courseRoundBox}>
{typeof materials === "string" && (
<View style={{ paddingHorizontal: 15 }}>
<HTML
tagsStyles={{ ...tagsStyles, ...materialsStyles }}
baseFontStyle={baseFontStyle(15)}
html={ent.decode(materials)}
imagesMaxWidth={DEVICE_WIDTH - 32}
onLinkPress={onLinkPress}
/>
</View>
)}
</View>
}
return <CourseMaterial />
})
}# setCourseMaterialsSectionTitle(CourseMaterialsSectionTitle)
You can use this hook to customize the component that displays the "Course Materials" text.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseMaterialsSectionTitle |
React.ComponentType.<CourseMaterialsSectionTitleProps> |
Example
...
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseMaterialsSectionTitle(
({global, t, labels}) => (
<Text style={[global.courseRoundBoxTitleAbove, {marginBottom: 20}]}>
{t("course:courseMaterials", {label: labels.course})}
</Text>
)
);
}# setCourseMaterialsSectionTitle(CourseMaterialsSectionTitle)
You can use this hook to customize the component that displays the "Course Materials" text.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseMaterialsSectionTitle |
React.ComponentType.<CourseMaterialsSectionTitleProps> |
Example
...
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseMaterialsSectionTitle(
({global, t, labels}) => (
<Text style={[global.courseRoundBoxTitleAbove, {marginBottom: 20}]}>
{t("course:courseMaterials", {label: labels.course})}
</Text>
)
);
}# setCourseQuizItem(CourseQuizItem)
You can use this hook to customize the Item components that are displayed as final quizzes.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseQuizItem |
React.ComponentType.<CourseQuizItemProps> |
Example
...
import LearnItem from "@src/components/Course/LearnItem";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseQuizItem(
({
item,
style,
global,
colors,
skipProgress,
onPress,
allowNavigation,
IconComponent
}) => (
<LearnItem
key={item.id}
style={style}
item={item}
global={global}
colors={colors}
skipProgress={skipProgress}
onPress={onPress}
allowNavigation={allowNavigation}
beforeLabel={IconComponent}
/>
)
);
}# setCourseQuizItem(CourseQuizItem)
You can use this hook to customize the Item components that are displayed as final quizzes.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseQuizItem |
React.ComponentType.<CourseQuizItemProps> |
Example
...
import LearnItem from "@src/components/Course/LearnItem";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseQuizItem(
({
item,
style,
global,
colors,
skipProgress,
onPress,
allowNavigation,
IconComponent
}) => (
<LearnItem
key={item.id}
style={style}
item={item}
global={global}
colors={colors}
skipProgress={skipProgress}
onPress={onPress}
allowNavigation={allowNavigation}
beforeLabel={IconComponent}
/>
)
);
}# setCourseSectionItem(CourseSectionItem)
You can use this hook to customize the Item components that are displayed as course content.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseSectionItem |
React.ComponentType.<CourseSectionItemProps> |
Example
Use your own icon component instead of the default IconComponent of lessons with children
...
import Icon from "@src/components/Icon";
import LearnItem from "@src/components/Course/LearnItem";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseSectionItem(props => {
const {
item,
progression,
global,
colors,
allowNavigation,
onItemPress,
StepsComponent,
IconComponent,
blockType,
toggleExpand,
count,
showAlertMessage
} = props;
let CustomIcon = IconComponent;
if (blockType === "lesson" && count > 0) {
CustomIcon = (
<TouchableOpacity onPress={toggleExpand}>
<Icon
tintColor={colors.descLightTextColor}
icon={require("@src/assets/img/favourite.png")}
styles={{
opacity: !allowNavigation ? 0.45 : 1,
marginRight: 10,
width: 25,
height: 25
}}
/>
</TouchableOpacity>
);
}
return (
<LearnItem
key={item.id}
style={{
paddingLeft: 0
}}
item={{
id: item.id,
completed: item.completed,
title: item.title,
progression
}}
global={global}
colors={colors}
onPress={() => {
if (allowNavigation) {
showAlertMessage();
return false;
}
onItemPress();
}}
allowNavigation={allowNavigation}
beforeProgress={StepsComponent}
beforeLabel={CustomIcon}
/>
);
});
}# setCourseSectionItem(CourseSectionItem)
You can use this hook to customize the Item components that are displayed as course content.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseSectionItem |
React.ComponentType.<CourseSectionItemProps> |
Example
Use your own icon component instead of the default IconComponent of lessons with children
...
import Icon from "@src/components/Icon";
import LearnItem from "@src/components/Course/LearnItem";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseSectionItem(props => {
const {
item,
progression,
global,
colors,
allowNavigation,
onItemPress,
StepsComponent,
IconComponent,
blockType,
toggleExpand,
count,
showAlertMessage
} = props;
let CustomIcon = IconComponent;
if (blockType === "lesson" && count > 0) {
CustomIcon = (
<TouchableOpacity onPress={toggleExpand}>
<Icon
tintColor={colors.descLightTextColor}
icon={require("@src/assets/img/favourite.png")}
styles={{
opacity: !allowNavigation ? 0.45 : 1,
marginRight: 10,
width: 25,
height: 25
}}
/>
</TouchableOpacity>
);
}
return (
<LearnItem
key={item.id}
style={{
paddingLeft: 0
}}
item={{
id: item.id,
completed: item.completed,
title: item.title,
progression
}}
global={global}
colors={colors}
onPress={() => {
if (allowNavigation) {
showAlertMessage();
return false;
}
onItemPress();
}}
allowNavigation={allowNavigation}
beforeProgress={StepsComponent}
beforeLabel={CustomIcon}
/>
);
});
}# setCourseStartedHeaderDetails(CourseStartedHeaderDetails)
You can use this hook to customize the Course Status component of the LearnDash course details if a course is in progress or is already complete.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseStartedHeaderDetails |
React.ComponentType.<CourseStartedHeaderDetailsProps> |
Example
...
import Icon from "@src/components/Icon";
import Progress from "@src/components/Progress";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseStartedHeaderDetails(({
global,
colors,
t,
courseVM,
styles,
formatDateFunc
}) => <View
style={[
global.row,
{
paddingHorizontal: 20,
paddingVertical: 16,
flex: 1
}
]}
>
<View style={{flex: 1, marginRight: 8}}>
{courseVM.hasAccess ? (
<Text style={[global.title, styles.title]}>
{!!!courseVM.completed
? t("course:inProgress")
: t("course:completed")}
</Text>
) : (
<Text style={[global.title, styles.title]}>
{t("course:enrolled")}
</Text>
)}
{courseVM.modifiedDate && (
<Text style={[global.courseDate, {marginTop: 5}]}>
{`${t("course:lastActivity")} ${formatDateFunc(
courseVM.modifiedDate
)}`}
</Text>
)}
</View>
<Text style={[global.progressLargeText, styles.progressText]}>
{courseVM.progression + "%"}
</Text>
<Progress
size={32}
checkIcon={
<Icon
styles={{width: 36, height: 36}}
icon={require("@src/assets/img/completed-course.png")}
/>
}
isCompleted={!!courseVM.completed}
progress={courseVM.progression}
colors={{
highlightColor: colors.highlightColor,
bodyBg: "#e7e9ec"
}}
/>
</View>
);
}# setCourseStartedHeaderDetails(CourseStartedHeaderDetails)
You can use this hook to customize the Course Status component of the LearnDash course details if a course is in progress or is already complete.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseStartedHeaderDetails |
React.ComponentType.<CourseStartedHeaderDetailsProps> |
Example
...
import Icon from "@src/components/Icon";
import Progress from "@src/components/Progress";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setCourseStartedHeaderDetails(({
global,
colors,
t,
courseVM,
styles,
formatDateFunc
}) => <View
style={[
global.row,
{
paddingHorizontal: 20,
paddingVertical: 16,
flex: 1
}
]}
>
<View style={{flex: 1, marginRight: 8}}>
{courseVM.hasAccess ? (
<Text style={[global.title, styles.title]}>
{!!!courseVM.completed
? t("course:inProgress")
: t("course:completed")}
</Text>
) : (
<Text style={[global.title, styles.title]}>
{t("course:enrolled")}
</Text>
)}
{courseVM.modifiedDate && (
<Text style={[global.courseDate, {marginTop: 5}]}>
{`${t("course:lastActivity")} ${formatDateFunc(
courseVM.modifiedDate
)}`}
</Text>
)}
</View>
<Text style={[global.progressLargeText, styles.progressText]}>
{courseVM.progression + "%"}
</Text>
<Progress
size={32}
checkIcon={
<Icon
styles={{width: 36, height: 36}}
icon={require("@src/assets/img/completed-course.png")}
/>
}
isCompleted={!!courseVM.completed}
progress={courseVM.progression}
colors={{
highlightColor: colors.highlightColor,
bodyBg: "#e7e9ec"
}}
/>
</View>
);
}# setCourseTitleComponent(CourseTitleComponent)
You can use this to replace the course title component. For example, you can use this to change the title's font size.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseTitleComponent |
React.ComponentType.<CourseTitleProps> |
Example
Change the title's font size depending on the course title
import Animated from "react-native-reanimated";
export const applyCustomCode = externalCodeSetup => {
externalCodeSetup.courseSingleApi.setCourseTitleComponent((props) => {
const { course, global, colors, styles, lightStyle, opacity } = props;
let fontSize = 34;
if (course.title === "React Native") {
fontSize = 20;
}
return <View>
<Animated.Text
style={[
global.iosStyleScreenTitle,
styles.title,
lightStyle ? { color: "white" } : { color: colors.textColor },
{ opacity, fontSize: fontSize }
]}
>
{course.title}
</Animated.Text>
</View>
});
}# setCourseTitleComponent(CourseTitleComponent)
You can use this to replace the course title component. For example, you can use this to change the title's font size.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseTitleComponent |
React.ComponentType.<CourseTitleProps> |
Example
Change the title's font size depending on the course title
import Animated from "react-native-reanimated";
export const applyCustomCode = externalCodeSetup => {
externalCodeSetup.courseSingleApi.setCourseTitleComponent((props) => {
const { course, global, colors, styles, lightStyle, opacity } = props;
let fontSize = 34;
if (course.title === "React Native") {
fontSize = 20;
}
return <View>
<Animated.Text
style={[
global.iosStyleScreenTitle,
styles.title,
lightStyle ? { color: "white" } : { color: colors.textColor },
{ opacity, fontSize: fontSize }
]}
>
{course.title}
</Animated.Text>
</View>
});
}# setDownloadIcon(DownloadIcon)
You can use this hook to customize the DownloadIcon which can be used to download a course, delete a course, or indicate if a course has already been downloaded.
Parameters:
| Name | Type | Description |
|---|---|---|
DownloadIcon |
React.ComponentType.<DownloadIconProps> |
Example
...
import Animated from "react-native-reanimated";
import AppTouchableWithoutFeedback from "@src/components/AppTouchableWithoutFeedback";
import Icon from "@src/components/Icon";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setDownloadIcon(({
colors,
idleIconColor,
lightStyle,
start,
size,
hitSlop
}) => {
const icon = require("@src/assets/img/download-start.png")
const iconColor = idleIconColor ?? (lightStyle ? "#fff" : colors.linkColor);
const action = start;
return (
<AppTouchableWithoutFeedback
onPress={action}
debounce={500}
hitSlop={hitSlop}
>
<Animated.View>
<Icon
icon={icon}
styles={{height: size, width: size}}
tintColor={iconColor}
/>
</Animated.View>
</AppTouchableWithoutFeedback>
);
})
}# setDownloadIcon(DownloadIcon)
You can use this hook to customize the DownloadIcon which can be used to download a course, delete a course, or indicate if a course has already been downloaded.
Parameters:
| Name | Type | Description |
|---|---|---|
DownloadIcon |
React.ComponentType.<DownloadIconProps> |
Example
...
import Animated from "react-native-reanimated";
import AppTouchableWithoutFeedback from "@src/components/AppTouchableWithoutFeedback";
import Icon from "@src/components/Icon";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setDownloadIcon(({
colors,
idleIconColor,
lightStyle,
start,
size,
hitSlop
}) => {
const icon = require("@src/assets/img/download-start.png")
const iconColor = idleIconColor ?? (lightStyle ? "#fff" : colors.linkColor);
const action = start;
return (
<AppTouchableWithoutFeedback
onPress={action}
debounce={500}
hitSlop={hitSlop}
>
<Animated.View>
<Icon
icon={icon}
styles={{height: size, width: size}}
tintColor={iconColor}
/>
</Animated.View>
</AppTouchableWithoutFeedback>
);
})
}# setDownloadProgressComponent(DownloadProgressComponent)
You can use this hook to customize the DownloadProgressComponent which shows up when the course is currently downloading.
Parameters:
| Name | Type | Description |
|---|---|---|
DownloadProgressComponent |
React.ComponentType.<DownloadProgressComponentProps> |
Example
...
import ProgressCircle from "react-native-progress/Circle";
import {TouchableWithoutFeedback} from "react-native";
import Icon from "@src/components/Icon";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setDownloadProgressComponent(({
size,
lightStyle,
colors,
onPress,
hitSlop,
containerStyle,
progress
}) => {
const iconSize = size - 10;
const color = lightStyle ? "#fff" : colors.highlightColor;
const unfilledColor = lightStyle
? "rgba(255, 255, 255, 0.24)"
: "rgba(0, 0, 0, 0.24)";
return (
<TouchableWithoutFeedback onPress={onPress} hitSlop={hitSlop}>
<View style={containerStyle}>
<ProgressCircle
size={size}
progress={progress}
thickness={2}
unfilledColor={unfilledColor}
animated={true}
borderWidth={0}
color={color}
/>
<Icon
icon={require("@src/assets/img/stop.png")}
tintColor={color}
styles={{height: iconSize, width: iconSize, position: "absolute"}}
/>
</View>
</TouchableWithoutFeedback>
);
})
}# setDownloadProgressComponent(DownloadProgressComponent)
You can use this hook to customize the DownloadProgressComponent which shows up when the course is currently downloading.
Parameters:
| Name | Type | Description |
|---|---|---|
DownloadProgressComponent |
React.ComponentType.<DownloadProgressComponentProps> |
Example
...
import ProgressCircle from "react-native-progress/Circle";
import {TouchableWithoutFeedback} from "react-native";
import Icon from "@src/components/Icon";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setDownloadProgressComponent(({
size,
lightStyle,
colors,
onPress,
hitSlop,
containerStyle,
progress
}) => {
const iconSize = size - 10;
const color = lightStyle ? "#fff" : colors.highlightColor;
const unfilledColor = lightStyle
? "rgba(255, 255, 255, 0.24)"
: "rgba(0, 0, 0, 0.24)";
return (
<TouchableWithoutFeedback onPress={onPress} hitSlop={hitSlop}>
<View style={containerStyle}>
<ProgressCircle
size={size}
progress={progress}
thickness={2}
unfilledColor={unfilledColor}
animated={true}
borderWidth={0}
color={color}
/>
<Icon
icon={require("@src/assets/img/stop.png")}
tintColor={color}
styles={{height: iconSize, width: iconSize, position: "absolute"}}
/>
</View>
</TouchableWithoutFeedback>
);
})
}# setFilterIncomingCourseProps(filterIncomingCourseProps)
Sets the callback function filterIncomingCourseProps used for filtering props that are coming into Courses Single Screen component
Parameters:
| Name | Type | Description |
|---|---|---|
filterIncomingCourseProps |
CoursePropsFilterCallback |
Example
Add a date object to incoming course props
externalCodeSetup.courseSingleApi.setFilterIncomingCourseProps((props) => {
return {
...props,
date: new Date()
}
});# setFilterIncomingCourseProps(filterIncomingCourseProps)
Sets the callback function filterIncomingCourseProps used for filtering props that are coming into Courses Single Screen component
Parameters:
| Name | Type | Description |
|---|---|---|
filterIncomingCourseProps |
CoursePropsFilterCallback |
Example
Add a date object to incoming course props
externalCodeSetup.courseSingleApi.setFilterIncomingCourseProps((props) => {
return {
...props,
date: new Date()
}
});# setHeaderAuthorRenderer(renderer)
Sets component for overriding the default course author component.
Parameters:
| Name | Type | Description |
|---|---|---|
renderer |
React.ComponentType.<HeaderAuthorComponentProps> |
Example
Add more details besides the author name
//In custom_code/components/CourseAuthor.js
import React from 'react';
import { View, Text } from 'react-native';
import AppAvatar from "@src/components/AppAvatar";
import AppTouchableOpacity from "@src/components/AppTouchableOpacity";
import { getBestImageVariant } from "@src/utils/CCDataUtil";
import { withUserClickHandler } from "@src/components/hocs/withUserClickHandler"; //Use BuddyBoss HOC for easier navigation
const CourseAuthor = (props) => {
const { user, global, lightStyle, toUserBasedOnSettings } = props;
//Able navigate to profile of `user` because of wrapping component with HOC
const boundCallback = React.useMemo(
() => toUserBasedOnSettings.bind(null, null, user),
[user]
);
//Use BuddyBoss getBestImageVariant helper function to get best image size for the component
const userAvatarUrl = React.useMemo(
() =>
!!user
? user.avatar_urls
? getBestImageVariant(user.avatar_urls, 96)
: user?.avatar?.thumb
: "",
[user]
);
return <View style={[global.row]}>
<AppTouchableOpacity onPress={boundCallback}>
<View>
{user && (
<AppAvatar
size={26}
name={user.name}
source={{
uri: userAvatarUrl
}}
/>
)}
</View>
</AppTouchableOpacity>
<View style={{ marginLeft: 8 }}>
{user && (
<>
<Text
style={[
global.itemAuthorName,
{ marginBottom: 1 },
lightStyle ? { color: "white" } : {}
]}
>
{user?.name}
</Text>
<Text> {user?.member_rest.user_email} </Text>
</>
)}
</View>
</View>
}
export default withUserClickHandler(CourseAuthor);
//In custom_code/index.js
...
import CourseAuthor from "./components/CourseAuthor";
export const applyCustomCode = externalCodeSetup => {
externalCodeSetup.courseSingleApi.setHeaderAuthorRenderer((props) => <CourseAuthor {...props} />)
}# setHeaderAuthorRenderer(renderer)
Sets component for overriding the default course author component.
Parameters:
| Name | Type | Description |
|---|---|---|
renderer |
React.ComponentType.<HeaderAuthorComponentProps> |
Example
Add more details besides the author name
//In custom_code/components/CourseAuthor.js
import React from 'react';
import { View, Text } from 'react-native';
import AppAvatar from "@src/components/AppAvatar";
import AppTouchableOpacity from "@src/components/AppTouchableOpacity";
import { getBestImageVariant } from "@src/utils/CCDataUtil";
import { withUserClickHandler } from "@src/components/hocs/withUserClickHandler"; //Use BuddyBoss HOC for easier navigation
const CourseAuthor = (props) => {
const { user, global, lightStyle, toUserBasedOnSettings } = props;
//Able navigate to profile of `user` because of wrapping component with HOC
const boundCallback = React.useMemo(
() => toUserBasedOnSettings.bind(null, null, user),
[user]
);
//Use BuddyBoss getBestImageVariant helper function to get best image size for the component
const userAvatarUrl = React.useMemo(
() =>
!!user
? user.avatar_urls
? getBestImageVariant(user.avatar_urls, 96)
: user?.avatar?.thumb
: "",
[user]
);
return <View style={[global.row]}>
<AppTouchableOpacity onPress={boundCallback}>
<View>
{user && (
<AppAvatar
size={26}
name={user.name}
source={{
uri: userAvatarUrl
}}
/>
)}
</View>
</AppTouchableOpacity>
<View style={{ marginLeft: 8 }}>
{user && (
<>
<Text
style={[
global.itemAuthorName,
{ marginBottom: 1 },
lightStyle ? { color: "white" } : {}
]}
>
{user?.name}
</Text>
<Text> {user?.member_rest.user_email} </Text>
</>
)}
</View>
</View>
}
export default withUserClickHandler(CourseAuthor);
//In custom_code/index.js
...
import CourseAuthor from "./components/CourseAuthor";
export const applyCustomCode = externalCodeSetup => {
externalCodeSetup.courseSingleApi.setHeaderAuthorRenderer((props) => <CourseAuthor {...props} />)
}# setHeaderRightComponent(HeaderRightComponent)
You can use this hook to customize the component on the top right corner of the CourseSingleScreen which the download icon usually occupies.
Parameters:
| Name | Type | Description |
|---|---|---|
HeaderRightComponent |
React.ComponentType.<CourseHeaderRightProps> |
Example
...
import AuthWrapper from "@src/components/AuthWrapper";
import DownloadStatusIndicator from "@src/components/Downloader/DownloadStatusIndicator";
import StatusBarWrapper from "@src/utils/StatusBarWrapper";
import { DownloadTypes } from "@src/services/enums/downloads";
export const applyCustomCode = (externalCodeSetup: any) => {
externalCodeSetup.courseSingleApi.setHeaderRightComponent(({
global,
colors,
t,
courseVM,
isShowingOpenCourseForGuestUser,
contentStyle
}) => (
courseVM.hasAccess &&
!courseVM.offlineDisabled && (
<AuthWrapper
actionOnGuestLogin={
isShowingOpenCourseForGuestUser
? null
: "showAuthScreen"
}
>
<DownloadStatusIndicator
lightStyle={
contentStyle === StatusBarWrapper.lightStyle
}
postId={courseVM.id}
postType={DownloadTypes.course}
colors={colors}
global={global}
size={30}
t={t}
iconColor={colors.linkColor}
containerStyle={{
marginLeft: 15
}}
/>
</AuthWrapper>
)
))
}# setHeaderRightComponent(HeaderRightComponent)
You can use this hook to customize the component on the top right corner of the CourseSingleScreen which the download icon usually occupies.
Parameters:
| Name | Type | Description |
|---|---|---|
HeaderRightComponent |
React.ComponentType.<CourseHeaderRightProps> |
Example
...
import AuthWrapper from "@src/components/AuthWrapper";
import DownloadStatusIndicator from "@src/components/Downloader/DownloadStatusIndicator";
import StatusBarWrapper from "@src/utils/StatusBarWrapper";
import { DownloadTypes } from "@src/services/enums/downloads";
export const applyCustomCode = (externalCodeSetup: any) => {
externalCodeSetup.courseSingleApi.setHeaderRightComponent(({
global,
colors,
t,
courseVM,
isShowingOpenCourseForGuestUser,
contentStyle
}) => (
courseVM.hasAccess &&
!courseVM.offlineDisabled && (
<AuthWrapper
actionOnGuestLogin={
isShowingOpenCourseForGuestUser
? null
: "showAuthScreen"
}
>
<DownloadStatusIndicator
lightStyle={
contentStyle === StatusBarWrapper.lightStyle
}
postId={courseVM.id}
postType={DownloadTypes.course}
colors={colors}
global={global}
size={30}
t={t}
iconColor={colors.linkColor}
containerStyle={{
marginLeft: 15
}}
/>
</AuthWrapper>
)
))
}# setIsCategoryTagsHidden(CategoryTagsHiddenCallback)
You can use this to show or hide the category tags in the course single screen.
Parameters:
| Name | Type | Description |
|---|---|---|
CategoryTagsHiddenCallback |
CategoryTagsHiddenCallback |
Example
externalCodeSetup.courseSingleApi.setIsCategoryTagsHidden((course) => {
return false;
})# setIsCategoryTagsHidden(CategoryTagsHiddenCallback)
You can use this to show or hide the category tags in the course single screen.
Parameters:
| Name | Type | Description |
|---|---|---|
CategoryTagsHiddenCallback |
CategoryTagsHiddenCallback |
Example
externalCodeSetup.courseSingleApi.setIsCategoryTagsHidden((course) => {
return false;
})# setIsCourseDescriptionHidden(CourseDescriptionHiddenCallback)
You can use this hook to show or hide the course description component.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseDescriptionHiddenCallback |
CourseDescriptionHiddenCallback |
Example
Hide the course description depending on the course title
externalCodeSetup.courseSingleApi.setIsCourseDescriptionHidden((course) => {
if (course.title == "React Native"){
return true;
}
return false;
})# setIsCourseDescriptionHidden(CourseDescriptionHiddenCallback)
You can use this hook to show or hide the course description component.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseDescriptionHiddenCallback |
CourseDescriptionHiddenCallback |
Example
Hide the course description depending on the course title
externalCodeSetup.courseSingleApi.setIsCourseDescriptionHidden((course) => {
if (course.title == "React Native"){
return true;
}
return false;
})# setIsCourseStatusHidden(CourseStatusHiddenCallback)
You can use this hook to show or hide the course status component.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseStatusHiddenCallback |
CourseStatusHiddenCallback |
Example
Hide the course status component depending on the course title
externalCodeSetup.courseSingleApi.setIsCourseStatusHidden((course, hasStarted, courseTree) => {
if (course.title == "React Native"){
return true;
}
return false;
})# setIsCourseStatusHidden(CourseStatusHiddenCallback)
You can use this hook to show or hide the course status component.
Parameters:
| Name | Type | Description |
|---|---|---|
CourseStatusHiddenCallback |
CourseStatusHiddenCallback |
Example
Hide the course status component depending on the course title
externalCodeSetup.courseSingleApi.setIsCourseStatusHidden((course, hasStarted, courseTree) => {
if (course.title == "React Native"){
return true;
}
return false;
})# setLessonProgressStepsComponent(LessonProgressStepsComponent)
You can use this to replace the course lesson progress step component.
Parameters:
| Name | Type | Description |
|---|---|---|
LessonProgressStepsComponent |
React.ComponentType.<LessonProgressStepsProps> |
Example
Replace the course lesson progress steps component
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setLessonProgressStepsComponent(props => {
const {count, completedSteps, blockType, global, t} = props;
return (
!!count &&
count > 0 &&
blockType === "lesson" ? (
<Text style={[global.caption]}>
{`${t("courses:stepsOutOf", {completedSteps, count})}`}
</Text>
) : <></>
);
});
}# setLessonProgressStepsComponent(LessonProgressStepsComponent)
You can use this to replace the course lesson progress step component.
Parameters:
| Name | Type | Description |
|---|---|---|
LessonProgressStepsComponent |
React.ComponentType.<LessonProgressStepsProps> |
Example
Replace the course lesson progress steps component
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setLessonProgressStepsComponent(props => {
const {count, completedSteps, blockType, global, t} = props;
return (
!!count &&
count > 0 &&
blockType === "lesson" ? (
<Text style={[global.caption]}>
{`${t("courses:stepsOutOf", {completedSteps, count})}`}
</Text>
) : <></>
);
});
}# setQuizSectionTitle(QuizSectionTitle)
You can use this hook to customize the component that displays the "Final Quizzes" text.
Parameters:
| Name | Type | Description |
|---|---|---|
QuizSectionTitle |
React.ComponentType.<QuizSectionTitleProps> |
Example
...
externalCodeSetup.courseSingleApi.setQuizSectionTitle(({global, t}) => (
<Text style={global.courseRoundBoxSectionTitle}>
{t("course:finalQuizzes")}
</Text>
));# setQuizSectionTitle(QuizSectionTitle)
You can use this hook to customize the component that displays the "Final Quizzes" text.
Parameters:
| Name | Type | Description |
|---|---|---|
QuizSectionTitle |
React.ComponentType.<QuizSectionTitleProps> |
Example
...
externalCodeSetup.courseSingleApi.setQuizSectionTitle(({global, t}) => (
<Text style={global.courseRoundBoxSectionTitle}>
{t("course:finalQuizzes")}
</Text>
));# setTransformCourseActionButtons(transformCourseActionButtons)
You can transform the default course action buttons which are starting, buying or continuing a course by replacing it with your preferred action buttons.
Parameters:
| Name | Type | Description |
|---|---|---|
transformCourseActionButtons |
TransformCourseActionButtonsCallback |
Example
Add more components for course action
import CourseActionButton from "@src/components/Course/CourseActionButton";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setTransformCourseActionButtons((
CourseActionBtn,
course,
t,
colors,
global,
products,
navigation,
startCourse,
continueCourse,
priceComponentRender) => {
return <>
<View style={{ paddingHorizontal: 20, paddingVertical: 10 }}>
<Text>To continue the course, tap the button below++</Text>
</View>
<View style={{
paddingHorizontal: 20,
paddingVertical: 16,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
}}>
{CourseActionBtn}
<CourseActionButton
title={"Go to Courses screen"}
onPress={() => navigation.navigate("CoursesScreen")}
style={{ backgroundColor: "cyan" }}
/>
</View>
</>
})
}# setTransformCourseActionButtons(transformCourseActionButtons)
You can transform the default course action buttons which are starting, buying or continuing a course by replacing it with your preferred action buttons.
Parameters:
| Name | Type | Description |
|---|---|---|
transformCourseActionButtons |
TransformCourseActionButtonsCallback |
Example
Add more components for course action
import CourseActionButton from "@src/components/Course/CourseActionButton";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setTransformCourseActionButtons((
CourseActionBtn,
course,
t,
colors,
global,
products,
navigation,
startCourse,
continueCourse,
priceComponentRender) => {
return <>
<View style={{ paddingHorizontal: 20, paddingVertical: 10 }}>
<Text>To continue the course, tap the button below++</Text>
</View>
<View style={{
paddingHorizontal: 20,
paddingVertical: 16,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
}}>
{CourseActionBtn}
<CourseActionButton
title={"Go to Courses screen"}
onPress={() => navigation.navigate("CoursesScreen")}
style={{ backgroundColor: "cyan" }}
/>
</View>
</>
})
}# setWebViewDescriptionComponent(WebViewDescriptionComponent)
You can use this hook to replace the webview being used in the course description. For example, you can choose to replace it with the default react-native webview.
Parameters:
| Name | Type | Description |
|---|---|---|
WebViewDescriptionComponent |
React.ComponentType.<WebViewDescriptionComponentProps> |
Example
...
import WebViewWithMore from "@src/components/WebViewWithMore";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setWebViewDescriptionComponent(
({
online,
t,
onShouldStartLoadWithRequest,
heightLimit,
source,
global,
colors,
ModalHeaderComponent
}) => (
<WebViewWithMore
online={online}
t={t}
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
disableLoadingPadding={true}
height={heightLimit}
source={source}
global={global}
colors={colors}
ModalHeaderComponent={ModalHeaderComponent}
/>
)
);
}# setWebViewDescriptionComponent(WebViewDescriptionComponent)
You can use this hook to replace the webview being used in the course description. For example, you can choose to replace it with the default react-native webview.
Parameters:
| Name | Type | Description |
|---|---|---|
WebViewDescriptionComponent |
React.ComponentType.<WebViewDescriptionComponentProps> |
Example
...
import WebViewWithMore from "@src/components/WebViewWithMore";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setWebViewDescriptionComponent(
({
online,
t,
onShouldStartLoadWithRequest,
heightLimit,
source,
global,
colors,
ModalHeaderComponent
}) => (
<WebViewWithMore
online={online}
t={t}
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
disableLoadingPadding={true}
height={heightLimit}
source={source}
global={global}
colors={colors}
ModalHeaderComponent={ModalHeaderComponent}
/>
)
);
}# setWebViewOfflineComponent(WebViewOfflineComponent)
You can use this hook to customize the component that displays a "This content is not available offline" message if a webview is used for rendering the course description while the device is offline.
Parameters:
| Name | Type | Description |
|---|---|---|
WebViewOfflineComponent |
React.ComponentType.<WebViewOfflineComponentProps> |
Example
...
import EmptyList from "@src/components/EmptyList";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setWebViewOfflineComponent(
({containerStyle, t, global, emptyListStyle}) => (
<View style={containerStyle}>
<Text>Please connect to an internet network</Text>
<EmptyList
emptyText={{
title: t("common:contentOfflineMessage"),
icon: require("@src/assets/img/wifi-offline.png")
}}
global={global}
style={emptyListStyle}
/>
</View>
)
);
}# setWebViewOfflineComponent(WebViewOfflineComponent)
You can use this hook to customize the component that displays a "This content is not available offline" message if a webview is used for rendering the course description while the device is offline.
Parameters:
| Name | Type | Description |
|---|---|---|
WebViewOfflineComponent |
React.ComponentType.<WebViewOfflineComponentProps> |
Example
...
import EmptyList from "@src/components/EmptyList";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.courseSingleApi.setWebViewOfflineComponent(
({containerStyle, t, global, emptyListStyle}) => (
<View style={containerStyle}>
<Text>Please connect to an internet network</Text>
<EmptyList
emptyText={{
title: t("common:contentOfflineMessage"),
icon: require("@src/assets/img/wifi-offline.png")
}}
global={global}
style={emptyListStyle}
/>
</View>
)
);
}