React Hook Form integration in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React Native form component?

Consider this React Native component using React Hook Form. What will be displayed when the user submits the form with the input 'John'?

React Native

import React from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import { useForm, Controller } from 'react-hook-form';

export default function MyForm() {
  const { control, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => alert(`Hello, ${data.name}!`);

  return (
    <View>
      <Controller
        control={control}
        rules={{ required: true }}
        name="name"
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            accessibilityLabel="name-input"
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
            placeholder="Enter your name"
          />
        )}
      />
      {errors.name && <Text accessibilityRole="alert">Name is required.</Text>}
      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

A Nothing happens when the Submit button is pressed.

B An alert pops up saying: Hello, !

C The form shows an error message: Name is required.

D An alert pops up saying: Hello, John!

💡 Hint

Check how the Controller passes the input value and how handleSubmit triggers onSubmit.

The Controller connects the TextInput with React Hook Form. When the user types 'John' and submits, onSubmit receives { name: 'John' } and shows the alert.

❓ state_output

intermediate

What is the value of errors.name after submitting an empty form?

Given this React Native form using React Hook Form, what will be the value of errors.name after pressing Submit without typing anything?

React Native

import React from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import { useForm, Controller } from 'react-hook-form';

export default function MyForm() {
  const { control, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <View>
      <Controller
        control={control}
        rules={{ required: true }}
        name="name"
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
            placeholder="Enter your name"
          />
        )}
      />
      {errors.name && <Text>Name is required.</Text>}
      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

A An object with type 'required' and message undefined

B An empty string

C undefined

D null

💡 Hint

Check the rules and how errors object is structured in React Hook Form.

When the required rule fails, errors.name is an object with a 'type' property set to 'required'. The message is undefined because no custom message was provided.

📝 Syntax

advanced

Which option correctly fixes the syntax error in this React Hook Form usage?

This code snippet has a syntax error. Which option fixes it so the form works correctly?

React Native

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { TextInput, Button, View } from 'react-native';

export default function Form() {
  const { control, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <View>
      <Controller
        control={control}
        name="email"
        rules={{ required: true }}
        render={({ field }) => (
          <TextInput
            onChangeText={field.onChange}
            value={field.value}
            placeholder="Email"
          />
        )}
      />
      <Button title="Send" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

A Remove the rules prop from Controller

B Change render={({ field }) => ...} to render={({ field: { onChange, value } }) => ...}

C Add a default value: useForm({ defaultValues: { email: '' } })

D Replace onChangeText={field.onChange} with onChange={field.onChange}

💡 Hint

React Hook Form requires default values for controlled inputs.

Without defaultValues, field.value is undefined causing uncontrolled input warning. Adding defaultValues fixes this.

🔧 Debug

advanced

Why does this React Native form not update the input value on typing?

This React Native form uses React Hook Form but the TextInput does not update as the user types. What is the cause?

React Native

import React from 'react';
import { View, TextInput, Button } from 'react-native';
import { useForm, Controller } from 'react-hook-form';

export default function MyForm() {
  const { control, handleSubmit } = useForm({ defaultValues: { username: '' } });
  const onSubmit = data => console.log(data);

  return (
    <View>
      <Controller
        control={control}
        name="username"
        render={({ field }) => (
          <TextInput
            value={field.value}
            onChangeText={field.onChange}
            placeholder="Username"
          />
        )}
      />
      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

A defaultValues must be removed from useForm

B TextInput should use onChangeText instead of onChange

C Controller must have rules prop to update value

D handleSubmit should be called inside useEffect

💡 Hint

Check the event handler prop names for React Native TextInput.

React Native TextInput uses onChangeText for text changes, not onChange. Using onChange prevents updates.

🧠 Conceptual

expert

What happens if you omit Controller and use register with React Native TextInput?

In React Native, what is the effect of using useForm's register directly on a TextInput without Controller?

React Native

import React from 'react';
import { View, TextInput, Button } from 'react-native';
import { useForm } from 'react-hook-form';

export default function MyForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <View>
      <TextInput
        {...register('email', { required: true })}
        placeholder="Email"
      />
      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

A The input will not work properly because React Native TextInput does not support ref forwarding needed by register

B The form will work perfectly and validate the email input

C The form will throw a runtime error about missing Controller

D The input will update but validation will not trigger

💡 Hint

Think about how React Hook Form connects inputs and how React Native TextInput handles refs.

React Native TextInput does not forward refs properly, so register cannot connect it directly. Controller is needed to wrap and manage value and events.