Source: screens/RegistrationScreen/RegistrationScreen.js

import React, {useEffect, useState} from 'react';
import {Image, Text, TextInput, TouchableOpacity, View} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import SelectMultiple from 'react-native-select-multiple'
import {firebase} from '../../utils/firebase';
import {labels2Genre} from '../../utils';
import styles from './styles';

/**
 * This is the React component which defines the UI for the User Registration screen in the app.
 *
 * @function RegistrationScreen
 * @param {Object} props - This is a dictionary of component properties.
 * @namespace
 */
export default function RegistrationScreen({navigation}) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [selectedBooks, setSelectedBooks] = useState([]);

  /**
   * This function triggers a navigation event to navigate to the Login screen.
   *
   * @function onFooterLinkPress
   * @memberof RegistrationScreen
   */
  const onFooterLinkPress = () => {
    navigation.navigate('Login');
  };

  /**
   * This function uses the data entered by the user to register a new user with Firebase
   * and update our Firestore accordingly.
   *
   * @function onRegisterPress
   * @memberof RegistrationScreen
   */
  const onRegisterPress = () => {
    if (password !== confirmPassword) {
      alert("Passwords don't match.");
      return;
    }

    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((res) => {
        const uid = res.user.uid;
        const data = {
          id: uid,
          email,
          name,
          genres: selectedBooks.map(({label}) => labels2Genre[`${label}`]),
        };

        const usersRef = firebase.firestore().collection('users');
        usersRef
          .doc(uid)
          .set(data)
          .then(() => navigation.navigate('Home', {user: data}))
          .catch((err) => alert(err));
      })
      .catch((err) => alert(err));
  };

  return (
    <View style={styles.container}>
      <KeyboardAwareScrollView
        style={{flex: 1, width: '100%'}}
        keyboardShouldPersistTaps="always">
        <Image
          style={styles.logo}
          source={require('../../../assets/icon.png')}
        />
        <TextInput
          style={styles.input}
          placeholder="Full Name"
          placeholderTextColor="#aaaaaa"
          onChangeText={(text) => setName(text)}
          value={name}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
        />
        <TextInput
          style={styles.input}
          placeholder="E-mail"
          placeholderTextColor="#aaaaaa"
          onChangeText={(text) => setEmail(text)}
          value={email}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
        />
        <TextInput
          style={styles.input}
          placeholderTextColor="#aaaaaa"
          secureTextEntry
          placeholder="Password"
          onChangeText={(text) => setPassword(text)}
          value={password}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
        />
        <TextInput
          style={styles.input}
          placeholderTextColor="#aaaaaa"
          secureTextEntry
          placeholder="Confirm Password"
          onChangeText={(text) => setConfirmPassword(text)}
          value={confirmPassword}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
        />
        <Text style={styles.text}>Tell Us What Kinds of Books you Like!</Text>
        <SelectMultiple
          style={styles.multiselect}
          items={Object.keys(labels2Genre)}
          selectedItems={selectedBooks}
          onSelectionsChange={(books) => setSelectedBooks(books)}
        />
        <TouchableOpacity
          style={styles.button}
          onPress={() => onRegisterPress()}>
          <Text style={styles.buttonTitle}>Create account</Text>
        </TouchableOpacity>
        <View style={styles.footerView}>
          <Text style={styles.footerText}>
            Already got an account?{' '}
            <Text onPress={onFooterLinkPress} style={styles.footerLink}>
              Log in
            </Text>
          </Text>
        </View>
      </KeyboardAwareScrollView>
    </View>
  );
}