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