Form Component
Usage
import {View} from 'react-native'
import {FormController} from '@rn-punikit/base'
import {useForm} from 'react-hook-form'
export default () => {
const {control} = useForm({
defaultValues: {
name: '',
email: '',
},
})
return (
<View>
<FormController
type={'text'}
control={control}
fieldId={'name'}
fieldConfig={{
label: 'Nombre',
editable: false,
}}
/>
<FormController
type={'text'}
control={control}
fieldId={'email'}
fieldConfig={{
label: 'Email del usuario',
editable: true,
}}
/>
</View>
)
}
Props
type
Tipo de campo a mostrar
Tipo | default | Required |
---|---|---|
FormTypes | SI |
control
Control del formulario de react-hook-form
Tipo | default | Required |
---|---|---|
Control | SI |
fieldId
Id del campo
Tipo | default | Required |
---|---|---|
string | SI |
fieldConfig
Configuración del campo
Tipo | default | Required |
---|---|---|
FormControllerConfig | SI |
rules
Reglas del campo
Tipo | default | Required |
---|---|---|
RegisterOptions | NO |
error
Errores del campo
Tipo | default | Required |
---|---|---|
FieldError | NO |
Tipos
FormTypes
Tipo | Descripción | Componente |
---|---|---|
text | Muestra un campo de text | TextInput |
selector | Muestra un selector | FormOptionPicker |
timePicker | Muestr un Time Picker | FormTimePicker |
FormControllerConfig
Configuración del campo. El objeto que se le pasa varía en función del tipo de campo que se va a mostrar
Tipo | Configuración del campo |
---|---|
text | FormTextInputProps |
selector | FormOptionPickerConfig |
timePicker | FormTimePickerProps |