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 from 'react';
import { View, StyleSheet, Text } from "react-native";
import EditScreen from "@src/containers/Custom/Profile/Xprofile/Edit";
import { backButton } from "@src/utils";

const MyCustomScreen = (props) => {
    return <EditScreen editSuccessCallback={() => console.log("Form successfully saved!")}/>
}

MyCustomScreen.navigationOptions = ({ navigation, screenProps }) => {
    const { t, colors, calcFontSize, global } = screenProps;

    const { borderColor } = colors;

    const { params = {} } = navigation.state;

    const hideBackButton = true;

    let headerLeft = params.renderHeaderLeft
        ? params.renderHeaderLeft()
        : backButton({
            navigation,
            headerColor: colors.headerIconColor,
            text: t("common:back"),
            textStyle: global.headerText,
            colors
        });

    if (hideBackButton) {
        headerLeft = null;
    }

    return {
        headerTitle: (
            <Text
                ellipsizeMode="tail"
                numberOfLines={1}
                style={global.appHeaderTitle}
            >
                {t("profile:editXprofile")}
            </Text>
        ),
        tabBarVisible: false,
        headerLeft: headerLeft,
        headerRight: params.renderHeaderRight ? params.renderHeaderRight() : null,
        headerStyle: {
            ...StyleSheet.flatten(global.header),
            borderBottomColor: borderColor,
            borderBottomWidth: StyleSheet.hairlineWidth
        }
    };
};

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