Skip to main content

FormInputPassword

Wrapper for the InputPassword. It connects password field to 'react-hook-form' library.

It takes care of props: onChangeText, onBlur, value, errorText. Overriding those props could break the form connection.

Example usage
<FormInputPassword
  controller={confirmation}
  ref={confirmPasswordRef}
  label='Confirm Password'
  onSubmitEditing={onFormSubmit}
/>

Forwarding ref​

You can forward ref of type TextInput from React Native. With ref, you can check for example if the field is focused.

const passwordRef = useRef<TextInput>(null)
// ...
<FormInputPassword
 ref={passwordRef}
 controller={passwordController}
/>

Props​

Every TextInput prop from react-native-paper is valid.

controller​

Controller object returned from useController hook. Thanks to this prop the password input is connected with a form.

import { useController } from 'react-hook-form'
// ...
const confirmationCtrl = useController({
  name: 'confirmation',
  // ...
})

<FormInputPassword
 controller={confirmationCtrl}
/>