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, Text, Button } from 'react-native';
import { useSelector } from "react-redux";
import { NavigationActions } from "react-navigation";
import CourseCategoriesScreen from "@src/containers/Custom/CourseCategoriesScreen";
const MyCustomScreen = (props) => {

 const state = useSelector((state) => state);
 const featuredCourseId = 41;

 const goToFeaturedCourse = (courseId) => {

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

   //Navigate to featured course
   props.navigation.dispatch(
     NavigationActions.navigate({
       routeName: "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: props.screenProps.colors.bodyFrontBg }}>
       <Button title="Go to featured course" onPress={() => goToFeaturedCourse(featuredCourseId)} />
     </View>

   </View>)
}

MyCustomScreen.navigationOptions = {
  header: null
}

export default MyCustomScreen;

//In custom_code/index.js...

...

import MyCustomScreen from "./components/MyCustomScreen";

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