LogoCraftReactNative
Components

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.

Component preview

Installation

npx @craftreactnative/ui add InputSearch

Usage

Screen.tsx
import { InputSearch } from "@/craftrn-ui/components/InputSearch";
 
export const Screen = () => (
  <InputSearch
    placeholder="Search for a destination"
    leftAccessory={
      <View style={styles.leftAccessory}>
        <Search color={theme.colors.contentTertiary} />
      </View>
    }
    rightAccessory={
      <ButtonRound
        renderIcon={(size) => (
          <Slider size={size} color={theme.colors.contentTertiary} />
        )}
        onPress={() => {}}
      />
    }
  />
);

Props

Inherit all props from TextInputProps.

PropTypeDefault
onPress?
() => void
-
leftAccessory?
ReactNode
-
rightAccessory?
ReactNode
-

Dependencies

1 packages
react-native-unistyles

InputOTP

A component that allows users to enter an OTP (One-Time Password) code. It displays a series of input fields, each containing a single character. It also provides a way to import the OTP code from SMS.

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.

On this page