React native with react hook form tsx

Question

I'm trying to use react hook form to control my form, but I'm having a problem with the typescript and I can't solve it

my forms:

import { useNavigation } from "@react-navigation/native"
import {ControlledTextInput} from '@/controller/controlled_input'
import { useForm  } from 'react-hook-form'

type FormData = {
    Name: string
    Phone: string
    Address: string
    BuyDate: string
    Weight: Number
    Tara: Number
}

export function Home() {
    const { navigate } = useNavigation();
    const { 
        control,
        handleSubmit,
        formState: { errors },
    } = useForm<FormData>({
        defaultValues: {
            Address: "inital-addres",
            BuyDate: "01/01/2021",
            Name: "chama-gás",
            Phone: "739000000",
            Tara: 1000,
            Weight: 1000
        }
    });

    const onSubmit = (data: FormData) => {
        console.log(data)

        // navigate('Result')
    };

    return (
        <View className="flex flex-1 pt-4">
            <ScrollView className="flex px-10">
                <ControlledTextInput 
                    control={control}
                    name="name"
                    placeholder="Nome"
                    inputClasses="mb-6"
                    rules={{required: 'nome obrigatório'}}
                />
                <ControlledTextInput 
                    control={control}
                    name="phone"
                    placeholder="Telefone"
                    inputClasses="mb-6"
                    rules={{required: 'Nome obrigatório'}}
                />
                <ControlledTextInput 
                    control={control}
                    name="address"
                    placeholder="Endereço"
                    inputClasses="mb-6"
                    rules={{required: 'Endereço obrigatório'}}
                />
                <ControlledTextInput 
                    control={control}
                    name="buy_date"
                    placeholder="Data de Compra"
                    inputClasses="mb-6"
                    rules={{required: 'Data de compra obrigatório'}}
                />
                <ControlledTextInput 
                    control={control}
                    name="weight"
                    placeholder="Peso"
                    inputClasses="mb-6"
                    rules={{required: 'Peso obrigatório'}}
                />
                <ControlledTextInput 
                    control={control}
                    name="tara"
                    placeholder="Tara"
                    inputClasses="mb-6"
                    rules={{required: 'Tara obrigatório'}}
                />
            </ScrollView>
         </View>
    )
}

my controlledTextInput:

import React from 'react'
import { Controller, UseControllerProps, FieldValues } from 'react-hook-form'
import { Input, InputProps } from '@/components/Input'



export function ControlledTextInput<FormType extends FieldValues>({
    control, name, rules, ...textInputProps}: UseControllerProps<FormType> & InputProps) {
    return (
        <Controller
            control={control}
            name={name}
            rules={rules}
            render={({field}) => (
                <Input {...textInputProps} 
                    value={field.value}
                    onChangeText={field.onChange}
                    onBlur={field.onBlur}
                />
            )}
        />
    )
}

my input:

import { forwardRef } from "react"
import { Text, TextInput, View } from "react-native"

import { cn } from "../lib/utils"
import { colors } from "@/styles/colors"

export interface InputProps
  extends React.ComponentPropsWithoutRef<typeof TextInput> {
  label?: string
  labelClasses?: string
  inputClasses?: string
}

const Input = forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
  ({ className, label, labelClasses, inputClasses, ...props }, ref) => (
    <View className={cn("flex flex-col gap-1.5", className)}>
      {label && (
        <Text
          className={cn("text-white text-base font-bold mb-1", labelClasses)}
        >
          {label}
        </Text>
      )}
      <TextInput
        placeholderTextColor={colors.gray[400]}
        className={cn(
          inputClasses,
          "py-2.5 px-4 rounded-lg text-white bg-gray-600"
        )}
        {...props}
      />
    </View>
  )
)

export { Input }

but i got these err when define name on controlled input:

Answer 1

The actual name and its type are not the same; you define your names like "name" and your type as "Name". Check your convention