App Codex Version: 1.0.0

Class

CourseSingleApi

CourseSingleApi()

Single Course Screen Hooks. Instance name: courseSingleApi

Hooks to modify the individual courses’ pages.

Constructor

# new CourseSingleApi()

Example
externalCodeSetup.courseSingleApi.METHOD_NAME

Members

# setShowLessonsCount

Deprecated:
  • Yes

# setShowQuizzesCount

Deprecated:
  • Yes

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>
  ));
}

# 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;
        }
    );
}

# 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", marginBottom: 5}}>
                            <Icon
                                size={30}
                                webIcon={"IconAndroidGroup"}
                                tintColor={colors.descLightTextColor}
                                icon={{fontIconName: "book", weight: 400}}
                            />
                            <Text style={styles.courseIncludesText}>{lessonsText}</Text>
                        </View>
                    )}
                    {shouldShowTopicsText && (
                        <View style={{flexDirection: "row", marginBottom: 5, marginLeft: 5}}>
                            <Icon
                                size={24}
                                webIcon={"IconAndroidGroup"}
                                tintColor={colors.descLightTextColor}
                                icon={{fontIconName: "text", weight: 500}}
                            />
                            <Text style={styles.courseIncludesText}>{topicsText}</Text>
                        </View>
                    )}
                    {shouldShowQuizzesText && (
                        <View style={{flexDirection: "row", marginLeft: 5, marginBottom: 5}}>
                            <Icon
                                size={24}
                                webIcon={"IconAndroidGroup"}
                                tintColor={colors.descLightTextColor}
                                icon={{fontIconName: "question", weight: 100}}
                            />
                            <Text style={styles.courseIncludesText}>{quizzesText}</Text>
                        </View>
                    )}
                    {shouldShowCertificatesText && (
                        <View style={{flexDirection: "row", marginLeft: 5}}>
                            <Icon
                                size={26}
                                webIcon={"IconAndroidGroup"}
                                tintColor={colors.descLightTextColor}
                                icon={{fontIconName: "certificate", weight: 400}}
                            />
                            <Text style={styles.courseIncludesText}>
                                {t("course:certificate", {label: labels.course})} asdfasdf
                            </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 />

  })
}

# 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}
            />
        )
    );
}

# 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={{fontIconName: "heart", weight: 400}}
                        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={{fontIconName: "check", weight: 200}}
                            tintColor={colors.successColor}
                        />
                    }
                    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>

 });
}

# 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 iconColor = idleIconColor ?? (lightStyle ? "#fff" : colors.linkColor);
        const action = start;
        return (
            <AppTouchableWithoutFeedback
                onPress={action}
                debounce={500}
                hitSlop={hitSlop}
            >
                <Animated.View>
                    <Icon
                        icon={{fontIconName: "cloud-download", weight: 400}}}
                        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={{fontIconName: "stop", weight: 300}}
                        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()
  }
});

# 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>
        )

    ))
}

# 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;
 })

# 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>
            ) : <></>
        );
    });
}

# 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>
));

# setShowLessonsCount()

Deprecated:
  • Yes

# setShowQuizzesCount()

Deprecated:
  • Yes

# 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}
            />
        )
    );
}

# 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: {fontIconName: "wifi-slash", weight: 400}
                    }}
                    global={global}
                    style={emptyListStyle}
                />
            </View>
        )
    );
}