App Codex Version: 1.0.0

Components

CoursesScreen

<CoursesScreen />

Constructor

# <CoursesScreen />

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

Properties:
Name Type Attributes Description
headerHeight Number <optional>

Define header height
hideFilters Boolean <optional>

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

Use true to hide the screen title container when scrolling
hideTitle Boolean <optional>

Use true to hide title of the screen
screenTitle String <optional>

List screen title. Default comes from translation files in BuddyBoss site
searchFocusedAnimationDuration Number <optional>

Adjust the duration of the Search animation. A higher value means a longer duration of the animation.
searchFocusedListTopSpace Number <optional>

Amount of space which the header moves up when Search input is focused. A greater value means that the header will move higher.
showSearch Boolean <optional>

Use false to hide search box
Example

Replace the courses screen with a screen that contains the courses list and achieved certificates 

//In custom_code/components/MyCustomScreen.js...

import React from 'react';
import { View, Text } from 'react-native';

import {useScreenProps} from "@src/navigators/v5/ScreenPropsProvider";
import CoursesScreen from "@src/containers/Custom/CoursesScreen";
import CoursesCertificateScreen from "@src/containers/Custom/CoursesCertificateScreen";
const MyCustomScreen = (props) => {

  const {auth} = useScreenProps(["auth"]);

 return <View style={{ flex: 1 }}>

   <View style={{ flex: 0.7 }}>
     <CoursesScreen {...props} showSearch={false} hideFilters={true} screenTitle="My Courses" hideNavigationHeader={true} hideTitle={true} headerHeight={50}/>
   </View>

   <Text style={{padding: 10}}> Hello {auth.user.user_nicename}! Below are your achieved certificates</Text>

   <View style={{ flex: 0.3 }}>
     <CoursesCertificateScreen {...props} hideNavigationHeader={true}/>
   </View>

 </View>
}


export default MyCustomScreen;

//In custom_code/index.js...

...

import MyCustomScreen from "./components/MyCustomScreen";

export const applyCustomCode = externalCodeSetup => {
 //Replace the courses screen
 externalCodeSetup.navigationApi.replaceScreenComponent("courses_all", MyCustomScreen);
}