native-x-form

This component helps you add and manage form in react native

Install

Yarn

yarn add native-x-form

NPM

npm install native-x-form

Usage

import { Form, FormItem, isEmpty, isInvalidEmail } from 'native-x-form'
import { Button } from 'native-x-button'
import { TextInput } from 'native-x-text-input'
import { Stack } from 'native-x-stack'

interface FormData {
  email: string
  password: string
}

const state: FormData = {
  email: '',
  password: '',
}

function MyComponent() {
  const onSubmit = useCallback(
    async ({ state: { email, password }, isValid }: { state: FormData; isValid: boolean }) => {
      if (!isValid) {
        return
      }
      // your logic
    },
    [],
  )

  return (
    <Form<FormData> state={state} onSubmit={onSubmit}>
      {({ submitForm }) => (
        <Stack>
          <FormItem name='email' validators={[isEmpty('Email is required'), isInvalidEmail()]}>
            <TextInput />
          </FormItem>
          <Button onTap={submitForm}>Submit</Button>
        </Stack>
      )}
    </Form>
  )
}

Any component can be placed inside FormItem as long as the props are extended from FormChildProp

export type AcceptableFormValue = string | boolean | number

type FormChildProp<T extends AcceptableFormValue> = {
  value?: T
  onChange?: (value: T) => void
  onChangeText?: (value: T) => void
  onBlur?: () => void
  error?: string | Error | null
  isLoading?: boolean
}

Sample implementation:

import { FormChildProps } from 'native-x-form'

interface InputProps extends FormChildProps<string> {
  ...
}

function Input(props: InputProps) {
  const {
    value,
    onChange,
    onChangeText,
    onBlur,
    error,
    isLoading
  } = props
  return (
    ...
  )
}

API - Form

Property	Default Value	Usage
state?: T	any	State of the form
submitIfValid?: boolean	true	Call onSubmit only if form is valid
children?: ReactNode[]		Content of the form
onSubmit?: (props: { state: T, isValid: boolean}) => Promise		Handler for submitting the form
onChange?: (props: { state: T, isValid: boolean}) => Promise		Event handler for change

API - Form-Item

Property	Default Value	Usage
name: string	any	Name of the item in state. This input is mandatory
children?: ReactNode[]		Content of the form
validators: Validator[]		An array of validators

Validators

You can build a custom validator function by implementing Validator<T> type

export type Validator<T> = (input: T) => string | undefined

The return value of Validator function must be the error message.

Few validator function creators are provided with this module.

isEmpty(errorMessage: string): Validator<T>
isInvalidEmail(errorMessage: string): Validator<T>
isNonAlphaNumeric(errorMessage: string): Validator<T>

Automatic Release

Here is an example of the release type that will be done based on a commit messages:

Commit message	Release type
fix: [comment]	Patch Release
feat: [comment]	Minor Feature Release
perf: [comment]	Major Feature Release
doc: [comment]	No Release
refactor: [comment]	No Release
chore: [comment]	No Release