App Codex Version: 1.0.0

Class

AddActivityScreenApi

AddActivityScreenApi()

Add Activity Screen Hooks. Instance name: addActivityScreenApi

The AddActivityScreenApi() can be used to customize the components on the CreatePost Screen such as when creating a new activity post or adding a comment in an activity post.

Constructor

# new AddActivityScreenApi()

Example
externalCodeSetup.addActivityScreenApi.METHOD_NAME

Methods

# setCreateActivityParamsFilter(createActivityParamsFilter)

It overrides the parameters that are used to create activities in the Activities screen and enables you to add more parameters when creating an activity so that you can make it as customizable as possible when calling its API.

Parameters:
Name Type Description
createActivityParamsFilter TransformCreateActivityParams
Example
externalCodeSetup.addActivityScreenApi.setCreateActivityParamsFilter(props => {
  return {
      ...props,
      bar: 'foo'
  };
});

# setKeyboardOptionsButtons(KeyboardOptionsButtons)

You can use this hook to customize the keyboard options buttons such as the RichTextButton and PhotoButton components. For example, you can add your own component together with the default keyboard options buttons.

Parameters:
Name Type Description
KeyboardOptionsButtons KeyboardOptionsButtonsProps
Example
import React from "react";
import IconButton from "@src/components/IconButton";
import MyCustomScreen from "./screens/MyCustomScreen";
export const applyCustomCode = externalCodeSetup => {
    externalCodeSetup.addActivityScreenApi.setKeyboardOptionsButtons(
        ({
            navigation,
            richTextEnabled,
            photosEnabled,
            videosEnabled,
            docsEnabled,
            gifsEnabled,
            RichTextButton,
            PhotoButton,
            VideoButton,
            DocButton,
            GifButton,
            renderMoreOptions
        }) => {
            const state = navigation.state;
            const params = state.params;

            //Only show the RichTextButton if adding a comment to an activity post
            if (
                state.routeName === "ActivitiesCreatePostScreen" &&
                params.isComment &&
                richTextEnabled
            ) {
                return <RichTextButton />;
            }

            //Add a custom icon button
            return (
                <>
                    {richTextEnabled && <RichTextButton />}
                    {photosEnabled && <PhotoButton />}
                    {videosEnabled && <VideoButton />}
                    {docsEnabled && <DocButton />}
                    {gifsEnabled && <GifButton />}
                    <IconButton
                        icon={{fontIconName: 'arrow-right', weight: 300}}
                        tintColor="#aaa"
                        style={{
                            marginTop: 6,
                            marginRight: 10
                        }}
                        pressHandler={() => navigation.navigate("book")}
                    />
                    {renderMoreOptions()}
                </>
            );
        }
    );

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

# setPostInComponent(PostInComponent)

You can utilize this hook to modify the PostIn component, enabling users to choose their desired destination for posting the activity.

Parameters:
Name Type Description
PostInComponent PostInComponentProps
Example
...

import Icon from "@src/components/Icon";
import FilterLink from '@src/components/FilterLink';

export const applyCustomCode = (externalCodeSetup) => {

    externalCodeSetup.addActivityScreenApi.setPostInComponent(
        ({
            disableSelection,
            togglePostInOptions,
            global,
            colors,
            styles,
            icon,
            label
        }) =>
            !disableSelection ? (
                <FilterLink
                    onPress={togglePostInOptions(true)}
                    global={global}
                    style={styles.container}
                >
                    <Icon
                        icon={icon}
                        tintColor={colors.textColor}
                        styles={styles.icon}
                    />
                    <Text style={[global.activityPostInText]}>{label}</Text>
                </FilterLink>
            ) : <Text>Selection disabled</Text>
    );
}

# setToolbarHeader(ToolbarHeader)

You can use this hook to add a component above the keyboard options buttons.

Parameters:
Name Type Description
ToolbarHeader ToolbarHeaderProps
Example
externalCodeSetup.addActivityScreenApi.setToolbarHeader(props => {
  return <Text>Please remember to choose the correct visibility of the post</Text>
})

# setUpdateActivityParamsFilter(updateActivityParamsFilter)

It overrides the parameters that are used to update activities in the Activities screen and enables you to add more parameters when updating an activity so that you can make it as customizable as possible when calling its API.

Parameters:
Name Type Description
updateActivityParamsFilter TransformUpdateActivityParams
Example
externalCodeSetup.addActivityScreenApi.setUpdateActivityParamsFilter(props => {
  return {
      ...props,
      bar: 'foo'
  };
});