---
name: Formik
route: /Form/Examples/Formik
menu: Form
---

## Formik

## About

Formik makes creating forms with React Native easier.
[See it on GitHub]("https://github.com/jaredpalmer/formik").

## Installation

1. `yarn add formik`

2. Done.

## How it's used in BarCard

```
<Formik
    enableReinitialize={true}
    initialValues={initialValues}
    validate={values => {
    let errors = {}
    if (!values.endDate) {
        errors.endDate = 'End Date required!'
    } else if (values.endDate < values.date) {
        errors.endDate =
        "The end date can't before before the start date!"
    }
    console.log('errors', errors)
    return errors
    }}
    onSubmit={async (values, actions) => {
    console.log('info form submit values', values)
    try {
        const res = await updateEventDetails({ variables: values })
        console.log('res', res)
        console.log(
        'res.data.updateEventDetails',
        res.data.updateEventDetails,
        )
        actions.setSubmitting(false)
    } catch (error) {
        console.log('error', error)
        // actions.setErrors(parseAuthErrors(error.toString()))
        actions.setSubmitting(false)
    }
    }}
    render={props => (
    <React.Fragment>
        <LabelInput
        label={'Event name'}
        name={'name'}
        onChangeText={props.setFieldValue}
        value={props.values.name}
        />
        <LabelInput
        label={'Start date'}
        name={'date'}
        disabled={true}
        onChangeText={props.setFieldValue}
        value={props.values.date}
        />
        <LabelInput
        label={'End date'}
        name={'endDate'}
        disabled={true}
        onChangeText={props.setFieldValue}
        value={props.values.endDate}
        />
        <LabelInput
        label={'Description'}
        name={'description'}
        multiline={true}
        numberOfLines={12}
        onChangeText={props.setFieldValue}
        value={props.values.description}
        />
        {props.errors.endDate && (
        <BaseText
            fs={12}
            color={'pink'}
            children={props.errors.endDate}
        />
        )}
        <FormButtons
        disabled={!props.dirty || props.isSubmitting}
        isSubmitting={props.isSubmitting}
        handleSubmit={props.handleSubmit}
        handleCancel={() =>
            console.log(
            'cancel pressed. maybe reset/reinitalize the form ?',
            )
        }
        />
    </React.Fragment>
    )}
/>
```
