callstack · pawelkata · Aug 19, 2026 · Aug 21, 2026 · Aug 21, 2026 · Aug 21, 2026
diff --git a/docs/6.x/docs/guides/migration.md b/docs/6.x/docs/guides/migration.md
@@ -82,9 +82,54 @@ You can specify a `testID` explicitly and use that value to query the component.
 
 ### Appbar
 
-The `style` props for `Appbar` and `Appbar.Header` no longer accept `Animated.Value` or `Animated.AnimatedInterpolation`. They only accept static styles.
+The Paper 6.x `Appbar` is a major refactor that drops the compound component API.
 
-The `style.elevation` property is no longer supported. Use the `elevated` prop to control Appbar elevation.
+The `style` prop no longer accepts `Animated.Value` or `Animated.AnimatedInterpolation`. Use Reanimated as described above. The `style.elevation` property is no longer supported.
+
+#### Migrating from the compound API
+
+`Appbar.Header`, `Appbar.Content`, `Appbar.Action`, and `Appbar.BackAction` have been removed. Render one `Appbar` and provide its headline, leading button, and trailing actions as props. The former `mode="medium"` and `mode="large"` values are now `variant="medium-flexible"` and `variant="large-flexible"`; centered content uses `headlineAlignment="center"`.
+
+```tsx
+// Before (v5)
+
+const MyComponent = () => (
+  <Appbar.Header>
+    <Appbar.BackAction onPress={() => {}} />
+    <Appbar.Content title="Inbox" />
+    <Appbar.Action icon="search" onPress={() => {}} />
+    <Appbar.Action icon="dots-vertical" onPress={() => {}} />
+  </Appbar.Header>
+);
+
+// After (v6)
+
+const MyComponent = () => (
+  <Appbar
+    variant="small"
+    headline="Inbox"
+    leadingButton={{ type: 'back', onPress: () => {} }}
+    trailingActions={[
+      {
+        key: 'search',
+        icon: 'magnify',
+        'aria-label': 'Search',
+        onPress: () => {},
+      },
+      {
+        key: 'more',
+        icon: 'dots-vertical',
+        'aria-label': 'More options',
+        onPress: () => {},
+      },
+    ]}
+  />
+);
+```
+
+#### Bottom toolbar support
+
+Material Design 3 moves bottom app bars out of the top app bar component. Use the `Toolbar` component to construct a bottom bar.
 
 ### Surface
 

diff --git a/docs/6.x/docs/guides/react-navigation.md b/docs/6.x/docs/guides/react-navigation.md
@@ -136,11 +136,7 @@ Now we will implement `CustomNavigationBar` using `AppBar` component:
 import { Appbar } from 'react-native-paper';
 
 export default function CustomNavigationBar() {
-  return (
-    <Appbar.Header>
-      <Appbar.Content title="My awesome app" />
-    </Appbar.Header>
-  );
+  return <Appbar variant="small" headline="My awesome app" />;
 }
 ```
 
@@ -154,11 +150,7 @@ import { getHeaderTitle } from '@react-navigation/elements';
 export default function CustomNavigationBar({ route, options }) {
   const title = getHeaderTitle(options, route.name);
 
-  return (
-    <Appbar.Header>
-      <Appbar.Content title={title} />
-    </Appbar.Header>
-  );
+  return <Appbar variant="small" headline={title} />;
 }
 ```
 
@@ -179,10 +171,13 @@ export default function CustomNavigationBar({
   const title = getHeaderTitle(options, route.name);
 
   return (
-    <Appbar.Header>
-      {back ? <Appbar.BackAction onPress={navigation.goBack} /> : null}
-      <Appbar.Content title={title} />
-    </Appbar.Header>
+    <Appbar
+      variant="small"
+      headline={title}
+      leadingButton={
+        back ? { type: 'back', onPress: navigation.goBack } : undefined
+      }
+    />
   );
 }
 ```
@@ -194,8 +189,8 @@ export default function CustomNavigationBar({
 Another interesting pattern that can be implemented with `react-native-paper` and `react-navigation` is a "menu" button. Thanks to the `Menu` component we can add a nice looking pop-up to our `Appbar`. To implement this feature we need to make a couple of changes in `CustomNavigationBar`:
 
 - Render a `Menu` component
-- Pass `Appbar.Action` to the anchor prop
-- Add a state to control `Menu` visibility
+- Add a trailing action to `Appbar`
+- Store the action coordinates and menu visibility in state
 
 :::note
 To have properly working `Menu` component, remember to wrap your root component with the `PaperProvider`:
@@ -236,21 +231,41 @@ export default function CustomNavigationBar({
   back,
 }) {
   const [visible, setVisible] = React.useState(false);
+  const [menuAnchor, setMenuAnchor] = React.useState({ x: 0, y: 0 });
   const openMenu = () => setVisible(true);
   const closeMenu = () => setVisible(false);
 
   const title = getHeaderTitle(options, route.name);
 
   return (
-    <Appbar.Header>
-      {back ? <Appbar.BackAction onPress={navigation.goBack} /> : null}
-      <Appbar.Content title={title} />
+    <>
+      <Appbar
+        variant="small"
+        headline={title}
+        leadingButton={
+          back ? { type: 'back', onPress: navigation.goBack } : undefined
+        }
+        trailingActions={
+          back
+            ? []
+            : [
+                {
+                  key: 'more',
+                  icon: 'dots-vertical',
+                  'aria-label': 'More options',
+                  onPress: (event) => {
+                    setMenuAnchor({
+                      x: event.nativeEvent.pageX,
+                      y: event.nativeEvent.pageY,
+                    });
+                    openMenu();
+                  },
+                },
+              ]
+        }
+      />
       {!back ? (
-        <Menu
-          visible={visible}
-          onDismiss={closeMenu}
-          anchor={<Appbar.Action icon="dots-vertical" onPress={openMenu} />}
-        >
+        <Menu visible={visible} onDismiss={closeMenu} anchor={menuAnchor}>
           <Menu.Item
             onPress={() => {
               console.log('Option 1 was pressed');
@@ -272,7 +287,7 @@ export default function CustomNavigationBar({
           />
         </Menu>
       ) : null}
-    </Appbar.Header>
+    </>
   );
 }
 ```

diff --git a/docs/6.x/docs/guides/theming-with-react-navigation.md b/docs/6.x/docs/guides/theming-with-react-navigation.md
@@ -249,24 +249,25 @@ Now that the Context is available at every component, all we need to do is impor
 
 ```js
 import React from 'react';
-import { useTheme, Appbar, TouchableRipple, Switch } from 'react-native-paper';
+import { Appbar } from 'react-native-paper';
 import { PreferencesContext } from './PreferencesContext';
 
 const Header = ({ scene }) => {
-  const theme = useTheme();
   const { toggleTheme, isThemeDark } = React.useContext(PreferencesContext);
 
   return (
-    <Appbar.Header
-      theme={{
-        colors: {
-          primary: theme?.colors.surface,
+    <Appbar
+      variant="small"
+      headline={scene.route?.name}
+      trailingActions={[
+        {
+          key: 'theme',
+          icon: isThemeDark ? 'weather-sunny' : 'weather-night',
+          'aria-label': 'Toggle color theme',
+          onPress: toggleTheme,
         },
-      }}
-    >
-      <Appbar.Content title={scene.route?.name} />
-      <Switch color={'red'} value={isThemeDark} onValueChange={toggleTheme} />
-    </Appbar.Header>
+      ]}
+    />
   );
 };
 ```

diff --git a/docs/6.x/docs/guides/theming.mdx b/docs/6.x/docs/guides/theming.mdx
@@ -503,14 +503,14 @@ Now you can use your `FancyButton` component everywhere instead of using `Button
 ## Dark Theme
 
 Since 3.0 we adapt dark theme to follow [Material design guidelines](https://material.io/design/color/dark-theme.html). <br/>
-In contrast to light theme, dark theme by default uses `surface` colour instead of `primary` on large components like `AppBar` or `BottomNavigation`.<br/>
+In contrast to light theme, dark theme by default uses `surface` colour instead of `primary` on large components like `BottomNavigation`.<br/>
 The dark theme adds a white overlay with opacity depending on elevation of surfaces. It uses it for the better accentuation of surface elevation. Using only shadow is highly imperceptible on dark surfaces.
 
 We are aware that users often use dark theme in their own ways and may not want to use the default dark theme features from the guidelines.<br/>
 That's why if you are using dark theme you can switch between two dark theme `mode`s:
 
-- `exact` where everything is like it was before. `Appbar` and `BottomNavigation` will still use primary colour by default.<br/>
-- `adaptive` where we follow [Material design guidelines](https://material.io/design/color/dark-theme.html), the surface will use white overlay with opacity to show elevation, `Appbar` and `BottomNavigation` will use surface colour as a background.
+- `exact` where everything is like it was before. `BottomNavigation` will still use primary colour by default.<br/>
+- `adaptive` where we follow [Material design guidelines](https://material.io/design/color/dark-theme.html), the surface will use white overlay with opacity to show elevation, and `BottomNavigation` will use surface colour as a background.
 
 If you don't use a custom theme, Paper will automatically change between the default theme and the default dark theme, depending on device settings.
 

diff --git a/docs/component-docs.config.ts b/docs/component-docs.config.ts
@@ -13,6 +13,7 @@ export type Page =
       source: string;
       component?: string;
       props?: string;
+      propsSource?: string;
       title?: string;
     };
 
@@ -33,11 +34,9 @@ type ComponentDocsConfig = {
 const pages = {
   ActivityIndicator: 'ActivityIndicator',
   Appbar: {
-    Appbar: 'Appbar/Appbar',
-    AppbarAction: 'Appbar/AppbarAction',
-    AppbarBackAction: 'Appbar/AppbarBackAction',
-    AppbarContent: 'Appbar/AppbarContent',
-    AppbarHeader: 'Appbar/AppbarHeader',
+    source: 'Appbar/Appbar',
+    component: 'Appbar',
+    propsSource: 'Appbar/types',
   },
   Avatar: {
     AvatarIcon: 'Avatar/AvatarIcon',

diff --git a/docs/plugins/component-docs/parser.ts b/docs/plugins/component-docs/parser.ts
@@ -461,11 +461,27 @@ export const createComponentParser = (tsconfigPath: string) => {
 
     const componentName = page.component ?? getDefaultExportName(sourceFile);
     const component = findComponentDeclaration(sourceFile, componentName);
+    const propsSourcePath = page.propsSource
+      ? path.join(sourceRootDir, `${page.propsSource}.ts`)
+      : sourcePath;
+    const propsSourceFile = page.propsSource
+      ? program.getSourceFile(propsSourcePath)
+      : sourceFile;
+
+    if (!propsSourceFile || !fs.existsSync(propsSourcePath)) {
+      return fail(
+        propsSourcePath,
+        'props source file was not found in the TypeScript program'
+      );
+    }
+
     const propsType = findPropsType(
-      sourceFile,
+      propsSourceFile,
       page.props ?? DEFAULT_PROPS_TYPE
     );
-    validatePropsType(sourceFile, propsType);
+    if (!page.propsSource) {
+      validatePropsType(propsSourceFile, propsType);
+    }
     const defaults = getParameterDefaults(
       checker,
       sourceFile,
@@ -474,7 +490,7 @@ export const createComponentParser = (tsconfigPath: string) => {
     const props = getProps(
       checker,
       sourceRootDir,
-      sourceFile,
+      propsSourceFile,
       propsType,
       defaults
     );

diff --git a/docs/plugins/component-docs/types.ts b/docs/plugins/component-docs/types.ts
@@ -2,6 +2,7 @@ export type ComponentPageConfig = {
   source: string;
   component?: string;
   props?: string;
+  propsSource?: string;
   title?: string;
 };
 

diff --git a/docs/public/screenshots/appbar-v6-large-flexible.png b/docs/public/screenshots/appbar-v6-large-flexible.png
diff --git a/docs/public/screenshots/appbar-v6-medium-flexible.png b/docs/public/screenshots/appbar-v6-medium-flexible.png
diff --git a/docs/public/screenshots/appbar-v6-search.png b/docs/public/screenshots/appbar-v6-search.png
diff --git a/docs/public/screenshots/appbar-v6-small.png b/docs/public/screenshots/appbar-v6-small.png
diff --git a/docs/src/data/screenshots.ts b/docs/src/data/screenshots.ts
@@ -1,18 +1,14 @@
 export const screenshots = {
   ActivityIndicator: 'screenshots/activity-indicator.gif',
-  Appbar: 'screenshots/appbar.png',
-  'Appbar.Action': 'screenshots/appbar-action-android.png',
-  'Appbar.BackAction': 'screenshots/appbar-backaction-android.png',
-  'Appbar.Content': 'screenshots/appbar-content.png',
-  'Appbar.Header': {
-    small: 'screenshots/appbar-small.png',
-    medium: 'screenshots/appbar-medium.png',
-    large: 'screenshots/appbar-large.png',
-    'center-aligned': 'screenshots/appbar-center-aligned.png',
-  },
   'Avatar.Icon': 'screenshots/avatar-icon.png',
   'Avatar.Image': 'screenshots/avatar-image.png',
   'Avatar.Text': 'screenshots/avatar-text.png',
+  Appbar: {
+    search: 'screenshots/appbar-v6-search.png',
+    small: 'screenshots/appbar-v6-small.png',
+    'medium flexible': 'screenshots/appbar-v6-medium-flexible.png',
+    'large flexible': 'screenshots/appbar-v6-large-flexible.png',
+  },
   Badge: {
     'with text': 'screenshots/badge-1.png',
     'without text': 'screenshots/badge-2.png',

diff --git a/docs/src/data/themeColors.ts b/docs/src/data/themeColors.ts
@@ -8,29 +8,20 @@ export const themeColors = {
     default: {
       backgroundColor: 'theme.colors.surface',
     },
-    elevated: {
-      backgroundColor: 'theme.colors.elevation.level2',
+    scrolled: {
+      backgroundColor: 'theme.colors.surfaceContainer',
     },
-  },
-  'Appbar.Action': {
-    'leading icon': {
+    'leading action': {
       iconColor: 'theme.colors.onSurface',
     },
-    'not leading icon': {
+    'trailing action': {
       iconColor: 'theme.colors.onSurfaceVariant',
     },
-  },
-  'Appbar.Content': {
-    '-': {
+    headline: {
       textColor: 'theme.colors.onSurface',
     },
-  },
-  'Appbar.Header': {
-    default: {
-      backgroundColor: 'theme.colors.surface',
-    },
-    elevated: {
-      backgroundColor: 'theme.colors.elevation.level2',
+    subtitle: {
+      textColor: 'theme.colors.onSurfaceVariant',
     },
   },
   Banner: {

diff --git a/docs/src/data/versionRouteFallbacks.json b/docs/src/data/versionRouteFallbacks.json
@@ -1,5 +1,10 @@
 {
   "next": {
+    "/docs/components/Appbar/Appbar": "/6.x/docs/components/Appbar",
+    "/docs/components/Appbar/AppbarAction": "/6.x/docs/components/Appbar",
+    "/docs/components/Appbar/AppbarBackAction": "/6.x/docs/components/Appbar",
+    "/docs/components/Appbar/AppbarContent": "/6.x/docs/components/Appbar",
+    "/docs/components/Appbar/AppbarHeader": "/6.x/docs/components/Appbar",
     "/docs/components/Checkbox/CheckboxAndroid": "/6.x/docs/components/Checkbox/Checkbox",
     "/docs/components/Checkbox/CheckboxIOS": "/6.x/docs/components/Checkbox/Checkbox",
     "/docs/components/FAB/AnimatedFAB": "/6.x/docs/components/FAB/FAB",
@@ -9,6 +14,7 @@
     "/docs/guides/migration-guide-to-5.0": "/6.x/docs/guides/migration"
   },
   "stable": {
+    "/6.x/docs/components/Appbar": "/docs/components/Appbar/Appbar",
     "/6.x/docs/components/FAB/FABExtended": "/docs/components/FAB/FAB",
     "/6.x/docs/components/FAB/FABMenu": "/docs/components/FAB/FAB",
     "/6.x/docs/guides/migration": "/docs/guides/migration-guide-to-5.0",