feat: TextField component

docs/docusaurus.config.js

@@ -170,6 +170,7 @@ const config = {
             TextInputAffix: 'TextInput/Adornment/TextInputAffix',
             TextInputIcon: 'TextInput/Adornment/TextInputIcon',
           },
+          TextField: 'TextField/TextField',
           ToggleButton: {
             ToggleButton: 'ToggleButton/ToggleButton',
             ToggleButtonGroup: 'ToggleButton/ToggleButtonGroup',
@@ -206,6 +207,8 @@ const config = {
             }
 
             const customUrls = {
+              TextField: 'src/components/TextField/TextField.tsx',
+              TextInput: 'src/components/TextInput/TextInput.tsx',
               TextInputAffix:
                 'src/components/TextInput/Adornment/TextInputAffix.tsx',
               TextInputIcon:

docs/src/components/PropTable.tsx

@@ -11,17 +11,23 @@ const typeDefinitions = {
     'https://github.com/callstack/react-native-paper/blob/main/src/components/Icon.tsx#L16',
   ThemeProp:
     'https://callstack.github.io/react-native-paper/docs/guides/theming#theme-properties',
+  'ComponentType<TextFieldAccessoryProps>':
+    'https://github.com/callstack/react-native-paper/blob/main/src/components/TextField/TextField.tsx#L21',
   AccessibilityState:
     'https://reactnative.dev/docs/accessibility#accessibilitystate',
   'StyleProp<ViewStyle>': 'https://reactnative.dev/docs/view-style-props',
   'StyleProp<TextStyle>': 'https://reactnative.dev/docs/text-style-props',
+  TextProps: 'https://reactnative.dev/docs/text#props',
 };
 
 const renderBadge = (annotation: string) => {
   const [annotType, ...annotLabel] = annotation.split(' ');
 
   // eslint-disable-next-line prettier/prettier
-  return `<span class="badge badge-${annotType.replace('@', '')} ">${annotLabel.join(' ')}</span>`;
+  return `<span class="badge badge-${annotType.replace(
+    '@',
+    ''
+  )} ">${annotLabel.join(' ')}</span>`;
 };
 
 export default function PropTable({
@@ -56,7 +62,9 @@ export default function PropTable({
           if (line.includes('@')) {
             const annotIndex = line.indexOf('@');
             // eslint-disable-next-line prettier/prettier
-              return `${line.substr(0, annotIndex)} ${renderBadge(line.substr(annotIndex))}`;
+            return `${line.substr(0, annotIndex)} ${renderBadge(
+              line.substr(annotIndex)
+            )}`;
           } else {
             return line;
           }

docs/src/data/screenshots.js

@@ -146,6 +146,10 @@ const screenshots = {
     'iOS (disabled)': 'screenshots/switch-disabled.ios.png',
   },
   Text: 'screenshots/typography.png',
+  TextField: {
+    filled: 'screenshots/text-field-filled.png',
+    outlined: 'screenshots/text-field-outlined.png',
+  },
   TextInput: {
     'flat (focused)': 'screenshots/textinput-flat.focused.png',
     'flat (disabled)': 'screenshots/textinput-flat.disabled.png',

example/src/ExampleList.tsx

@@ -43,6 +43,7 @@ import SwitchExample from './Examples/SwitchExample';
 import TeamDetails from './Examples/TeamDetails';
 import TeamsList from './Examples/TeamsList';
 import TextExample from './Examples/TextExample';
+import TextFieldExample from './Examples/TextFieldExample';
 import TextInputExample from './Examples/TextInputExample';
 import ThemeExample from './Examples/ThemeExample';
 import ThemingWithReactNavigation from './Examples/ThemingWithReactNavigation';
@@ -89,6 +90,7 @@ export const mainExamples: Record<
   surface: SurfaceExample,
   switch: SwitchExample,
   text: TextExample,
+  textField: TextFieldExample,
   textInput: TextInputExample,
   toggleButton: ToggleButtonExample,
   tooltipExample: TooltipExample,

example/src/Examples/TextFieldExample.tsx

@@ -0,0 +1,213 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import {
+  Icon,
+  List,
+  TextField,
+  type TextFieldAccessoryProps,
+} from 'react-native-paper';
+
+import { useExampleTheme } from '../hooks/useExampleTheme';
+import ScreenWrapper from '../ScreenWrapper';
+
+const TextFieldExample = () => {
+  const { colors } = useExampleTheme();
+  const iconMuted = colors.onSurfaceVariant;
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [email, setEmail] = React.useState('');
+  const [filledPassword, setFilledPassword] = React.useState('');
+  const [filledNotes, setFilledNotes] = React.useState('');
+  const [outlinedSearchQuery, setOutlinedSearchQuery] = React.useState('');
+  const [outlinedText, setOutlinedText] = React.useState('');
+  const [outlinedPassword, setOutlinedPassword] = React.useState('');
+  const [outlinedNotes, setOutlinedNotes] = React.useState('');
+  const [errorField, setErrorField] = React.useState('invalid@');
+
+  const ClearFilledSearchAccessory = ({
+    style,
+    editable,
+  }: TextFieldAccessoryProps) => {
+    return (
+      <Pressable
+        style={style}
+        disabled={!editable}
+        onPress={() => setSearchQuery('')}
+        accessibilityRole="button"
+        accessibilityLabel="Clear text"
+      >
+        <Icon source="close" size={24} color={iconMuted} />
+      </Pressable>
+    );
+  };
+
+  const ClearOutlinedSearchAccessory = ({
+    style,
+    editable,
+  }: TextFieldAccessoryProps) => {
+    return (
+      <Pressable
+        style={style}
+        disabled={!editable}
+        onPress={() => setOutlinedSearchQuery('')}
+        accessibilityRole="button"
+        accessibilityLabel="Clear text"
+      >
+        <Icon source="close" size={24} color={iconMuted} />
+      </Pressable>
+    );
+  };
+
+  const SearchLeadingAccessory = ({ style }: TextFieldAccessoryProps) => {
+    return (
+      <View style={style}>
+        <Icon source="magnify" size={24} color={iconMuted} />
+      </View>
+    );
+  };
+
+  return (
+    <ScreenWrapper contentContainerStyle={styles.container}>
+      <List.Section title="Filled" style={styles.section}>
+        <TextField
+          variant="filled"
+          label="With accessories"
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          LeftAccessory={SearchLeadingAccessory}
+          RightAccessory={ClearFilledSearchAccessory}
+          pressableStyle={styles.field}
+          placeholder="Search"
+        />
+        <TextField
+          variant="filled"
+          label="Without accessories"
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          autoCorrect={false}
+          pressableStyle={styles.field}
+          placeholder="Email"
+        />
+        <TextField
+          variant="filled"
+          label="Email (error)"
+          helper="Enter a valid email address."
+          placeholder="name@example.com"
+          status="error"
+          value={errorField}
+          onChangeText={setErrorField}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          pressableStyle={styles.field}
+        />
+        <TextField
+          variant="filled"
+          label="Account (disabled)"
+          helper="Contact support to make changes."
+          value="read-only@example.com"
+          editable={false}
+          pressableStyle={styles.field}
+        />
+        <TextField
+          variant="filled"
+          label="Notes (multiline)"
+          helper="Optional details for your request."
+          placeholder="Add a note…"
+          value={filledNotes}
+          onChangeText={setFilledNotes}
+          multiline
+          pressableStyle={styles.field}
+        />
+        <TextField
+          variant="filled"
+          label="Password"
+          helper="At least 8 characters."
+          placeholder="••••••••"
+          value={filledPassword}
+          onChangeText={setFilledPassword}
+          secureTextEntry
+          textContentType="password"
+          pressableStyle={styles.field}
+        />
+      </List.Section>
+
+      <List.Section title="Outlined" style={styles.section}>
+        <TextField
+          variant="outlined"
+          label="With accessories"
+          value={outlinedSearchQuery}
+          onChangeText={setOutlinedSearchQuery}
+          LeftAccessory={SearchLeadingAccessory}
+          RightAccessory={ClearOutlinedSearchAccessory}
+          pressableStyle={styles.field}
+          placeholder="Search"
+        />
+        <TextField
+          variant="outlined"
+          label="Without accessories"
+          value={outlinedText}
+          onChangeText={setOutlinedText}
+          pressableStyle={styles.field}
+        />
+        <TextField
+          variant="outlined"
+          label="Email (error)"
+          helper="Enter a valid email address."
+          placeholder="name@example.com"
+          status="error"
+          value={errorField}
+          onChangeText={setErrorField}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          pressableStyle={styles.field}
+        />
+        <TextField
+          variant="outlined"
+          label="Disabled via status"
+          helper="This field cannot be edited."
+          value="Disabled"
+          status="disabled"
+          pressableStyle={styles.field}
+        />
+        <TextField
+          variant="outlined"
+          label="Notes (multiline)"
+          helper="Optional details for your request."
+          placeholder="Add a note…"
+          value={outlinedNotes}
+          onChangeText={setOutlinedNotes}
+          multiline
+          pressableStyle={styles.field}
+        />
+        <TextField
+          variant="outlined"
+          label="Password"
+          helper="At least 8 characters."
+          placeholder="••••••••"
+          value={outlinedPassword}
+          onChangeText={setOutlinedPassword}
+          secureTextEntry
+          textContentType="password"
+          pressableStyle={styles.field}
+        />
+      </List.Section>
+    </ScreenWrapper>
+  );
+};
+
+TextFieldExample.title = 'TextField';
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  field: {},
+  section: {
+    gap: 16,
+  },
+});
+
+export default TextFieldExample;