React Hook Form integration in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main hook from React Hook Form.

React Native

import { [1] } from 'react-hook-form';

Drag options to blanks, or click blank then click option'

AuseForm

BuseEffect

CuseState

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unrelated React hooks like useState or useEffect.

Forgetting to import useForm from react-hook-form.

The useForm hook is the main hook provided by React Hook Form to manage form state.

2fill in blank

medium

Complete the code to initialize the form methods using React Hook Form.

React Native

const { register, handleSubmit, formState: { errors } } = [1]();

Drag options to blanks, or click blank then click option'

AuseEffect

BuseForm

CuseState

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of useForm.

Not calling the hook as a function.

The useForm() hook returns methods like register, handleSubmit, and formState to manage the form.

3fill in blank

hard

Fix the error in the code to register a TextInput with React Hook Form.

React Native

<TextInput {...[1]('email')} placeholder="Email" />

Drag options to blanks, or click blank then click option'

AhandleSubmit

BformState

Cerrors

Dregister

Attempts:

3 left

💡 Hint

Common Mistakes

Using handleSubmit instead of register for inputs.

Trying to spread errors or formState instead of register.

The register function connects the input to React Hook Form.

4fill in blank

hard

Fill both blanks to handle form submission and display an alert with form data.

React Native

const onSubmit = [1](data => {
  alert(JSON.stringify(data));
});

<Button title="Submit" onPress=[2] />

Drag options to blanks, or click blank then click option'

AhandleSubmit

BonSubmit

Cregister

Derrors

Attempts:

3 left

💡 Hint

Common Mistakes

Using register instead of handleSubmit for submission.

Passing handleSubmit directly to onPress without wrapping.

handleSubmit wraps the onSubmit function to process form data. The button's onPress calls onSubmit.

5fill in blank

hard

Fill all three blanks to create a controlled input with validation using React Hook Form's Controller.

React Native

import { Controller, useForm } from 'react-hook-form';

const { control, handleSubmit } = useForm();

<Controller
  control={control}
  name="username"
  rules={{ required: true }}
  render={({ field: { onChange, onBlur, value } }) => (
    <TextInput
      onBlur=[1]
      onChangeText=[2]
      value=[3]
      placeholder="Username"
    />
  )}
/>

Drag options to blanks, or click blank then click option'

AonBlur

BonChange

Cvalue

Dregister

Attempts:

3 left

💡 Hint

Common Mistakes

Using register instead of Controller for controlled inputs.

Mixing up onChange and onChangeText props.

The Controller passes onBlur, onChange, and value to the input to control it properly.

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