Methods
# setAfterDetailsComponent(AfterDetailsComponent)
You can customize the Social Group options such as replacing group avatars, adding components before/after the group details, modifying the default group action buttons and much more.
Parameters:
Name | Type | Description |
---|---|---|
AfterDetailsComponent |
React.ComponentType.<AfterGroupDetailsComponentProps> | jsx to render after details display |
Example
const AfterDetailsComponent = (props) => {
return <Button title="Open this group in a web browser" onPress={() => props.group.navigateToWeb()} />
}
externalCodeSetup.socialGroupSingleApi.setAfterDetailsComponent(AfterDetailsComponent)
# setAfterProfileHeader(AfterProfileHeader)
It adds a component after the group header but places it before the group items list.
Parameters:
Name | Type | Description |
---|---|---|
AfterProfileHeader |
React.ComponentType.<AfterGroupProfileHeaderProps> |
Example
const AfterProfileHeader = (props) => {
const {group} = props;
return group.hasForum && <View style={{margin: 10}}>
<Button onPress={() => group.subscribeClick()} title="Subscribe/Unsubscribe to group forum" />
</View>
}
externalCodeSetup.socialGroupSingleApi.setAfterProfileHeader(AfterProfileHeader)
# setBeforeDetailsComponent(BeforeDetailsComponent)
You can use it to add a component before the group details such as the title and group description.
Parameters:
Name | Type | Description |
---|---|---|
BeforeDetailsComponent |
React.ComponentType.<BeforeGroupDetailsComponentProps> |
Example
const BeforeDetailsComponent = (props) => {
return !props.group.isMember && <Text>You are not a member of this group. To see all available items, please join the group.</Text>
}
externalCodeSetup.socialGroupSingleApi.setBeforeDetailsComponent(BeforeDetailsComponent)
# setCustomHeaderBackground(customHeaderBackground)
Replaces a group's cover image
Parameters:
Name | Type | Description |
---|---|---|
customHeaderBackground |
String |
Example
externalCodeSetup.socialGroupSingleApi.setCustomHeaderBackground('https://link-to-image.png')
# setFilteredGroupActionButtons(filteredGroupActionButtons)
Append or prepend action buttons.
You can use this to modify the group's default action buttons.
doFunction
can be used to dispatch a redux action.
Parameters:
Name | Type | Description |
---|---|---|
filteredGroupActionButtons |
TransformGroupActionButtonsCallback |
Example
externalCodeSetup.socialGroupSingleApi.setFilteredGroupActionButtons((action) => {
const requestDeliveryRedux = {
label: 'Request for food delivery',
isNavigation: true,
doFunction: () => ({ type: "FOOD_DELIVERY_REQUEST" }) //Call custom redux action FOOD_DELIVERY_REQUEST
}
return [...action, requestDeliveryRedux];
})
# setGroupDetailsComponent(GroupDetailsComponent)
Replaces the group details component and lets you compose your own component to display the group details.
Parameters:
Name | Type | Description |
---|---|---|
GroupDetailsComponent |
React.ComponentType.<GroupDetailsComponentProps> | jsx to render a component that replaces the group details |
Example
Default component structure
//In custom_code/GroupDetailsComponent.js...
import React from "react";
import {View, Text, Animated} from "react-native";
import HTML from "react-native-render-html";
import htmlclean from "htmlclean";
import {
groupMembersCountTranslation,
groupStatusTranslation
} from "@src/utils"; //BuddyBoss translation helper functions
import GroupActionSheetWrapper from "@src/components/Group/GroupActionSheetWrapper";
import {DEVICE_WIDTH, GUTTER} from "@src/styles/global";
const widthWithGutter = DEVICE_WIDTH - GUTTER * 2;
const GroupDetailsComponent = ({ global, colors, group, truncated, textStyle, t, filteredActions, onLinkPress }) => (
<>
<Text
numberOfLines={1}
style={[
global.textHeaderTitle,
{
textAlign: "center",
maxWidth: widthWithGutter,
marginTop: 0,
marginBottom: 3
},
textStyle
]}
>
{group.title}
</Text>
<Animated.View
style={[
global.screenMetas,
{
marginTop: 0,
marginBottom: 11
}
]}
>
<Text
style={[
global.textHeaderMeta,
{ maxWidth: widthWithGutter, textAlign: "center", opacity: 0.8 },
textStyle
]}
>
{groupStatusTranslation(t, group)} •{" "}
{groupMembersCountTranslation(t, group)}
</Text>
</Animated.View>
{!!group.shortContent && (
<Animated.View style={{ maxWidth: 300 }}>
<GroupActionSheetWrapper
actionButtons={filteredActions}
{...{
global,
colors,
t,
group,
onLinkPress
}}
>
<View>
<HTML
html={htmlclean(truncated.html)}
tagsStyles={{
p: { marginTop: 0 },
a: global.textHeaderShortContent
}}
baseFontStyle={{
...global.textHeaderShortContent,
...textStyle
}}
onLinkPress={(event, url) => {
if (onLinkPress) {
onLinkPress(event, url);
}
}}
/>
</View>
</GroupActionSheetWrapper>
</Animated.View>
)}
</>
);
export default GroupDetailsComponent;
//In custom_code/index.js...
...
import GroupDetailsComponent from "./GroupDetailsComponent";
export const applyCustomCode = externalCodeSetup => {
externalCodeSetup.socialGroupSingleApi.setGroupDetailsComponent(GroupDetailsComponent)
}
# setGroupHeaderAvatar(GroupHeaderAvatar)
You can use it to replace the group header avatar. For example, you change the default group avatar if the group does not have an avatar.
Parameters:
Name | Type | Description |
---|---|---|
GroupHeaderAvatar |
React.ComponentType.<GroupHeaderAvatarProps> |
Example
Change default group avatar if group has not avatar
...
import Animated from "react-native-reanimated";
import AppImage from "@src/components/AppImage";
import {DEVICE_WIDTH} from "@src/styles/global";
export const applyCustomCode = externalCodeSetup => {
const GroupHeaderAvatar = (props) => {
const { global, colors, group } = props;
const avatarSize = Math.min(DEVICE_WIDTH * 0.3, 110);
let customUri = group.avatar;
if (group.avatar.includes("mystery-group")) {
customUri = 'https://link-to-image.png'
}
return <Animated.View
style={[
{
marginBottom: 18,
marginTop: "auto"
},
!!group.coverImage && {
borderRadius: 18,
backgroundColor: "#fff",
borderWidth: 3,
borderColor: "#fff",
...global.shadowBelow
}
]}
>
<AppImage
source={{uri: customUri}}
style={[{ width: avatarSize, height: avatarSize, borderRadius: 18 }]}
resizeMode={"contain"}
/>
</Animated.View>
}
externalCodeSetup.socialGroupSingleApi.setGroupHeaderAvatar(GroupHeaderAvatar);
}
# setGroupHeaderButtons(GroupHeaderButtons)
You can add new components near the default group button section.
Parameters:
Name | Type | Description |
---|---|---|
GroupHeaderButtons |
React.ComponentType.<GroupHeaderButtonsProps> |
Examples
Add buttons that can open the group in a web browser
const GroupHeaderButtons = (props) => {
const {OldButtonComponent, group} = props;
const NavigateToForum = () => <TouchableOpacity onPress={() => group.navigateToForum()}>
<Text> Go to forum </Text>
</TouchableOpacity>
const OpenInWeb = () => <TouchableOpacity onPress={() => group.navigateToWeb()}>
<Text> Open in browser </Text>
</TouchableOpacity>
return (
<View style={{flexDirection: "column"}}>
<NavigateToForum />
<OpenInWeb />
<OldButtonComponent />
</View>
)
}
externalCodeSetup.socialGroupSingleApi.setGroupHeaderButtons(GroupHeaderButtons);
Default component structure
//In custom_code/GroupHeaderButton.js...
import React from "react";
import GroupActionSheetWrapper from "@src/components/Group/GroupActionSheetWrapper";
import AvatarActionButton from "@src/components/ActionButtons/AvatarActionButton";
import AuthWrapper from "@src/components/AuthWrapper";
import ActionButtonList from "@src/components/ActionButtons/ActionButtonList";
const GroupHeaderButton = ({group, currentUser, global, colors, t, onLinkPress, filteredActions, buttonTextColor, buttonStyle}) => {
return group.isMember ? (
<GroupActionSheetWrapper
actionButtons={filteredActions}
{...{
global,
colors,
t,
group,
onLinkPress
}}
>
<AvatarActionButton
user={currentUser}
style={{
...buttonStyle,
paddingLeft: 3,
paddingRight: 13
}}
{...{
global,
colors,
t,
title: group.role,
titleStyle: {
...global.textHeaderActionButton,
color: colors.primaryColor
},
color: buttonTextColor
}}
/>
</GroupActionSheetWrapper>
) : (
<AuthWrapper>
<ActionButtonList
hideIcons={true}
actionButtons={filteredActions}
object={group}
color={buttonTextColor}
t={t}
buttonStyle={{
...buttonStyle,
marginHorizontal: 5,
paddingVertical: 0
}}
textStyle={global.textHeaderActionButton}
/>
</AuthWrapper>
);
}
export default GroupHeaderButton;
//In custom_code/index.js...
import GroupHeaderButton from "./components/GroupHeaderButton";
export const applyCustomCode = externalCodeSetup => {
externalCodeSetup.socialGroupSingleApi.setGroupHeaderButtons(GroupHeaderButton)
}
# setTabFilter(tabFilter)
You can use it to modify the tab list on the Groups screen.
Parameters:
Name | Type | Description |
---|---|---|
tabFilter |
TransformGroupTabListCallback |
Example
externalCodeSetup.socialGroupSingleApi.setTabFilter((props) => {
const customTab = {
icon: require("@src/assets/img/about.png"),
label: "About",
onPress: () => Alert.alert("This group was created by the admin"),
count: false,
loading: false
}
return [
...props,
customTab
];
})