Text Field

A text field is a rectangular area in which people enter or edit small, specific pieces of text.

Pro component

Requires all-access to use the source code

Companion App Logo

Try It Live

In the Companion App
Apple
Apple
1

Add the following dependencies to your project:

npx expo install react-native-keyboard-controller
ButtonForm
2

Edit _layout.tsx

Wrap the _layout.tsx in <KeyboardProvider> with the 2 boolean props of statusBarTranslucent and navigationBarTranslucent

@/app/_layout.tsx
    import '../global.css';
    import 'expo-dev-client';

    import { PortalHost } from '@rn-primitives/portal';
    import { StatusBar } from 'expo-status-bar';
+   import { KeyboardProvider } from 'react-native-keyboard-controller';   
    // YOUR_OTHER_IMPORTS

    import { NAV_THEME } from '@/theme';

    export {    
      // Catch any errors thrown by the Layout component.
      ErrorBoundary,
    } from 'expo-router';

    export default function RootLayout() {    
      const { colorScheme, isDarkColorScheme } = useColorScheme();
    
      return (
        <>
          <StatusBar
            key={`root-status-bar-${isDarkColorScheme ? 'light' : 'dark'}`}
            style={isDarkColorScheme ? 'light' : 'dark'}
          />
+         <KeyboardProvider statusBarTranslucent navigationBarTranslucent>
              <NavThemeProvider value={NAV_THEME[colorScheme]}>
                 {/* YOUR_ROOT_NAVIGATOR */}
                 <PortalHost />
              </NavThemeProvider>
+          </KeyboardProvider>
        </>
      );
    }
import { Stack } from 'expo-router';
import * as React from 'react';
import { Platform, View } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { useColorScheme } from '@/lib/useColorScheme';
import { Button } from '@/components/nativewindui/Button';
import { Icon } from '@/components/nativewindui/Icon';
import { Text } from '@/components/nativewindui/Text';
import { Form, FormItem, FormSection } from '@/components/nativewindui/Form';
import { TextField } from '@/components/nativewindui/TextField';

export default function Screen() {
  const [materialVariant, setMaterialVariant] = React.useState<'filled' | 'outlined'>('outlined');
  const { colors } = useColorScheme();
  const insets = useSafeAreaInsets();

  return (
    <KeyboardAwareScrollView
      bottomOffset={8}
      keyboardShouldPersistTaps="handled"
      keyboardDismissMode="interactive"
      contentContainerStyle={{ paddingBottom: insets.bottom }}>
      <Stack.Screen
        options={{
          headerRight: Platform.select({
            ios: undefined,
            default: () => (
              <Button
                size="icon"
                variant="plain"
                onPress={() =>
                  setMaterialVariant((prev) => (prev === 'filled' ? 'outlined' : 'filled'))
                }
              />
            ),
          }),
        }}
      />
      <Form className="px-4 pt-8">
        <FormSection
          ios={{ title: 'Base Text fields' }}
          footnote="Footnote"
          materialIconProps={{ name: 'account-outline' }}>
          <FormItem>
            <TextField
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              placeholder="First Name"
            />
          </FormItem>
          <FormItem>
            <TextField
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              placeholder="Last Name"
            />
          </FormItem>
          <FormItem>
            <TextField
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              placeholder="Username"
            />
          </FormItem>
        </FormSection>
        <FormSection
          ios={{ title: 'TEXT FIELDS WITH LABELS' }}
          materialIconProps={{ name: 'phone-outline' }}>
          <FormItem>
            <TextField
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              label="First Name"
              placeholder="Type here..."
            />
          </FormItem>
          <FormItem>
            <TextField
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              label="Last Name"
              placeholder="Type here..."
            />
          </FormItem>
          <FormItem>
            <TextField
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              label="Username"
              placeholder="Type here..."
            />
          </FormItem>
        </FormSection>
        {Platform.OS === 'ios' && (
          <FormSection ios={{ title: 'TEXT FIELDS WITH LABELS VARIANT' }}>
            <FormItem>
              <TextField
                textContentType="none"
                autoComplete="off"
                materialVariant={materialVariant}
                placeholder="Type here..."
                leftView={
                  <View className="w-28 justify-center pl-2">
                    <Text>First Name</Text>
                  </View>
                }
              />
            </FormItem>
            <FormItem>
              <TextField
                textContentType="none"
                autoComplete="off"
                materialVariant={materialVariant}
                placeholder="Type here..."
                leftView={
                  <View className="w-28 justify-center pl-2">
                    <Text>Last Name</Text>
                  </View>
                }
              />
            </FormItem>
            <FormItem>
              <TextField
                textContentType="none"
                autoComplete="off"
                materialVariant={materialVariant}
                placeholder="Type here..."
                leftView={
                  <View className="w-28 justify-center pl-2">
                    <Text>Username</Text>
                  </View>
                }
              />
            </FormItem>
          </FormSection>
        )}
        <FormSection
          ios={{ title: 'TEXT FIELDS WITH LEFT ICON' }}
          materialIconProps={{ name: 'map-marker-outline' }}>
          <FormItem iosSeparatorClassName="ml-10">
            <TextField
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              placeholder="Worth of home"
              leftView={
                <View className="ios:pl-2 justify-center pl-2">
                  <Icon color={colors.grey3} name="house" size={20} />
                </View>
              }
            />
          </FormItem>
          <FormItem iosSeparatorClassName="ml-10">
            <TextField
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              placeholder="Worth of Apple products"
              leftView={
                <View className="ios:pl-2 justify-center pl-2">
                  <Icon color={colors.grey3} name="apple.logo" size={20} />
                </View>
              }
            />
          </FormItem>
          <FormItem>
            <TextField
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              placeholder="Worth of Database"
              leftView={
                <View className="ios:pl-2 justify-center pl-2">
                  <Icon color={colors.grey3} name="externaldrive.fill" size={20} />
                </View>
              }
            />
          </FormItem>
        </FormSection>
        <FormSection
          ios={{ title: 'TEXT FIELDS FULLY LOADED' }}
          materialIconProps={{ name: 'wheelchair-accessibility' }}>
          <FormItem>
            <TextField
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              label="Worth of home"
              placeholder="Type here..."
              leftView={
                <View className="ios:pl-0 justify-center pl-2">
                  <Icon
                    color={colors.grey3}
                    sfSymbol={{ colors: [colors.primary] }}
                    name="house"
                    size={20}
                  />
                </View>
              }
              rightView={
                <View className="justify-center pr-3">
                  <Icon color={colors.grey3} name="dollarsign" size={20} />
                </View>
              }
            />
          </FormItem>
          <FormItem>
            <TextField
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              label="Worth of Apple products"
              placeholder="Type here..."
              leftView={
                <View className="ios:pl-0 justify-center pl-2">
                  <Icon
                    color={colors.grey3}
                    sfSymbol={{ colors: [colors.primary] }}
                    name="apple.logo"
                    size={20}
                  />
                </View>
              }
              rightView={
                <View className="justify-center pr-3">
                  <Icon color={colors.grey3} name="dollarsign" size={20} />
                </View>
              }
            />
          </FormItem>
          <FormItem>
            <TextField
              textContentType="none"
              autoComplete="off"
              materialVariant={materialVariant}
              label="Worth of Database"
              placeholder="Type here..."
              leftView={
                <View className="ios:pl-0 justify-center pl-2">
                  <Icon
                    color={colors.grey3}
                    sfSymbol={{ colors: [colors.primary] }}
                    name="externaldrive.fill"
                    size={20}
                  />
                </View>
              }
              rightView={
                <View className="justify-center pr-3">
                  <Icon color={colors.grey3} name="dollarsign" size={20} />
                </View>
              }
            />
          </FormItem>
        </FormSection>
      </Form>
    </KeyboardAwareScrollView>
  );
}
Logo

Unlock All Pro Templates & Components

Elevate your app with powerful, native-feeling components and templates. Build faster with beautiful ready-to-use designs.

Get all-access

Usage

import { TextField } from '@/components/nativewindui/TextField';
<TextField />

Props

TextField

Inherits all the props from React Native's TextInput component.

PropTypeDefaultDescription
leftViewReact.ReactNodeElement to be displayed on the left side of the text input.
rightViewReact.ReactNodeElement to be displayed on the right side of the text input.
labelstringLabel text displayed above the text input.
labelClassNamestringClass names applied to the label.
containerClassNamestringClass names applied to the container of the text field.
errorMessagestring
Android:

Appears as text below the TextField with a destructive color and displays an error icon in the TextField

iOS:

Used only for accessibility, as errors are recommended to be shown in an Alert.

materialVariant'outlined' | 'filled'outlinedMaterial variant for the input, applies only on Android.
materialRingColorstringOverride ring color, applies only on Android.
materialHideActionIconsstringHides the clear button icon and the error icons, applies only on Android.
accessibilityHintstringProvides additional accessibility information. Can override errorMessage for accessibility.
Logo

NativewindUI

DiscordGitHub
© Ronin Technologies LLC 2025