App Codex Version: 1.0.0

Components

EditProfileScreen

<EditProfileScreen />

Constructor

# <EditProfileScreen />

You can use this component to display the Edit Profile Screen in your custom screen.

Properties:
Name Type Attributes Description
editSuccessCallback Function <optional>

By default, successfully saving the profile will navigate the screen to go back. You can change that behavior using this prop.
Example
import React, {useContext, useEffect} from "react";
import {StyleSheet, Text} from "react-native";
import {NavigationContext} from "@react-navigation/native";

import EditScreen from "@src/containers/Custom/Profile/Xprofile/Edit";
import {backButton} from "@src/utils";
import {useScreenProps} from "@src/navigators/v5/ScreenPropsProvider";

const EnhancedCustomScreen = 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("profile:editXprofile")}
                </Text>
            ),
            headerLeft: params.renderHeaderLeft
                ? () => params.renderHeaderLeft()
                : () =>
                        backButton({
                            navigation,
                            headerColor: colors.headerIconColor,
                            text: t("common:back"),
                            textStyle: global.headerText,
                            colors
                        }),
            headerRight: params.renderHeaderRight
                ? () => params.renderHeaderRight()
                : () => null,
            headerStyle: {
                ...StyleSheet.flatten(global.header),
                borderBottomColor: borderColor,
                borderBottomWidth: StyleSheet.hairlineWidth
            }
        };
    };

    const navigation = useContext(NavigationContext);

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

    return (
        <EditScreen
            editSuccessCallback={() => reactotron.log("Form successfully saved!")}
        />
    );
};

export default EnhancedCustomScreen;


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