Input

Component that is based on react native TextInput component.

Import

import { Input } from 'react-native-ficus-ui';

Usage

With prefix

EDITABLE EXAMPLE

<Input
  placeholder="Username"
  focusBorderColor="blue.500"
  prefix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
/>

With suffix

EDITABLE EXAMPLE

<Input
  placeholder="Username"
  focusBorderColor="blue.500"
  suffix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
/>

Password

EDITABLE EXAMPLE

<Input
  placeholder="Password"
  secureTextEntry
  focusBorderColor="blue.500"
/>

Custom border style

EDITABLE EXAMPLE

<Box>
  <Input
    placeholder="Username"
    borderWidth={2}
    focusBorderColor="orange.500"
    focusBorderWidth={3}
    suffix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
  />
  <Input
    mt="md"
    placeholder="Username"
    borderWidth={2}
    focusBorderColor="red.500"
    focusBorderWidth={3}
    focusBorderStyle="dashed"
    suffix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
  />
</Box>

Textarea

EDITABLE EXAMPLE

<Box>
  <Textarea focusBorderColor="blue.500" />
  <Textarea
    mt="md"
    focusBorderColor="red.500"
    focusBorderWidth={3}
    focusBorderStyle="dashed"
  />
</Box>

Props

Extends every Box props and react native TextInput component.

https://reactnative.dev/docs/textinput#props (opens in a new tab)

`focusBorderColor`

The border color when input is focused.

Type	Required
string	No

`focusBorderWidth`

The border width when input is focused.

Type	Required	Default
number	No	2

`focusBorderStyle`

The border style property when input is focused.

Type	Required	Default
"solid", "dashed", "dotted"	No	"solid"

DraggableModal Textarea