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