TextInput

Composes React Native's TextInput

Usage

<State initial={{ value: '' }}>
  {({ state, setState }) => (
    <TextInput
      value={state.value}
      placeholder="Placeholder"
      size="large"
      onValueChange={value => setState({ value })}
      isInvalid={false}
      isClearable
      onClear={() => console.log('Cleared!')} // Only triggered with `isClearable`
    />
  )}
</State>

<State initial={{ value: '' }}>
  {({ state, setState }) => (
    <TextInput
      value={state.value}
      placeholder="Placeholder"
      size="large"
      onValueChange={value => setState({ value })}
      isInvalid={false}
      isClearable
      onClear={() => console.log('Cleared!')} // Only triggered with `isClearable`
    />
  )}
</State>

Partial<{ root: overridewithstyle<textinputbaseprops, rootprops, styleprop<viewstyle>>; lefticonwrapper: overridewithstyle<textinputbaseprops, lefticonwrapperprops, styleprop<viewstyle>>; lefticon: overridebase<...>; input: overridewithstyle<...>; righticon: overridebase<...>; righticonwrapper: overridewithstyle<......

size

Number | "small" | "medium" | "large" | undefined

medium

isDisabled

Boolean | undefined

isInvalid

Boolean | undefined

onValueChange

((value: string) => void) | undefined

onClear

(() => void) | undefined

isClearable

Boolean | undefined

TextInput

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Usage

Props

Usage