Class

ForumSingleHooksApi

ForumSingleHooksApi()

Forum Single Screen Hooks. Instance name: forumSingleHooksApi

You can use this hook to customize the different aspects of the forum such as adding components after forum details, hiding short content on the forum and so on.

Constructor

# new ForumSingleHooksApi()

Example
externalCodeSetup.forumSingleHooksApi.METHOD_NAME

Methods

# hideForumSingleShortContent()

Hides forum short content text located below the forum title and is overlaid on top of forum cover image

Example
externalCodeSetup.forumSingleHooksApi.hideForumSingleShortContent();

# setAfterDetailsComponent(AfterDetailsComponent)

It is used to add a component after the forum details. For example you can add a component after the forum title, short content description and more to display further details of the forum.

Parameters:
Name Type Description
AfterDetailsComponent React.ComponentType.<AfterForumDetailsComponentProps>
Example

Add a component after forum title, short content and other details

 externalCodeSetup.forumSingleHooksApi.setAfterDetailsComponent((props) => {
  const { forum } = props;
   return <View style={{ padding: 10 }}>
    <Text style={{color: "#fff"}}> Forum created by: {forum.author.name}  </Text>
   </View>
 })

# setAfterProfileHeader(AfterProfileHeader)

It used to add a component after the header.

Parameters:
Name Type Description
AfterProfileHeader React.ComponentType.<AfterForumProfileHeaderProps>
Example

Add a touchable component after the forum header consisting of cover image and associated group components

...

import FastImage from "react-native-fast-image";
export const applyCustomCode = externalCodeSetup => {
 const AfterForumProfileHeader = ({ forum }) => {
  const goToAuthorProfile = () => {
    //Redirect to author profile
  }
  return (
    <TouchableOpacity onPress={ goToAuthorProfile }>
      <FastImage style={{ width: "auto", height: 100 }} source={{ uri: "https://link-to-image.png" }} />
    </TouchableOpacity>
  )
 }

 externalCodeSetup.forumSingleHooksApi.setAfterProfileHeader(AfterForumProfileHeader)
}

# setAssociatedGroupComponent(AssociatedGroupComponent)

Replaces the Associated Group section in forumSingleScreen. For example, you can use this to remove the image and label "Associated Group" in the Associated Group component.

Parameters:
Name Type Description
AssociatedGroupComponent React.ComponentType.<AssociatedGroupComponentProps>
Examples

User would like to remove the image and label "Associated Group" in the Associated Group component

...

import { FontWeights } from "@src/styles/global";
import Icon from "@src/components/Icon";
export const applyCustomCode = externalCodeSetup => {

   externalCodeSetup.forumSingleHooksApi.setAssociatedGroupComponent(({ t,
       colors,
       global,
       navigate,
       uri,
       name,
       subtitle }) => {

       return <View
           style={{
               ...global.bottomBorder,
               borderTopWidth: StyleSheet.hairlineWidth,
               borderTopColor: colors.borderColor,
               paddingHorizontal: 20,
               paddingVertical: 12,
               backgroundColor: colors.bodyBg
           }}>
           <TouchableWithoutFeedback onPress={navigate}>

               <View style={global.row}>
                   <View style={{ marginLeft: 10, flex: 1 }}>
                       <Text
                           style={[
                               global.textAlt,
                               {
                                   fontSize: 15,
                                   fontWeight: FontWeights.medium,
                                   maxWidth: "95%"
                               }
                           ]}
                           numberOfLines={1}
                           ellipsizeMode={"tail"}
                       >
                           {name}
                       </Text>
                   </View>
                   <Icon
                       icon={{fontIconName: "u-turn-left", weight: 400}}
                       webIcon={"IconArrowBack"}
                       tintColor={colors.textIconColor}
                       styles={{
                           width: 20,
                           height: 20
                       }}
                   />
               </View>
           </TouchableWithoutFeedback>
       </View>
   })

};

User would like to remove the Associated Group Component

externalCodeSetup.forumSingleHooksApi.setAssociatedGroupComponent(() => {
  return null
})

# setBeforeDetailsComponent(BeforeDetailsComponent)

It used to add a component before the forum details. For example you can add a component before the forum short content description, title and other details.

Parameters:
Name Type Description
BeforeDetailsComponent React.ComponentType.<BeforeForumDetailsComponentProps>
Example

Add a component before forum title, short content and other details

externalCodeSetup.forumSingleHooksApi.setBeforeDetailsComponent((props) => {
  const { forum } = props;
  return <View style={{ padding: 10 }}>
    <Text style={{color: "#fff"}}> Forum created by: {forum.author.name}  </Text>
  </View>
})

# setCustomHeaderBackground(customHeaderBackground)

It is used to replace the forum's cover image with your preferred image for the header background.

Parameters:
Name Type Description
customHeaderBackground String
Example
externalCodeSetup.forumSingleHooksApi.setCustomHeaderBackground('https://link-to-image.png')

# setFilteredForumActionButtons(filteredForumActionButtons)

Append or prepend action buttons inside the forum action sheet. By default, only Create Discussion and Subscribe buttons are inside. Use this function to add more buttons.

Parameters:
Name Type Description
filteredForumActionButtons TransformForumActionButtonsCallback
Example
externalCodeSetup.forumSingleHooksApi.setFilteredForumActionButtons((action) => {

   const share = () => {
     //Create share function
   }

   const btnA = {
     label: 'Share link',
     doFunction: () => () => share(),
     icon: {fontIconName: "hand-pointer", weight: "400"}
   }

   return [...action, btnA];

})

# setForumDetailsComponent(ForumDetailsComponent)

Replaces the forum details component

Parameters:
Name Type Description
ForumDetailsComponent React.ComponentType.<ForumDetailsComponentProps>
Example

Instead of short content, include the forum author

...

const {width: DEVICE_WIDTH, height: DEVICE_HEIGHT} = Dimensions.get("window");
export const applyCustomCode = externalCodeSetup => {

 const ForumDetailsComponent = ({ contentStyle, hideShortContent, global, forum, forumShortContent, ForumBottomSheetWrapper, textStyle }) => {
   return (
     <View style={[styles.coverImage]}>
       <Text
         numberOfLines={2}
         ellipsizeMode="tail"
         style={[
           global.textHeaderTitle,
           {
             textAlign: "center",
             marginTop: 0
           },
           textStyle
         ]}
       >
         {forum.title}
       </Text>

         <ForumBottomSheetWrapper>
           <Text
             ellipsizeMode="tail"
             numberOfLines={DEVICE_HEIGHT < 700 ? 1 : 2}
             style={[
               global.textSmall,
               {
                 textAlign: "center",
                 marginTop: 12
               },
               textStyle
             ]}
           >
             This forum is moderated by {forum.author.name}
           </Text>
         </ForumBottomSheetWrapper>

     </View>
   )
 }

 externalCodeSetup.forumSingleHooksApi.setForumDetailsComponent((props) => <ForumDetailsComponent {...props} />)
};

const styles = StyleSheet.create({
	coverImage: {
		paddingBottom: 14,
		paddingHorizontal: GUTTER * 2,
		flex: 1,
		width: "100%",
		justifyContent: "flex-end",
		marginBottom: 20
	}
});

# setForumHeaderRenderer(ForumHeaderRenderernullable)

Adds a component below a forum's cover image and replaces components for displaying associated groups and components generated by hooks such as forumSingleHooksApi.BeforeDetailsComponent.

Parameters:
Name Type Attributes Description
ForumHeaderRenderer React.ComponentType.<ForumHeaderProps> <nullable>
Example

Header component with more information display

...

import HTML from "react-native-render-html";
export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.forumSingleHooksApi.setForumHeaderRenderer((props) => {
   const { forum, formatDateFunc } = props
   return <View style={{ padding: 10 }}>

     <Text> {forum.title}  </Text>
     <HTML html={forum.content} />
     <Text> Created {formatDateFunc(forum.date)}  </Text>
     <Text> Last modified {formatDateFunc(forum.modified)}  </Text>
   </View>
 })
}

# setForumSingleHeaderHeight(height)

You can use it to set the height of the forum header. Please keep in mind that the cover image, title and short content might be affected depending on height set.

Parameters:
Name Type Description
height Number
Example
externalCodeSetup.forumSingleHooksApi.setForumSingleHeaderHeight(100);

# setHeaderRightComponent(HeaderRightComponent)

Replaces the headerRightComponent in forumSingleScreen. By default, headerRightComponent contains actions such as "Create Discussion" and "Subscribe"

Parameters:
Name Type Description
HeaderRightComponent React.ComponentType.<HeaderRightComponentProps>
Example

Users would like to use Create Discussion and Subscribe buttons outside of an action sheet.

 //(In custom_code/components/ForumHeaderButtons.js)

 import React from 'react';
 import { Button } from 'react-native';
 import {useDispatch} from "react-redux";

 export const ForumHeaderButtons = ({actionButtons, forum, t}) => {

     //Use redux's dispatch to call actionButtons' functions.
     //actionButtons[0] = create discussion, actionButtons[1] = subscribe/unsubscribe

 	const dispatch = useDispatch();
     return <>
       <Button onPress={() => dispatch(actionButtons[0].doFunction(forum))} title={t(actionButtons[0].label)} />
       <Button onPress={() => dispatch(actionButtons[1].doFunction(forum))} title={t(actionButtons[1].label)} />
     </>
 }
 export default ForumHeaderButtons;

 //(In custom_code/index.js)
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.forumSingleHooksApi.setHeaderRightComponent(({ t, forum, colors, global, headerColor, actionButtons, ...rest }) => {
     //Pass the necessary props to the custom component
     return <ForumHeaderButtons forum={forum} actionButtons={actionButtons} t={t}/>
  })
}