Team Project 09.06 TIL

📍 Today Working

• React-Native를 활용한 로그인, 회원가입 UI만들기

• Firebase와 연결하여 UI내에서 회원가입시 유저정보 서버에 전송하기

📍 Errors

import React, {useState, useContext} from 'react';
import {View, StyleSheet} from 'react-native';
import {Title, IconButton} from 'react-native-paper';
import FormInput from '../components/FormInput';
import FormButton from '../components/FormButton';
import {AuthContext} from '../navigation/AuthProvider';

export default function SignupScreen({navigation}) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const {register} = useContext(AuthContext);
  return (
    <View style={styles.container}>
      <Title style={styles.titleText}>회원가입</Title>
      <FormInput
        labelName="Email"
        value={email}
        autoCapitalize="none"
        onChangeText={(userEmail) => setEmail(userEmail)}
      />
      <FormInput
        labelName="Password"
        value={password}
        secureTextEntry={true}
        onChangeText={(userPassword) => setPassword(userPassword)}
      />
      <FormButton
        title="Signup"
        modeValue="contatined"
        labelStyle={styles.loginButtonLabel}
        onPress={() => register(email, password)}
      />
      <IconButton
        icon="keyboard-backspace"
        size={30}
        style={styles.navButton}
        color="#6646ee"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#f5f5f5',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  titleText: {
    fontSize: 24,
    marginBottom: 10,
  },
  loginButtonLabel: {
    fontSize: 22,
  },
  navButtonText: {
    fontSize: 18,
  },
  navButton: {
    marginTop: 10,
    fontSize: 18,
  },
});

• Signup Screen 페이지의 코드 작성 onPress = { () => register(email, password) }
  부분의 register가 계속 not a function 이라는 오류가 발생했다.

❗️ Error 해결

• register 함수를 직접 관리하고있는 AuthProvider 라는 폴더로 감싸주었더니 register함수를 읽어오고 정상적으로 기능이 작동하게 되었다.

📍 Next Working

• Logout 기능 작동하게 하기
• 로그인 이후에 페이지에 회원 uid 보여주기
• Stack Navigator를 이용하여 Modal화면 만들기
• Modal을 이용하여 채팅 새 대화방 만들기