# new ForumSingleHooksApi()

Example

externalCodeSetup.forumSingleHooksApi.METHOD_NAME

# hideForumSingleShortContent()

Example

externalCodeSetup.forumSingleHooksApi.hideForumSingleShortContent();

# setAfterDetailsComponent(AfterDetailsComponent)

Parameters:

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)

Parameters:

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)

Parameters:

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={require("@src/assets/img/curved-arrow.png")}
                       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)

Parameters:

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)

Parameters:

Example

externalCodeSetup.forumSingleHooksApi.setCustomHeaderBackground('https://link-to-image.png')

# setFilteredForumActionButtons(filteredForumActionButtons)

Parameters:

Example

externalCodeSetup.forumSingleHooksApi.setFilteredForumActionButtons((action) => {

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

   const btnA = {
     label: 'Share link',
     doFunction: () => () => share(),
     icon: require("@src/assets/img/tick.png"),
   }

   return [...action, btnA];

})

# setForumDetailsComponent(ForumDetailsComponent)

Parameters:

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)

Parameters:

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)

Parameters:

Example

externalCodeSetup.forumSingleHooksApi.setForumSingleHeaderHeight(100);

# setHeaderRightComponent(HeaderRightComponent)

Parameters:

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}/>
  })
}