feat: Migrate TextInput to TextField

docs/docs/guides/12-migration.md

@@ -0,0 +1,137 @@
+---
+title: Migration from Paper 5.x to 6.x
+---
+
+TBC
+
+## Component and types
+
+The Paper text field is renamed. Use **`TextField`** and the **`TextFieldProps`** type instead of **`TextInput`** / **`TextInputProps`**.
+
+```tsx
+import { TextField, type TextFieldProps } from 'react-native-paper';
+```
+
+## Visual / variant
+
+- **`mode="flat"`** → **`variant="filled"`**
+- **`mode="outlined"`** → **`variant="outlined"`**
+
+```tsx
+// Before (v5)
+<TextInput mode="flat" label="Filled" />
+<TextInput mode="outlined" label="Outlined" />
+
+// After (v6)
+<TextField variant="filled" label="Filled" />
+<TextField variant="outlined" label="Outlined" />
+```
+
+## Icons and adornments
+
+- **`left` / `right`** → **`StartAccessory` / `EndAccessory`**
+- **`TextInput.Icon`** → **`TextField.Icon`**
+- **`TextInput.Affix`** → **`prefix` / `suffix`**, or **`TextField.Icon`**, or **`StartAccessory` / `EndAccessory`**
+
+```tsx
+// Before (v5)
+<TextInput
+  left={<TextInput.Icon icon="email" />}
+  right={<TextInput.Affix text={`${value.length}/80`} />}
+/>
+
+// After (v6)
+<TextField
+  StartAccessory={(p) => <TextField.Icon {...p} icon="email" />}
+  EndAccessory={(p) => <CustomComponent {...p} />}
+  maxLength={100}
+  prefix={"$"}
+  suffix={"/100"}
+  counter
+/>
+```
+
+## Label, helper, error, disabled
+
+- **`label: React.Element | string`** → **`string`**
+- **`error` / `disabled`** → **`error`** and **`editable={false}`**
+- **`HelperText`** was removed; use **`supportingText`**.
+
+```tsx
+// Before (v5)
+<>
+  <TextInput
+    label="Email"
+    error={hasError}
+    disabled={isDisabled}
+  />
+  <HelperText type="error" visible={hasError}>
+    Enter a valid email
+  </HelperText>
+</>
+
+// After (v6)
+<TextField
+  label="Email"
+  labelProps={{ maxFontSizeMultiplier: 1.2 }}
+  error={hasError}
+  editable={!isDisabled}
+  supportingText={'Enter a valid email'}
+/>
+```
+
+## Styling / behavior removed
+
+No direct `TextField` equivalents for:
+
+- **`dense`**, **`contentStyle`**, **`underlineStyle`**
+- **`underlineColor`**, **`activeUnderlineColor`**, **`outlineColor`**, **`activeOutlineColor`**, **`textColor`**
+- **`render`**
+
+Prefer **`fieldStyle`**, **`containerStyle`**, **`pressableStyle`**, **`style`** on the inner input, and the theme for the rest. Use **`outlineStyle`** for the indicator outline.
+
+```tsx
+import { MD3LightTheme, TextField } from 'react-native-paper';
+
+const theme = {
+  ...MD3LightTheme,
+  colors: {
+    ...MD3LightTheme.colors,
+    outline: '#79747E',
+    primary: '#6750A4',
+  },
+};
+
+// Before (v5)
+<TextInput
+  dense
+  contentStyle={{
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 8,
+  }}
+  outlineStyle={{
+    borderRadius: 12,
+    borderWidth: 2,
+  }}
+  outlineColor="#79747E"
+  activeOutlineColor="#6750A4"
+  textColor="#1C1B1F"
+  style={{ fontSize: 16 }}
+/>
+
+// After (v6)
+<TextField
+  theme={theme}
+  containerStyle={{
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 8,
+  }}
+  outlineStyle={{
+    borderRadius: 12,
+    borderWidth: 2,
+  }}
+  style={{ fontSize: 16, color: '#1C1B1F' }}
+/>
+```

docs/docusaurus.config.js

@@ -126,7 +126,6 @@ const config = {
             AnimatedFAB: 'FAB/AnimatedFAB',
             FABGroup: 'FAB/FABGroup',
           },
-          HelperText: { HelperText: 'HelperText/HelperText' },
           IconButton: {
             IconButton: 'IconButton/IconButton',
           },
@@ -165,11 +164,6 @@ const config = {
           Switch: {
             Switch: 'Switch/Switch',
           },
-          TextInput: {
-            TextInput: 'TextInput/TextInput',
-            TextInputAffix: 'TextInput/Adornment/TextInputAffix',
-            TextInputIcon: 'TextInput/Adornment/TextInputIcon',
-          },
           TextField: {
             TextField: 'TextField/TextField',
             TextFieldIcon: 'TextField/TextFieldIcon',
@@ -210,11 +204,8 @@ const config = {
             }
 
             const customUrls = {
-              TextInputAffix:
-                'src/components/TextInput/Adornment/TextInputAffix.tsx',
-              TextInputIcon:
-                'src/components/TextInput/Adornment/TextInputIcon.tsx',
               TextField: 'src/components/TextField/TextField.tsx',
+              TextFieldIcon: 'src/components/TextField/TextFieldIcon.tsx',
 
               Text: 'src/components/Typography/Text.tsx',
               showcase: 'docs/src/components/Showcase.tsx',
@@ -334,14 +325,7 @@ const config = {
           'https://snack.expo.dev/@react-native-paper/more-examples---snackbar-rendered-regardless-of-the-parent-positioning',
       },
     },
-    knownIssues: {
-      TextInput: {
-        'Outline overlaps label':
-          'https://github.com/callstack/react-native-paper/issues/3759#issuecomment-1601235262',
-        'Long text wraps to a second line':
-          'https://github.com/callstack/react-native-paper/issues/2581#issuecomment-790251987',
-      },
-    },
+
     themeColors,
     screenshots,
     extendedExamples,

docs/src/components/BannerExample.tsx

@@ -16,7 +16,7 @@ import {
   RadioButton,
   Switch,
   Text,
-  TextInput,
+  TextField,
   useTheme,
 } from 'react-native-paper';
 
@@ -106,14 +106,14 @@ const BannerExample = () => {
         </Stack>
 
         <Stack direction="row" spacing={8} style={styles.row}>
-          <TextInput
+          <TextField
             label="Email"
             value={text}
             onChangeText={(text) => setText(text)}
           />
-          <TextInput
+          <TextField
             label="Email"
-            mode="outlined"
+            variant="outlined"
             value={text}
             onChangeText={(text) => setText(text)}
           />

docs/src/data/screenshots.js

@@ -79,7 +79,6 @@ const screenshots = {
   },
   AnimatedFAB: 'screenshots/animated-fab.gif',
   'FAB.Group': 'screenshots/fab-group.gif',
-  HelperText: 'screenshots/helper-text.gif',
   Icon: 'screenshots/icon.png',
   IconButton: {
     default: 'screenshots/icon-button-1.png',
@@ -146,14 +145,6 @@ const screenshots = {
     'iOS (disabled)': 'screenshots/switch-disabled.ios.png',
   },
   Text: 'screenshots/typography.png',
-  TextInput: {
-    'flat (focused)': 'screenshots/textinput-flat.focused.png',
-    'flat (disabled)': 'screenshots/textinput-flat.disabled.png',
-    'outlined (focused)': 'screenshots/textinput-outlined.focused.png',
-    'outlined (disabled)': 'screenshots/textinput-outlined.disabled.png',
-  },
-  'TextInput.Affix': 'screenshots/textinput-outline.affix.png',
-  'TextInput.Icon': 'screenshots/textinput-flat.icon.png',
   TextField: {
     filled: 'screenshots/text-field-filled.png',
     outlined: 'screenshots/text-field-outlined.png',

docs/src/data/themeColors.js

@@ -190,17 +190,6 @@ const themeColors = {
       'textColor/iconColor': 'theme.colors.primary',
     },
   },
-  HelperText: {
-    disabled: {
-      textColor: 'theme.colors.onSurfaceDisabled',
-    },
-    default: {
-      textColor: 'theme.colors.onSurfaceVariant',
-    },
-    error: {
-      textColor: 'theme.colors.error',
-    },
-  },
   IconButton: {
     selected: {
       default: {

example/src/ExampleList.tsx

@@ -44,7 +44,6 @@ 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';
 import ToggleButtonExample from './Examples/ToggleButtonExample';
@@ -90,7 +89,6 @@ export const mainExamples: Record<
   surface: SurfaceExample,
   switch: SwitchExample,
   text: TextExample,
-  textInput: TextInputExample,
   textField: TextFieldExample,
   toggleButton: ToggleButtonExample,
   tooltipExample: TooltipExample,