From 916e7eb4b78ecab11d55a459acd34c739c0d78f9 Mon Sep 17 00:00:00 2001
From: Aziz Becha <aziz07becha@gmail.com>
Date: Mon, 2 Feb 2026 22:05:20 +0100
Subject: [PATCH 1/6] fix: syntax highlighting for ripple effect section

---
 docs/docs/guides/11-ripple-effect.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/docs/guides/11-ripple-effect.md b/docs/docs/guides/11-ripple-effect.md
index 1e14a73082..31845060d7 100644
--- a/docs/docs/guides/11-ripple-effect.md
+++ b/docs/docs/guides/11-ripple-effect.md
@@ -14,7 +14,7 @@ The ripple effect on the iOS platform is replaced by a highlight effect.
 
 The `rippleColor` prop is available for every pressable component which allows you to set the color of the ripple effect. For the instance, to make the `Button` component's ripple effect transparent, simply pass the desired color value to the prop:
 
-```
+```typescript
 <Button
   rippleColor="#FF000020"
   icon="camera"
@@ -28,7 +28,7 @@ The `rippleColor` prop is available for every pressable component which allows y
 
 To disable the ripple effect in **all** of Paper's components set `rippleEffectEnabled: false` on the `settings` prop of `PaperProvider`.
 
-```
+```typescript
 import { Provider as PaperProvider } from 'react-native-paper';
 // ...
 

From 099d820746361467a4ffb174a5fbaaa3c999718e Mon Sep 17 00:00:00 2001
From: Aziz Becha <aziz07becha@gmail.com>
Date: Mon, 2 Feb 2026 22:13:11 +0100
Subject: [PATCH 2/6] fix: tabulation in Appbar docs examples

---
 src/components/Appbar/AppbarAction.tsx     | 10 +++++-----
 src/components/Appbar/AppbarBackAction.tsx |  6 +++---
 src/components/Appbar/AppbarContent.tsx    |  6 +++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx
index bc87e335ba..ab5a72a110 100644
--- a/src/components/Appbar/AppbarAction.tsx
+++ b/src/components/Appbar/AppbarAction.tsx
@@ -71,11 +71,11 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
  * const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
  *
  * const MyComponent = () => (
- *     <Appbar.Header>
- *        <Appbar.Content title="Title" subtitle={'Subtitle'} />
- *         <Appbar.Action icon="magnify" onPress={() => {}} />
- *         <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
- *     </Appbar.Header>
+ *   <Appbar.Header>
+ *      <Appbar.Content title="Title" subtitle={'Subtitle'} />
+ *       <Appbar.Action icon="magnify" onPress={() => {}} />
+ *       <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
+ *   </Appbar.Header>
  * );
  *
  * export default MyComponent;
diff --git a/src/components/Appbar/AppbarBackAction.tsx b/src/components/Appbar/AppbarBackAction.tsx
index 773b0db017..accc76bc65 100644
--- a/src/components/Appbar/AppbarBackAction.tsx
+++ b/src/components/Appbar/AppbarBackAction.tsx
@@ -49,9 +49,9 @@ export type Props = $Omit<
  * import { Appbar } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *     <Appbar.Header>
- *       <Appbar.BackAction onPress={() => {}} />
- *     </Appbar.Header>
+ *   <Appbar.Header>
+ *     <Appbar.BackAction onPress={() => {}} />
+ *   </Appbar.Header>
  * );
  *
  * export default MyComponent;
diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
index 296426fbed..dad67e21c8 100644
--- a/src/components/Appbar/AppbarContent.tsx
+++ b/src/components/Appbar/AppbarContent.tsx
@@ -92,9 +92,9 @@ export type Props = $RemoveChildren<typeof View> & {
  * import { Appbar } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *     <Appbar.Header>
- *        <Appbar.Content title="Title" />
- *     </Appbar.Header>
+ *   <Appbar.Header>
+ *      <Appbar.Content title="Title" />
+ *   </Appbar.Header>
  * );
  *
  * export default MyComponent;

From edfb283ede2ad915c98fbc3c30b1db98f5dbaae8 Mon Sep 17 00:00:00 2001
From: Aziz Becha <aziz07becha@gmail.com>
Date: Mon, 2 Feb 2026 22:20:22 +0100
Subject: [PATCH 3/6] fix: table docs code snippets tabulation

---
 src/components/DataTable/DataTableCell.tsx   | 12 +++++------
 src/components/DataTable/DataTableHeader.tsx | 22 ++++++++++----------
 src/components/DataTable/DataTableRow.tsx    | 12 +++++------
 src/components/DataTable/DataTableTitle.tsx  | 22 ++++++++++----------
 4 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/components/DataTable/DataTableCell.tsx b/src/components/DataTable/DataTableCell.tsx
index 8601e501a5..1801d1ecc8 100644
--- a/src/components/DataTable/DataTableCell.tsx
+++ b/src/components/DataTable/DataTableCell.tsx
@@ -48,12 +48,12 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
  * import { DataTable } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *      <DataTable.Row>
- *        <DataTable.Cell numeric>1</DataTable.Cell>
- *        <DataTable.Cell numeric>2</DataTable.Cell>
- *        <DataTable.Cell numeric>3</DataTable.Cell>
- *        <DataTable.Cell numeric>4</DataTable.Cell>
- *      </DataTable.Row>
+ *   <DataTable.Row>
+ *     <DataTable.Cell numeric>1</DataTable.Cell>
+ *     <DataTable.Cell numeric>2</DataTable.Cell>
+ *     <DataTable.Cell numeric>3</DataTable.Cell>
+ *     <DataTable.Cell numeric>4</DataTable.Cell>
+ *   </DataTable.Row>
  * );
  *
  * export default MyComponent;
diff --git a/src/components/DataTable/DataTableHeader.tsx b/src/components/DataTable/DataTableHeader.tsx
index 853956e878..a4619ebb99 100644
--- a/src/components/DataTable/DataTableHeader.tsx
+++ b/src/components/DataTable/DataTableHeader.tsx
@@ -28,17 +28,17 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * import { DataTable } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *       <DataTable>
- *         <DataTable.Header>
- *           <DataTable.Title
- *             sortDirection='descending'
- *           >
- *             Dessert
- *           </DataTable.Title>
- *           <DataTable.Title numeric>Calories</DataTable.Title>
- *           <DataTable.Title numeric>Fat (g)</DataTable.Title>
- *         </DataTable.Header>
- *       </DataTable>
+ *   <DataTable>
+ *     <DataTable.Header>
+ *       <DataTable.Title
+ *         sortDirection='descending'
+ *       >
+ *         Dessert
+ *       </DataTable.Title>
+ *       <DataTable.Title numeric>Calories</DataTable.Title>
+ *       <DataTable.Title numeric>Fat (g)</DataTable.Title>
+ *     </DataTable.Header>
+ *   </DataTable>
  * );
  *
  * export default MyComponent;
diff --git a/src/components/DataTable/DataTableRow.tsx b/src/components/DataTable/DataTableRow.tsx
index 54402f3805..25491955d4 100644
--- a/src/components/DataTable/DataTableRow.tsx
+++ b/src/components/DataTable/DataTableRow.tsx
@@ -44,12 +44,12 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
  * import { DataTable } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *      <DataTable.Row>
- *        <DataTable.Cell numeric>1</DataTable.Cell>
- *        <DataTable.Cell numeric>2</DataTable.Cell>
- *        <DataTable.Cell numeric>3</DataTable.Cell>
- *        <DataTable.Cell numeric>4</DataTable.Cell>
- *      </DataTable.Row>
+ *  <DataTable.Row>
+ *    <DataTable.Cell numeric>1</DataTable.Cell>
+ *    <DataTable.Cell numeric>2</DataTable.Cell>
+ *    <DataTable.Cell numeric>3</DataTable.Cell>
+ *    <DataTable.Cell numeric>4</DataTable.Cell>
+ *  </DataTable.Row>
  * );
  *
  * export default MyComponent;
diff --git a/src/components/DataTable/DataTableTitle.tsx b/src/components/DataTable/DataTableTitle.tsx
index 6402e67506..f6a95223f7 100644
--- a/src/components/DataTable/DataTableTitle.tsx
+++ b/src/components/DataTable/DataTableTitle.tsx
@@ -63,17 +63,17 @@ export type Props = React.ComponentPropsWithRef<typeof Pressable> & {
  * import { DataTable } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *       <DataTable>
- *         <DataTable.Header>
- *           <DataTable.Title
- *             sortDirection='descending'
- *           >
- *             Dessert
- *           </DataTable.Title>
- *           <DataTable.Title numeric>Calories</DataTable.Title>
- *           <DataTable.Title numeric>Fat (g)</DataTable.Title>
- *         </DataTable.Header>
- *       </DataTable>
+ *   <DataTable>
+ *     <DataTable.Header>
+ *       <DataTable.Title
+ *         sortDirection='descending'
+ *       >
+ *         Dessert
+ *       </DataTable.Title>
+ *       <DataTable.Title numeric>Calories</DataTable.Title>
+ *       <DataTable.Title numeric>Fat (g)</DataTable.Title>
+ *     </DataTable.Header>
+ *   </DataTable>
  * );
  *
  * export default MyComponent;

From 7ef0e19412dd9a85e0dbee357b7de7f32bf91612 Mon Sep 17 00:00:00 2001
From: Aziz Becha <aziz07becha@gmail.com>
Date: Mon, 2 Feb 2026 22:22:05 +0100
Subject: [PATCH 4/6] fix: drawer docs code snippets tabulation

---
 src/components/Drawer/DrawerCollapsedItem.tsx | 10 +++++-----
 src/components/Drawer/DrawerItem.tsx          | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx
index b224c2b639..9fb461e9c5 100644
--- a/src/components/Drawer/DrawerCollapsedItem.tsx
+++ b/src/components/Drawer/DrawerCollapsedItem.tsx
@@ -85,11 +85,11 @@ const outlineHeight = 32;
  * import { Drawer } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *    <Drawer.CollapsedItem
- *      focusedIcon="inbox"
- *      unfocusedIcon="inbox-outline"
- *      label="Inbox"
- *    />
+ *   <Drawer.CollapsedItem
+ *     focusedIcon="inbox"
+ *     unfocusedIcon="inbox-outline"
+ *     label="Inbox"
+ *   />
  * );
  *
  * export default MyComponent;
diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx
index 49f3367bec..604df1b83b 100644
--- a/src/components/Drawer/DrawerItem.tsx
+++ b/src/components/Drawer/DrawerItem.tsx
@@ -81,11 +81,11 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * import { Drawer } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *    <Drawer.Item
- *      style={{ backgroundColor: '#64ffda' }}
- *      icon="star"
- *      label="First Item"
- *    />
+ *   <Drawer.Item
+ *     style={{ backgroundColor: '#64ffda' }}
+ *     icon="star"
+ *     label="First Item"
+ *   />
  * );
  *
  * export default MyComponent;

From 5ae48af1f8f18c70f5db1e37c85e879a36abf3bd Mon Sep 17 00:00:00 2001
From: Aziz Becha <aziz07becha@gmail.com>
Date: Mon, 2 Feb 2026 23:06:59 +0100
Subject: [PATCH 5/6] fix: modal docs example snippet formatting

---
 src/components/Modal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index be16a5abde..dc55c3cf7a 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -81,7 +81,7 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
  *
  *   const showModal = () => setVisible(true);
  *   const hideModal = () => setVisible(false);
- *   const containerStyle = {backgroundColor: 'white', padding: 20};
+ *   const containerStyle = { backgroundColor: 'white', padding: 20 };
  *
  *   return (
  *     <PaperProvider>
@@ -90,7 +90,7 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
  *           <Text>Example Modal.  Click outside this area to dismiss.</Text>
  *         </Modal>
  *       </Portal>
- *       <Button style={{marginTop: 30}} onPress={showModal}>
+ *       <Button style={{ marginTop: 30 }} onPress={showModal}>
  *         Show
  *       </Button>
  *     </PaperProvider>

From ba797b8675fe6abdac020f1460e673e737dfa50e Mon Sep 17 00:00:00 2001
From: Aziz Becha <aziz07becha@gmail.com>
Date: Mon, 2 Feb 2026 23:11:48 +0100
Subject: [PATCH 6/6] fix: ToggleButtonGroup docs example snippet formatting

---
 src/components/ToggleButton/ToggleButtonGroup.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ToggleButton/ToggleButtonGroup.tsx b/src/components/ToggleButton/ToggleButtonGroup.tsx
index 4fc30d9f83..baaf1ee1a9 100644
--- a/src/components/ToggleButton/ToggleButtonGroup.tsx
+++ b/src/components/ToggleButton/ToggleButtonGroup.tsx
@@ -39,7 +39,8 @@ export const ToggleButtonGroupContext =
  *   return (
  *     <ToggleButton.Group
  *       onValueChange={value => setValue(value)}
- *       value={value}>
+ *       value={value}
+ *     >
  *       <ToggleButton icon="format-align-left" value="left" />
  *       <ToggleButton icon="format-align-right" value="right" />
  *     </ToggleButton.Group>