text: import React, { Component } from "react";
  import {
    View,
    Text,
    TextInput,
    Modal,
    KeyboardAvoidingView,
    StyleSheet,
    TouchableOpacity,
    Alert,
    ScrollView
  } from "react-native";
  import { Avatar, Icon } from 'react-native-elements';
  import { RFPercentage, RFValue } from "react-native-responsive-fontsize";
  import SantaAnimation from "../components/SantaClaus.js";
  import db from "../config";
  import firebase from "firebase";
  
  export default class WelcomeScreen extends Component {
    constructor() {
      super();
      this.state = {
        emailId: "",
        password: "",
        reminderName: "",
        lastName: "",
        address: "",
        contact: "",
        confirmPassword: "",
        isModalVisible: "false"
      };
    }
  
    userSignUp = (emailId, password, confirmPassword) => {
      if (password !== confirmPassword) {
        return Alert.alert("password doesn't match\nCheck your password.");
      } else {
        firebase
          .auth()
          .createUserWithEmailAndPassword(emailId, password)
          .then(() => {
            db.collection("users").add({
              reminder_name: this.state.firstName,
              last_name: this.state.lastName,
              contact: this.state.contact,
              email_id: this.state.emailId,
              address: this.state.address,
              IsBookRequestActive: false
            });
            return Alert.alert("User Added Successfully", "", [
              {
                text: "OK",
                onPress: () => this.setState({ isModalVisible: false })
              }
            ]);
          })
          .catch(error => {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            return Alert.alert(errorMessage);
          });
      }
    };
  
    userLogin = (emailId, password) => {
      firebase
        .auth()
        .signInWithEmailAndPassword(emailId, password)
        .then(() => {
          this.props.navigation.navigate("DonateBooks");
        })
        .catch(error => {
          var errorCode = error.code;
          var errorMessage = error.message;
          return Alert.alert(errorMessage);
        });
    };
  
    showModal = () => {
      return (
        <Modal
          animationType="fade"
          transparent={true}
          visible={this.state.isModalVisible}
        >
          <View style={styles.modalContainer}>
            <ScrollView style={{ width: "100%" }}>
              <KeyboardAvoidingView style={styles.KeyboardAvoidingView}>
                <Text style={styles.modalTitle}>Registration</Text>
                <TextInput
                  style={styles.formTextInput}
                  placeholder={"Reminder Name"}
                  maxLength={8}
                  onChangeText={text => {
                    this.setState({
                      reminderName: text
                    });
                  }}
                />
                <TextInput
                  style={styles.formTextInput}
                  placeholder={"Last Name"}
                  maxLength={8}
                  onChangeText={text => {
                    this.setState({
                      lastName: text
                    });
                  }}
                />
                <TextInput
                  style={styles.formTextInput}
                  placeholder={"Contact"}
                  maxLength={10}
                  keyboardType={"numeric"}
                  onChangeText={text => {
                    this.setState({
                      contact: text
                    });
                  }}
                />
                <TextInput
                  style={styles.formTextInput}
                  placeholder={"Address"}
                  multiline={true}
                  onChangeText={text => {
                    this.setState({
                      address: text
                    });
                  }}
                />
                <TextInput
                  style={styles.formTextInput}
                  placeholder={"Email"}
                  keyboardType={"email-address"}
                  onChangeText={text => {
                    this.setState({
                      emailId: text
                    });
                  }}
                />
                <TextInput
                  style={styles.formTextInput}
                  placeholder={"Password"}
                  secureTextEntry={true}
                  onChangeText={text => {
                    this.setState({
                      password: text
                    });
                  }}
                />
                <TextInput
                  style={styles.formTextInput}
                  placeholder={"Confrim Password"}
                  secureTextEntry={true}
                  onChangeText={text => {
                    this.setState({
                      confirmPassword: text
                    });
                  }}
                />
                <View style={styles.modalBackButton}>
                  <TouchableOpacity
                    style={styles.registerButton}
                    onPress={() =>
                      this.userSignUp(
                        this.state.emailId,
                        this.state.password,
                        this.state.confirmPassword
                      )
                    }
                  >
                    <Text style={styles.registerButtonText}>Register</Text>
                  </TouchableOpacity>
                </View>
                <View style={styles.modalBackButton}>
                  <TouchableOpacity
                    style={styles.cancelButton}
                    onPress={() => this.setState({ isModalVisible: false })}
                  >
                    <Text style={{ color: "#ff5722" }}>Cancel</Text>
                  </TouchableOpacity>
                </View>
              </KeyboardAvoidingView>
            </ScrollView>
          </View>
        </Modal>
      );
    };
    render() {
      return (
        <View style={styles.container}>
          <View style={{ justifyContent: "center", alignItems: "center" }}></View>
          {this.showModal()}
          <View style={{ justifyContent: "center", alignItems: "center" }}>
            {/*<SantaAnimation/>*/}
            <Text style={styles.title}>Book Santa</Text>
          </View>
          <View>
           <Modal 
           animationType='slide'
           transparent={true}
           visible={this.state.isModalVisible}
           />
           <ScrollView style ={{}}/>
            <TextInput
              style={styles.loginBox}
              placeholder="abc@example.com"
              keyboardType="email-address"
              onChangeText={text => {
                this.setState({
                  emailId: text
                });
              }}
            />
            <TextInput
              style={styles.loginBox}
              secureTextEntry={true}
              placeholder="enter Password"
              onChangeText={text => {
                this.setState({
                  password: text
                });
              }}
            />
            <TouchableOpacity
              style={[styles.button, { marginBottom: 20, marginTop: 20 }]}
              onPress={() => {
                this.userLogin(this.state.emailId, this.state.password);
              }}
            >
              <Text style={styles.buttonText}>Login</Text>
            </TouchableOpacity>
  
            <TouchableOpacity
              style={styles.button}
              onPress={() => this.setState({ isModalVisible: true })}
            >
              <Text style={styles.buttonText}>SignUp</Text>
            </TouchableOpacity>
          </View>
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#F8BE85",
      alignItems: "center",
      justifyContent: "center"
    },
    profileContainer: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center"
    },
    title: {
      fontSize: 65,
      fontWeight: "300",
      paddingBottom: 30,
      color: "#ff3d00"
    },
    loginBox: {
      width: 300,
      height: 40,
      borderBottomWidth: 1.5,
      borderColor: "#ff8a65",
      fontSize: 20,
      margin: 10,
      paddingLeft: 10
    },
    keyboardAvoidingView: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center"
    },
    modalTitle: {
      justifyContent: "center",
      alignSelf: "center",
      fontSize: 30,
      color: "#ff5722",
      margin: 50
    },
    modalContainer: {
      flex: 1,
      borderRadius: 20,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "#ffff",
      marginRight: 30,
      marginLeft: 30,
      marginTop: 80,
      marginBottom: 80
    },
    formTextInput: {
      width: "75%",
      height: 35,
      alignSelf: "center",
      borderColor: "#ffab91",
      borderRadius: 10,
      borderWidth: 1,
      marginTop: 20,
      padding: 10
    },
    registerButton: {
      width: 200,
      height: 40,
      alignItems: "center",
      justifyContent: "center",
      borderWidth: 1,
      borderRadius: 10,
      marginTop: 30
    },
    registerButtonText: {
      color: "#ff5722",
      fontSize: 15,
      fontWeight: "bold"
    },
    cancelButton: {
      width: 200,
      height: 30,
      justifyContent: "center",
      alignItems: "center",
      marginTop: 5
    },
  
    button: {
      width: 300,
      height: 50,
      justifyContent: "center",
      alignItems: "center",
      borderRadius: 25,
      backgroundColor: "#ff9800",
      shadowColor: "#000",
      shadowOffset: {
        width: 0,
        height: 8
      },
      shadowOpacity: 0.3,
      shadowRadius: 10.32,
      elevation: 16,
      padding: 10
    },
    buttonText: {
      color: "#ffff",
      fontWeight: "200",
      fontSize: 20
    }
  });
  