Signup Screen

in folder Screen > Authentication > create file SignupScreen.jsx

import { Box, Button, Center, HStack, Image, Input, InputGroup, InputLeftAddon, Spacer, Spinner, Stack, Text } from 'native-base'
import React, { useState } from 'react'
import colors from '../../Utils/colors'
import logobelanja from '../../Image/Belanja..png' // you can change this logo
import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons'
import { useNavigation } from '@react-navigation/native'
import { useAppContext } from '../../Context/AppContext'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { TouchableOpacity } from 'react-native'
import auth from '@react-native-firebase/auth'
import firestore from '@react-native-firebase/firestore'

function SignUpScreen() {
  const [name, setName] = useState('')
  const [nohp, setNohp] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [country, setCountry] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [loading, setLoading] = useState(false)


  const { notifShow, loadingShow, loadingClose } = useAppContext()

  const navigation = useNavigation()


  const handleSignup = async () => {
    setLoading(true)
    loadingShow()
    try {
      loadingClose()
      if (email === '' && password === '' || password !== confirmPassword) {
        loadingShow()
        notifShow({
          title: 'BELANJA',
          message: 'Something Wrong, Please check your email and password',
          color: 'warning'
        })
        loadingClose()
      }
      else {
        loadingShow()
        auth()
          .createUserWithEmailAndPassword(email, password)
          .then(async (userCredential) => {
            loadingShow()
            const user = userCredential.user
            firestore()
              .collection('users')
              .doc(user.uid)
              .set({
                name: name,
                keyword_name: (name).toLowerCase().split(' ').join(''),
                email: user.email,
                uid_user: user.uid,
                nohp: nohp,
                tanggal_lahir: new Date(),
                country: (country).toLowerCase(),
                role: 'user',
                subscription: 'null',
                createdAt: new Date(),
              })
              .then(async () => {
                const update = {
                  displayName: name,
                }


                await auth().currentUser.updateProfile(update)

                let userData = {}
                  userData.email = email
                  userData.token = result.data
                  userData.status = true
                  const data = JSON.stringify(userData)
                  console.log(data, 'data')
                  AsyncStorage.setItem('userData', data)
                loadingClose()
              })
            loadingClose()
            notifShow({
              title: 'BELANJA',
              message: 'Succes to set new Account',
              color: 'success'
            })
            loadingClose()
          })
          .catch(error => {
            if (error.code === 'auth/email-already-in-use') {
              notifShow({
                title: 'BELANJA',
                message: 'That email address is already in use!',
                color: 'error'
              })
            }

            if (error.code === 'auth/invalid-email') {
              notifShow({
                title: 'BELANJA',
                message: 'That email address is invalid!',
                color: 'error'
              })
            }
            loadingClose()
            // console.error(error)
          })
        loadingClose()
      }
      loadingClose()
    } catch (error) {
      console.log(error.code)
      loadingClose()
    }
    setLoading(false)
  }

  return (
    <Center bgColor={colors.black} flex={1}>
      <Stack justifyContent='center' alignItems='center' w={'60%'} space={5}>
        <Box>
          <Image
            w={'250px'}
            h={'60px'}
            borderRadius={20}
            source={logobelanja}
            alt="Alternate Text"
          />
        </Box>
        <Spacer />

        <Stack alignItems="center">
          <InputGroup w={{
            base: '100%',
            md: '285'
          }}>
            <InputLeftAddon children={<MaterialCommunityIcons name="account" size={24} color="black" />} />
            <Input w={{
              base: '100%',
              md: '100%'
            }} placeholder="Full name"
            size={'xl'}
            id="name"
            type="text"
            bgColor={colors.light}
            color={colors.black}
            value={name}
            onChangeText={setName}
            />
          </InputGroup>

          {/* <Stack alignItems={'center'}>
					<DatePicker
					 style={styles.datePickerStyle}
						date={date} //initial date from state
						mode="date" //The enum of date, datetime and time
						placeholder="Tanggal Lahir"
						format="DD-MM-YYYY"
						minDate="01-01-1900"
						maxDate="01-01-2100"
						confirmBtnText="Confirm"
						cancelBtnText="Cancel"
						is24Hour={true}
                    display="default"
						customStyles={{
							dateIcon: {
								display: 'none',
								// position: 'absolute',
								left: 0,
								top: 4,
								marginLeft: 0,
							},
							dateInput: {
								marginLeft: 36,
							},
							
						}}
						onDateChange={(date) => {
							setDate(date);
						}}
					/>
				</Stack> */}
        </Stack>

        <Stack alignItems="center">
          <InputGroup w={{
            base: '100%',
            md: '285'
          }}>
            <InputLeftAddon children={<MaterialIcons name="phone-iphone" size={24} color="black" />} />
            <Input w={{
              base: '100%',
              md: '100%'
            }} placeholder="Number phone"
            size={'xl'}
            id="password"
            type="number"
            bgColor={colors.light}
            color={colors.black}
            value={nohp}
            onChangeText={setNohp}
            />
          </InputGroup>
        </Stack>

        <Stack alignItems="center">
          <InputGroup w={{
            base: '100%',
            md: '285'
          }}>
            <InputLeftAddon children={<MaterialIcons name="email" size={24} color="black" />} />
            <Input w={{
              base: '100%',
              md: '100%'
            }} placeholder="Email"
            size={'xl'}
            id="email"
            bgColor={colors.light}
            color={colors.black}
            value={email}
            onChangeText={setEmail}
            />
          </InputGroup>
        </Stack>

        <Stack alignItems="center">
          <InputGroup w={{
            base: '100%',
            md: '285'
          }}>
            <InputLeftAddon children={<MaterialIcons name="flag" size={25} color="black" />} />
            <Input w={{
              base: '100%',
              md: '100%'
            }} placeholder="Country"
            size={'xl'}
            id="alamat"
            bgColor={colors.light}
            color={colors.black}
            value={country}
            onChangeText={setCountry}
            />
          </InputGroup>
        </Stack>

        <Stack alignItems="center">
          <InputGroup w={{
            base: '100%',
            md: '285'
          }}>
            <InputLeftAddon children={<MaterialIcons name="lock" size={24} color="black" />} />
            <Input w={{
              base: '100%',
              md: '100%'
            }} placeholder="Password"
            size={'xl'}
            id="password"
            type="password"
            bgColor={colors.light}
            color={'colors.black'}
            value={password}
            onChangeText={setPassword}
            />
          </InputGroup>
        </Stack>

        <Stack alignItems="center">
          <InputGroup w={{
            base: '100%',
            md: '285'
          }}>
            <InputLeftAddon children={<MaterialIcons name="lock" size={24} color="black" />} />
            <Input w={{
              base: '100%',
              md: '100%'
            }} placeholder="Confirm password"
            size={'xl'}
            id="password"
            type="password"
            bgColor={colors.light}
            color={colors.black}
            value={confirmPassword}
            onChangeText={setConfirmPassword}
            />
          </InputGroup>
        </Stack>



        {loading ? (
          <Spinner size={'sm'} />
        ) : (
          <Button w='80%' size={'sm'} bgColor={colors.theme} onPress={() => handleSignup()}  >
            <Text color={colors.black} fontWeight="bold">
              CREATE ACCOUNT
            </Text>
          </Button>
        )}

        <Spacer />
        <Spacer />

        <HStack space={1}>
          <Text color={'white'}>Back to</Text>
          <TouchableOpacity onPress={() => navigation.navigate('Login')}>
            <Text color={'white'} fontWeight='bold'>Login</Text>
          </TouchableOpacity>
        </HStack>
      </Stack>
    </Center>

  )
}


export default SignUpScreen