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.

Practice

1. What is the main purpose of using React Hook Form in a React Native app?

easy

A. To style components with CSS

B. To navigate between screens

C. To fetch data from APIs

D. To manage form state and validation easily

Solution

1. Step 1: Understand React Hook Form's role

   React Hook Form is designed to simplify handling form data and validation in React Native apps.

2. Step 2: Compare options with React Hook Form's purpose

   Styling, data fetching, and navigation are handled by other libraries or React Native features, not React Hook Form.

3. Final Answer:

   To manage form state and validation easily -> Option D

4. Quick Check:

   To manage form state and validation easily = B [OK]

Hint: React Hook Form manages form data and validation [OK]

Common Mistakes:

• Confusing React Hook Form with styling libraries
• Thinking it handles navigation or API calls
• Ignoring its validation features

2. Which of the following is the correct way to import useForm from React Hook Form in a React Native component?

easy

A. import { useForm } from 'react-native-hook-form';

B. import useForm from 'react-hook-form';

C. import { useForm } from 'react-hook-form';

D. import useForm from 'react-native-hook-form';

Solution

1. Step 1: Recall correct import syntax for named exports

   React Hook Form exports useForm as a named export, so curly braces are needed.

2. Step 2: Verify package name correctness

   The official package is 'react-hook-form', not 'react-native-hook-form'.

3. Final Answer:

   import { useForm } from 'react-hook-form'; -> Option C

4. Quick Check:

   Named import from 'react-hook-form' = A [OK]

Hint: Use curly braces for named imports from 'react-hook-form' [OK]

Common Mistakes:

• Using default import instead of named import
• Wrong package name 'react-native-hook-form'
• Missing curly braces around useForm

3. Given this React Native snippet using React Hook Form:

const { control, handleSubmit } = useForm();

return (
  <Controller
    control={control}
    name="email"
    rules={{ required: true }}
    render={({ field: { onChange, value } }) => (
      <TextInput
        value={value}
        onChangeText={onChange}
      />
    )}
  />
);

What happens if the user submits the form without entering an email?

medium

A. The form submission is blocked and an error is shown

B. The form submits with an empty email value

C. The app crashes with an error

D. The email field is automatically filled with a default value

Solution

1. Step 1: Understand the validation rule

   The rules={{ required: true }} means the email field must have a value.

2. Step 2: Effect of missing required value on submission

   If the email is empty, React Hook Form blocks submission and sets an error for that field.

3. Final Answer:

   The form submission is blocked and an error is shown -> Option A

4. Quick Check:

   Required rule blocks empty submission = C [OK]

Hint: Required rule prevents empty form submission [OK]

Common Mistakes:

• Assuming form submits with empty values
• Expecting automatic default values
• Thinking app crashes on validation error

4. Identify the error in this React Native form code using React Hook Form:

const { control, handleSubmit } = useForm();

return (
  <Controller
    control={control}
    name="password"
    rules={{ minLength: 6 }}
    render={({ onChange, value }) => (
      <TextInput
        value={value}
        onChangeText={onChange}
      />
    )}
  />
);

medium

A. The name prop should be inside rules

B. The render prop destructuring is incorrect; should destructure field object

C. The control prop is missing

D. The minLength rule should be a string, not a number

Solution

1. Step 1: Check render prop destructuring

   The render function receives an object with a field property, which contains onChange and value. Direct destructuring of onChange and value is incorrect.

2. Step 2: Verify other props

   The minLength rule accepts a number, control is present, and name is correctly placed.

3. Final Answer:

   The render prop destructuring is incorrect; should destructure field object -> Option B

4. Quick Check:

   Render prop needs field destructuring = D [OK]

Hint: Destructure { field: { onChange, value } } in render prop [OK]

Common Mistakes:

• Destructuring onChange and value directly from render argument
• Using string instead of number for minLength
• Omitting control or name props

5. You want to create a React Native form with two fields: username and age. The age must be a number greater than 18. Using React Hook Form, which validation rule correctly enforces this for age?

hard

A. rules={{ required: true, min: 19, valueAsNumber: true }}

B. rules={{ required: true, minLength: 18 }}

C. rules={{ required: true, validate: value => value > 18 }}

D. rules={{ required: true, max: 18 }}

Solution

1. Step 1: Numeric validation from string input

   TextInput provides strings; valueAsNumber: true in rules parses to number for validation.

2. Step 2: Rule for >18

   min: 19 ensures parsed number >= 19 (>18).

3. Step 3: Eliminate others

   A's validate on string fails ("100" < "18" lexically). B for strings. D opposite.

4. Final Answer:

   rules={{ required: true, min: 19, valueAsNumber: true }} -> Option A

5. Quick Check:

   valueAsNumber: true + min: 19 = C [OK]

Hint: valueAsNumber: true + min for numeric validation [OK]

Common Mistakes:

• validate without Number conversion (string "100" > 18 fails)
• minLength for numbers
• max instead of min