import React from "react";
import {TGroupViewModel, TTranslationFunction} from "./types";
export const API_NAME = "socialGroupSingleApi";
/**
* GroupListTab
*/
type GroupListTab = {
icon: number,
label: string,
/**
* Indicates badge value
*/
count: number,
/**
* Returns `true` if tab is loading
*/
loading: boolean,
/**
* Default function of the tab
*/
onPress: Function
};
/**
* GroupActionButton
*/
type GroupActionButton = {
icon: number,
label: string,
/**
* Default function of action button
*/
doFunction: Function,
/**
* Validation details
*/
onPressValidation?: Record<any, any>
};
/**
* TransformGroupActionButtonsCallback
*/
type TransformGroupActionButtonsCallback = {
action: Record<any, any>[]
};
/**
* GroupHeaderAvatarProps
*/
type GroupHeaderAvatarProps = {
/**
* App global style
*/
global: Record<any, any>,
/**
* App colors
*/
colors: Record<any, any>,
group: TGroupViewModel,
/**
* Returns `true` if group avatar upload is disabled
*/
disableGroupAvatarUpload: boolean
};
/**
* BeforeGroupDetailsComponentProps
*/
type BeforeGroupDetailsComponentProps = {
/**
* App global style
*/
global: Record<any, any>,
/**
* App colors
*/
colors: Record<any, any>,
group: TGroupViewModel
};
/**
* AfterGroupDetailsComponentProps
*/
type AfterGroupDetailsComponentProps = {
/**
* App global style
*/
global: Record<any, any>,
/**
* App colors
*/
colors: Record<any, any>,
group: TGroupViewModel
};
/**
* GroupHeaderButtonsProps
*/
type GroupHeaderButtonsProps = {
/**
* Default button component displayed for the group. Ex: "Request to Join", "Member", etc.
*/
OldButtonComponent: Function,
/**
* App global style
*/
global: Record<any, any>,
/**
* App colors
*/
colors: Record<any, any>,
group: TGroupViewModel,
/**
* Details about the currently logged-in user
*/
currentUser: Record<any, any>,
t: TTranslationFunction,
/**
* Functions used in group details
*/
filteredActions: Record<any, any>[],
/**
* Default function when a link is pressed
*/
onLinkPress: Function,
buttonTextColor: string,
buttonStyle: Record<any, any>,
/**
* Default styles
*/
styles: Record<any, any>
};
/**
* GroupDetailsComponentProps
*/
type GroupDetailsComponentProps = {
/**
* App global style
*/
global: Record<any, any>,
/**
* App colors
*/
colors: Record<any, any>,
group: TGroupViewModel,
t: TTranslationFunction,
/**
* Functions used in group details
*/
filteredActions: Record<any, any>[],
/**
* Default function when a link is pressed
*/
onLinkPress: Function,
/**
* Group description
*/
truncated: Record<any, any>,
textStyle: Record<any, any>
};
/**
* AfterGroupProfileHeaderProps
*/
type AfterGroupProfileHeaderProps = {
/**
* App global style
*/
global: Record<any, any>,
/**
* App colors
*/
colors: Record<any, any>,
group: TGroupViewModel
};
/**
* HeaderRightComponentProps
*/
type HeaderRightComponentProps = {
styles: Record<any, any>,
t: TTranslationFunction,
group: TGroupViewModel,
/**
* App global style
*/
global: Record<any, any>,
/**
* App colors
*/
colors: Record<any, any>,
/**
* Handles link press for the HTML component
*/
onLinkPress: Function,
/**
* Default icon
*/
icon: number,
/**
* Default header color
*/
headerColor: string,
rest: Record<any, any> | undefined,
/**
* Action buttons to render
*/
actionButtons: Record<any, any>[],
/**
* Returns `true` if logged-in user can subscribe to the group
*/
canSubscribe: boolean,
/**
* Returns `true` if logged-in user is subscribed to the group
*/
isSubscribed: boolean,
/**
* Returns `true` if subscription state is loading
*/
subscriptionLoading: boolean,
/**
* Function to toggle user's subscription to the group
*/
subscribeToGroup: Function,
/**
* Default font icon name of the header action button
*/
fontIconName: string,
/**
* Default font icon weight of the header action button
*/
fontIconWeight: number,
/**
* Default font icon name of the subscribe button
*/
fontIconSubscribeName: string,
/**
* Default font icon weight of the subscribe button
*/
fontIconSubscribeWeight: number
};
/**
* ParentGroupBarProps
*/
type ParentGroupBarProps = {
/**
* Default styles
*/
styles: Record<any, any>,
/**
* Details of group's parent
*/
parentGroup: null | Record<any, any>,
group: TGroupViewModel,
/**
* App global style
*/
global: Record<any, any>,
/**
* App colors
*/
colors: Record<any, any>,
/**
* Navigate to parent group
*/
navigateToParent: Function,
t: TTranslationFunction
};
/**
* GroupTabBadgeProps
*/
type GroupTabBadgeProps = {
/**
* Badge details
*/
item: Record<any, any>,
/**
* App global style
*/
global: Record<any, any>,
/**
* Badge text
*/
text: number,
/**
* Default styles
*/
styles: Record<any, any>
};
/**
* GroupTabIconProps
*/
type GroupTabIconProps = {
/**
* Icon details
*/
link: Record<any, any>,
/**
* App global style
*/
global: Record<any, any>,
/**
* App colors
*/
colors: Record<any, any>
};
/**
* GroupTabArrowComponentProps
*/
type GroupTabArrowComponentProps = {
/**
* Icon color
*/
tintColor: string,
/**
* Icon resource
*/
icon: number,
/**
* Default styles
*/
styles: Record<any, any>
};
/**
* GroupTabTitleComponentProps
*/
type GroupTabTitleComponentProps = {
/**
* Tab index
*/
index: number,
/**
* Default styles
*/
styles: Record<any, any>,
/**
* Tab title
*/
title: string
};
/**
* GroupSendInvitesTab
*/
type GroupSendInvitesTab = {
/**
* Default icon
*/
icon: number,
/**
* Default label
*/
label: string,
/**
* Default function to execute when tab is pressed
*/
onPress: Function
};
/**
* GroupManageTab
*/
type GroupManageTab = {
/**
* Default icon
*/
icon: number,
/**
* Default label
*/
label: string,
/**
* Default function to execute when tab is pressed
*/
onPress: Function
};
/**
* @class
* 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.
* @example
* externalCodeSetup.socialGroupSingleApi.METHOD_NAME
*/
export class SocialGroupSingleApi {
filterTabs = (tabs: GroupListTab[]) => tabs;
/**
* You can use it to modify the tab list on the Groups screen.
* @method
* @param {GroupListTab[]} tabFilter
* @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];
* });
*/
setTabFilter = (tabFilter: (tabs: GroupListTab[]) => GroupListTab[]) => {
this.filterTabs = tabFilter;
};
//@ts-ignore
privateGroupTabIgnoreFilter = tabs => tabs;
/**
* @ignore
* Reason for ignore: privateGroupTabIgnoreFilter is not being used in the app
* Filters the list of items that should not show to non-members if group is private
*/
//@ts-ignore
setPrivateGroupTabFilter = filterFunction => {
this.privateGroupTabIgnoreFilter = filterFunction;
};
GroupHeaderAvatar: React.ComponentType<GroupHeaderAvatarProps> | null = null;
/**
* 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.
* @method
* @param {React.ComponentType<GroupHeaderAvatarProps>} GroupHeaderAvatar
* @example <caption> Change default group avatar if group has not avatar </caption>
*
* ...
* 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>
* );
* });
* }
*/
setGroupHeaderAvatar = (
GroupHeaderAvatar: React.ComponentType<GroupHeaderAvatarProps> | null
) => {
this.GroupHeaderAvatar = GroupHeaderAvatar;
};
customHeaderBackground: string | null = null;
/**
* Replaces a group's cover image
* @method
* @param {String} customHeaderBackground
* @example
* externalCodeSetup.socialGroupSingleApi.setCustomHeaderBackground('https://link-to-image.png')
*/
setCustomHeaderBackground = (customHeaderBackground: string | null) => {
this.customHeaderBackground = customHeaderBackground;
};
BeforeDetailsComponent: React.ComponentType<
BeforeGroupDetailsComponentProps
> | null = null;
/**
* You can use it to add a component before the group details such as the title and group description.
* @method
* @param {React.ComponentType<BeforeGroupDetailsComponentProps>} BeforeDetailsComponent
* @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
* );
*/
setBeforeDetailsComponent = (
BeforeDetailsComponent: React.ComponentType<
BeforeGroupDetailsComponentProps
> | null
) => {
this.BeforeDetailsComponent = BeforeDetailsComponent;
};
AfterDetailsComponent: React.ComponentType<
AfterGroupDetailsComponentProps
> | null = null;
/**
* 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.
* @method
* @param {React.ComponentType<AfterGroupDetailsComponentProps>} AfterDetailsComponent
* @example
* externalCodeSetup.socialGroupSingleApi.setAfterDetailsComponent(props => {
* return (
* <Button
* title="Open this group in a web browser"
* onPress={() => props.group.navigateToWeb()}
* />
* );
* });
*/
setAfterDetailsComponent = (
AfterDetailsComponent: React.ComponentType<
AfterGroupDetailsComponentProps
> | null
) => {
this.AfterDetailsComponent = AfterDetailsComponent;
};
GroupDetailsComponent: React.ComponentType<
GroupDetailsComponentProps
> | null = null;
/**
* Replaces the group details component and lets you compose your own component to display the group details.
* @method
* @param {React.ComponentType<GroupDetailsComponentProps>} GroupDetailsComponent
* @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} />);
* }
*/
setGroupDetailsComponent = (
GroupDetailsComponent: React.ComponentType<
GroupDetailsComponentProps
> | null
) => {
this.GroupDetailsComponent = GroupDetailsComponent;
};
GroupHeaderButtons: React.ComponentType<
GroupHeaderButtonsProps
> | null = null;
/**
* You can add new components near the default group button section.
* @method
* @param {React.ComponentType<GroupHeaderButtonsProps>} GroupHeaderButtons
* @example <caption> Add buttons that can open the group in a web browser </caption>
* 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>
* );
*
* });
*
* @example <caption> Default component structure </caption>
*
* //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)
* }
*/
setGroupHeaderButtons = (
GroupHeaderButtons: React.ComponentType<GroupHeaderButtonsProps> | null
) => {
this.GroupHeaderButtons = GroupHeaderButtons;
};
AfterProfileHeader: React.ComponentType<
AfterGroupProfileHeaderProps
> | null = null;
/**
* It adds a component after the group header but places it before the group items list.
* @method
* @param {React.ComponentType<AfterGroupProfileHeaderProps>} AfterProfileHeader
* @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;
* });
*/
setAfterProfileHeader = (
AfterProfileHeader: React.ComponentType<AfterGroupProfileHeaderProps> | null
) => {
this.AfterProfileHeader = AfterProfileHeader;
};
filteredGroupActionButtons = (actions: GroupActionButton[]) => actions;
/**
* 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.
* @method
* @param {GroupActionButton[]} filteredGroupActionButtons
* @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];
* }
* );
*/
setFilteredGroupActionButtons = (
filteredGroupActionButtons: (
buttons: GroupActionButton[]
) => GroupActionButton[]
) => {
this.filteredGroupActionButtons = filteredGroupActionButtons;
};
HeaderRightComponent: React.ComponentType<
HeaderRightComponentProps
> | null = null;
/**
* You can use this hook to customize the button of the HeaderRightComponent.
* @method
* @param {React.ComponentType<HeaderRightComponentProps>} HeaderRightComponent
* @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>
* )
* );
* }
*/
setHeaderRightComponent = (
HeaderRightComponent: React.ComponentType<HeaderRightComponentProps> | null
) => {
this.HeaderRightComponent = HeaderRightComponent;
};
ParentGroupBar: React.ComponentType<ParentGroupBarProps> | null = null;
/**
* You can use this hook to customize the ParentGroupBar component which is rendered if a group has a parent.
* @method
* @param {React.ComponentType<ParentGroupBarProps>} ParentGroupBar
* @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;
* }
* );
*
* }
*/
setParentGroupBar = (
ParentGroupBar: React.ComponentType<ParentGroupBarProps> | null
) => {
this.ParentGroupBar = ParentGroupBar;
};
TabBadge: React.ComponentType<GroupTabBadgeProps> | null = null;
/**
* You can use this hook to customize the list item's badge.
* @method
* @param {React.ComponentType<GroupTabBadgeProps>} TabBadge
* @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}
* />
* )
* );
* }
*
*/
setTabBadge = (TabBadge: React.ComponentType<GroupTabBadgeProps> | null) => {
this.TabBadge = TabBadge;
};
TabIcon: React.ComponentType<GroupTabIconProps> | null = null;
/**
* You can use this hook to customize the list item's icon.
* @method
* @param {React.ComponentType<GroupTabIconProps>} TabIcon
* @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;
* }
* );
* }
*/
setTabIcon = (TabIcon: React.ComponentType<GroupTabIconProps> | null) => {
this.TabIcon = TabIcon;
};
TabArrowComponent: React.ComponentType<
GroupTabArrowComponentProps
> | null = null;
/**
* You can use this hook to customize the list item's arrow component.
* @method
* @param {React.ComponentType<GroupTabArrowComponentProps>} TabArrowComponent
* @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}
* />
* )
* );
* }
*
*/
setTabArrowComponent = (
TabArrowComponent: React.ComponentType<GroupTabArrowComponentProps> | null
) => {
this.TabArrowComponent = TabArrowComponent;
};
TabTitleComponent: React.ComponentType<
GroupTabTitleComponentProps
> | null = null;
/**
* You can use this hook to customize the list item's title component.
* @method
* @param {React.ComponentType<GroupTabTitleComponentProps>} TabTitleComponent
* @example
*
* externalCodeSetup.socialGroupSingleApi.setTabTitleComponent(
* ({index, styles, title}) => (
* <Text key={"itemTitle_" + index} style={styles.title}>
* {title}
* </Text>
* )
* );
*
*/
setTabTitleComponent = (
TabTitleComponent: React.ComponentType<GroupTabTitleComponentProps> | null
) => {
this.TabTitleComponent = TabTitleComponent;
};
sendInvitesTabFilter = (tabs: GroupSendInvitesTab[]) => tabs;
/**
* 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.
* @method
* @param {GroupSendInvitesTab[]} sendInvitesTabFilter
* @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];
* });
*/
setSendInvitesTabFilter = (
sendInvitesTabFilter: (tabs: GroupSendInvitesTab[]) => GroupSendInvitesTab[]
) => {
this.sendInvitesTabFilter = sendInvitesTabFilter;
};
manageGroupTabFilter = (tabs: GroupManageTab[]) => tabs;
/**
* You can use this hook to modify the tabs in the Group Manage screen.
* @method
* @param {GroupManageTab[]} manageGroupTabFilter
* @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];
* });
*/
setManageGroupTabFilter = (
manageGroupTabFilter: (tabs: GroupManageTab[]) => GroupManageTab[]
) => {
this.manageGroupTabFilter = manageGroupTabFilter;
};
}
Source