App Codex Version: 1.0.0

Class

SocialGroupSingleApi

SocialGroupSingleApi()

Group Single Hooks. Instance name: socialGroupSingleApi

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.

Constructor

# new SocialGroupSingleApi()

Example
externalCodeSetup.socialGroupSingleApi.METHOD_NAME

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
   ];
 })