Class

NotificationsScreenApi

NotificationsScreenApi()

Notification screen hooks. Instance name: notificationsScreenApi

You can use this hook to customize the notifications screen such as by adding header icons and other actions.

Constructor

# new NotificationsScreenApi()

Example
externalCodeSetup.notificationsScreenApi.METHOD_NAME

Methods

# enableAlwaysShowHeaderRight()

Use this to always show the header right component.

Example
externalCodeSetup.notificationsApiHooks.enableAlwaysShowHeaderRight();

# setFetchParamsFilter(fetchParamsFilter)

It overrides the parameters that are used to fetch notifications in the Notifications screen so that you can make it as customizable as possible when calling its API.

Parameters:
Name Type Description
fetchParamsFilter TransformNotificationsParams
Example

Create a custom filter in notifications screen

//In custom_code/components/MyCustomScreen.js...

import React, { useState } from "react";
import { Modal, StyleSheet, Text, View, TouchableOpacity, Button, TextInput } from "react-native";
import NotificationsScreen from "@src/containers/Custom/NotificationsScreen";
import { notificationsRequested } from "@src/actions/notifications";
import { getExternalCodeSetup } from "@src/externalCode/externalRepo";
import { useDispatch } from "react-redux";

const filter = "unread"; //Available filters:  "unread", "read"
const refresh = true; //Set to true to refresh list

const MyCustomScreen = props => {

    const dispatch = useDispatch();

    const [modalVisible, setModalVisible] = useState(false);

    const [search, setSearch] = useState(false);

    const handleSubmit = () => {

        //Set custom parameters before fetching
        getExternalCodeSetup().notificationsScreenApi.setFetchParamsFilter((props) => {

            //You can add more parameters such as "subject", "keyword" etc...
            return {
                ...props,
                search
            }
        })

        //Dispatch redux action to call api using customized filters
        dispatch(notificationsRequested(filter, refresh));

        setModalVisible(!modalVisible)

    }

    return (<>
        <NotificationsScreen {...props} />
        <View style={styles.centeredView}>
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    Alert.alert("Modal has been closed.");
                    setModalVisible(!modalVisible);
                }}
            >
                <View style={{position:"absolute", bottom: 150, right: 50}}>
                    <View style={styles.modalView}>
                        <TextInput
                            style={{paddingHorizontal: 20, marginTop: 10, fontSize: 20}}
                            autoFocus
                            value={search}
                            onChangeText={search => setSearch(search)}
                            placeholder="Search"
                        />
                        <Button
                            onPress={() => handleSubmit()}
                            title="Filter"
                        />
                    </View>
                </View>
            </Modal>
            <TouchableOpacity
                style={[styles.button, styles.buttonOpen]}
                onPress={() => setModalVisible(true)}
            >
                <Text style={styles.textStyle}>Show Filter Modal</Text>
            </TouchableOpacity>
        </View>
    </>)

}


const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22,
        position: "absolute",
        bottom: 100,
        right: 50
    },
    modalView: {
        margin: 20,
        backgroundColor: "white",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5
    },
    button: {
        borderRadius: 20,
        padding: 10,
        elevation: 2,
        justifyContent: "center",
        alignSelf: "center"
    },
    buttonOpen: {
        backgroundColor: "#000000",
    },
    textStyle: {
        color: "white",
        fontWeight: "bold",
        textAlign: "center"
    },
});

export default MyCustomScreen;

//In custom_code/index.js...

import MyCustomScreen from "./components/MyCustomScreen";

export const applyCustomCode = externalCodeSetup => {

   externalCodeSetup.navigationApi.addNavigationRoute(
      "book",
      "BookScreen",
      MyCustomScreen,
      "All"
   );
   externalCodeSetup.navigationApi.addNavigationRoute(
      "book",
      "BookScreen",
      MyCustomScreen,
      "Main"
   );
}

# setNotificationItemMoreButton(NotificationItemMoreButtonnullable)

You can use this hook to customize the NotificationItemMoreButton. For example, you can use this hook to change the NotificationItemMoreButton's icon.

Parameters:
Name Type Attributes Description
NotificationItemMoreButton React.ComponentType.<NotificationItemMoreButtonProps> <nullable>
Example
externalCodeSetup.notificationsScreenApi.setNotificationItemMoreButton(({colors, notList}) => {
   return !!!notList && (
      <Icon
         icon={{fontIconName: "ellipsis-h", weight: 300}}
         tintColor={colors.textIconColor}
         styles={{
            marginLeft: 10,
            padding: 5
         }}
      />
   )
})

# setNotificationsItemRowComponent(NotificationsItemRowComponentnullable)

You can use this hook to customize the NotificationsItemRowComponent. For example, you can use this hook to modify how the content and metadata component are rendered.

Parameters:
Name Type Attributes Description
NotificationsItemRowComponent React.ComponentType.<NotificationsItemRowComponentProps> <nullable>
Example
//In custom_code/components/NotificationsItemRowComponent.js...

import React from "react"
import {View, Text} from "react-native";
const NotificationsItemRowComponent = ({
  styles,
  renderContent,
  global,
  colors,
  item,
  textColor,
  navigation,
  formatDateFunc,
  DefaultMetadataComponent
}) => <View style={styles.contentContainer}>
    <View style={styles.fullWidth}>
        <View>
            {renderContent(
                "left",
                true,
                global,
                colors,
                item,
                textColor,
                navigation
            )}
        </View>

        <Text style={[global.itemLightMeta, {marginTop: 6}]}>
          {formatDateFunc(item.date)}
        </Text>

        //Same as date component above
        <DefaultMetadataComponent
            {...{
                global,
                formatDateFunc,
                item
            }}
        />
    </View>
</View>

export default NotificationsItemRowComponent

//In custom_code/index.js..

import NotificationsItemRowComponent from "./components/NotificationsItemRowComponent"
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.notificationsScreenApi.setNotificationsItemRowComponent(props => <NotificationsItemRowComponent {...props} />)
}

# setNotificationsItemWidgetAvatarComponent(NotificationsItemWidgetAvatarComponentnullable)

You can use this to change the profile avatar.

Parameters:
Name Type Attributes Description
NotificationsItemWidgetAvatarComponent React.ComponentType.<NotificationsItemWidgetAvatarComponentProps> <nullable>
Example
//In custom_code/components/NotificationsItemWidgetAvatar.js...

import React from "react";
import AppAvatar from "@src/components/AppAvatar";
import AppTouchableWithoutFeedback from "@src/components/AppTouchableOpacity";
const AVATAR_SIZE = 50; //Default avatar size
const AVATAR_MARGIN_LEFT = 8;

const NotificationsItemWidgetAvatar = (props) => {

   const { item, styles, notList, getAvatar } = props;

   return (
       <AppTouchableWithoutFeedback
           onPress={item.navigateToProfile ? item.navigateToProfile : () => { }}
           style={[
               styles.avatarWrap,
               { marginLeft: notList ? 0 : AVATAR_MARGIN_LEFT }
           ]}
       >
           <AppAvatar
               // size={AVATAR_SIZE}
               size={30} //Use smaller avatar
               name={item?.user?.name}
               source={{
                   uri: getAvatar(item?.avatar_urls?.full, 96)
               }}
           />
       </AppTouchableWithoutFeedback>
   )

}

export default NotificationsItemWidgetAvatar;

//In custom_code/index.js...

...

import NotificationsItemWidgetAvatar from "./components/NotificationsItemWidgetAvatar";
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.notificationsScreenApi.setNotificationsItemWidgetAvatarComponent((props) => <NotificationsItemWidgetAvatar {...props} />)
}

# setNotificationsItemWidgetContentComponent(NotificationsItemWidgetContentComponentnullable)

You can use this to change or modify the notification content component of your app.

Parameters:
Name Type Attributes Description
NotificationsItemWidgetContentComponent React.ComponentType.<NotificationsItemWidgetContentComponentProps> <nullable>
Example

Modify content according to notification data

//In custom_code/components/NotificationsItemWidgetContentComponent.js...


import React from "react";
import { Text } from "react-native";
import { RichHtmlText } from "@src/utils/htmlRender"; //Buddyboss helper component which is utilizes `import HTML from "react-native-render-html";`
import HTML from "react-native-render-html";

const NotificationsItemWidgetContent = (props) => {

   const { item, textProps, truncate, colors, capitalizedStrippedTitle, textStyle, global, navigation } = props;

   //By default, BuddyBoss uses RichHtmlText helper to display the content
   const renderDefaultContent = () => <RichHtmlText
       {...textProps}
       limitLines={truncate}
       colors={colors}
       richText={capitalizedStrippedTitle}
       style={
           item.title
               ? { ...textStyle, marginTop: 2, ...global.regularText }
               : textStyle
       }
   />

   //Create new renderer...
   const verifiedUsers = [1, 2];
   const actionsToMarkNotification = ["new_membership_request", "friendship_accepted"];

   const modifyContent = (verifiedUsers.includes(item.secondary_item_id) && actionsToMarkNotification.includes(item.action)) ? true : false;

   const modifiedContent = `<p style="color:red; fontSize: 15">${capitalizedStrippedTitle} </p>`;
   const renderModifiedContent = () => <HTML
	        html={modifiedContent}
       renderers={{
           p: (_, children, convertedCSSStyles, {key}) => {
               return (
                   <Text
                       numberOfLines={truncate === false ? undefined : 1}
                       ellipsizeMode="tail"
                       key={key}
                       style={convertedCSSStyles}
                   >
                       {children}
                   </Text>
               );
           }
       }}
   />
   //End modified renderer...

   return (<>
       {!!item.title && (
           <Text
               numberOfLines={1}
               ellipsizeMode={"tail"}
               style={{
                   ...textStyle,
                   marginTop: 2
               }}
               {...textProps}
           >
               {item.title}
           </Text>
       )}

       {modifyContent ? renderModifiedContent() : renderDefaultContent()}

    </>)
}

export default NotificationsItemWidgetContent;

//In custom_code/index.js...

...

import NotificationsItemWidgetContent from "./components/NotificationsItemWidgetContent"
export const applyCustomCode = externalCodeSetup => {
 externalCodeSetup.notificationsScreenApi.setNotificationsItemWidgetContentComponent((props) => <NotificationsItemWidgetContent {...props} />)
}

# setNotificationsItemWidgetMetadataComponent(NotificationsItemWidgetMetadataComponentnullable)

You can use this to change the bottom component of the app where the date is displayed.

Parameters:
Name Type Attributes Description
NotificationsItemWidgetMetadataComponent React.ComponentType.<NotificationsItemWidgetMetadataComponentProps> <nullable>
Example
//In custom_code/components/NotificationsItemWidgetMetadataComponent.js...

import React from "react";
import {Text} from "react-native";

const NotificationsItemWidgetMetadataComponent = (props) => {

   const { global, formatDateFunc, item } = props;

   const date = item.date; //To see how many days have passed, use: formatDateFunc(item.date)

   return (
       <Text style={[global.itemLightMeta, {marginTop: 6}]}>
           {date}
       </Text>
   )
}

export default NotificationsItemWidgetMetadataComponent;

import NotificationsItemWidgetMetadataComponent from "./components/NotificationsItemWidgetMetadataComponent";
export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.notificationsScreenApi.setNotificationsItemWidgetMetadataComponent((props) => <NotificationsItemWidgetMetadataComponent {...props} />)
}

# setNotificationsItemWrapperComponent(NotificationsItemWrapperComponentnullable)

You can use this hook to customize the NotificationsItemWrapperComponent. For example, you can use this hook to change the behavior of the component when the NotificationItem is tapped.

Parameters:
Name Type Attributes Description
NotificationsItemWrapperComponent React.ComponentType.<NotificationsItemWrapperComponentProps> <nullable>
Example

Tapping on the notification row should view the actual notification

//In custom_code/components/NotificationItemWrapperComponent.js...

import React from "react";
import { View, Text } from "react-native"
import ActionSheetButtonWrapper from "@src/components/ActionButtons/ActionSheetButtonWrapper";
import AppTouchableWithoutFeedback from "@src/components/AppTouchableOpacity";
import { navigateToNotifications } from "@src/utils/navigationActions";
const NotificationsItemWrapperComponent = ({
    global,
    colors,
    item,
    navigation,
    actionButtons,
    t,
    notList,
    renderInnerContent,
    renderSheetHeader,
    shouldOpen,
    wrapStyle,
    children
}) => {
    //Default BuddyBoss implementation of Wrap component
    const Wrap = () => !!!notList ? (
        <ActionSheetButtonWrapper
            {...{
                actionButtons,
                global,
                colors,
                t,
                object: item,
                renderInnerContent,
                renderSheetHeader
            }}
            disabled={false}
            shouldOpen={shouldOpen}
            touchableStyle={wrapStyle}
        >
            {children}
        </ActionSheetButtonWrapper>
    ) : (
        <AppTouchableWithoutFeedback
            style={wrapStyle}
            onPress={() =>
                navigateToNotifications(navigation, {
                    idToOpen: item.id
                })
            }
        >
            {children}
        </AppTouchableWithoutFeedback>
    );

    //View the notification onPress of the Notification Item
    const WrapViewer = () => <AppTouchableWithoutFeedback
        style={wrapStyle}
        onPress={actionButtons[0]?.doFunction()}
    >
        {children}
    </AppTouchableWithoutFeedback>

    return <WrapViewer />;
}

export default NotificationsItemWrapperComponent;

//In custom_code/index.js..

import NotificationsItemWrapperComponent from "./components/NotificationsItemWrapperComponent";
export const applyCustomCode = externalCodeSetup => {
   externalCodeSetup.notificationsScreenApi.setNotificationsItemWrapperComponent(props => <NotificationsItemWrapperComponent {...props} />)
}

# setNotificationsListHeaderComponent(NotificationsListHeaderComponent)

It is used to modify the appearance and structure of the notifications header component in the notifications list screen.

Parameters:
Name Type Description
NotificationsListHeaderComponent React.ComponentType.<NotificationsListHeaderComponentProps>
Example

Remove title in the screen

...

import Animated from "react-native-reanimated";
import FilterSegmented from "@src/components/FilterSegmented";
import AnimatedListHeader from "@src/components/AnimatedListHeader";
export const applyCustomCode = (externalCodeSetup) => {

    externalCodeSetup.notificationsScreenApi.setNotificationsListHeaderComponent(
        props => {
            const {
                styles,
                t,
                screenTitle,
                adjustedScroll,
                global,
                colors,
                filterProps,
                headerIsDark,
                fontSizeAdjustment
            } = props;

            const showHeader = false;

            return (
                <Animated.View style={[styles.container, {height: 0, paddingTop: 80}]}>
                    {showHeader && (
                        <AnimatedListHeader
                            title={t(screenTitle)}
                            scrollY={adjustedScroll}
                            global={global}
                            style={styles.header}
                        />
                    )}
                    <View style={styles.filterContainer}>
                        <FilterSegmented
                            {...filterProps}
                            headerIsDark={headerIsDark}
                            global={global}
                            colors={colors}
                            fontSizeAdjustment={fontSizeAdjustment}
                        />
                    </View>
                </Animated.View>
            );
        }
    );
}

# setNotificationsMoreButtonWrapperComponent(NotificationsMoreButtonWrapperComponentnullable)

You can use this hook to customize the NotificationsMoreButtonWrapperComponent. For example, you can use this hook to change the behavior of the component when the NotificationMoreButton is tapped.

Parameters:
Name Type Attributes Description
NotificationsMoreButtonWrapperComponent React.ComponentType.<NotificationsMoreButtonWrapperComponentProps> <nullable>
Example
//In custom_code/components/NotificationsMoreButtonWrapperComponent.js...

import React from "react";
import { View, Text } from "react-native"
import ActionSheetButtonWrapper from "@src/components/ActionButtons/ActionSheetButtonWrapper";
import AppTouchableWithoutFeedback from "@src/components/AppTouchableOpacity";
import { navigateToNotifications } from "@src/utils/navigationActions";
const NotificationsMoreButtonWrapperComponent = ({
    global,
    colors,
    item,
    navigation,
    actionButtons,
    t,
    notList,
    renderInnerContent,
    renderSheetHeader,
    shouldOpen,
    wrapStyle,
    children
}) => {
    //Default BuddyBoss implementation of Wrap component
    const Wrap = () => !!!notList ? (
        <ActionSheetButtonWrapper
            {...{
                actionButtons,
                global,
                colors,
                t,
                object: item,
                renderInnerContent,
                renderSheetHeader
            }}
            disabled={false}
            shouldOpen={shouldOpen}
            touchableStyle={wrapStyle}
        >
            {children}
        </ActionSheetButtonWrapper>
    ) : (
        <AppTouchableWithoutFeedback
            style={wrapStyle}
            onPress={() =>
                navigateToNotifications(navigation, {
                    idToOpen: item.id
                })
            }
        >
            {children}
        </AppTouchableWithoutFeedback>
    );

    return <Wrap />;
}

export default NotificationsMoreButtonWrapperComponent;

//In custom_code/index.js..

...

import NotificationsMoreButtonWrapperComponent from "./components/NotificationsMoreButtonWrapperComponent";
export const applyCustomCode = externalCodeSetup => {
   externalCodeSetup.notificationsScreenApi.setNotificationsMoreButtonWrapperComponent(props => <NotificationsMoreButtonWrapperComponent {...props} />)
}

# setRenderHeaderRight(renderer)

Use this to add a component to the right side of the header. The component will be visible even when the user scrolls down.

Parameters:
Name Type Description
renderer React.ComponentType.<any>

Component to render

Example

Add a link to another page

In custom_code/NotificationHeader.js
import React from 'react';
import {withNavigation} from "@src/components/hocs/withNavigation";
import IconButton from "@src/components/IconButton";

const NotificationHeaderRight = (props) => {

   return <IconButton
       pressHandler={() => props.navigation.navigate("MessagesScreen")}
       icon={{fontIconName: "check", weight: 300}}
       tintColor="#aaa"
       style={{
           height: 20,
           marginRight: -10,
           alignSelf: "flex-end"
       }}
   />

}

export default withNavigation(NotificationHeaderRight);

//In custom_code/index.js

...
import NotificationHeader from "./components/NotificationHeader";
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.notificationsScreenApi.setRenderHeaderRight(<NotificationHeader />);
  externalCodeSetup.notificationsScreenApi.enableAlwaysShowHeaderRight();
}