# new FilterScreenApi()

Example

externalCodeSetup.filterScreenApiHooks.METHOD_NAME

# setActiveSubFilters(activeSubFilters)

Parameters:

Example

externalCodeSetup.filterScreenApiHooks.setActiveSubFilters((defaultSubFilters) => {
    const groupSubFilters = {
      type: "active",
      group_type: "company"
    };
    return groupSubFilters;
});

# setAfterFilterComponent(AfterFilterComponent)

Parameters:

Example

Add a component below the filter row component

...

import FastImage from "react-native-fast-image";
import {CommonActions} from "@react-navigation/native";
export const applyCustomCode = externalCodeSetup => {

 const CustomAfterFilterComponent = (props) => {

   const navigateToCourse = () => {

     const courseId = 162;

     setTimeout(() => {
       props.navigation.dispatch(
         CommonActions.navigate({
           name: "CoursesSingleScreen",
           params: {
             id: courseId
           },
           key: courseId.toString()
         })
       );
     }, 0);
   };

   return (
     <>
        <TouchableWithoutFeedback onPress={navigateToCourse}>
         <FastImage
           style={{ width: "auto", height: 200 }}
           source={{
             uri: 'https://link-to-image.png',
           }}
         />
       </TouchableWithoutFeedback>
       <Text>Tap the image above to find out our recommended course for you!</Text>
     </>)
 }
 externalCodeSetup.filterScreenApiHooks.setAfterFilterComponent(CustomAfterFilterComponent)
}

# setBeforeFilterComponent(BeforeFilterComponent)

Parameters:

Example

Add a component above the filter row component

...

import FastImage from "react-native-fast-image";
import {CommonActions} from "@react-navigation/native";
export const applyCustomCode = externalCodeSetup => {

 const CustomBeforeFilterComponent = (props) => {

   const navigateToCourse = () => {

     const courseId = 162;

     setTimeout(() => {
       props.navigation.dispatch(
         CommonActions.navigate({
           name: "CoursesSingleScreen",
           params: {
             id: courseId
           },
           key: courseId.toString()
         })
       );
     }, 0);
   };

   return (
     <>
       <TouchableWithoutFeedback onPress={navigateToCourse}>
         <FastImage
           style={{ width: "auto", height: 200 }}
           source={{
             uri: 'https://link-to-image.png',
           }}
         />
       </TouchableWithoutFeedback>
       <Text>Tap the image above to find out our recommended course for you!</Text>
     </>)
 }
 externalCodeSetup.filterScreenApiHooks.setBeforeFilterComponent(CustomBeforeFilterComponent)
}

# setFilterAllButtonHidden(filterAllHidden)

Parameters:

Example

...
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.filterScreenApiHooks.setFilterAllButtonHidden(filterType => {
    if (filterType === "courses"){
      return false;
    }
    return true;
  });
}

# setFilterComponent(FilterComponentnullable)

Parameters:

Example

Show filtered count in courses screen but not in other screens

//In custom_code/components/FilterRow.js

import React, {useState} from 'react';
import { useSelector } from 'react-redux';
import FilterListHeaderInner from "@src/components/Filter/FilterListHeader"; //Use BuddyBoss component for generating filter row
const FilterRow = (props) => {

   const courseCount = useSelector((state) => state.courses.all.count); //Get courses count from redux

   const {
       details,
       filter,
       initialTab,
       filters,
       subfilters,
       activeSubFilters,
       global,
       colors,
       t,
       labels,
       filterType } = props;

     const [activeFilter, setActiveFilter] = useState(initialTab || filters[0]);

     //Pass all props required by FilterListHeaderInner
     return <FilterListHeaderInner
       {...{
         showFilterArrow: true,
         details,
         disableFilter: false,
         disableSubFilters: false,
         count: filterType === "courses" ? courseCount : undefined,
         filter: activeFilter,
         subfilters,
         activeSubFilters,
         global,
         colors,
         t,
         labels,
         filterType,
         containerStyle: {
           backgroundColor: colors.bodyFrontBg
         }
       }}
     />
}

export default FilterRow;

//In custom_code/index.js

...

import FilterRow from "./components/FilterRow";
export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.filterScreenApiHooks.setFilterComponent(props => {
   return <FilterRow {...props} />
 })
}

# setFilterItemComponent(FilterItemComponentnullable)

Parameters:

Example

Add background color for selected filter item

...

  externalCodeSetup.filterScreenApiHooks.setFilterItemComponent(props => {

   const {style, global, icon, text, isSelected, index, onPress } = props;

   return <TouchableOpacity
     style={styles.container}
     onPress={onPress}
   >
     <View style={styles.inner}>
       <View style={styles.labelContainer}>
         {!!icon && <Icon styles={styles.icon} icon={icon} tintColor="black"/>}
         <Text
           style={styles.label}
         >
           {text}
         </Text>
       </View>
       {isSelected && (
         <Icon
           tintColor={global.link.color}
           icon={{fontIconName: "check", weight: 300}}
           styles={{height: 22, width: 22}}
         />
       )}
     </View>
   </TouchableOpacity>
 });