LogoCraftReactNative
Components

InputText

A text field component that allows users to input text. It provides a customizable input field with support for left and right icons and different sizes. Based on React Native TextInput component.

Installation

npx @craftreactnative/ui add InputText

Usage

Screen.tsx
import { InputText } from '@/craftrn-ui/components/InputText';
 
export const Screen = () => (
  <InputText
    label="Label"
    value="100"
    onChangeText={text => console.log(text)}
    itemRight={<ChevronDown />}
    size="medium"
  />
);

Props

Inherit all props from TextInputProps.

PropTypeDefault
size?
Size
'medium'
onPress?
() => void
-
itemLeft?
ReactElement<unknown, string | JSXElementConstructor<any>>
-
itemRight?
ReactElement<unknown, string | JSXElementConstructor<any>>
-
error?
string
-
label?
string
-
placeholder?
string
-

Dependencies

2 packages
react-native-reanimated
react-native-unistyles
Required imports
craftrn-ui/components/Text

InputSearch

A text field component that allows users to search. It provides a customizable input field with support for left and right icons and different sizes. Based on React Native TextInput component.

ListItem

A list item component to display content in a vertical manner. It supports optional left and right accessories to place a component or an icon.

On this page