callstack · wonderlul · May 14, 2026 · May 15, 2026 · May 15, 2026 · May 15, 2026
diff --git a/docs/babel.config.js b/docs/babel.config.js
@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['@docusaurus/core/lib/babel/preset'],
+  plugins: ['react-native-reanimated/plugin'],
 };
diff --git a/docs/docs/guides/12-migration.md b/docs/docs/guides/12-migration.md
@@ -0,0 +1,128 @@
+---
+title: Migration from Paper 5.x to 6.x
+---
+
+TBC
+
+## Components
+
+### TextInput
+
+The Paper 6.x `TextInput` is a complete rewrite with a new API. Import the component the same way, but note that the props and behavior have changed significantly.
+
+#### Types
+
+```tsx
+import { TextInput, type TextInputProps } from 'react-native-paper';
+```
+
+#### Variant
+
+- **`mode="flat"`** → **`variant="filled"`**
+- **`mode="outlined"`** → **`variant="outlined"`**
+
+```tsx
+// Before (v5)
+<TextInput mode="flat" label="Filled" />
+<TextInput mode="outlined" label="Outlined" />
+
+// After (v6)
+<TextInput variant="filled" label="Filled" />
+<TextInput variant="outlined" label="Outlined" />
+```
+
+#### Adornments
+
+- **`left` / `right`** → **`startAccessory` / `endAccessory`**
+- **`TextInput.Affix`** → **`prefix` / `suffix`**, or **`TextInput.Icon`**, or **`startAccessory` / `endAccessory`**
+
+```tsx
+// Before (v5)
+<TextInput
+  left={<TextInput.Icon icon="email" />}
+  right={<TextInput.Affix text={`${value.length}/80`} />}
+/>
+
+// After (v6)
+<TextInput
+  startAccessory={(p) => <TextInput.Icon {...p} icon="email" />}
+  endAccessory={(p) => <CustomComponent {...p} />}
+  maxLength={100}
+  prefix="$"
+  suffix="/100"
+  counter
+/>
+```
+
+#### Label and supporting text
+
+- **`label: React.Element | string`** → **`string`**
+- **`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)
+<TextInput
+  label="Email"
+  error={hasError}
+  disabled={isDisabled}
+  supportingText="Enter a valid email"
+/>
+```
+
+#### Removed props
+
+No direct `TextInput` equivalents for:
+
+- **`dense`**, **`contentStyle`**, **`underlineStyle`**
+- **`underlineColor`**, **`activeUnderlineColor`**, **`outlineColor`**, **`activeOutlineColor`**, **`textColor`**
+
+Use **`style`** on the inner input and the **`theme`** for colors.
+
+```tsx
+import { MD3LightTheme, TextInput } 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)
+<TextInput
+  theme={theme}
+  style={{ fontSize: 16, color: '#1C1B1F' }}
+/>
+```
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -124,7 +124,6 @@ const config = {
             AnimatedFAB: 'FAB/AnimatedFAB',
             FABGroup: 'FAB/FABGroup',
           },
-          HelperText: { HelperText: 'HelperText/HelperText' },
           IconButton: {
             IconButton: 'IconButton/IconButton',
           },
@@ -165,8 +164,7 @@ const config = {
           },
           TextInput: {
             TextInput: 'TextInput/TextInput',
-            TextInputAffix: 'TextInput/Adornment/TextInputAffix',
-            TextInputIcon: 'TextInput/Adornment/TextInputIcon',
+            TextInputIcon: 'TextInput/TextInputIcon',
           },
           ToggleButton: {
             ToggleButton: 'ToggleButton/ToggleButton',
@@ -204,10 +202,9 @@ const config = {
             }
 
             const customUrls = {
-              TextInputAffix:
-                'src/components/TextInput/Adornment/TextInputAffix.tsx',
-              TextInputIcon:
-                'src/components/TextInput/Adornment/TextInputIcon.tsx',
+              TextInput: 'src/components/TextInput/TextInput.tsx',
+              TextInputIcon: 'src/components/TextInput/TextInputIcon.tsx',
+
               Text: 'src/components/Typography/Text.tsx',
               showcase: 'docs/src/components/Showcase.tsx',
             };
@@ -326,14 +323,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',
-      },
-    },
+    knownIssues: {},
     themeColors,
     screenshots,
     extendedExamples,

diff --git a/docs/package.json b/docs/package.json
@@ -29,6 +29,7 @@
     "color": "^4.2.3",
     "marked": "^4.1.1",
     "prism-react-renderer": "^1.3.5",
+    "process": "^0.11.10",
     "react": "17.0.2",
     "react-color": "^2.19.3",
     "react-dom": "17.0.2",

diff --git a/docs/plugins/docusaurus-react-native-plugin.js b/docs/plugins/docusaurus-react-native-plugin.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const webpack = require('webpack');
 
 module.exports = function () {
   return {
@@ -17,6 +18,14 @@ module.exports = function () {
           },
           extensions: ['.web.js'],
         },
+        plugins: [
+          new webpack.ProvidePlugin({
+            process: 'process/browser.js',
+          }),
+          new webpack.DefinePlugin({
+            __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
+          }),
+        ],
       };
     },
   };

diff --git a/docs/src/components/BannerExample.tsx b/docs/src/components/BannerExample.tsx
@@ -113,7 +113,7 @@ const BannerExample = () => {
           />
           <TextInput
             label="Email"
-            mode="outlined"
+            variant="outlined"
             value={text}
             onChangeText={(text) => setText(text)}
           />

diff --git a/docs/src/components/PropTable.tsx b/docs/src/components/PropTable.tsx
@@ -11,17 +11,27 @@ 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',
+  '(props: TextInputAccessoryProps) => React.ReactNode':
+    'https://github.com/callstack/react-native-paper/blob/main/src/components/TextInput/TextInputIcon.tsx#L11',
+  '(props: TextInputRenderProps) => React.ReactNode':
+    'https://github.com/callstack/react-native-paper/blob/main/src/components/TextInput/TextInput.tsx#L168',
   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',
+  AccessibilityProps:
+    'https://reactnative.dev/docs/accessibility#accessibilityprops',
 };
 
 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 +66,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;
           }

diff --git a/docs/src/data/screenshots.js b/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',
@@ -147,13 +146,9 @@ const screenshots = {
   },
   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',
+    filled: 'screenshots/text-field-filled.png',
+    outlined: 'screenshots/text-field-outlined.png',
   },
-  'TextInput.Affix': 'screenshots/textinput-outline.affix.png',
-  'TextInput.Icon': 'screenshots/textinput-flat.icon.png',
   ToggleButton: 'screenshots/toggle-button.png',
   'ToggleButton.Group': 'screenshots/toggle-button-group.gif',
   'ToggleButton.Row': 'screenshots/toggle-button-row.gif',

diff --git a/docs/src/data/themeColors.js b/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: {

diff --git a/docs/static/screenshots/text-field-filled.png b/docs/static/screenshots/text-field-filled.png
diff --git a/docs/static/screenshots/text-field-outlined.png b/docs/static/screenshots/text-field-outlined.png