SignButtons를 만드는 과정에서는 코드를 조금 리팩토링했습니다. 이전보다 더욱 간결해졌지요?

방금 만든 컴포넌트들을 SignInScreen에서 사용해봅시다.

screens/SignInScreen.js

import React, {useState} from 'react';
import {
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import SignButtons from '../components/SignButtons';
import SignInForm from '../components/SignForm';

function SignInScreen({navigation, route}) {
  const {isSignUp} = route.params || {};
  const [form, setForm] = useState({
    email: '',
    password: '',
    confirmPassword: '',
  });
  const createChangeTextHandler = (name) => (value) => {
    setForm({...form, [name]: value});
  };
  const onSubmit = () => {
    Keyboard.dismiss();
    console.log(form);
  };

  return (
    <KeyboardAvoidingView
      style={styles.keyboardAvoidingView}
        behavior={Platform.select({ios: 'padding'})}>
        <SafeAreaView style={styles.fullscreen}>
          <Text style={styles.text}>PublicGallery</Text>
          <View style={styles.form}>
            <SignInForm
              isSignUp={isSignUp}
              onSubmit={onSubmit}
              form={form}
              createChangeTextHandler={createChangeTextHandler}
            />
            <SignButtons isSignUp={isSignUp} onSubmit={onSubmit} />
          </View>
       </SafeAreaView>
     </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  (...)
  // buttons 스타일 제거
});

export default SignInScreen;

SignInScreen의 화면 구조가 한눈에 들어오는군요!