containers/Custom/LoginScreen.ts

import {compose} from "recompose";
import {withNavigation} from "../../components/hocs/withNavigation";
import Login from "../LoginScreen";
import PropTypes from "prop-types";
import withActiveCallBacks from "../../navigators/react-navigation-addons/withActiveCallBacks";

/**
 * You can use this component to display your Login screen in your custom screen.
 * @component
 * @example <caption>Use login screen to create your own login process such as a login that requires an OTP authentication.</caption>
 *
 * //In custom_code/components/MyCustomScreen.js
 *
 * import React, {useState, useEffect} from "react";
 * import {
 *     View,
 *     Text,
 *     StyleSheet,
 *     Button,
 *     Modal,
 *     TextInput
 * } from "react-native";
 * import LoginScreen from "@src/containers/Custom/LoginScreen";
 * import AppButton from "@src/components/AppButton";
 * import {getExternalCodeSetup} from "@src/externalCode/externalRepo";
 *
 * const externalCodeSetup = getExternalCodeSetup();
 *
 * const MyModal = ({modalVisible, setModalVisible, otp, setOtp, validateOtp}) => {
 *     return (
 *         <View style={styles.centeredView}>
 *             <Modal animationType="slide" transparent={true} visible={modalVisible}>
 *                 <View style={styles.centeredView}>
 *                     <View style={styles.modalView}>
 *                         <Text style={styles.modalText}>
 *                             Please enter the OTP we sent to your mobile number
 *                         </Text>
 *                         <TextInput
 *                             style={styles.input}
 *                             onChangeText={setOtp}
 *                             value={otp}
 *                             placeholder="Enter OTP..."
 *                             keyboardType="numeric"
 *                         />
 *
 *                         <Button onPress={() => validateOtp()} title="Submit" />
 *                     </View>
 *                 </View>
 *             </Modal>
 *         </View>
 *     );
 * };
 *
 * const MyCustomScreen = props => {
 *     const [modalVisible, setModalVisible] = useState(false);
 *     const [otp, setOtp] = useState(null);
 *     const [loginAction, setLoginAction] = useState(null);
 *
 *     //Do OTP validation here such as calling an API to validate the otp input...
 *     const validateOtp = () => {
 *         if (otp == "1234") {
 *             console.log("logging in...");
 *             loginAction();
 *         } else {
 *             console.log("Invalid OTP");
 *         }
 *
 *         setModalVisible(false);
 *     };
 *
 *     externalCodeSetup.authApi.setLoginButton(props => {
 *         const {
 *             t,
 *             global,
 *             doLogin,
 *             auth,
 *             colors,
 *         } = props;
 *
 *         //Assign hook's doLogin function to a local state variable to make it available throughout the component...
 *         useEffect(
 *             () => {
 *                 setLoginAction(() => () => doLogin());
 *             },
 *             [doLogin]
 *         );
 *
 *         //Render login button which shows a modal when pressed...
 *         return (
 *             <AppButton
 *                 style={[{marginTop: 10}, global.authButtonContainer]}
 *                 onPress={() => {
 *                     setModalVisible(true);
 *                 }}
 *                 label={t("login:login")}
 *                 global={global}
 *                 loading={auth.isFetching}
 *                 labelStyle={global.authButtonLabel}
 *                 spinnerColor={colors.authButtonTextColor}
 *             />
 *         );
 *     });
 *
 *     return (
 *         <>
 *             <LoginScreen {...props} />
 *             <MyModal
 *                 modalVisible={modalVisible}
 *                 setModalVisible={setModalVisible}
 *                 otp={otp}
 *                 setOtp={setOtp}
 *                 validateOtp={validateOtp}
 *             />
 *         </>
 *     );
 * };
 *
 *
 * export default MyCustomScreen;
 *
 * const styles = StyleSheet.create({
 *     input: {
 *         height: 40,
 *         margin: 12,
 *         borderWidth: 1,
 *         padding: 10
 *     },
 *     centeredView: {
 *         top: 100,
 *         justifyContent: "center",
 *         alignItems: "center"
 *     },
 *     modalView: {
 *         margin: 20,
 *         backgroundColor: "white",
 *         borderRadius: 20,
 *         padding: 35,
 *         alignItems: "center",
 *         shadowColor: "#000",
 *         shadowOffset: {
 *             width: 0,
 *             height: 2
 *         },
 *         shadowOpacity: 0.25,
 *         shadowRadius: 4,
 *         elevation: 5
 *     },
 *     modalText: {
 *         marginBottom: 15,
 *         textAlign: "center"
 *     }
 * });
 *
 *
 * //In custom_code/index.js...
 *
 * ...
 *
 * import MyCustomScreen from "./components/MyCustomScreen";
 *
 * export const applyCustomCode = externalCodeSetup => {
 *  externalCodeSetup.navigationApi.replaceScreenComponent("LoginScreen", MyCustomScreen);
 * }
 *
 */

const LoginScreen = compose(
	withNavigation,
	withActiveCallBacks
)(Login);

export default LoginScreen;

LoginScreen.propTypes = {
	/**
	 * Login screen title
	 * {String}
	 */
	screenTitle: PropTypes.string,
	/**
	 * Use `true` to hide title of the screen
	 * {Boolean}
	 */
	hideTitle: PropTypes.bool,
	/**
	 * Use `true` to hide the forgot password link
	 * {Boolean}
	 */
	hideForgotPassword: PropTypes.bool,
	/**
	 * Use `true` to hide the logo
	 * {Boolean}
	 */
	hideLogo: PropTypes.bool
};