TextField - AMiSi Mobile Starter

TextField adds a label, helper text, error state, and editability controls to React Native TextInput.

Usage

import { useState } from 'react';

import { TextField } from '@amisi-mobile-starter/ui';

export const EmailField = () => {
  const [email, setEmail] = useState('');

  return (
    <TextField
      label="Email"
      value={email}
      onChangeText={setEmail}
      helperText="We will never share your email."
      keyboardType="email-address"
      autoCapitalize="none"
    />
  );
};

Props

Prop	Type	Default	Description
`label`	`string`	`undefined`	Field label.
`error`	`string`	`undefined`	Error shown instead of helper text.
`helperText`	`string`	`undefined`	Supporting text shown when there is no error.
`isDisabled`	`boolean`	`undefined`	Disables editing and applies disabled opacity.
`isReadOnly`	`boolean`	`undefined`	Disables editing.
`isRequired`	`boolean`	`undefined`	Accepted by the public type; it does not currently change rendering.
`editable`	`boolean`	`!(isDisabled \|\| isReadOnly)`	Native override for editability.

All React Native TextInputProps are accepted. A supplied editable value takes precedence over isDisabled and isReadOnly.