# new NotificationsScreenApi()

Example

externalCodeSetup.notificationsScreenApi.METHOD_NAME

# enableAlwaysShowHeaderRight()

Example

externalCodeSetup.notificationsApiHooks.enableAlwaysShowHeaderRight();

# setFetchParamsFilter(fetchParamsFilter)

Parameters:

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

# setNotificationsFiltersFilter()

Example

Add an "all" filter

notificationsScreenApi.setNotificationsFiltersFilter(() => [
  "unread",
  "read",
  "all"
]);

# setNotificationsItemRowComponent(NotificationsItemRowComponentnullable)

Parameters:

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)

Parameters:

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)

Parameters:

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)

Parameters:

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)

Parameters:

Example

import React from "react";
import AppTouchableWithoutFeedback from "@src/components/AppTouchableOpacity";
import Swipeable from "react-native-gesture-handler/Swipeable";
import {RectButton} from "react-native-gesture-handler";

export const applyCustomCode = externalCodeSetup => {

    externalCodeSetup.notificationsScreenApi.setNotificationsItemWrapperComponent(
        props => {
            const {
                children,
                item,
                swipeRef,
                notList,
                thisRowCollapsed,
                renderRightActions,
                onItemPress,
                wrapStyle,
                navigation
            } = props;

            if (!item) return null;

            return !!!notList ? (
                <Swipeable
                    ref={swipeRef}
                    friction={2}
                    overshootRight={false}
                    rightThreshold={40}
                    onSwipeableClose={thisRowCollapsed}
                    renderRightActions={renderRightActions}
                >
                    <RectButton activeOpacity={0} onPress={onItemPress} style={{flex: 1}}>
                        {children}
                    </RectButton>
                </Swipeable>
            ) : (
                <AppTouchableWithoutFeedback
                    style={wrapStyle}
                    onPress={() =>
                        navigateToNotifications(navigation, {
                            idToOpen: item.id
                        })
                    }
                >
                    {children}
                </AppTouchableWithoutFeedback>
            );
        }
    );
}

# setNotificationsListHeaderComponent(NotificationsListHeaderComponent)

Parameters:

Example

import React from "react";
import {View} from "react-native";
import {CommonActions} from "@react-navigation/native";
import Animated from "react-native-reanimated";
import FilterSegmented from "@src/components/FilterSegmented";
import AnimatedListHeader from "@src/components/AnimatedListHeader";
import NotificationHeaderButtons from "@src/components/Notifications/NotificationHeaderButtons";
export const applyCustomCode = externalCodeSetup => {
    externalCodeSetup.notificationsScreenApi.setNotificationsListHeaderComponent(
        ({
            styles,
            t,
            screenTitle,
            adjustedScroll,
            _globalStyles,
            colors,
            filterProps,
            headerIsDark,
            fontSizeAdjustment,
            navigation,
            onMarkAllRead,
            selectedFilter,
            enableMarkAllRead
        }) => {
            const renderHeaderAction = React.useMemo(
                () => () => (
                    <NotificationHeaderButtons
                        onMarkAllRead={onMarkAllRead}
                        enableMarkAllRead={enableMarkAllRead}
                        onNotificationPref={() => {
                            navigation.dispatch(
                                CommonActions.navigate({
                                    name: "NotificationPreferencesScreen"
                                })
                            );
                        }}
                        style={{
                            height: 26
                        }}
                    />
                ),
                [onMarkAllRead, enableMarkAllRead]
            );

            return (
                <Animated.View style={styles.container}>
                    {!!screenTitle && (
                        <AnimatedListHeader
                            renderAction={selectedFilter === "unread" && renderHeaderAction}
                            title={t(screenTitle)}
                            scrollY={adjustedScroll}
                            global={_globalStyles}
                            style={styles.header}
                        />
                    )}
                    <View style={styles.filterContainer}>
                        <FilterSegmented
                            {...filterProps}
                            headerIsDark={headerIsDark}
                            global={_globalStyles}
                            colors={colors}
                            fontSizeAdjustment={fontSizeAdjustment}
                        />
                    </View>
                </Animated.View>
            );
        }
    );
};

# setNotificationsListProps(notificationsListProps)

Parameters:

Example

externalCodeSetup.notificationsScreenApi.setNotificationsListProps(props => {
 return {
     data: props.notifications
 };
})

# setNotificationViewModelFilter(notificationViewModelFilter)

Parameters:

Example

externalCodeSetup.notificationSingleScreenApi.setNotificationViewModelFilter((viewModel) => {
    return {
        ...viewModel,
    }
})

# setRenderHeaderRight(renderer)

Parameters:

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