Source

containers/Custom/SignupScreen.ts

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

/**
 * You can use this component to display the signup screen in your custom screen.
 * @component
 * @example <caption>Use signup screen to create your own signup process such as a signup that requires an OTP authentication.</caption>
 *
 * //In custom_code/components/MyCustomScreen.js
 *
 * import React, { useState, useEffect } from 'react';
 * import { View, Text, StyleSheet, Button, Modal, Alert, TextInput } from "react-native";
 * import externalCodeDependencies from "@src/externalCode/externalRepo/externalCodeDependencies"
 * import SignupScreen from "@src/containers/Custom/SignupScreen";
 * import AppButton from "@src/components/AppButton";
 * import { getExternalCodeSetup } from '@src/externalCode/externalRepo';
 *
 * 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 [signupAction, setSignupAction] = useState(null);
 *
 *   //Do OTP validation here...
 *   const validateOtp = () => {
 *
 *     if (otp == "1234") {
 *       console.log('logging in...');
 *       signupAction()
 *     } else {
 *       console.log('Invalid OTP');
 *     }
 *
 *     setModalVisible(false)
 *   }
 *
 *   getExternalCodeSetup().authApi.setSignupButton(props => {
 *
 *     const {
 *       disabled,
 *       global,
 *       doSignup,
 *       label,
 *       loading,
 *       spinnerColor,
 *       getValues
 *     } = props;
 *
 *     //Assign hook's doSignup function to a local state variable to make it available throughout the component...
 *     useEffect(() => {
 *       setSignupAction(() => () => doSignup());
 *     }, [doSignup])
 *
 *     const signupAction = () => {
 *       Alert.alert("OTP", `We will send an OTP to ${getValues().field_1}. Do you want to proceed?`,
 *         [
 *           {
 *             text: "Cancel",
 *             onPress: () => console.log("Cancel Pressed"),
 *             style: "cancel"
 *           },
 *           {
 *             text: "OK",
 *             onPress: () => {
 *               console.log("OK Pressed");
 *               setModalVisible(true);
 *             }
 *           }
 *         ])
 *
 *     }
 *
 *     return <AppButton
 *       disabled={disabled}
 *       style={[{ marginTop: 17 }, global.regButtonContainer]}
 *       // onPress={doSignup}
 *       onPress={signupAction}
 *       label={label}
 *       global={global}
 *       loading={loading}
 *       labelStyle={[
 *         global.buttonLabel,
 *         global.regButtonLabel,
 *         disabled && { opacity: 0.4 }
 *       ]}
 *       spinnerColor={spinnerColor}
 *     />
 *   });
 *
 *   return <>
 *     <SignupScreen screenTitle="Signup now!" hideBackButton={true}  {...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("SignupScreen", MyCustomScreen);
 * }
 *
 */

const SignupScreen = compose(
	withNavigation,
	withActiveCallBacks
)(Signup);

export default SignupScreen;

SignupScreen.propTypes = {
	/**
	 * Signup screen title
	 * {String}
	 */
	screenTitle: PropTypes.string,
	/**
	 * Use `true` to hide title of the screen
	 * {Boolean}
	 */
	hideTitle: PropTypes.bool,
	/**
	 * Use `true` to hide the back button
	 * {Boolean}
	 */
	hideBackButton: PropTypes.bool
};