TextField

A fully-featured text input built on top of react-native-paper's TextInput — with theming, validation states, secure entry, bottom-sheet support, and flexible icon slots.

Props

Core

Label & Messaging

Icons

Styling

Behavior

Usage

Basic text field:

<TextField
  label="Email"
  placeholder="Enter your email"
  value={email}
  onChangeText={setEmail}
/>

Required field with error:

<TextField
  label="Username"
  required
  placeholder="Pick a username"
  value={username}
  onChangeText={setUsername}
  errorMessage={errors.username}
/>

Password field with secure entry:

<TextField
  label="Password"
  secure
  placeholder="Enter your password"
  value={password}
  onChangeText={setPassword}
/>

The secure prop automatically adds a visibility toggle icon on the right side. Users can tap it to reveal or hide the password.

With icons:

<TextField
  label="Search"
  leftIcon="search"
  rightIcon="close"
  onPressIcon={handleClear}
  placeholder="Search..."
  value={query}
  onChangeText={setQuery}
/>

Success state:

<TextField
  label="Email"
  value={email}
  onChangeText={setEmail}
  successMessage="Email is available"
/>

Inside a bottom sheet:

<TextField
  label="Note"
  placeholder="Add a note..."
  value={note}
  onChangeText={setNote}
  useBottomSheet
/>

When useBottomSheet is true, the component renders BottomSheetTextInput from @gorhom/bottom-sheet instead of the default input, ensuring proper keyboard handling inside bottom sheets.

With spacing:

<TextField
  label="First Name"
  value={firstName}
  onChangeText={setFirstName}
  top={16}
  bottom={8}
/>

Validation States

The input outline changes color based on validation state:

• Default — neutral.secondary border
• Error — danger.base border + error message rendered below
• Success — success.base border + success message rendered below

Only one state is shown at a time. errorMessage takes priority over successMessage.

Secure Entry

When secure is true:

1. Text is hidden by default (secureTextEntry)
2. A visibility toggle icon appears on the right
3. The maskEntry prop controls the initial toggle state — set to true to show text by default
4. If a rightIcon is also provided, it takes priority over the visibility toggle

Bottom Sheet Support

React Native text inputs don't work correctly inside @gorhom/bottom-sheet by default. Set useBottomSheet={true} to swap in BottomSheetTextInput, which handles focus and keyboard interactions properly within a bottom sheet context.

Notes

• The component width is set to screenWidth - 40 (20px padding on each side)
• autoCapitalize is always set to "none"
• submitBehavior is set to "blurAndSubmit" — the input blurs and fires onSubmitEditing when return is pressed
• On Android, fontWeight is "bold"; on iOS it's "600" — this accounts for cross-platform font rendering differences
• All other TextInputProps from react-native-paper are supported via spread