App Codex Version: 1.0.0

Components

GroupInviteScreen

<GroupInviteScreen />

Constructor

# <GroupInviteScreen />

You can use this component to display Groups Invite Screen in your custom screen.

Properties:
Name Type Attributes Description
groupId Number <optional>

Id of group to display
searchTerm String <optional>

If the group is not yet available in the app state, the component will attempt to load a list of groups. You can use this field to search for the specific group you want to load instead of loading a list of groups.
LoadingComponent ReactComponent <optional>

Use this to display your own loading component while the screen is loading
Example
//In custom_code/components/MyCustomScreen.js...

import React, {useContext, useEffect} from "react";
import {Text, StyleSheet} from "react-native";
import {NavigationContext} from "@react-navigation/native";

import {backButton} from "@src/utils";
import GroupInviteScreen from "@src/containers/Custom/Group/GroupInviteScreen";
import {useScreenProps} from "@src/navigators/v5/ScreenPropsProvider";

const MyCustomScreen = props => {
    const {global, colors, t} = useScreenProps([
        "global",
        "colors",
        "t",
        "calcFontSize"
    ]);

    const {params = {}} = props.route;
    const {borderColor} = colors;

    const options = () => {
        return {
            headerShown: true,
            headerTitleAlign: "center",
            headerTitle: () => (
                <Text
                    ellipsizeMode="tail"
                    numberOfLines={1}
                    style={global.appHeaderTitle}
                >
                    {t("group:invites")}
                </Text>
            ),
            headerLeft: () =>
                backButton({
                    navigation,
                    headerColor: colors.headerIconColor,
                    text: t("common:back"),
                    textStyle: global.headerText,
                    colors
                }),
            headerStyle: {
                ...StyleSheet.flatten(global.header),
                borderBottomColor: borderColor,
                borderBottomWidth: StyleSheet.hairlineWidth
            }
        };
    };

    const navigation = useContext(NavigationContext);

    useEffect(
        () => {
            navigation?.setOptions(options());
        },
        [params]
    );

    return <GroupInviteScreen {...props} groupId={1} />;
};

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