App Codex Version: 1.0.0

Class

MessagesSingleScreenApi

MessagesSingleScreenApi()

Messages Single Screen Hooks. Instance name: messagesSingleScreenApi

You can use this to customize the single message screen components such as the header, avatar, and text.

Constructor

# new MessagesSingleScreenApi()

Example
externalCodeSetup.messagesSingleScreenApi.METHOD_NAME

Methods

# setActionsFilter(actionsFilter)

It sets the filter function to modify the message action buttons array such as removing an action button from the list.

Parameters:
Name Type Description
actionsFilter TransformMessageActionsCallback
Example

The following example shows how to add a button to the list.

externalCodeSetup.messagesSingleScreenApi.setActionsFilter(buttonConfig => {
    const newButton = {
        flow: [
            {
                check: () => true, //Return `true` to show the button
                buttons: [
                    {
                        icon: {fontIconName: "flag", weight: "400"},
                        label: "New Button",
                        isNavigation: true, //If set to true, the button will not be set to a "loading" state
                        useDispatch: false, //If this is not set, `doFunction` will be wrapped in a `dispatch` function which is used to call a redux function
                        doFunction: () => {
                            return console.log("Button pressed")
                        }
                    }
                ]
            }
        ]
    };

    return [...buttonConfig, newButton];
});

# setThreadItemAvatar(ThreadItemAvatarnullable)

You can use this to modify the user's avatar in the messages thread.

Parameters:
Name Type Attributes Description
ThreadItemAvatar React.ComponentType.<ThreadItemAvatarProps> <nullable>
Example

Make admin's avatar larger 

//In custom_code/components/ThreadItemAvatar.js...
import React from "react";
import AppAvatar from "@src/components/AppAvatar";

const getSize = (item, defaultSize) => {
   const idWithAdmin = 1;

   if (item.sender_id === idWithAdmin){
       return 60;
   }

   return defaultSize;

}

const ThreadItemAvatar = (props) => {

   const {message, item, thread, size, source, style} = props;

   const avatarSize = getSize(item, size);

   return <AppAvatar
       size={avatarSize}
       source={source}
       style={style}
   />
}

export default ThreadItemAvatar;

//In custom_code/index.js...

...


import ThreadItemAvatar from "./components/ThreadItemAvatar";
export const applyCustomCode = externalCodeSetup => {
 externalCodeSetup.messagesSingleScreenApi.setThreadItemAvatar((props) => <ThreadItemAvatar {...props} />)
}

# setThreadItemHeader(ThreadItemHeadernullable)

You can use this to change or modify the author name and date in the messages thread.

Parameters:
Name Type Attributes Description
ThreadItemHeader React.ComponentType.<ThreadItemHeaderProps> <nullable>
Example

Identify the admin user in the thread 

//In custom_code/components/ThreadItemHeader.js...
import React from "react";
import { Text, View } from "react-native";
import {FontWeights} from "@src/styles/global";

const getStatus = (item) => {
   const idWithAdmin = 1;

   if (item.sender_id === 1){
       return "(Admin)"
   }

   return "";
}
const ThreadItemHeader = (props) => {

   const {message, global, thread, item} = props;
   const name = message.name + getStatus(item);

   return <View
       style={[
           global.row,
           { justifyContent: "space-between", marginBottom: 2, marginTop: 2 }
       ]}
   >
       <Text style={[global.text, { fontWeight: FontWeights.semiBold }]}>
           {name}
       </Text>
       <Text style={[global.itemLightMeta]}>{message.date}</Text>
   </View>
}

export default ThreadItemHeader;

//In custom_code/index.js...

...

import ThreadItemHeader from "./components/ThreadItemHeader";
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.messagesSingleScreenApi.setThreadItemHeader((props) => <ThreadItemHeader {...props} />)
}

# setThreadItemText(ThreadItemTextnullable)

You can use this to change the text component.

Parameters:
Name Type Attributes Description
ThreadItemText React.ComponentType.<ThreadItemTextProps> <nullable>
Example

Change color of admin's message 

//In custom_code/components/ThreadItemText.js...

import React from "react";
import ReadMore from "@src/components/ReadMore"; //BuddyBoss component that wraps long texts with a "Read more" function
import HTML from "react-native-render-html";
import htmlclean from "htmlclean";

const getColor = (item) => {
   const idWithAdmin = 1;

   if (item.sender_id === idWithAdmin){
       return "red"
   }

   return "#737679";

}
const ThreadItemText = (props) => {

   const {message, item, t, global, attemptDeepLink, size} = props;

   const textColor = getColor(item);

   return <ReadMore content={message.message} size={size} t={t} global={global}>
       {content => (
           <HTML
               html={htmlclean(content)}
               tagsStyles={{p: {...global.messageExcerpt, ...{color: textColor}}}}
               onLinkPress={attemptDeepLink(false)}
           />
       )}
   </ReadMore>
}

export default ThreadItemText;

//In custom_code/index.js...

...

import ThreadItemText from "./components/ThreadItemText"
export const applyCustomCode = externalCodeSetup => {
 externalCodeSetup.messagesSingleScreenApi.setThreadItemText((props) => <ThreadItemText {...props} />);
}