인프런 커뮤니티 질문&답변

안녕하세요 강사님 코드를 따라치면서 학습을 하고 있는데

<View style={styles.fixed}>

이 style 부분에

No overload matches this call.
Overload 1 of 2, '(props: ViewProps): View', gave the following error.
Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'StyleProp<ViewStyle>'.
Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'ViewStyle'.
Types of property 'position' are incompatible.
Type 'string' is not assignable to type '"absolute" | "static" | "relative" | "fixed" | "sticky" | undefined'.
Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'StyleProp<ViewStyle>'.
Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'ViewStyle'.
Types of property 'position' are incompatible.
Type 'string' is not assignable to type '"absolute" | "static" | "relative" | "fixed" | "sticky" | undefined'.ts(2769)

ViewPropTypes.d.ts(203, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'

ViewPropTypes.d.ts(203, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'

(property) style?: StyleProp<ViewStyle>

View Problem (Alt+F8)

이런 에러가 뜨는데 제가 어느 부분에서 잘못했는지, 왜 이런 에러가 발생했는지 모르겠습니다....

전체 코드는 아래와 같습니다.

import CustomButton from '@/components/CustomButton';
import InputFiled from '@/components/InputFiled';
import { colors } from '@/constants';
import { StyleSheet, View } from 'react-native';

export default function LoginScreen() {
  return (
    <>
      <View style={styles.container}>
        <InputFiled
          label="이메일"
          placeholder="이메일을 입력해주세요"
        ></InputFiled>
        <InputFiled
          label="비민번호"
          placeholder="비밀번호를 입력해주세요"
        ></InputFiled>
      </View>
      <View style={styles.fixed}>
        <CustomButton label="로그인하기"></CustomButton>
      </View>
    </>
  );
}

const styles = {
  container: {
    flex: 1,
    margin: 16,
    gap: 16,
  },
  fixed: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: colors.GRAY_300,
    paddingTop: 12,
    paddingHorizontal: 16,
  },
};