native-x-text-input

native-x-text-input

Input component for capturing text input from users.

Install

Yarn

yarn add native-x-text-input

NPM

npm install native-x-text-input

Usage

import { TextInput } from 'native-x-text-input'

function MyComponent() {
  return (
    <Stack>
      ...
      <TextInput
        label='Email'
        placeholder='Enter an email'
        rounded
        error='This input is not valid!'
      />
      ...
    </Stack>
  )
}

This component is compatible with native-x-form

import { TextInput } from 'native-x-text-input'
import { Form, FormInput } from 'native-x-form'

interface FormState {
  email?: string
}

function MyComponent() {
  const onChange = ({ state: { email }, isValid }: { state: FormState; isValid: boolean }) => {
    console.log({ email })
  }

  return (
    <Form<FormState> state={state} onChange={onChange}>
      ...
      <FormInput name='email' validators={[isInvalidEmail('This is invalid email!')]}>
        <TextInput label='Email' placeholder='Enter an email' rounded />
      </FormInput>
      ...
    </Form>
  )
}

API

Property	Default Value	Usage
label?: string		Label for the input
placeholder?: string		Placeholder text for the text input
multiline?: boolean		Set true to allow more than one line for the input
rounded?: boolean	false	Set true to use rounded corners
error?: string		Error message to show
autoCapitalization?: string		Valid values are: 'none', 'words'
autoFocus?: boolean		Set true to auto focus
disabled?: boolean		Set true to disable input
password?: boolean		Set true to use the input as secret input
numberOfLines?: number		Number of lines to allow
icon?: ReactNode		Icon component to render with in the component
rightIcon?: ReactNode		Icon component to render at the right end of the component
fill?: boolean		Set true to fill the container
width?: number		Width of the text input
height?: number		Height of the text input
errorColor?: string	'error'	One of the colors specified by theme provider

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