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