시간 절약을 위해 native base 홈페이지에서 제공해주는 form 디자인을 참고했습니다. 바로가기
로그인을 위해서는 계정을 만들어야 하므로, 회원가입 페이지를 먼저 만들어보겠습니다.
import { useState } from "react";
import {
Center,
FormControl,
Input,
Box,
Heading,
VStack,
Button,
} from "native-base";
import { SafeAreaView } from "react-native-safe-area-context";
import { registeration } from "../myFirebase/firebaseFunctions";
const SignUpPage = ({ navigation }) => {
const [formData, setData] = useState({});
const [errors, setErrors] = useState({});
//유효성 검사
const validate = () => {
if (formData.name === undefined) {
setErrors({ ...errors, name: "name is required" });
return false;
} else if (formData.name.length < 3) {
setErrors({ ...errors, name: "name is too short" });
return false;
}
return true;
};
//폼 제출
const onSubmit = () => {
validate() ? doSignUp() : console.log("validate failed");
};
//회원가입
const doSignUp = () => {
const userName = formData.name;
const userEmail = formData.email;
const userPw = formData.password;
registeration(userName, userEmail, userPw, navigation);
};
return (
<SafeAreaView>
<Center w="100%">
<Box safeArea p="2" py="8" w="90%" maxW="290">
<Heading
size="lg"
fontWeight="600"
textAlign="center"
color="coolGray.800"
_dark={{
color: "warmGray.50",
}}>
회원가입
</Heading>
<VStack space={3} mt="5">
{/* 닉네임 */}
<FormControl isRequired isInvalid={"name" in errors}>
<FormControl.Label _text={{ bold: true }}>
닉네임
</FormControl.Label>
<Input
onChangeText={(value) => setData({ ...formData, name: value })}
/>
{"name" in errors ? (
<FormControl.ErrorMessage>
{errors.name}
</FormControl.ErrorMessage>
) : (
<FormControl.HelperText>
Name should contain atleast 3 character.
</FormControl.HelperText>
)}
</FormControl>
<Button mt="5" colorScheme="indigo" onPress={onSubmit}>
계정 생성
</Button>
</VStack>
</Box>
</Center>
</SafeAreaView>
);
};
export default SignUpPage;
export const registeration = async (nickname, email, password, navigation) => {
await createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
updateProfile(user, {
displayName: nickname,
});
navigation.navigate("MainPage");
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
};