Form | UI | SmartAC.com

Usage

import { Form, Input, Button } from '@smartacteam/react-native-ui';

<Form
 initialValues={{ email: '', password: '' }}
 onSubmit={(values) => ...}
 validationSchema={...}
>
  <Input
    formName="email"
    label="Email"
    placeholder="Enter your email"
  />
  <Input
    formName="password"
    label="Password"
    placeholder="Enter your password"
    secureTextEntry
  />
  <Button form="submit">
    Submit
  </Button>
  <Button form="reset" variant="secondary">
    Reset
  </Button>
</Form>

Example

Props

Name	Type	Required	Description
`initialValues`	`FormikConfig<FormikValues>`	Yes	Initial values for the form fields.
`onSubmit`	`(values: FormikValues) => void`	Yes	Callback triggered when form is submitted.
`validate`	`(values: FormikValues) => any`	No	Validation function that returns an object of errors.
`children`	`React.ReactNode`	Yes	Form children, typically `Input` and `Button` components.
…	`FormikConfig` props	No	All other Formik config options are supported.

Behavior

Input components with a formName prop are automatically wired to Formik handlers (onChangeText, onBlur, value, error, description).
Radio.Group and Checkbox.Group components with a formName prop are automatically wired to Formik handlers (onChangeText, onBlur, value, error, description).
Button components with form="submit" or form="reset" automatically call handleSubmit and handleReset.
Nested structures are supported. Any child component’s subtree will also be recursively scanned and transformed.

Inputs without a formName will be left untouched.

Buttons not using form="submit" or form="reset" behave as usual.

See FormikConfig for more advanced usage.