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

❗질문 작성시 꼭 참고해주세요

• 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.

• 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.

• 개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.

• 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.

• 에러 잘라서 올리시면 안됩니다!

(에러 일부만 자르거나 일부만 복사하지말아주세요)

function EmailInput() {
    const { control } = useFormContext()
    return (
        <Controller
            name="email"
            control={control}
            render={({ field: { onChange, value } }) => (
                <InputField
                    label="이메일"
                    value={value}
                    onChangeText={onChange}
                    placeholder="이메일을 입력해주세요."
                />
            )}
        />
    )
}

// signup 페이지 마크업 부분입니다

const signupForm = useForm<FormValues>({
        defaultValues: {
            email: '',
            password: '',
            passwordConfirm: ''
        }
    })
    async function onSubmit(data: FormValues) {
        console.log(data)
    }
return (
        <FormProvider {...signupForm}>
            <View style={styles.container}>
                <EmailInput />
                <PasswordInput />
                <PasswordConfirmInput />
            </View>
            <FixedBottomCTA
                label="회원가입하기"
                onPress={() => {
                    console.log('onPress::::')
                    signupForm.handleSubmit(onSubmit)
                }}
            />
        </FormProvider>
    )


export default function FixedBottomCTA({ label, onPress }: FixedBottomCTAProps) {
    const inset = useSafeAreaInsets()
    return (
        <View style={[styles.fixed, { paddingBottom: inset.bottom || 12 }]}>
            <CustomButton label={label} onPress={onPress} />
        </View>
    )
}

function CustomButton({
    label, size = 'large', variant = 'filled',
    ...props
}: CustomButtonProps) {
    return (
        <CustomPressable
            style={({ pressed }) => [
                styles.container, styles[size], styles[variant],
                pressed && styles.pressed
            ]}
            {...props}
        >
            <Text style={styles[variant]}>{label}</Text>
        </CustomPressable>
    )
}


export const CustomPressable = ({ children, ...props }: PressableProps) => {
    const pressHandlerProps =
        Platform.OS === "android"
            ? { onPressIn: props.onPress || props.onPressIn }
            : { onPress: props.onPress };
    // console.log('pressHandlerProps:::::', pressHandlerProps)
    return (
        <Pressable {...props} {...pressHandlerProps}>{children}</Pressable>
    )
}

 node 20v

hookform 7.55v

ios android 동일 증상

react-native 0.76.9v 버전입니다.

하위 버튼 컴포넌트들에서 onPress 함수만 별도 분리하여 console 찍어봐도 동작하지 않고

signupForm.handleSubmit(onSubmit) 윗부분 console 만 실행되고 있습니다

차라리 터미널에 에러 코드라도 나타나면 좋은데 아예 아무런 반응이 없어서 해결에 애를 먹고 있습니다