App Codex Version: 1.0.0

Components

CourseCategoriesScreen

<CourseCategoriesScreen />

Constructor

# <CourseCategoriesScreen />

You can use this component to display your course categories screen in your custom screen.

Properties:
Name Type Attributes Description
screenTitle String <optional>

List screen title. Default comes from translation files in BuddyBoss site
hideTitle Boolean <optional>

Use true to hide title of the screen
hideFilters Boolean <optional>

Use true to hide filters in the screen
hideNavigationHeader Boolean <optional>

Use true to hide the screen title container when scrolling
headerHeight Number <optional>

Define header height
Example

Display course categories screen with a component to navigate to a featured course 

//In custom_code/components/MyCustomScreen.js...
import React from "react";
import {View, Button} from "react-native";
import {useSelector} from "react-redux";
import {CommonActions} from "@react-navigation/native";

import CourseCategoriesScreen from "@src/containers/Custom/CourseCategoriesScreen";
import {useScreenProps} from "@src/navigators/v5/ScreenPropsProvider";

const MyCustomScreen = props => {
    const {colors} = useScreenProps(["colors"]);
    const state = useSelector(state => state);
    const featuredCourseId = 49;

    const goToFeaturedCourse = courseId => {
        const featuredCourse = state.coursesCache.byId.get(
            courseId ? courseId.toString() : ""
        );

        //Navigate to featured course
        props.navigation.dispatch(
            CommonActions.navigate({
                name: "CoursesSingleScreen",
                params: {
                    id: featuredCourse.id,
                    featuredCourse
                },
                key: featuredCourse.id.toString()
            })
        );
    };

    return (
        <View style={{flex: 1}}>
            <View style={{flex: 0.8}}>
                <CourseCategoriesScreen
                    {...props}
                    screenTitle="Course Categories"
                    hideFilters={true}
                    headerHeight={150}
                    hideNavigationHeader={true}
                />
            </View>

            <View style={{flex: 0.2, backgroundColor: colors.bodyFrontBg}}>
                <Button
                    title="Go to featured course"
                    onPress={() => goToFeaturedCourse(featuredCourseId)}
                />
            </View>
        </View>
    );
};


export default MyCustomScreen;


//In custom_code/index.js...

...

import MyCustomScreen from "./components/MyCustomScreen";

export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.navigationApi.replaceScreenComponent("courses_category", MyCustomScreen);
}