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

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 { useColorScheme, useInitialAndroidBarSync } from '~/lib/useColorScheme';
    import { NAV_THEME } from '~/theme';

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

    export default function RootLayout() {    
      useInitialAndroidBarSync();
      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 { Icon } from '@roninoss/icons';
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 { Button } from '../~/components/nativewindui/Button';
import { Form, FormItem, FormSection } from '~/components/nativewindui/Form';
import { TextField } from '~/components/nativewindui/TextField';
import { Text } from '~/components/nativewindui/Text';
import { useColorScheme } from '~/lib/useColorScheme';

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

  return (
    <>
      <Stack.Screen
        options={{
          title: 'Text Fields',
          headerRight: Platform.select({
            ios: undefined,
            default: () => (
              <Button
                size="icon"
                variant="plain"
                onPress={() =>
                  setMaterialVariant((prev) => (prev === 'filled' ? 'outlined' : 'filled'))
                }
              />
            ),
          }),
        }}
      />
      <KeyboardAwareScrollView
        bottomOffset={8}
        keyboardShouldPersistTaps="handled"
        keyboardDismissMode="interactive"
        contentContainerStyle={{ paddingBottom: insets.bottom }}>
        <Form className="px-4 pt-8">
          <FormSection
            ios={{ title: 'Base Text fields' }}
            footnote="Footnote"
            materialIconProps={{ name: 'person-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="home" 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" 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="database" size={20} />
                  </View>
                }
              />
            </FormItem>
          </FormSection>
          <FormSection
            ios={{ title: 'TEXT FIELDS FULLY LOADED' }}
            materialIconProps={{ name: '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}
                      ios={{ colors: [colors.primary] }}
                      name="home"
                      size={20}
                    />
                  </View>
                }
                rightView={
                  <View className="justify-center pr-3">
                    <Icon color={colors.grey3} name="attach-money" 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}
                      ios={{ colors: [colors.primary] }}
                      name="apple"
                      size={20}
                    />
                  </View>
                }
                rightView={
                  <View className="justify-center pr-3">
                    <Icon color={colors.grey3} name="attach-money" 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}
                      ios={{ colors: [colors.primary] }}
                      name="database"
                      size={20}
                    />
                  </View>
                }
                rightView={
                  <View className="justify-center pr-3">
                    <Icon color={colors.grey3} name="attach-money" size={20} />
                  </View>
                }
              />
            </FormItem>
          </FormSection>
        </Form>
      </KeyboardAwareScrollView>
    </>
  );
}
Logo

Unlock All Pro Screens & 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 2024