App Codex Version: 1.0.0

Class

SocialGroupSingleApi

SocialGroupSingleApi()

Group Single Screen 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>
Example
externalCodeSetup.socialGroupSingleApi.setAfterDetailsComponent(props => {
    return (
        <Button
            title="Open this group in a web browser"
            onPress={() => props.group.navigateToWeb()}
        />
    );
});

# 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
externalCodeSetup.socialGroupSingleApi.setAfterProfileHeader(({group}) => {

    const toggleSubscription = () => {
        if (typeof group.subscribeClick === "function") {
            group.subscribeClick();
        }
    };

    return group.hasForum ? (
        <View style={{margin: 10}}>
            <Button
                onPress={toggleSubscription}
                title="Subscribe/Unsubscribe to group forum"
            />
        </View>
    ) : null;
});

# 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
externalCodeSetup.socialGroupSingleApi.setBeforeDetailsComponent(
    props =>
        !props.group.isMember ? (
            <Text>
                You are not a member of this group. To see all available items, please
                join the group.
            </Text>
        ) : null
);

# 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 Array.<GroupActionButton>
Example
externalCodeSetup.socialGroupSingleApi.setFilteredGroupActionButtons(
    action => {
        const requestDeliveryRedux = {
            icon: {fontIconName: 'activity', weight: 200},
            label: "Request for food delivery",
            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>
Example
//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";

const GroupDetailsComponent = ({
    global,
    colors,
    group,
    truncated,
    textStyle,
    t,
    filteredActions,
    onLinkPress,
    styles
}) => (
    <>
        <Text
            numberOfLines={1}
            style={[global.textHeaderTitle, styles.textHeaderTitle, textStyle]}
        >
            {group.title}
        </Text>
        <Animated.View style={[global.screenMetas, styles.groupStatusContainer]}>
            <Text style={[global.textHeaderMeta, styles.groupStatusText, 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(props => <GroupDetailsComponent {...props} />);
}

# 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 no avatar 

...
import Animated from "react-native-reanimated";
import AppImage from "@src/components/AppImage";
import {DEVICE_WIDTH} from "@src/styles/global";
export const applyCustomCode = externalCodeSetup => {

  externalCodeSetup.socialGroupSingleApi.setGroupHeaderAvatar(props => {
      const {global, 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>
      );
  });
}

# 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 

externalCodeSetup.socialGroupSingleApi.setGroupHeaderButtons(props => {

    const {OldButtonComponent, group} = props;

    const goToForum = () => {
        if (typeof group.navigateToForum === 'function'){
            group.navigateToForum()
        }
    }

    const NavigateToForum = () => (
        <TouchableOpacity onPress={() => goToForum()}>
            <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>
    );

});

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

# setHeaderRightComponent(HeaderRightComponent)

You can use this hook to customize the button of the HeaderRightComponent.

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

import AuthWrapper from "@src/components/AuthWrapper";
import {BottomSheetWrapper} from "../src/containers/SocialGroupsSingleScreen";
import IconButton from "@src/components/IconButton";
export const applyCustomCode = (externalCodeSetup: ExternalCodeSetup) => {
    externalCodeSetup.socialGroupSingleApi.setHeaderRightComponent(
        ({
            styles,
            t,
            group,
            colors,
            global,
            actionButtons,
            onLinkPress,
            icon,
            headerColor,
            rest
        }) => (
            <AuthWrapper>
                <View style={styles.container}>
                    <BottomSheetWrapper
                        t={t}
                        group={group}
                        colors={colors}
                        global={global}
                        actionButtons={actionButtons}
                        onLinkPress={onLinkPress}
                    >
                        <IconButton
                            icon={icon}
                            webIcon={"IconAdd"}
                            tintColor={headerColor}
                            style={styles.icon}
                            {...rest}
                        />
                    </BottomSheetWrapper>
                </View>
            </AuthWrapper>
        )
    );
}

# setManageGroupTabFilter(manageGroupTabFilter)

You can use this hook to modify the tabs in the Group Manage screen.

Parameters:
Name Type Description
manageGroupTabFilter Array.<GroupManageTab>
Example
externalCodeSetup.socialGroupSingleApi.setManageGroupTabFilter(props => {
    const customTab = {
        icon: {fontIconName: 'comment', weight: 200},
        label: "About",
        onPress: () => Alert.alert("Navigate to custom manage screen")
    };

    return [...props, customTab];
});

# setParentGroupBar(ParentGroupBar)

You can use this hook to customize the ParentGroupBar component which is rendered if a group has a parent.

Parameters:
Name Type Description
ParentGroupBar React.ComponentType.<ParentGroupBarProps>
Example
...

import ParentGroupBar from "@src/components/Group/ParentGroupBar";

export const applyCustomCode = (externalCodeSetup) => {

    externalCodeSetup.socialGroupSingleApi.setParentGroupBar(
        ({parentGroup, styles, group, global, colors, navigateToParent, t}) => {
            return !!parentGroup ? (
                <ParentGroupBar
                    containerStyle={styles.container}
                    parentGroup={parentGroup}
                    subGroup={group}
                    global={global}
                    colors={colors}
                    onPress={navigateToParent}
                    t={t}
                />
            ) : null;
        }
    );

}

# setSendInvitesTabFilter(sendInvitesTabFilter)

You can use this hook to modify the tabs in the Group Send Invites screen. By default, only "Send Invites" and "Pending Invites" are available.

Parameters:
Name Type Description
sendInvitesTabFilter Array.<GroupSendInvitesTab>
Example
externalCodeSetup.socialGroupSingleApi.setSendInvitesTabFilter(props => {

   const customTab = {
       icon: {fontIconName: 'comment', weight: 200},
       label: "About",
       onPress: () => Alert.alert("Navigate to custom invite screen"),
   };

   return [...props, customTab];
});

# setTabArrowComponent(TabArrowComponent)

You can use this hook to customize the list item's arrow component.

Parameters:
Name Type Description
TabArrowComponent React.ComponentType.<GroupTabArrowComponentProps>
Example
...

import Icon from "@src/components/Icon";

export const applyCustomCode = (externalCodeSetup) => {
  externalCodeSetup.socialGroupSingleApi.setTabArrowComponent(
      ({tintColor, icon, styles}) => (
          <Icon
              webIcon={"IconArrowRight"}
              tintColor={tintColor}
              icon={icon}
              styles={styles.arrow}
          />
      )
  );
}

# setTabBadge(TabBadge)

You can use this hook to customize the list item's badge.

Parameters:
Name Type Description
TabBadge React.ComponentType.<GroupTabBadgeProps>
Example
...

import {BubbleIcon} from "@src/components/BubbleIcon";

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.socialGroupSingleApi.setTabBadge(
        ({item, global, text, styles}) => (
            <BubbleIcon
                key={"tab_badge_" + item.label}
                global={global}
                text={text}
                containerStyle={styles.container}
                textStyle={styles.text}
            />
        )
    );
}

# setTabFilter(tabFilter)

You can use it to modify the tab list on the Groups screen.

Parameters:
Name Type Description
tabFilter Array.<GroupListTab>
Example
externalCodeSetup.socialGroupSingleApi.setTabFilter(props => {
    const customTab = {
        icon: {fontIconName: 'comment', weight: 200},
        label: "About",
        onPress: () => Alert.alert("This group was created by the admin"),
        count: 0,
        loading: false,
    };

    return [...props, customTab];
});

# setTabIcon(TabIcon)

You can use this hook to customize the list item's icon.

Parameters:
Name Type Description
TabIcon React.ComponentType.<GroupTabIconProps>
Example
...

import Icon from "@src/components/Icon";

export const applyCustomCode = (externalCodeSetup: ExternalCodeSetup) => {

    externalCodeSetup.socialGroupSingleApi.setTabIcon(
        ({link, global, colors}) => {
            return link.icon ? (
                <View style={global.profileItemIconWrap}>
                    <Icon
                        tintColor={colors.textColor}
                        icon={link.icon}
                        styles={global.profileItemIcon}
                    />
                </View>
            ) : null;
        }
    );
}

# setTabTitleComponent(TabTitleComponent)

You can use this hook to customize the list item's title component.

Parameters:
Name Type Description
TabTitleComponent React.ComponentType.<GroupTabTitleComponentProps>
Example
externalCodeSetup.socialGroupSingleApi.setTabTitleComponent(
    ({index, styles, title}) => (
        <Text key={"itemTitle_" + index} style={styles.title}>
            {title}
        </Text>
    )
);