[REACT NATIVE] 리엑트 네이티브 인스타그램 클론 코딩 (2) Formik + yub 을 사용하여 인스타 그램 로그인폼 구현하기 -git 참조-

 

 

---

< 이전글

2022.12.22 - [개발/react-native] - [REACT NATIVE] 리엑트 네이티브 인스타그램 클론 코딩 (1) 계획 및 프로젝트 네비게이션 생성 및 홈 화면 구현 -git 참조-

[REACT NATIVE] 리엑트 네이티브 인스타그램 클론 코딩 (1) 계획 및 프로젝트 네비게이션 생성 및 홈

---

---

다음글 >

2022.12.26 - [개발/react-native] - [REACT NATIVE] 리엑트 네이티브 인스타그램 클론 코딩 (3) 구글 로그인구현 및 급 react-native-cli 로 급 우회.... google-signin 2022-12-26 기준 동작함

[REACT NATIVE] 리엑트 네이티브 인스타그램 클론 코딩 (3) 구글 로그인구현 및 급 react-native-cli 로 급

---

자 오늘은 로그인폼을 구현해보도록 하겠다.

 

 

사용할 모듈을

 

forkmik 과 yub이다

 

간단하게 설명하자면

 

yub은 정규식

formik은 이벤트 리스너라 생각해도 좋다

 

yub을 사용하여 true와 false 값 그리고 그에따른 어떠한 content를 리턴시킬수있고

로그인 버튼을 클릭했을때 formik이 인식할수있다 

 

아직 백엔드는 구현이 안되어있기때문에 오늘은 UI와 정규식 작업을 할예정이다.

 

또한 정상적인 이메일 혹은 비밀번호를 적지 않을시 로그인 버튼을 비활성화 시키고

활성화가 되면 로그인이 됬다는것으로 간주하고

홈스크린으로 탭을 넘겨줄것이다.

 

 

0 # 모듈 설치

 

npm install yub
npm install forkmik 
		or
        
yarn add yub
yarn add forkmik

 

 

 

 

0 # 임포트

//import yup from 'yup' (x)
import * as yup from 'yup' (o)
import { Formik } from 'formik'

 

여기서 주의할점은

아래처럼 

import yup from 'yup' (x)

 

이런식으로하면 에러가 뜰것이다

 

꼭 아래처럼 적어두자

import * as yup from 'yup' (o)

 

 

 

// src/screens/auth/LoginScreen.js

import { StyleSheet } from 'react-native'
import React from 'react'
import { ROUTES } from '../../constants/routes'
import styled, {css} from 'styled-components/native';
import { Divider } from 'react-native-elements';
import * as yup from 'yup'
import { Formik } from 'formik'
const LoginScreen = (props) => {
  const { navigation } = props; // 네비게이션
  return (
    <SafeAreaView>
      <Container>
        <ImageBox>
          <Image source={require("../../../assets/whiteLogo.png")} />
        </ImageBox>
        <Formik
          initialValues={{ email: '', password: '' }}
          validateOnMount={true}
          onSubmit={values => {
            navigation.navigate(ROUTES.INDEX)
          }}
          validationSchema={loginValidationSchema}
        >
          {({ handleChange, handleBlur, handleSubmit, values, touched, errors, isValid }) => (
            <>
              <TextInputBox>
                <TextInput 
                    placeholder="이메일을 입력해주세요" 
                    onChangeText={handleChange('email')}
                    onBlur={handleBlur('email')}
                    keyboardType="email-address"
                    value={values.email}
                    autoFocus={true}
                     />
                      <ValidationTextBox>
                        <ValidationText>
                          {
                            values.email.length > 0 ?
                            errors.email
                            :
                            ''
                          }
                          </ValidationText>
                     </ValidationTextBox>
                <TextInput 
                    autoCapitalize="none"
                    textContentType="password"
                    secureTextEntry={true}
                    placeholder="비밀번호를 입력해주세요" 
                    onChangeText={handleChange('password')}
                    onBlur={handleBlur('password')}
                    value={values.password}
                    />
                    <ValidationTextBox>
                        <ValidationText>
                          {
                            values.password.length > 0 ?
                            errors.password
                            :
                            ''
                          }
                          </ValidationText>
                     </ValidationTextBox>
              </TextInputBox>
              <ForgetPasswordBox>
                <TouchableOpacity onPress={() => navigation.navigate(ROUTES.FORGOTPASSWORD)}>
                  <ForgetPasswordText>비밀번호를 잊으셨나요?</ForgetPasswordText>
                </TouchableOpacity>
              </ForgetPasswordBox>
              <LoginButtonBox>
                {
                  isValid?
                  <LoginButton onPress={handleSubmit}>
                  <LoginButtonText>
                    로그인
                  </LoginButtonText>
                </LoginButton>
                :
                  <InActiveLoginButton>
                    <LoginButtonText>
                      로그인
                    </LoginButtonText>
                  </InActiveLoginButton>
                }
              </LoginButtonBox>
            </>
          )}
        </Formik>
      </Container>
      <JoinBox>
        <JoinBoxNormalText>
          계정이 없으신가요?
        </JoinBoxNormalText>
        <TouchableOpacity onPress={() => navigation.navigate(ROUTES.REGISTER)}>
          <JoinBoxText>
            가입하기
          </JoinBoxText>
        </TouchableOpacity>
      </JoinBox>
    </SafeAreaView>
  )
}
const styles = StyleSheet.create({})

const loginValidationSchema = yup.object().shape({
  email: yup.string().required("이메일을 입력해주세요").email("올바른 이메일을 작성해주세요"),
  password: yup.string().min(8, ({ min }) => "비밀번호는 최소 " + min + " 자리 이상입니다.").required("비밀번호를 입력해주세요")
})


export default LoginScreen

const ValidationTextBox = styled.View`
  margin-top: 8px;
  margin-bottom: 8px;
`

const ValidationText = styled.Text`
  color: red
`

const Container = styled.View`
  width: 100%;
  padding: 0px 20px;
`
const LoginButtonBox = styled.View`
  margin-top: 20px;
`

const JoinBox = styled.View`
  flex-direction: row;
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  justify-content: center;
  align-items: center;
`

const JoinBoxNormalText = styled.Text`
  color: gray;
  font-size: 12px;
  margin-right: 10px;
`

const JoinBoxText = styled.Text`
  color: #0095F6;
`

const InActiveLoginButton = styled.View`
  background-color: #014068d1;
  height: 50px;
  border-radius: 5px;
  font-size: 12px;
`;

const LoginButton = styled.TouchableOpacity`
  background-color: #0095F6;
  height: 50px;
  border-radius: 5px;
  font-size: 12px;
`;


const LoginButtonText = styled.Text`
  color: white;
  text-align: center;
  margin: auto;
  font-weight: 600;
`

const ForgetPasswordBox = styled.View`
  margin-top: 15px;
  align-items: flex-end;
`

const ForgetPasswordText = styled.Text`
  color: #0095F6;
  font-size: 12px;
`

const SafeAreaView = styled.SafeAreaView`
  justify-content: center;
  flex: 1;
  align-items: center;
  background-color: ${props => props.theme.backgroundColor};
`

const TextInputBox = styled.View`
  margin-top: 20px;
  width: 100%;
`

const TextInput = styled.TextInput`
  padding: 0px 10px;
  color: ${props => props.theme.TextColor};
  background-color: #282828a6;
  border: 1px solid #7a7a7a5c;
  width: 100%;
  height: 40px;
  border-radius: 5px;
`

const Image = styled.Image`
  width: 200px;
  height: 55px;
`

const ImageBox = styled.View`
  width: 100%;
  align-items: center;
`


const View = styled.View`
`

const Text = styled.Text`
  color: ${props => props.theme.TextColor}; 
`

const TouchableOpacity = styled.TouchableOpacity`
`

 

 

자한번 실행해 보자

 

 

정규식에 실패한 모습

 

 

정규식에 실패하거나 아무것도 적지않으면 로그인버튼이 비활성화된것을 볼수있다.

 

 

 

정규식에 성공하여 로그인된 모습

 

 

비밀번호는 아이폰 보안상 촬영자체가 안되는것같다

영상에는 안보이지만 적혀저있는 상태이다.

 

 

이것으로 로그인폼만들기를 마치겠다.

 

다음 포스팅은 회원가입과 아이디비밀번호 찾기 UI를 제작해보겠다.

 

될지는 모르겠지만 백엔드를 같이 작업할까 고민중에있다.

혹시 시간이되면 같이해서 포스팅 하도록하겠다.

 

 

 

 

# 깃허브 주소

---

https://github.com/1domybest/react-native-ig-clone.git

GitHub - 1domybest/react-native-ig-clone

 

---

다음글 >

2022.12.26 - [개발/react-native] - [REACT NATIVE] 리엑트 네이티브 인스타그램 클론 코딩 (3) 구글 로그인구현 및 급 react-native-cli 로 급 우회.... google-signin 2022-12-26 기준 동작함

[REACT NATIVE] 리엑트 네이티브 인스타그램 클론 코딩 (3) 구글 로그인구현 및 급 react-native-cli 로 급

---