I want to make a form in react native using Form Hooks. It doesn't work for me.

I have installed hook form with this mand :

npm install react-hook-form

And here is my code :

import React from "react";
import { useForm } from "react-hook-form";

const InscriptionScreen = () => {
  return (
    <form>
      <input type="text" placeholder="Email" name="email"/>
      <input type="password" placeholder="Password" name="password"/>
      <input type="submit"/>
    </form>
  );
};

export default InscriptionScreen

I get this error :

View config not found for name input. Make sure to start ponent names with a capital letter.

Do I need to do more configurations or is there a missing keyword in my code?

I want to make a form in react native using Form Hooks. It doesn't work for me.

I have installed hook form with this mand :

npm install react-hook-form

And here is my code :

import React from "react";
import { useForm } from "react-hook-form";

const InscriptionScreen = () => {
  return (
    <form>
      <input type="text" placeholder="Email" name="email"/>
      <input type="password" placeholder="Password" name="password"/>
      <input type="submit"/>
    </form>
  );
};

export default InscriptionScreen

I get this error :

View config not found for name input. Make sure to start ponent names with a capital letter.

Do I need to do more configurations or is there a missing keyword in my code?

• javascript
• reactjs
• forms
• react-native

1 Answer 1

You use HTML elements in React-Native, you should use the React-Native elements and also use useForm, like below:

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

const InscriptionScreen = () => {
  const { register, handleSubmit, setValue } = useForm();
  const onSubmit = useCallback(formData => {
    console.log(formData);
  }, []);
  const onChangeField = useCallback(
    name => text => {
      setValue(name, text);
    },
    []
  );

  useEffect(() => {
    register('email');
    register('password');
  }, [register]);

  return (
    <View>
      <TextInput
        autoCompleteType="email"
        keyboardType="email-address"
        textContentType="emailAddress"
        placeholder="Email"
        onChangeText={onChangeField('email')}
      />
      <TextInput
        secureTextEntry
        autoCompleteType="password"
        placeholder="Password"
        onChangeText={onChangeField('password')}
      />
      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
};

export default InscriptionScreen;