register.js

import React, {useState} from 'react';
import {
  StyleSheet,
  View,
  ScrollView,
  Text,
  ImageBackground,
} from 'react-native';
import {Header, Input, Gap, Button, StatusBar, Loading} from '../../components';
import {colors, fonts, useForm, storeData, showError} from '../../utils';
import {ILRegister} from '../../assets';
import {Fire} from '../../config';
import {showMessage} from 'react-native-flash-message';

const Register = ({navigation}) => {
  const [form, setForm] = useForm({
    displayName: '',
    email: '',
    phoneNumber: '',
    password: '',
  });

  const [loading, setLoading] = useState(false);

  const onContinue = () => {
    setLoading(true);
    console.log(form);
    Fire.auth()
      .createUserWithEmailAndPassword(form.email, form.password)
      .then(success => {
        console.log('success', success);
        setLoading(false);
        setForm('reset');
        const data = {
          displayName: form.displayName,
          email: form.email,
          phoneNumber: form.phoneNumber,
        };
        Fire.database()
          .ref('users/' + success.user.uid + '/')
          .set(data);
        storeData('user', data);
        navigation.replace('MainApp', data);
      })
      .catch(error => {
        const errorMessage = error.message;
        setLoading(false);
        showMessage({
          message: errorMessage,
          type: 'default',
          backgroundColor: colors.background.tertiary,
          color: colors.text.secondary,
        });
      });
  };

  return (
    <>
      <ImageBackground source={ILRegister} style={styles.page}>
        <RenderStatusBar />
        <RenderHeader navigation={navigation} />
        <ScrollView showsVerticalScrollIndicator={false}>
          <View style={styles.content}>
            <Input
              label="Name"
              onChangeText={value => setForm('displayName', value)}
              value={form.displayName}
            />
            <Input
              label="Email"
              onChangeText={value => setForm('email', value)}
              value={form.email}
            />
            <Input
              label="No Whatsapp"
              onChangeText={value => setForm('phoneNumber', value)}
              value={form.phoneNumber}
            />
            <Input
              label="Password"
              secureTextEntry
              onChangeText={value => setForm('password', value)}
              value={form.password}
            />
            <Gap height={40} />
            <Button title="DAFTAR" type="secondary" onPress={onContinue} />
          </View>
        </ScrollView>
      </ImageBackground>
      {loading && <Loading />}
    </>
  );
};

const RenderStatusBar = () => {
  return (
    <StatusBar type="secondary" background={colors.background.secondary} />
  );
};

const RenderHeader = ({navigation}) => {
  return (
    <>
      <Header
        icon="back-light"
        onPress={() => navigation.navigate('GetStarted')}
        title="Daftar Sekarang"
      />
      <View style={styles.wrapperTitle}>
        <Text style={styles.title}>Akun Baru</Text>
      </View>
      <Gap height={120} />
    </>
  );
};

export default Register;

const styles = StyleSheet.create({
  page: {
    flex: 1,
  },
  content: {
    justifyContent: 'center',
    paddingHorizontal: 40,
    paddingBottom: 40,
  },
  wrapperTitle: {
    paddingHorizontal: 40,
    width: 200,
  },
  title: {
    fontSize: 30,
    fontFamily: fonts.primary[900],
    color: colors.primary,
  },
});