[3-2] TextInput 작동이 안됩니다

안녕하세요!

천천히 따라서 코딩 하고 있었는데, 잘 따라 한것 같은데 InputField 설정 이후에 LoginScreen에서 placeholder 가 작동하지 않아서보니 클릭해도 키보드가 열리지 않더라고요

• InputField.tsx

import React from 'react';
import {
  Dimensions,
  StyleSheet,
  Text,
  TextInput,
  TextInputProps,
  View,
} from 'react-native';
import {colors} from '../constants';

interface InputFieldProps extends TextInputProps {
  disabled?: boolean;
  error?: string;
}
const deviceHeight = Dimensions.get('screen').height;
function InputField({disabled = false, error, ...props}: InputFieldProps) {
  return (
    <View
      style={[
        styles.container,
        disabled && styles.disabled,
        Boolean(error) && styles.inputError,
      ]}>
      <TextInput
        editable={!disabled}
        placeholderTextColor={colors.GRAY_500}
        style={[styles.input, disabled && styles.disabled]}
        autoCapitalize="none"
        spellCheck={false}
        autoCorrect={false}
        {...props}
      />
      {Boolean(error) && <Text style={styles.error}>{error}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderColor: colors.GRAY_200,
    padding: deviceHeight > 700 ? 15 : 10,
  },
  input: {
    fontSize: 16,
    color: colors.BLACK,
    padding: 0,
  },
  disabled: {
    backgroundColor: colors.GRAY_200,
    color: colors.GRAY_700,
  },
  inputError: {
    borderWidth: 1,
    borderColor: colors.RED_300,
  },
  error: {
    color: colors.RED_500,
    fontSize: 12,
    paddingTop: 5,
  },
});

export default InputField;

• LoginScreen.tsx

import React from 'react';
import {SafeAreaView, StyleSheet, View} from 'react-native';
import InputField from '../../components/InputField';

function LoginScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.inputContainer}>
        <InputField placeholder="이메일" error={'이메일을 입력해주세요.'} />
        <InputField placeholder="비밀번호" />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  inputContainer: {
    flex: 1,
    margin: 30,
  },
  container: {
    gap: 20,
  },
});

export default LoginScreen;

• color.ts

const colors = {
  WHITE: '#ffff',
  PINK_500: '#BF5C79',
  PINK_700: '#C63B64',
  RED_300: '#FFB4B4',
  RED_500: '#FF5F5F',
  GRAY_200: '#E7E7E7',
  GRAY_500: '#E8E8E8',
  GRAY_700: '#E575757',
  BLACK: '#000',
};

export {colors};

• 문제화면

  

몇번을 다시보고 input field를 다시 만들어서 해봐도 안되서 도움 요청드립니다 ㅜ