diligent-react-native/screens/RegisterScreen.jsx

import React, { useState, useContext } from "react";
import {
  SafeAreaView,
  ScrollView,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Platform,
} from "react-native";

import DateTimePicker from "@react-native-community/datetimepicker";
import InputField from "../components/InputField";

import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import Ionicons from "@expo/vector-icons/Ionicons";

import RegistrationSVG from "../assets/images/registration.svg";
import GoogleSVG from "../assets/images/google.svg";
import FacebookSVG from "../assets/images/facebook.svg";
import TwitterSVG from "../assets/images/twitter.svg";

import CustomButton from "../components/Buttons/CustomButton";
import { globalStyles } from "../styles/global";
import { AuthContext } from "../context/AuthContext";
import Spinner from "react-native-loading-spinner-overlay/lib";
import Loader from "../components/Loader";

const RegisterScreen = ({ navigation }) => {
  const { isLoading, register } = useContext(AuthContext);

  const [date, setDate] = useState(new Date());
  const [open, setOpen] = useState(false);
  const [dateOfBirthLabel, setDateOfBirthLabel] = useState("Date of Birth");

  const [username, setUsername] = useState(null);
  const [email, setEmail] = useState(null);
  const [password, setPassword] = useState(null);
  const [confirmPassword, setConfirmPassword] = useState(null);
  const [error, setError] = useState(null);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setDate(currentDate);
    let tempDate = new Date(currentDate);
    let fDate =
      tempDate.getDate() +
      "/" +
      (tempDate.getMonth() + 1) +
      "/" +
      tempDate.getFullYear();
    setDateOfBirthLabel(fDate);
    setOpen(false);
  };

  const handleSignup = () => {
    if (password !== confirmPassword) {
      setError("Passwords must match");
      return;
    }

    register(username, email, password, function (result) {
      setError(result.error.message);
    });
  };

  return (
    <SafeAreaView style={globalStyles.safeArea}>
      <Loader visible={isLoading} />
      <ScrollView
        showsVerticalScrollIndicator={false}
        style={{ paddingHorizontal: 25 }}
      >
        <View style={{ alignItems: "center" }}>
          <RegistrationSVG width={300} height={300} />
        </View>
        <Text style={globalStyles.boldText}>Sign Up</Text>
        <View style={styles.providersContainer}>
          <TouchableOpacity onPress={() => {}} style={globalStyles.iconButton}>
            <GoogleSVG height={24} width={24} />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => {}} style={globalStyles.iconButton}>
            <FacebookSVG height={24} width={24} />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => {}} style={globalStyles.iconButton}>
            <TwitterSVG height={24} width={24} />
          </TouchableOpacity>
        </View>
        <Text style={globalStyles.regularCenteredText}>
          Or, sign up with email...
        </Text>
        <InputField
          text={username}
          onChangeText={(text) => setUsername(text)}
          label={"Full Name"}
          icon={
            <Ionicons
              name="person-outline"
              size={20}
              color="#666"
              style={{ marginRight: 5 }}
            />
          }
        />
        <InputField
          text={email}
          onChangeText={(text) => setEmail(text)}
          label={"Email"}
          icon={
            <MaterialIcons
              name="alternate-email"
              size={20}
              color="#666"
              style={{ marginRight: 5 }}
            />
          }
          keyboardType="email-address"
        />
        <InputField
          text={password}
          onChangeText={(text) => setPassword(text)}
          label={"Password"}
          icon={
            <Ionicons
              name="ios-lock-closed-outline"
              size={20}
              color="#666"
              style={{ marginRight: 5 }}
            />
          }
          inputType="password"
        />
        <InputField
          text={confirmPassword}
          onChangeText={(text) => setConfirmPassword(text)}
          label={"Confirm Password"}
          icon={
            <Ionicons
              name="ios-lock-closed-outline"
              size={20}
              color="#666"
              style={{ marginRight: 5 }}
            />
          }
          inputType="password"
        />
        {/* <View style={styles.dateOfBirthContainer}>
                    <Ionicons name='calendar-outline' size={20} color="#666" style={{marginRight: 5}} />
                    <TouchableOpacity onPress={() => setOpen(true)}>
                        <Text style={styles.dateOfBirthLabel}>{dateOfBirthLabel}</Text>
                        {open && <DateTimePicker testID='dateTimePicker' value={date} mode="date" display='spinner' onChange={onChange} textColor="#000" />}
                    </TouchableOpacity>
                </View> */}
        {error && <Text style={styles.errorMessage}>{error}</Text>}
        <CustomButton label={"Sign Up"} onPress={handleSignup} />
        <View style={styles.alreadyRegistered}>
          <Text style={globalStyles.regularText}>Already Registered? </Text>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Text style={globalStyles.primaryBold}>Sign In</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  providersContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 30,
  },
  dateOfBirthContainer: {
    flexDirection: "row",
    borderBottomColor: "#ccc",
    borderBottomWidth: 1,
    paddingBottom: 8,
    marginBottom: 30,
  },
  dateOfBirthLabel: {
    color: "#666",
    marginLeft: 5,
    marginTop: 5,
  },
  alreadyRegistered: {
    flexDirection: "row",
    justifyContent: "center",
    marginBottom: 30,
  },
  errorMessage: {
    marginBottom: 30,
    color: "red",
  },
});

export default RegisterScreen;