react-native-hook-form-v2
v0.1.1
Published
Reduce code complexity and simple code for react native. This lib is depended on react-hook-form.
Downloads
7
Readme
react-native-hook-form-v2
Reduce code complexity and simple code for react native. This libary is depended on react-hook-form.
Installation
Via npm
npm install react-native-hook-form-v2
Via yarn
yarn install react-native-hook-form-v2
Usage
import React from 'react';
import { Button, View } from 'react-native';
import { useForm, FormProvider } from 'react-hook-form';
import { type SubmitHandler } from 'react-hook-form';
import RNTextInput from 'react-native-hook-form-v2';
type FormValues = {
email: string;
password: string;
};
export default function Home() {
const {...methods} = useForm();
const onSubmit: SubmitHandler<FormValues | {}> = data => console.log(data);
return (
<View>
<FormProvider {...methods}>
<RNTextInput
name="email"
label="Email"
placeholder="[email protected]"
keyboardType="email-address"
rules={{required: 'Email is required!'}}
containerStyle={{marginTop: 20}}
/>
<RNTextInput
name={'password'}
label="Password"
placeholder="password"
keyboardType="default"
rules={{required: 'Password is required!'}}
onChangeText={(value: string) =>
methods.setValue('password', value.replace(/[a-z,A-Z]/g, ''), {
shouldValidate: true,
})
}
/>
</FormProvider>
<Button
title="Login"
color="red"
onPress={methods.handleSubmit(onSubmit)}
/>
</View>
);
}
Props
| Props | Type | Default | Optional | Description | | ------- | --- | --- | --- | ----------- | | containerStyle | StyleSheet | none | true | Custom TextInput container styles | | labelTextStyle | StyleSheet | none | true | Custom label styles | | errorTextStyle | StyleSheet | none | true | Custom error label styles |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT