DEVOCEAN

import auth from '@react-native-firebase/auth';
//로그인
export function signIn({email, password}) {
  return auth().signInWithEmailAndPassword(email, password);
}
//회원가입
export function signUp({email, password}) {
  return auth().createUserWithEmailAndPassword(email, password);
}
//로그인 상태가 변할때 실행되는 함수
export function subscribeAuth(callback) {
  return auth().onAuthStateChanged(callback);
}
//로그아웃
export function signOut() {
  return auth().signOut();
}

const [loading, setLoading] = useState();

const onSubmit = async () => {
    Keyboard.dismiss();
    //form에서 구조분해를 통해서 email, password를 받고, 이 값으로만 이뤄진 objec인 info를 만들어줌
    const {email, password} = form;
    const info = {email, password};
    setLoading(true);
    try {
      //비동기 함수인 singUP을 await하여 비동기로 인증을 진행함
      const {user} = await signUp(info)
      console.log(user);
    } catch (e) {
      Alert.alert('실패');
      console.log(e);
    } finally {
      setLoading(false);
    }
};

import storage from '@react-native-firebase/storage';
// 업로드할 경로 지정
const reference = storage().ref('/directory/filename.png');
// 파일 저장(uri: 선택한 이미지의 로컬 경로)
await reference.putFile(uri);
// 다운로드할 수 있는(또는 Image를 통해 보여줄 수 있는) URL 생성
const url = await reference.getDownloadURL();

//rest연산자 : 구조분해 시 나머지 Element를 전부 받아옴
temp = [1, 5, 2, 3, 6]
[a, b, ...c] = temp
/\*
a : 1
b : 5
c : [2, 3, 6]
\*/
//spread연산자 : object에 다른 object를 unpacking해서 넣을 수 있음
[22, ...temp]
//[22, 1, 5, 2, 3, 6]

const [form, setForm] = useState({
    email: '',
    password: '',
    confirmPassword: '',
  });
const createChangeTextHandler = (name) => (value) => {
setForm({...form, [name]: value});
};
/* 위 표현은 아래 표현과 동일합니다.
하지만 위처럼 표현하는건 Python의 functools.partial과 비슷하기
특정 매개변수값을 고정된 상태의 함수를 콜백으로 넣어주는 용도로 볼 수 있습니다.
const onChangeText = ({ name, text }) => {
  setForm({...form, [name]: text});
}
*/

function BorderedInput({hasMarginBottom, ...rest}, ref) {
  return (
    <TextInput
      style={[styles.input, hasMarginBottom && styles.margin]}
      ref={ref}
      {...rest}
    />
  );
}
(...)

//component의 export 시에 React.forwardRef를 추가해줌
export default React.forwardRef(BorderedInput);

import BorderedInput from '../components/BorderedInput';
(...)
function SignInScreen({navigation, route}) {
  (...)

  const passwordRef = useRef();
  const confirmPasswordRef = useRef();

  return (
    <KeyboardAvoidingView
      style={styles.keyboardAvoidingView}
      behavior={Platform.select({ios: 'padding'})}>
      <SafeAreaView style={styles.fullscreen}>
        <Text style={styles.text}>PublicGallery</Text>
        <View style={styles.form}>
          <BorderedInput
            hasMarginBottom
            placeholder="이메일"
            value={form.email}
            onChangeText={createChangeTextHandler('email')}
            autoCapitalize="none"
            autoCorrect={false}
            autoCompleteType="email"
            keyboardType="email-address"
            returnKeyType="next"
            //해당 component에서 submit을 할 경우 해당 ref를 받은 component가 focus가 가게됨
            onSubmitEditing={() => passwordRef.current.focus()}
          />
          <BorderedInput
            placeholder="비밀번호"
            secureTextEntry
            hasMarginBottom={isSignUp}
            value={form.password}
            onChangeText={createChangeTextHandler('password')}
            //useRef의 반환값을 받아서 focus를 받을 component인것을 알려줌
            ref={passwordRef}
            returnKeyType={isSignUp ? 'next' : 'done'}
            onSubmitEditing={() => {
              if (isSignUp) {
                confirmPasswordRef.current.focus();
              } else {
                onSubmit();
              }
            }}
          />
(...)

ios/pjt_name/Info.plist
(...)
  <key>NSPhotoLibraryUsageDescription</key>
  <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
  <key>NSCameraUsageDescription</key>
  <string>$(PRODUCT_NAME) would like to use your camera</string>
  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
</dict>
</plist>

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.publicgallery<닉네임>">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    (...)

const onSelectImage = () => {
    launchImageLibrary(
      {
        mediaType: 'photo',
        maxWidth: 512,
        maxHeight: 512,
        includeBase64: Platform.OS === 'android',
      },
      (res) => {
        console.log(res);
      },
    );
  };

  
return (
    <View style={styles.block}>
      <Pressable onPress={onSelectImage}>
        <Image 
          style={styles.circle}
          //image-picker로 선택된 이미지의 uri정보를 통해서 <Image> tag에서 image를 보여줌 
          source={{uri: response?.assets[0]?.uri}} />
      </Pressable>

/* res의 출력 예시
{
  "assets": [
    {
      "fileName": "6EF3415F-4DD4-405D-A019-2F3010BB5398.jpg",
      "fileSize": 221192,
      "height": 340,
      "type": "image/jpg",
      "uri": "file:///Users/velopert/Library/Developer/CoreSimulator/Devices/44E0A134-AB93-4564-8AC6-044A06296A74/data/Containers/Data/Application/E3B964F0-CEC7-42DE-A7C8-847A04D3450D/tmp/6EF3415F-4DD4-405D-A019-2F3010BB5398.jpg",
      "width": 512
    }
  ]
}

*/