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.

Component preview

Component dependencies

@/craftrn-ui/components/Text

Usage

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

Props

Inherit all props from TextInputProps.

PropTypeDefault
label?
string
-
size?
"small" | "medium" | "large"
'medium'
onPress?
() => void
-
leftAccessory?
ReactElement<unknown, string | JSXElementConstructor<any>>
-
rightAccessory?
ReactElement<unknown, string | JSXElementConstructor<any>>
-
error?
string
-

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