+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/BottomNavigation/_meta.json b/docs/5.x/docs/components/BottomNavigation/_meta.json
new file mode 100644
index 0000000000..94a0b010f3
--- /dev/null
+++ b/docs/5.x/docs/components/BottomNavigation/_meta.json
@@ -0,0 +1,4 @@
+[
+ "BottomNavigation",
+ "BottomNavigationBar"
+]
diff --git a/docs/5.x/docs/components/Button/Button.mdx b/docs/5.x/docs/components/Button/Button.mdx
new file mode 100644
index 0000000000..8226fb48c7
--- /dev/null
+++ b/docs/5.x/docs/components/Button/Button.mdx
@@ -0,0 +1,281 @@
+---
+title: Button
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A button is component that the user can press to trigger an action.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Button } from 'react-native-paper';
+
+const MyComponent = () => (
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### mode
+
+
+
+
+
+
+
+### dark
+
+
+
+
+
+
+
+### compact
+
+
+
+
+
+
+
+### color Deprecated in v5.x - use `buttonColor` or `textColor` instead.
+
+
+
+
+
+
+
+### buttonColor
+
+
+
+
+
+
+
+### textColor
+
+
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+
+
+### loading
+
+
+
+
+
+
+
+### icon
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### uppercase
+
+
+
+
+
+
+
+### background
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+### accessibilityHint
+
+
+
+
+
+
+
+### accessibilityRole
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### touchableRef
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Button/_meta.json b/docs/5.x/docs/components/Button/_meta.json
new file mode 100644
index 0000000000..a6d17d5990
--- /dev/null
+++ b/docs/5.x/docs/components/Button/_meta.json
@@ -0,0 +1,3 @@
+[
+ "Button"
+]
diff --git a/docs/5.x/docs/components/Card/Card.mdx b/docs/5.x/docs/components/Card/Card.mdx
new file mode 100644
index 0000000000..671331fcbd
--- /dev/null
+++ b/docs/5.x/docs/components/Card/Card.mdx
@@ -0,0 +1,172 @@
+---
+title: Card
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A card is a sheet of material that serves as an entry point to more detailed information.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Avatar, Button, Card, Text } from 'react-native-paper';
+
+const LeftContent = props =>
+
+const MyComponent = () => (
+
+
+
+ Card title
+ Card content
+
+
+
+
+
+
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### mode
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### elevation
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### accessible
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Card/CardActions.mdx b/docs/5.x/docs/components/Card/CardActions.mdx
new file mode 100644
index 0000000000..62e4369bfe
--- /dev/null
+++ b/docs/5.x/docs/components/Card/CardActions.mdx
@@ -0,0 +1,72 @@
+---
+title: Card.Actions
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show a list of actions inside a Card.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Card, Button } from 'react-native-paper';
+
+const MyComponent = () => (
+
+
+
+
+
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Card/CardContent.mdx b/docs/5.x/docs/components/Card/CardContent.mdx
new file mode 100644
index 0000000000..a23f8434a5
--- /dev/null
+++ b/docs/5.x/docs/components/Card/CardContent.mdx
@@ -0,0 +1,64 @@
+---
+title: Card.Content
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show content inside a Card.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Card, Text } from 'react-native-paper';
+
+const MyComponent = () => (
+
+
+ Card title
+ Card content
+
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Card/CardCover.mdx b/docs/5.x/docs/components/Card/CardCover.mdx
new file mode 100644
index 0000000000..1febdcc841
--- /dev/null
+++ b/docs/5.x/docs/components/Card/CardCover.mdx
@@ -0,0 +1,63 @@
+---
+title: Card.Cover
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show a cover image inside a Card.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Card } from 'react-native-paper';
+
+const MyComponent = () => (
+
+
+
+);
+
+export default MyComponent;
+```
+
+
+
+
+ ## Props
+ ### Image props
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Card/CardTitle.mdx b/docs/5.x/docs/components/Card/CardTitle.mdx
new file mode 100644
index 0000000000..6eb194c3b7
--- /dev/null
+++ b/docs/5.x/docs/components/Card/CardTitle.mdx
@@ -0,0 +1,176 @@
+---
+title: Card.Title
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show a title, subtitle and an avatar inside a Card.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Avatar, Card, IconButton } from 'react-native-paper';
+
+const MyComponent = () => (
+ }
+ right={(props) => {}} />}
+ />
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### title (required)
+
+
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+
+
+### titleNumberOfLines
+
+
+
+
+
+
+
+### titleVariant Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### subtitle
+
+
+
+
+
+
+
+### subtitleStyle
+
+
+
+
+
+
+
+### subtitleNumberOfLines
+
+
+
+
+
+
+
+### subtitleVariant Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### left
+
+
+
+
+
+
+
+### leftStyle
+
+
+
+
+
+
+
+### right
+
+
+
+
+
+
+
+### rightStyle
+
+
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### subtitleMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Card/_meta.json b/docs/5.x/docs/components/Card/_meta.json
new file mode 100644
index 0000000000..3b7edb1615
--- /dev/null
+++ b/docs/5.x/docs/components/Card/_meta.json
@@ -0,0 +1,7 @@
+[
+ "Card",
+ "CardActions",
+ "CardContent",
+ "CardCover",
+ "CardTitle"
+]
diff --git a/docs/5.x/docs/components/Checkbox/Checkbox.mdx b/docs/5.x/docs/components/Checkbox/Checkbox.mdx
new file mode 100644
index 0000000000..d18540b476
--- /dev/null
+++ b/docs/5.x/docs/components/Checkbox/Checkbox.mdx
@@ -0,0 +1,108 @@
+---
+title: Checkbox
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Checkboxes allow the selection of multiple options from a set.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Checkbox } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [checked, setChecked] = React.useState(false);
+
+ return (
+ {
+ setChecked(!checked);
+ }}
+ />
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### status (required)
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Checkbox/CheckboxAndroid.mdx b/docs/5.x/docs/components/Checkbox/CheckboxAndroid.mdx
new file mode 100644
index 0000000000..f1b9fb234c
--- /dev/null
+++ b/docs/5.x/docs/components/Checkbox/CheckboxAndroid.mdx
@@ -0,0 +1,91 @@
+---
+title: Checkbox.Android
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+
+
+
+
+
+
+Checkboxes allow the selection of multiple options from a set.
+This component follows platform guidelines for Android, but can be used
+on any platform.
+
+
+
+
+ ## Props
+ ### TouchableRipple props
+
+
+
+
+
+### status (required)
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Checkbox/CheckboxIOS.mdx b/docs/5.x/docs/components/Checkbox/CheckboxIOS.mdx
new file mode 100644
index 0000000000..f617b4b40d
--- /dev/null
+++ b/docs/5.x/docs/components/Checkbox/CheckboxIOS.mdx
@@ -0,0 +1,83 @@
+---
+title: Checkbox.IOS
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+
+
+
+
+
+
+Checkboxes allow the selection of multiple options from a set.
+This component follows platform guidelines for iOS, but can be used
+on any platform.
+
+
+
+
+ ## Props
+ ### TouchableRipple props
+
+
+
+
+
+### status (required)
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Checkbox/CheckboxItem.mdx b/docs/5.x/docs/components/Checkbox/CheckboxItem.mdx
new file mode 100644
index 0000000000..5edd43b01d
--- /dev/null
+++ b/docs/5.x/docs/components/Checkbox/CheckboxItem.mdx
@@ -0,0 +1,196 @@
+---
+title: Checkbox.Item
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { Checkbox } from 'react-native-paper';
+
+const MyComponent = () => (
+
+
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### status (required)
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### label (required)
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+
+
+### background
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+
+
+### labelVariant Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### position
+
+
+
+
+
+
+
+### mode
+
+
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Checkbox/_meta.json b/docs/5.x/docs/components/Checkbox/_meta.json
new file mode 100644
index 0000000000..f25fa6d271
--- /dev/null
+++ b/docs/5.x/docs/components/Checkbox/_meta.json
@@ -0,0 +1,6 @@
+[
+ "Checkbox",
+ "CheckboxAndroid",
+ "CheckboxIOS",
+ "CheckboxItem"
+]
diff --git a/docs/5.x/docs/components/Chip/Chip.mdx b/docs/5.x/docs/components/Chip/Chip.mdx
new file mode 100644
index 0000000000..32e53e16df
--- /dev/null
+++ b/docs/5.x/docs/components/Chip/Chip.mdx
@@ -0,0 +1,291 @@
+---
+title: Chip
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Chips are compact elements that can represent inputs, attributes, or actions.
+They can have an icon or avatar on the left, and a close button icon on the right.
+They are typically used to:
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/List/ListAccordionGroup.mdx b/docs/5.x/docs/components/List/ListAccordionGroup.mdx
new file mode 100644
index 0000000000..d2957fd03b
--- /dev/null
+++ b/docs/5.x/docs/components/List/ListAccordionGroup.mdx
@@ -0,0 +1,85 @@
+---
+title: List.AccordionGroup
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+List.AccordionGroup allows to control a group of List Accordions. `id` prop for List.Accordion is required in order for group to work.
+List.AccordionGroup can be a controlled or uncontrolled component. The example shows the uncontrolled version.
+At most one Accordion can be expanded at a given time.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { List } from 'react-native-paper';
+
+const MyComponent = () => (
+
+
+
+
+
+
+
+
+
+ List.Accordion can be wrapped because implementation uses React.Context.
+
+
+
+
+
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### onAccordionPress
+
+
+
+
+
+
+
+### expandedId
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/List/ListIcon.mdx b/docs/5.x/docs/components/List/ListIcon.mdx
new file mode 100644
index 0000000000..d23c1cb589
--- /dev/null
+++ b/docs/5.x/docs/components/List/ListIcon.mdx
@@ -0,0 +1,79 @@
+---
+title: List.Icon
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show an icon in a list item.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { List, MD3Colors } from 'react-native-paper';
+
+const MyComponent = () => (
+ <>
+
+
+
+ >
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/List/ListItem.mdx b/docs/5.x/docs/components/List/ListItem.mdx
new file mode 100644
index 0000000000..5b8814cc18
--- /dev/null
+++ b/docs/5.x/docs/components/List/ListItem.mdx
@@ -0,0 +1,193 @@
+---
+title: List.Item
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show tiles inside a List.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { List } from 'react-native-paper';
+
+const MyComponent = () => (
+ }
+ />
+);
+
+export default MyComponent;
+```
+
+
+
+
+ ## Props
+ ### TouchableRipple props
+
+
+
+
+
+### title (required)
+
+
+
+
+
+
+
+### description
+
+
+
+
+
+
+
+### left
+
+
+
+
+
+
+
+### right
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### containerStyle
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+
+
+### descriptionStyle
+
+
+
+
+
+
+
+### titleNumberOfLines
+
+
+
+
+
+
+
+### descriptionNumberOfLines
+
+
+
+
+
+
+
+### titleEllipsizeMode
+
+
+
+
+
+
+
+### descriptionEllipsizeMode
+
+
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### descriptionMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/List/ListSection.mdx b/docs/5.x/docs/components/List/ListSection.mdx
new file mode 100644
index 0000000000..825203defa
--- /dev/null
+++ b/docs/5.x/docs/components/List/ListSection.mdx
@@ -0,0 +1,90 @@
+---
+title: List.Section
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component used to group list items.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { List, MD3Colors } from 'react-native-paper';
+
+const MyComponent = () => (
+
+ Some title
+ } />
+ }
+ />
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### title
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/List/ListSubheader.mdx b/docs/5.x/docs/components/List/ListSubheader.mdx
new file mode 100644
index 0000000000..9b9de8dd70
--- /dev/null
+++ b/docs/5.x/docs/components/List/ListSubheader.mdx
@@ -0,0 +1,63 @@
+---
+title: List.Subheader
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component used to display a header in lists.
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { List } from 'react-native-paper';
+
+const MyComponent = () => My List Title;
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/List/_meta.json b/docs/5.x/docs/components/List/_meta.json
new file mode 100644
index 0000000000..4ba864114c
--- /dev/null
+++ b/docs/5.x/docs/components/List/_meta.json
@@ -0,0 +1,8 @@
+[
+ "ListAccordion",
+ "ListAccordionGroup",
+ "ListIcon",
+ "ListItem",
+ "ListSection",
+ "ListSubheader"
+]
diff --git a/docs/5.x/docs/components/Menu/Menu.mdx b/docs/5.x/docs/components/Menu/Menu.mdx
new file mode 100644
index 0000000000..d3b1a79742
--- /dev/null
+++ b/docs/5.x/docs/components/Menu/Menu.mdx
@@ -0,0 +1,190 @@
+---
+title: Menu
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { Button, Menu, Divider, PaperProvider } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [visible, setVisible] = React.useState(false);
+
+ const openMenu = () => setVisible(true);
+
+ const closeMenu = () => setVisible(false);
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default MyComponent;
+```
+
+### Note
+When using `Menu` within a React Native's `Modal` component, you need to wrap all
+`Modal` contents within a `PaperProvider` in order for the menu to show. This
+wrapping is not necessary if you use Paper's `Modal` instead.
+
+
+ ## Props
+
+
+
+
+
+
+### visible (required)
+
+
+
+
+
+
+
+### anchor (required)
+
+
+
+
+
+
+
+### anchorPosition
+
+
+
+
+
+
+
+### statusBarHeight
+
+
+
+
+
+
+
+### onDismiss
+
+
+
+
+
+
+
+### overlayAccessibilityLabel
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### elevation
+
+
+
+
+
+
+
+### mode
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### keyboardShouldPersistTaps
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Menu/MenuItem.mdx b/docs/5.x/docs/components/Menu/MenuItem.mdx
new file mode 100644
index 0000000000..f3a5f53b2f
--- /dev/null
+++ b/docs/5.x/docs/components/Menu/MenuItem.mdx
@@ -0,0 +1,198 @@
+---
+title: Menu.Item
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show a single list item inside a Menu.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { Menu } from 'react-native-paper';
+
+const MyComponent = () => (
+
+ {}} title="Redo" />
+ {}} title="Undo" />
+ {}} title="Cut" disabled />
+ {}} title="Copy" disabled />
+ {}} title="Paste" />
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### title (required)
+
+
+
+
+
+
+
+### leadingIcon Renamed from 'icon' to 'leadingIcon' in v5.x
+
+
+
+
+
+
+
+### trailingIcon Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### dense Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### background
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### containerStyle
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+### accessibilityState
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Menu/_meta.json b/docs/5.x/docs/components/Menu/_meta.json
new file mode 100644
index 0000000000..50192eb25e
--- /dev/null
+++ b/docs/5.x/docs/components/Menu/_meta.json
@@ -0,0 +1,4 @@
+[
+ "Menu",
+ "MenuItem"
+]
diff --git a/docs/5.x/docs/components/Modal.mdx b/docs/5.x/docs/components/Modal.mdx
new file mode 100644
index 0000000000..5ae71de8ae
--- /dev/null
+++ b/docs/5.x/docs/components/Modal.mdx
@@ -0,0 +1,146 @@
+---
+title: Modal
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+The Modal component is a simple way to present content above an enclosing view.
+To render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal/Portal) component.
+Note that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [visible, setVisible] = React.useState(false);
+
+ const showModal = () => setVisible(true);
+ const hideModal = () => setVisible(false);
+ const containerStyle = { backgroundColor: 'white', padding: 20 };
+
+ return (
+
+
+
+ Example Modal. Click outside this area to dismiss.
+
+
+
+
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### dismissable
+
+
+
+
+
+
+
+### dismissableBackButton
+
+
+
+
+
+
+
+### onDismiss
+
+
+
+
+
+
+
+### overlayAccessibilityLabel
+
+
+
+
+
+
+
+### visible
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### contentContainerStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Portal/Portal.mdx b/docs/5.x/docs/components/Portal/Portal.mdx
new file mode 100644
index 0000000000..c581f1262a
--- /dev/null
+++ b/docs/5.x/docs/components/Portal/Portal.mdx
@@ -0,0 +1,74 @@
+---
+title: Portal
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Portal allows rendering a component at a different place in the parent tree.
+You can use it to render content which should appear above other elements, similar to `Modal`.
+It requires a [`Portal.Host`](PortalHost) component to be rendered somewhere in the parent tree.
+Note that if you're using the `Provider` component, this already includes a `Portal.Host`.
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Portal, Text } from 'react-native-paper';
+
+const MyComponent = () => (
+
+ This is rendered at a different place
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### theme (required)
+
+
+
+
+
+
+
+
+ ## More Examples
+
+ Toggle to grab more examples
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Portal/PortalHost.mdx b/docs/5.x/docs/components/Portal/PortalHost.mdx
new file mode 100644
index 0000000000..899211a7ab
--- /dev/null
+++ b/docs/5.x/docs/components/Portal/PortalHost.mdx
@@ -0,0 +1,56 @@
+---
+title: Portal.Host
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Portal host renders all of its children `Portal` elements.
+For example, you can wrap a screen in `Portal.Host` to render items above the screen.
+If you're using the `Provider` component, it already includes `Portal.Host`.
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Text } from 'react-native';
+import { Portal } from 'react-native-paper';
+
+const MyComponent = () => (
+
+ Content of the app
+
+);
+
+export default MyComponent;
+```
+
+Here any `Portal` elements under `` are rendered alongside `` and will appear above `` like a `Modal`.
+
+
+ ## Props
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Portal/_meta.json b/docs/5.x/docs/components/Portal/_meta.json
new file mode 100644
index 0000000000..6e5b7b374b
--- /dev/null
+++ b/docs/5.x/docs/components/Portal/_meta.json
@@ -0,0 +1,4 @@
+[
+ "Portal",
+ "PortalHost"
+]
diff --git a/docs/5.x/docs/components/ProgressBar.mdx b/docs/5.x/docs/components/ProgressBar.mdx
new file mode 100644
index 0000000000..8f08a81926
--- /dev/null
+++ b/docs/5.x/docs/components/ProgressBar.mdx
@@ -0,0 +1,119 @@
+---
+title: ProgressBar
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Progress bar is an indicator used to present progress of some activity in the app.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { ProgressBar, MD3Colors } from 'react-native-paper';
+
+const MyComponent = () => (
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### animatedValue
+
+
+
+
+
+
+
+### progress
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### indeterminate
+
+
+
+
+
+
+
+### visible
+
+
+
+
+
+
+
+### fillStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/5.x/docs/components/RadioButton/RadioButton.mdx b/docs/5.x/docs/components/RadioButton/RadioButton.mdx
new file mode 100644
index 0000000000..c77408535c
--- /dev/null
+++ b/docs/5.x/docs/components/RadioButton/RadioButton.mdx
@@ -0,0 +1,123 @@
+---
+title: RadioButton
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Radio buttons allow the selection a single option from a set.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { RadioButton } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [checked, setChecked] = React.useState('first');
+
+ return (
+
+ setChecked('first')}
+ />
+ setChecked('second')}
+ />
+
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### status
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/RadioButton/RadioButtonAndroid.mdx b/docs/5.x/docs/components/RadioButton/RadioButtonAndroid.mdx
new file mode 100644
index 0000000000..1d2b0aa450
--- /dev/null
+++ b/docs/5.x/docs/components/RadioButton/RadioButtonAndroid.mdx
@@ -0,0 +1,99 @@
+---
+title: RadioButton.Android
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+
+
+
+
+
+
+Radio buttons allow the selection a single option from a set.
+This component follows platform guidelines for Android, but can be used
+on any platform.
+
+
+
+
+ ## Props
+ ### TouchableRipple props
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### status
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/RadioButton/RadioButtonGroup.mdx b/docs/5.x/docs/components/RadioButton/RadioButtonGroup.mdx
new file mode 100644
index 0000000000..1bb727e03e
--- /dev/null
+++ b/docs/5.x/docs/components/RadioButton/RadioButtonGroup.mdx
@@ -0,0 +1,81 @@
+---
+title: RadioButton.Group
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Radio button group allows to control a group of radio buttons.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { RadioButton, Text } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [value, setValue] = React.useState('first');
+
+ return (
+ setValue(newValue)} value={value}>
+
+ First
+
+
+
+ Second
+
+
+
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### onValueChange (required)
+
+
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/RadioButton/RadioButtonIOS.mdx b/docs/5.x/docs/components/RadioButton/RadioButtonIOS.mdx
new file mode 100644
index 0000000000..5a5341273f
--- /dev/null
+++ b/docs/5.x/docs/components/RadioButton/RadioButtonIOS.mdx
@@ -0,0 +1,91 @@
+---
+title: RadioButton.IOS
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+
+
+
+
+
+
+Radio buttons allow the selection a single option from a set.
+This component follows platform guidelines for iOS, but can be used
+on any platform.
+
+
+
+
+ ## Props
+ ### TouchableRipple props
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### status
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/RadioButton/RadioButtonItem.mdx b/docs/5.x/docs/components/RadioButton/RadioButtonItem.mdx
new file mode 100644
index 0000000000..4101f10d4c
--- /dev/null
+++ b/docs/5.x/docs/components/RadioButton/RadioButtonItem.mdx
@@ -0,0 +1,210 @@
+---
+title: RadioButton.Item
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { RadioButton } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [value, setValue] = React.useState('first');
+
+ return (
+ setValue(value)} value={value}>
+
+
+
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### label (required)
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### background
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+
+
+### status
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+
+
+### labelVariant Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### mode
+
+
+
+
+
+
+
+### position
+
+
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/RadioButton/_meta.json b/docs/5.x/docs/components/RadioButton/_meta.json
new file mode 100644
index 0000000000..f9c20c781a
--- /dev/null
+++ b/docs/5.x/docs/components/RadioButton/_meta.json
@@ -0,0 +1,7 @@
+[
+ "RadioButton",
+ "RadioButtonAndroid",
+ "RadioButtonGroup",
+ "RadioButtonIOS",
+ "RadioButtonItem"
+]
diff --git a/docs/5.x/docs/components/Searchbar.mdx b/docs/5.x/docs/components/Searchbar.mdx
new file mode 100644
index 0000000000..6f78ecc7d7
--- /dev/null
+++ b/docs/5.x/docs/components/Searchbar.mdx
@@ -0,0 +1,256 @@
+---
+title: Searchbar
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Searchbar is a simple input box where users can type search queries.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Searchbar } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [searchQuery, setSearchQuery] = React.useState('');
+
+ return (
+
+ );
+};
+
+export default MyComponent;
+
+```
+
+
+ ## Props
+
+
+
+
+
+
+### placeholder
+
+
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### onChangeText
+
+
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### icon
+
+
+
+
+
+
+
+### iconColor
+
+
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+
+
+### onIconPress
+
+
+
+
+
+
+
+### onClearIconPress
+
+
+
+
+
+
+
+### searchAccessibilityLabel
+
+
+
+
+
+
+
+### clearIcon
+
+
+
+
+
+
+
+### clearAccessibilityLabel
+
+
+
+
+
+
+
+### traileringIcon Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### traileringIconColor Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### traileringRippleColor Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### onTraileringIconPress Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### traileringIconAccessibilityLabel
+
+
+
+
+
+
+
+### right Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### showDivider Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### inputStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### loading
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/5.x/docs/components/SegmentedButtons/SegmentedButtons.mdx b/docs/5.x/docs/components/SegmentedButtons/SegmentedButtons.mdx
new file mode 100644
index 0000000000..573e1e13c8
--- /dev/null
+++ b/docs/5.x/docs/components/SegmentedButtons/SegmentedButtons.mdx
@@ -0,0 +1,107 @@
+---
+title: SegmentedButtons
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Segmented buttons can be used to select options, switch views or sort elements.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+import { SegmentedButtons } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [value, setValue] = React.useState('');
+
+ return (
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ },
+});
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### buttons (required)
+
+
+
+
+
+
+
+### density
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/5.x/docs/components/SegmentedButtons/_meta.json b/docs/5.x/docs/components/SegmentedButtons/_meta.json
new file mode 100644
index 0000000000..85b4317790
--- /dev/null
+++ b/docs/5.x/docs/components/SegmentedButtons/_meta.json
@@ -0,0 +1,3 @@
+[
+ "SegmentedButtons"
+]
diff --git a/docs/5.x/docs/components/Snackbar.mdx b/docs/5.x/docs/components/Snackbar.mdx
new file mode 100644
index 0000000000..3aeb1db224
--- /dev/null
+++ b/docs/5.x/docs/components/Snackbar.mdx
@@ -0,0 +1,226 @@
+---
+title: Snackbar
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Snackbars provide brief feedback about an operation through a message rendered at the bottom of the container in which it's wrapped.
+
+Note: To display it as a popup, regardless of the parent's position, wrap it with a `Portal` component – refer to the example in the "More Examples` section.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Button, Snackbar } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [visible, setVisible] = React.useState(false);
+
+ const onToggleSnackBar = () => setVisible(!visible);
+
+ const onDismissSnackBar = () => setVisible(false);
+
+ return (
+
+
+ {
+ // Do something
+ },
+ }}>
+ Hey there! I'm a Snackbar.
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'space-between',
+ },
+});
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### visible (required)
+
+
+
+
+
+
+
+### action
+
+
+
+
+
+
+
+### icon Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### rippleColor Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### onIconPress Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### iconAccessibilityLabel Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### duration
+
+
+
+
+
+
+
+### onDismiss (required)
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+
+
+### wrapperStyle
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### ref
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+ ## More Examples
+
+ Toggle to grab more examples
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Surface.mdx b/docs/5.x/docs/components/Surface.mdx
new file mode 100644
index 0000000000..0e7d5c91b3
--- /dev/null
+++ b/docs/5.x/docs/components/Surface.mdx
@@ -0,0 +1,119 @@
+---
+title: Surface
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Surface is a basic container that can give depth to an element with elevation shadow.
+On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
+See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
+Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Surface, Text } from 'react-native-paper';
+import { StyleSheet } from 'react-native';
+
+const MyComponent = () => (
+
+ Surface
+
+);
+
+export default MyComponent;
+
+const styles = StyleSheet.create({
+ surface: {
+ padding: 8,
+ height: 80,
+ width: 80,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+});
+```
+
+
+ ## Props
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### ref
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Switch/Switch.mdx b/docs/5.x/docs/components/Switch/Switch.mdx
new file mode 100644
index 0000000000..71b7e78371
--- /dev/null
+++ b/docs/5.x/docs/components/Switch/Switch.mdx
@@ -0,0 +1,95 @@
+---
+title: Switch
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Switch is a visual toggle between two mutually exclusive states — on and off.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Switch } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [isSwitchOn, setIsSwitchOn] = React.useState(false);
+
+ const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
+
+ return ;
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### value
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### onValueChange
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Switch/_meta.json b/docs/5.x/docs/components/Switch/_meta.json
new file mode 100644
index 0000000000..3bc6b9e49c
--- /dev/null
+++ b/docs/5.x/docs/components/Switch/_meta.json
@@ -0,0 +1,3 @@
+[
+ "Switch"
+]
diff --git a/docs/5.x/docs/components/Text/Text.mdx b/docs/5.x/docs/components/Text/Text.mdx
new file mode 100644
index 0000000000..e4f752e3af
--- /dev/null
+++ b/docs/5.x/docs/components/Text/Text.mdx
@@ -0,0 +1,101 @@
+---
+title: Text
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Typography component showing styles complied with passed `variant` prop and supported by the type system.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Text } from 'react-native-paper';
+
+const MyComponent = () => (
+ <>
+ Display Large
+ Display Medium
+ Display small
+
+ Headline Large
+ Headline Medium
+ Headline Small
+
+ Title Large
+ Title Medium
+ Title Small
+
+ Body Large
+ Body Medium
+ Body Small
+
+ Label Large
+ Label Medium
+ Label Small
+ >
+);
+
+export default MyComponent;
+```
+
+
+
+
+ ## Props
+ ### Text props
+
+
+
+
+
+### variant Available in v5.x with theme version 3
+
+
+
+
diff --git a/docs/5.x/docs/components/TextInput/TextInputAffix.mdx b/docs/5.x/docs/components/TextInput/TextInputAffix.mdx
new file mode 100644
index 0000000000..8f0fadf2c3
--- /dev/null
+++ b/docs/5.x/docs/components/TextInput/TextInputAffix.mdx
@@ -0,0 +1,100 @@
+---
+title: TextInput.Affix
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to render a leading / trailing text in the TextInput
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { TextInput } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [text, setText] = React.useState('');
+
+ return (
+ }
+ />
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### text (required)
+
+
+
+
+
+
+
+### onLayout
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+### textStyle
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/TextInput/TextInputIcon.mdx b/docs/5.x/docs/components/TextInput/TextInputIcon.mdx
new file mode 100644
index 0000000000..9116410ee2
--- /dev/null
+++ b/docs/5.x/docs/components/TextInput/TextInputIcon.mdx
@@ -0,0 +1,107 @@
+---
+title: TextInput.Icon
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to render a leading / trailing icon in the TextInput
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { TextInput } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [text, setText] = React.useState('');
+
+ return (
+ }
+ />
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### icon (required) Renamed from 'name' to 'icon` in v5.x
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### forceTextInputFocus
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/TextInput/_meta.json b/docs/5.x/docs/components/TextInput/_meta.json
new file mode 100644
index 0000000000..412d6916f3
--- /dev/null
+++ b/docs/5.x/docs/components/TextInput/_meta.json
@@ -0,0 +1,5 @@
+[
+ "TextInput",
+ "TextInputAffix",
+ "TextInputIcon"
+]
diff --git a/docs/5.x/docs/components/ToggleButton/ToggleButton.mdx b/docs/5.x/docs/components/ToggleButton/ToggleButton.mdx
new file mode 100644
index 0000000000..d4b1589cfe
--- /dev/null
+++ b/docs/5.x/docs/components/ToggleButton/ToggleButton.mdx
@@ -0,0 +1,162 @@
+---
+title: ToggleButton
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons,
+a group should share a common container.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { ToggleButton } from 'react-native-paper';
+
+const ToggleButtonExample = () => {
+ const [status, setStatus] = React.useState('checked');
+
+ const onButtonToggle = value => {
+ setStatus(status === 'checked' ? 'unchecked' : 'checked');
+ };
+
+ return (
+
+ );
+};
+
+export default ToggleButtonExample;
+
+```
+
+
+ ## Props
+
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+
+
+### size
+
+
+
+
+
+
+
+### iconColor
+
+
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### value
+
+
+
+
+
+
+
+### status
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### ref
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/ToggleButton/ToggleButtonGroup.mdx b/docs/5.x/docs/components/ToggleButton/ToggleButtonGroup.mdx
new file mode 100644
index 0000000000..06270bf6b3
--- /dev/null
+++ b/docs/5.x/docs/components/ToggleButton/ToggleButtonGroup.mdx
@@ -0,0 +1,78 @@
+---
+title: ToggleButton.Group
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Toggle group allows to control a group of toggle buttons.
+It doesn't change the appearance of the toggle buttons. If you want to group them in a row, check out [ToggleButton.Row](ToggleButtonRow).
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { ToggleButton } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [value, setValue] = React.useState('left');
+
+ return (
+ setValue(value)}
+ value={value}
+ >
+
+
+
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### onValueChange (required)
+
+
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/ToggleButton/ToggleButtonRow.mdx b/docs/5.x/docs/components/ToggleButton/ToggleButtonRow.mdx
new file mode 100644
index 0000000000..6d2f4565d1
--- /dev/null
+++ b/docs/5.x/docs/components/ToggleButton/ToggleButtonRow.mdx
@@ -0,0 +1,83 @@
+---
+title: ToggleButton.Row
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Toggle button row renders a group of toggle buttons in a row.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { ToggleButton } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [value, setValue] = React.useState('left');
+
+ return (
+ setValue(value)} value={value}>
+
+
+
+ );
+};
+
+export default MyComponent;
+
+```
+
+
+ ## Props
+
+
+
+
+
+
+### onValueChange (required)
+
+
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/ToggleButton/_meta.json b/docs/5.x/docs/components/ToggleButton/_meta.json
new file mode 100644
index 0000000000..935c2b9584
--- /dev/null
+++ b/docs/5.x/docs/components/ToggleButton/_meta.json
@@ -0,0 +1,5 @@
+[
+ "ToggleButton",
+ "ToggleButtonGroup",
+ "ToggleButtonRow"
+]
diff --git a/docs/5.x/docs/components/Tooltip/Tooltip.mdx b/docs/5.x/docs/components/Tooltip/Tooltip.mdx
new file mode 100644
index 0000000000..810ae32122
--- /dev/null
+++ b/docs/5.x/docs/components/Tooltip/Tooltip.mdx
@@ -0,0 +1,99 @@
+---
+title: Tooltip
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Tooltips display informative text when users hover over, focus on, or tap an element.
+
+Plain tooltips, when activated, display a text label identifying an element, such as a description of its function. Tooltips should include only short, descriptive text and avoid restating visible UI text.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { IconButton, Tooltip } from 'react-native-paper';
+
+const MyComponent = () => (
+
+ {}} />
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### enterTouchDelay
+
+
+
+
+
+
+
+### leaveTouchDelay
+
+
+
+
+
+
+
+### title (required)
+
+
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/5.x/docs/components/Tooltip/_meta.json b/docs/5.x/docs/components/Tooltip/_meta.json
new file mode 100644
index 0000000000..c39a54301f
--- /dev/null
+++ b/docs/5.x/docs/components/Tooltip/_meta.json
@@ -0,0 +1,3 @@
+[
+ "Tooltip"
+]
diff --git a/docs/5.x/docs/components/TouchableRipple/TouchableRipple.mdx b/docs/5.x/docs/components/TouchableRipple/TouchableRipple.mdx
new file mode 100644
index 0000000000..a4ddb3e50c
--- /dev/null
+++ b/docs/5.x/docs/components/TouchableRipple/TouchableRipple.mdx
@@ -0,0 +1,157 @@
+---
+title: TouchableRipple
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A wrapper for views that should respond to touches.
+Provides a material "ink ripple" interaction effect for supported platforms (>= Android Lollipop).
+On unsupported platforms, it falls back to a highlight effect.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { Text, TouchableRipple } from 'react-native-paper';
+
+const MyComponent = () => (
+ console.log('Pressed')}
+ rippleColor="rgba(0, 0, 0, .32)"
+ >
+ Press anywhere
+
+);
+
+export default MyComponent;
+```
+
+
+
+
+ ## Props
+ ### Pressable props
+
+
+
+
+
+### borderless
+
+
+
+
+
+
+
+### background
+
+
+
+
+
+
+
+### centered
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+
+
+### underlayColor
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/5.x/docs/components/TouchableRipple/_meta.json b/docs/5.x/docs/components/TouchableRipple/_meta.json
new file mode 100644
index 0000000000..91b70a001b
--- /dev/null
+++ b/docs/5.x/docs/components/TouchableRipple/_meta.json
@@ -0,0 +1,3 @@
+[
+ "TouchableRipple"
+]
diff --git a/docs/5.x/docs/components/_meta.json b/docs/5.x/docs/components/_meta.json
new file mode 100644
index 0000000000..548d39075a
--- /dev/null
+++ b/docs/5.x/docs/components/_meta.json
@@ -0,0 +1,180 @@
+[
+ "ActivityIndicator",
+ {
+ "type": "dir",
+ "name": "Appbar",
+ "label": "Appbar",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "Avatar",
+ "label": "Avatar",
+ "collapsible": true,
+ "collapsed": false
+ },
+ "Badge",
+ "Banner",
+ {
+ "type": "dir",
+ "name": "BottomNavigation",
+ "label": "BottomNavigation",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "Button",
+ "label": "Button",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "Card",
+ "label": "Card",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "Checkbox",
+ "label": "Checkbox",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "Chip",
+ "label": "Chip",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "DataTable",
+ "label": "DataTable",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "Dialog",
+ "label": "Dialog",
+ "collapsible": true,
+ "collapsed": false
+ },
+ "Divider",
+ {
+ "type": "dir",
+ "name": "Drawer",
+ "label": "Drawer",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "FAB",
+ "label": "FAB",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "IconButton",
+ "label": "IconButton",
+ "collapsible": true,
+ "collapsed": false
+ },
+ "Icon",
+ {
+ "type": "dir",
+ "name": "List",
+ "label": "List",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "Menu",
+ "label": "Menu",
+ "collapsible": true,
+ "collapsed": false
+ },
+ "Modal",
+ {
+ "type": "dir",
+ "name": "Portal",
+ "label": "Portal",
+ "collapsible": true,
+ "collapsed": false
+ },
+ "ProgressBar",
+ {
+ "type": "dir",
+ "name": "RadioButton",
+ "label": "RadioButton",
+ "collapsible": true,
+ "collapsed": false
+ },
+ "Searchbar",
+ {
+ "type": "dir",
+ "name": "SegmentedButtons",
+ "label": "SegmentedButtons",
+ "collapsible": true,
+ "collapsed": false
+ },
+ "Snackbar",
+ "Surface",
+ {
+ "type": "dir",
+ "name": "Switch",
+ "label": "Switch",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "TextInput",
+ "label": "TextInput",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "ToggleButton",
+ "label": "ToggleButton",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "Tooltip",
+ "label": "Tooltip",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "TouchableRipple",
+ "label": "TouchableRipple",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "Text",
+ "label": "Text",
+ "collapsible": true,
+ "collapsed": false
+ },
+ {
+ "type": "dir",
+ "name": "HelperText",
+ "label": "HelperText",
+ "collapsible": true,
+ "collapsed": false
+ }
+]
diff --git a/docs/5.x/docs/guides/_meta.json b/docs/5.x/docs/guides/_meta.json
new file mode 100644
index 0000000000..3fbe040166
--- /dev/null
+++ b/docs/5.x/docs/guides/_meta.json
@@ -0,0 +1,14 @@
+[
+ "getting-started",
+ "theming",
+ "icons",
+ "fonts",
+ "react-native-web",
+ "recommended-libraries",
+ "contributing",
+ "theming-with-react-navigation",
+ "bottom-navigation",
+ "react-navigation",
+ "migration-guide-to-5.0",
+ "ripple-effect"
+]
diff --git a/docs/5.x/docs/guides/bottom-navigation.md b/docs/5.x/docs/guides/bottom-navigation.md
new file mode 100644
index 0000000000..21776718c9
--- /dev/null
+++ b/docs/5.x/docs/guides/bottom-navigation.md
@@ -0,0 +1,248 @@
+---
+title: Using BottomNavigation with React Navigation
+---
+
+:::caution
+The `createMaterialBottomTabNavigator` has been deprecated as of `react-native-paper@5.14.0`. Instead, use `@react-navigation/bottom-tabs` version `7.x` or later, combined with `BottomNavigation.Bar` to achieve a Material Design look.
+
+For implementation details, see the [dedicated example](https://callstack.github.io/react-native-paper/docs/components/BottomNavigation/BottomNavigationBar#with-react-navigation).
+:::
+
+A material-design themed tab bar on the bottom of the screen that lets you switch between different routes with animation. Routes are lazily initialized - their screen components are not mounted until they are first focused.
+
+This wraps the [`BottomNavigation`](https://callstack.github.io/react-native-paper/docs/components/BottomNavigation/) component from `react-native-paper`, however if you [configure the Babel plugin](https://callstack.github.io/react-native-paper/docs/guides/getting-started/), it won't include the whole library in your bundle.
+
+
+
+:::info
+To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](https://reactnavigation.org/docs/getting-started):
+:::
+
+> 👉 For a complete example please visit `createMaterialBottomTabNavigator` [snack](https://snack.expo.dev/@react-native-paper/creatematerialbottomtabnavigator)
+
+## API Definition
+
+To use this tab navigator, import it from `react-native-paper/react-navigation`:
+
+```js
+import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
+
+const Tab = createMaterialBottomTabNavigator();
+
+function MyTabs() {
+ return (
+
+
+
+
+ );
+}
+```
+
+> 👉 For a complete usage guide please visit [Tab Navigation](https://reactnavigation.org/docs/tab-based-navigation/)
+
+### Props
+
+The `Tab.Navigator` component accepts following props:
+
+#### `id`
+
+Optional unique ID for the navigator. This can be used with [`navigation.getParent`](https://reactnavigation.org/docs/navigation-prop#getparent) to refer to this navigator in a child navigator.
+
+#### `initialRouteName`
+
+The name of the route to render on first load of the navigator.
+
+#### `screenOptions`
+
+Default options to use for the screens in the navigator.
+
+#### `backBehavior`
+
+This controls what happens when `goBack` is called in the navigator. This includes pressing the device's back button or back gesture on Android.
+
+It supports the following values:
+
+- `firstRoute` - return to the first screen defined in the navigator (default)
+- `initialRoute` - return to initial screen passed in `initialRouteName` prop, if not passed, defaults to the first screen
+- `order` - return to screen defined before the focused screen
+- `history` - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history
+- `none` - do not handle back button
+
+#### `shifting`
+
+Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.
+
+By default, this is `true` when you have more than 3 tabs. Pass `shifting={false}` to explicitly disable this animation, or `shifting={true}` to always use this animation.
+
+#### `labeled`
+
+Whether to show labels in tabs. When `false`, only icons will be displayed.
+
+#### `activeColor`
+
+Custom color for icon and label in the active tab.
+
+#### `inactiveColor`
+
+Custom color for icon and label in the inactive tab.
+
+#### `barStyle`
+
+Style for the bottom navigation bar. You can pass custom background color here:
+
+```js
+
+ {/* ... */}
+
+```
+
+If you have a translucent navigation bar on Android, you can also set a bottom padding here:
+
+```js
+
+ {/* ... */}
+
+```
+
+#### `theme`
+
+Enables the customization of default theme attributes (e.g. colors) or facilitates the utilization of a personalized custom theme.
+
+### Options
+
+The following [options](https://reactnavigation.org/docs/screen-options) can be used to configure the screens in the navigator:
+
+#### `title`
+
+Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`.
+
+#### `tabBarIcon`
+
+Function that given `{ focused: boolean, color: string }` returns a React.Node, to display in the tab bar.
+
+#### `tabBarColor`
In v5.x works only with theme version 2.
+
+Color for the tab bar when the tab corresponding to the screen is active. Used for the ripple effect. This is only supported when `shifting` is `true`.
+
+#### `tabBarLabel`
+
+Title string of a tab displayed in the tab bar. When undefined, scene `title` is used. To hide, see `labeled` option in the previous section.
+
+#### `tabBarBadge`
+
+Badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
+
+#### `tabBarAccessibilityLabel`
+
+Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab.
+
+#### `tabBarTestID`
+
+ID to locate this tab button in tests.
+
+### Events
+
+The navigator can [emit events](https://reactnavigation.org/docs/navigation-events) on certain actions. Supported events are:
+
+#### `tabPress`
+
+This event is fired when the user presses the tab button for the current screen in the tab bar. By default a tab press does several things:
+
+- If the tab is not focused, tab press will focus that tab
+- If the tab is already focused:
+ - If the screen for the tab renders a scroll view, you can use [`useScrollToTop`](https://reactnavigation.org/docs/use-scroll-to-top) to scroll it to top
+ - If the screen for the tab renders a stack navigator, a `popToTop` action is performed on the stack
+
+To prevent the default behavior, you can call `event.preventDefault`:
+
+```js
+React.useEffect(() => {
+ const unsubscribe = navigation.addListener('tabPress', (e) => {
+ // Prevent default behavior
+
+ e.preventDefault();
+ // Do something manually
+ // ...
+ });
+
+ return unsubscribe;
+}, [navigation]);
+```
+
+### Helpers
+
+The tab navigator adds the following methods to the navigation prop:
+
+#### `jumpTo`
+
+Navigates to an existing screen in the tab navigator. The method accepts following arguments:
+
+- `name` - _string_ - Name of the route to jump to.
+- `params` - _object_ - Screen params to pass to the destination route.
+
+
+
+```js
+navigation.jumpTo('Profile', { name: 'MichaÅ›' });
+```
+
+## Example
+
+```js
+import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
+
+const Tab = createMaterialBottomTabNavigator();
+
+function MyTabs() {
+ return (
+
+ (
+
+ ),
+ }}
+ />
+ (
+
+ ),
+ }}
+ />
+ (
+
+ ),
+ }}
+ />
+
+ );
+}
+```
diff --git a/docs/5.x/docs/guides/contributing.mdx b/docs/5.x/docs/guides/contributing.mdx
new file mode 100644
index 0000000000..2861043dc3
--- /dev/null
+++ b/docs/5.x/docs/guides/contributing.mdx
@@ -0,0 +1,7 @@
+---
+title: Contributing
+---
+
+import Contributing from '../../../../CONTRIBUTING.md';
+
+
diff --git a/docs/5.x/docs/guides/fonts.md b/docs/5.x/docs/guides/fonts.md
new file mode 100644
index 0000000000..60d3c6e457
--- /dev/null
+++ b/docs/5.x/docs/guides/fonts.md
@@ -0,0 +1,527 @@
+---
+title: Fonts
+---
+
+# Fonts
+
+## Installing custom fonts
+
+The easiest way to install custom fonts to your RN project is do as follows:
+
+ 1. Define path to assets directory with fonts in project:
+
+ Example:
+
+ ```js
+ module.exports = {
+ ...
+ assets: [
+ './assets/fonts'
+ ],
+ ```
+
+:::note
+`fonts` is a folder with `.ttf` files
+:::
+
+ 2. Place your font files in your assets directory.
+
+ 3. Link font files, using the following command in the terminal:
+
+ * React Native `>= 0.69`:
+
+ ```sh
+ npx react-native-asset
+ ```
+
+ * React Native `< 0.69`:
+
+ ```sh
+ npx react-native link
+ ```
+
+
+ 4. Restart your project to refresh changes.
+
+Now, you are able to use `fontFamily` from font files.
+
+## Configuring fonts in ThemeProvider
+
+### Material Design 2
+
+#### Using `configureFonts` helper
+
+To create a custom font, prepare a `fontConfig` object where fonts are divided by platforms. After that, you have to:
+
+* pass the `fontConfig` into `configureFonts` params object property called `config`
+* set the params object property `isV3` to `false`.
+
+The `fontConfig` object accepts `ios`, `android`, `macos`, `windows`, `web`, and `native`. Use these to override fonts on particular platforms.
+
+:::info
+At a minimum, you need to explicitly pass fonts for `android`, `ios`, and `web`.
+:::
+
+```js
+import * as React from 'react';
+import { configureFonts, MD2LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const fontConfig = {
+ web: {
+ regular: {
+ fontFamily: 'sans-serif',
+ fontWeight: 'normal',
+ },
+ medium: {
+ fontFamily: 'sans-serif-medium',
+ fontWeight: 'normal',
+ },
+ light: {
+ fontFamily: 'sans-serif-light',
+ fontWeight: 'normal',
+ },
+ thin: {
+ fontFamily: 'sans-serif-thin',
+ fontWeight: 'normal',
+ },
+ },
+ ios: {
+ regular: {
+ fontFamily: 'sans-serif',
+ fontWeight: 'normal',
+ },
+ medium: {
+ fontFamily: 'sans-serif-medium',
+ fontWeight: 'normal',
+ },
+ light: {
+ fontFamily: 'sans-serif-light',
+ fontWeight: 'normal',
+ },
+ thin: {
+ fontFamily: 'sans-serif-thin',
+ fontWeight: 'normal',
+ },
+ },
+ android: {
+ regular: {
+ fontFamily: 'sans-serif',
+ fontWeight: 'normal',
+ },
+ medium: {
+ fontFamily: 'sans-serif-medium',
+ fontWeight: 'normal',
+ },
+ light: {
+ fontFamily: 'sans-serif-light',
+ fontWeight: 'normal',
+ },
+ thin: {
+ fontFamily: 'sans-serif-thin',
+ fontWeight: 'normal',
+ },
+ }
+};
+
+const theme = {
+ ...MD2LightTheme,
+ fonts: configureFonts({config: fontConfig, isV3: false}),
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+:::tip
+If you're using TypeScript use `as const` when defining `fontConfig`.
+:::
+
+### Material Design 3
+
+#### Variants
+
+In the latest version fonts in theme are structured based on the `variant` keys e.g. `displayLarge` or `bodyMedium` which are then used in `Text`'s component throughout the whole library.
+
+:::info
+The default `fontFamily` is different per particular platfrom:
+
+```js
+Platform.select({
+ web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+ ios: 'System',
+ default: 'sans-serif', // and 'sans-serif-medium' for `fontWeight:"500"`
+}),
+```
+:::
+
+* #### Display
+
+
+
+:::info
+If any component uses Paper's `Text` component, without specified variant, then `default` variant is applied:
+
+```json
+"default": {
+ "fontFamily": "FontFamily",
+ "fontWeight": "400",
+ "letterSpacing": 0,
+},
+```
+:::
+
+#### Using `configureFonts` helper
+
+* If there is a need to create a custom font variant, prepare its config object including required all fonts properties. After that, defined `fontConfig` has to be passed under the `variant` name as `config` into the params object:
+
+```js
+import * as React from 'react';
+import { configureFonts, MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const fontConfig = {
+ customVariant: {
+ fontFamily: Platform.select({
+ web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+ ios: 'System',
+ default: 'sans-serif',
+ }),
+ fontWeight: '400',
+ letterSpacing: 0.5,
+ lineHeight: 22,
+ fontSize: 20,
+ }
+};
+
+const theme = {
+ ...MD3LightTheme,
+ fonts: configureFonts({config: fontConfig}),
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+If you're using TypeScript you will need to create a custom `Text` component which accepts your custom variants:
+
+```typescript
+import { customText } from 'react-native-paper'
+
+// Use this instead of importing `Text` from `react-native-paper`
+export const Text = customText<'customVariant'>()
+```
+
+
+* In order to override one of the available `variant`'s font properties, pass the modified `fontConfig` under specific `variant` name as `config` into the params object:
+
+```js
+import * as React from 'react';
+import { configureFonts, MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const fontConfig = {
+ bodyLarge: {
+ letterSpacing: 0.5,
+ lineHeight: 22,
+ fontSize: 20,
+ }
+};
+
+const theme = {
+ ...MD3LightTheme,
+ fonts: configureFonts({config: fontConfig}),
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+* However, if you just want to override any font property e.g. `fontFamily` or `letterSpacing` for all variants, you can pass the `fontConfig` as a `config` into the params object without specifying variant name:
+
+```js
+import * as React from 'react';
+import { configureFonts, MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const fontConfig = {
+ fontFamily: 'NotoSans'
+};
+
+const theme = {
+ ...MD3LightTheme,
+ fonts: configureFonts({config: fontConfig}),
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+
+## Variable fonts
+
+Although React Native Paper supports `fontWeight` and `fontStyle` properties, there are multiple limitations to custom
+fonts in React Native. Using custom [variable fonts](https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts)
+is especially problematic, with some platforms failing to render variants entirely. To ensure correct typography in your
+app, we suggest installing each font variant as a separate file. Below you'll find example on how to set up React Native Paper
+theme with custom fonts.
+
+Should you decide to use a variable font anyway, second example will show you how to test if the font is rendered correctly in React Native on all platforms.
+
+
+ Variable fonts examples
+
+
diff --git a/docs/5.x/docs/guides/getting-started.md b/docs/5.x/docs/guides/getting-started.md
new file mode 100644
index 0000000000..68071c4d25
--- /dev/null
+++ b/docs/5.x/docs/guides/getting-started.md
@@ -0,0 +1,171 @@
+---
+title: Getting Started
+---
+
+# Getting Started
+
+## Installation
+
+- Open a Terminal in your project's folder and run:
+
+```bash npm2yarn
+npm install react-native-paper
+```
+
+- From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area.
+
+```bash npm2yarn
+npm install react-native-safe-area-context
+```
+
+Additionaly for `iOS` platform there is a requirement to link the native parts of the library:
+
+```bash
+npx pod-install
+```
+
+- If you're on a vanilla React Native project, you also need to install and link [@react-native-vector-icons/material-design-icons](https://github.com/oblador/react-native-vector-icons).
+
+Specifically `MaterialDesignIcons` icon pack needs to be included in the project, because some components use those internally (e.g. `AppBar.BackAction` on Android).
+
+```bash npm2yarn
+npm install @react-native-vector-icons/material-design-icons
+```
+
+:::note
+The `react-native-vector-icons` library requires some additional setup steps for each platform. To ensure proper use of icon fonts, please follow their [installation guide](https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#setup).
+:::
+
+If you use Expo, you don't need to install vector icons - those are the part of the expo package. However, if you have a `babel.config.js` or `.babelrc` file, make sure that it includes `babel-preset-expo`.
+
+:::info
+If you don't want to install vector icons, you can use [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require) to opt-out.
+:::note
+
+### Bundle size optimization
+
+To get smaller bundle size by excluding modules you don't use, you can use our optional babel plugin. The plugin automatically rewrites the import statements so that only the modules you use are imported instead of the whole library. Add `react-native-paper/babel` to the `plugins` section in your `babel.config.js` for production environment. It should look like this:
+
+```js
+module.exports = {
+ presets: ['module:metro-react-native-babel-preset'],
+ env: {
+ production: {
+ plugins: ['react-native-paper/babel'],
+ },
+ },
+};
+```
+
+If you created your project using Expo, it'll look something like this:
+
+```js
+module.exports = function (api) {
+ api.cache(true);
+ return {
+ presets: ['babel-preset-expo'],
+ env: {
+ production: {
+ plugins: ['react-native-paper/babel'],
+ },
+ },
+ };
+};
+```
+
+The plugin only works if you are importing the library using ES2015 import statements and not with `require`.
+
+:::note
+The above examples are for the latest `react-native` using Babel 7. If you have `react-native <= 0.55`, you'll have a `.babelrc` file instead of a `babel.config.js` file and the content of the file will be different.
+:::
+
+If you're using Flow for typechecking your code, you need to add the following under the `[options]` section in your `.flowconfig`:
+
+```ini
+module.file_ext=.js
+module.file_ext=.native.js
+module.file_ext=.android.js
+module.file_ext=.ios.js
+```
+
+## Usage
+
+Wrap your root component in `PaperProvider` from `react-native-paper`(if you are using versions prior to 5.8.0 you need to use `Provider`). If you have a vanilla React Native project, it's a good idea to add it in the component which is passed to `AppRegistry.registerComponent`. This will usually be in the `index.js` file. If you have an Expo project, you can do this inside the exported component in the `App.js` file.
+
+Example:
+
+```js
+import * as React from 'react';
+import { AppRegistry } from 'react-native';
+import { PaperProvider } from 'react-native-paper';
+import { name as appName } from './app.json';
+import App from './src/App';
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+
+AppRegistry.registerComponent(appName, () => Main);
+```
+
+The `PaperProvider` component provides the theme to all the components in the framework. It also acts as a portal to components which need to be rendered at the top level.
+
+If you have another provider (such as `Redux`), wrap it outside `PaperProvider` so that the context is available to components rendered inside a `Modal` from the library:
+
+```js
+import * as React from 'react';
+import { PaperProvider } from 'react-native-paper';
+import { Provider as StoreProvider } from 'react-redux';
+import App from './src/App';
+import store from './store';
+
+export default function Main() {
+ return (
+
+
+
+
+
+ );
+}
+```
+
+## Customization
+
+You can provide a custom theme to customize the colors, typescales etc. with the `Provider` component. Check the [Material Design 3 default theme](https://github.com/callstack/react-native-paper/blob/main/src/styles/themes/v3/LightTheme.tsx) to see what customization options are supported.
+
+Example:
+
+```js
+import * as React from 'react';
+import {
+ MD3LightTheme as DefaultTheme,
+ PaperProvider,
+} from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ ...DefaultTheme,
+ colors: {
+ ...DefaultTheme.colors,
+ primary: 'tomato',
+ secondary: 'yellow',
+ },
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+:::note
+For MD2 check the following [Material Design 2 default theme](https://github.com/callstack/react-native-paper/blob/main/src/styles/themes/v2/LightTheme.tsx).
+:::
diff --git a/docs/5.x/docs/guides/icons.mdx b/docs/5.x/docs/guides/icons.mdx
new file mode 100644
index 0000000000..8de3aa9abc
--- /dev/null
+++ b/docs/5.x/docs/guides/icons.mdx
@@ -0,0 +1,169 @@
+---
+title: Icons
+---
+
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+import IconsList from '@site/src/components/IconsList.tsx';
+
+# Icons
+
+## Configuring icons
+
+Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's a vanilla React Native project, you need to link the library as described in the [getting started guide](./getting-started).
+
+:::note
+If you opted out of vector icons support using [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require), you won't be able to use icon names for the icon prop. Some components may not look correct without vector icons and might need extra configuration.
+:::
+
+## Using the `icon` prop
+
+Many components such as `Button` accept an `icon` prop which is used to display an icon. The `icon` prop supports the following types of values:
+
+### 1. An icon name
+
+You can pass the name of an icon from [`MaterialDesignIcons`](https://pictogrammers.com/library/mdi/). This will use the [`@react-native-vector-icons/material-design-icons`](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons) library to display the icon.
+
+Example:
+
+```js
+
+```
+
+:::note
+Choose the correct tab below based on your `react-native-vector-icons` version:
+
+- Use **latest** tab if you're using the latest version of `@react-native-vector-icons/material-design-icons`
+- Use **10.x** tab if you're still using the old single package `react-native-vector-icons`, version `10.x`
+
+If you are using `@expo/vector-icons`, please check their [searchable list of icons](https://icons.expo.fyi/).
+:::
+
+
+
+
+ See the list of supported icons
+
+
+
+
+
+ See the list of supported icons
+
+
+
+
+
+### 2. An image source
+
+You can pass an image source, such as an object of shape `{ uri: 'https://path.to' }` or a local image: `require('../path/to/image.png')` to use as an icon. The image might be rendered with a different color than the one provided depending on the component. If don't want this behavior, see the next example to pass an `Image` element.
+
+Remote image:
+
+```js
+
+```
+
+Local image:
+
+```js
+
+```
+
+### 3. A render function
+
+You can pass a function which returns a react element to be used an icon. The function receives an object with `size` and `color` properties as its arguments. The element is used as is without any modification. However, it might get clipped if the provided element's size is bigger than what the component renders. It's up to you to make sure that the size of the element is correct.
+
+Example:
+
+```js
+
+```
+
+### 4. Use custom icons
+
+If you want to use icons other than `MaterialDesignIcons` you need to import the icons and pass it to the `settings` prop within `PaperProvider`.
+
+Example:
+
+```js
+import AwesomeIcon from '@react-native-vector-icons/fontawesome';
+// ...
+
+,
+ }}
+ theme={this.state.theme}
+>
+ // ...
+;
+```
+
+## RTL support
+
+If you want your icon to behave properly in a RTL environment, you can pass an object to the `icon` prop with shape: `{ source: { uri: 'https://path.to' }, direction : 'rtl' }`. `source` can be any of the values that the `icon` prop accepts in [option 1](#1.-an-icon-name) and [option 2](#2.-an-image-source). For `direction` you have a few options:
+
+1. `auto` - uses the device language to determine if icon should be displayed from rtl. Uses the `I18nManager` module to get this info.
+2. `rtl` - flips the icon so that it is rtl, this is regardless of the device language.
+3. `ltr` - displays from ltr, even if in an rtl environment.
+
+Example for using an image source:
+
+```js
+
+```
+
+Example for using an icon name:
+
+```js
+
+```
+
+You can also use a render function. Along with `size` and `color`, you have access to `direction` which will either be `'rtl'` or `'ltr'`. You can then decide how to render your icon component accordingly.
+
+Example of using a render function:
+
+```js
+
+```
diff --git a/docs/5.x/docs/guides/migration-guide-to-5.0.md b/docs/5.x/docs/guides/migration-guide-to-5.0.md
new file mode 100644
index 0000000000..001ecf9454
--- /dev/null
+++ b/docs/5.x/docs/guides/migration-guide-to-5.0.md
@@ -0,0 +1,656 @@
+---
+title: Introducing v5 with Material You
+---
+
+React Native Paper v5 is all about adopting the new Material Design 3 aka Material You. It was released in October 2021 after intense work and effort to make Material You follow a more expressive approach to design.
+
+Paper now supports both Material Design 2 and 3 through the configuration described in [Versioning](#versioning) and is compatible with a handful of API changes.
+
+# Migration guide to Material You 5.0
+
+Version 5.0 brings support for the next Material Design iteration branded as Material You (in fact being Material Design v3 or in short MD3) into the `react-native-paper` library. All the components were refined according to the official [design kit on figma](https://www.figma.com/community/file/1035203688168086460) and adjusted in terms of visuals by changes in colors, typography and animations.
+
+Below you can find the most important information about the components whose API may have changed API has been changed due to supporting new props, renaming existing ones or some deprecations. Hopefully, based on the presented required changes, migration to the latest version should be smooth. Enjoy!
+
+### Installation
+
+* The `v5` has been oficially released as a stable version, which means it will be installed by default from the `npm`. In order to do that, open a Terminal in your project's folder and run:
+
+```bash npm2yarn
+npm install react-native-paper
+```
+
+* From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area.
+
+```bash npm2yarn
+npm install react-native-safe-area-context
+```
+
+Additionaly for `iOS` platform there is a requirement to link the native parts of the library:
+
+```bash
+npx pod-install
+```
+
+## Theming
+
+### Versioning
+
+Introducing Material You (MD3) into `react-native-paper` doesn't mean dropping previous Material Design (MD2)! On the contrary, both of them will be supported, however, not simultaneously. To specify which design system components should follow in the app, there is a newly created property in [the theme](https://callstack.github.io/react-native-paper/docs/guides/theming#theme-properties) named `version` that accepts one of two values:
+
+* 3 – (default) new Material You (MD3),
+* 2 - previous Material Design (MD2).
+
+```js
+theme: {
+ /* ... */
+ version: 3 | 2
+}
+```
+
+Read more about using Material Design 2 in our [Material Design 2 theming guide](https://callstack.github.io/react-native-paper/docs/guides/theming#material-design-2)
+
+### Colors
+
+New theme introduces a new color palette along with new namings reflecting design color tokens, but written in camel case. Palette contains a set of five key colors, where primary, secondary and tertiary are classified into accent colors. The second group of colors is neutral and neutral variant colors used for defining surface or background roles as well as specifying high and medium emphasis text and icons. Additionally, the color system includes a semantic color role for error.
+
+Each accent and error colors has a group of related tones. The tones are mapped to roles that create contrast and visual interest when applied to elements in the UI.
+
+:::note
+Dynamic colors are not supported yet
+:::
+
+
+
+Colors theme structure should follow the default palette and contain the following properties:
+
+```js
+theme: {
+ /* ... */
+ colors: {
+ primary,
+ primaryContainer,
+ secondary,
+ secondaryContainer,
+ tertiary,
+ tertiaryContainer,
+ surface,
+ surfaceVariant,
+ surfaceDisabled,
+ background,
+ error,
+ errorContainer,
+ onPrimary,
+ onPrimaryContainer,
+ onSecondary,
+ onSecondaryContainer,
+ onTertiary,
+ onTertiaryContainer,
+ onSurface,
+ onSurfaceVariant,
+ onSurfaceDisabled,
+ onError,
+ onErrorContainer,
+ onBackground,
+ outline,
+ shadow,
+ inverseOnSurface,
+ inverseSurface,
+ inversePrimary,
+ backdrop,
+ elevation: {
+ level0,
+ level1,
+ level2,
+ level3,
+ level4,
+ level5
+ }
+ }
+}
+```
+
+👉 You can find more about color on the [Material You website](https://m3.material.io/styles/color/the-color-system/key-colors-tones)
+
+## Typography
+
+A new way of approaching typography introduces one component `` which accepts prop `variant`. Variant defines appropriate text styles for type role and its size. The updated type scale organizes styles into five roles that are named to describe their purposes: Display, Headline, Title, Label and Body along with three display styles large, medium, and small. In total, there are fifteen variants that are MD3 compliant and are reflecting design typography tokens written in camel case.
+
+:::info
+If any component uses Paper's `Text` component, without specified variant, then `default` variant is applied.
+:::
+
+```js
+Display Large
+Display Medium
+Display small
+
+Headline Large
+Headline Medium
+Headline Small
+
+Title Large
+Title Medium
+Title Small
+
+Body Large
+Body Medium
+Body Small
+
+Label Large
+Label Medium
+Label Small
+ ```
+
+Take a look at the suggested replacement diff:
+
+ ```diff
+- Headline
++ Headline
+
+- Title
++ Title
+
+- Subheading
++ Subheading
+
+- Paragraph
++ Paragraph
+
+-
Caption
++ Caption
+ ```
+
+
+👉 You can find more about typography on the [Material You website](https://m3.material.io/styles/typography/overview)
+
+### Configure fonts
+
+The existing utility called `configureFonts` was adjusted to help users configure their theme fonts in both version, that's why that function, as of today, is going to accept the object with the follwing properties as an argument:
+
+```ts
+configureFonts(params)
+```
+
+Parameters:
+
+| NAME | TYPE | REQUIRED |
+| ----------- | ----------- | ----------- |
+| params | object | No |
+
+Valid `params` keys are:
+
+ * `config` ([MD2FontsConfig](https://github.com/callstack/react-native-paper/blob/main/src/styles/fonts.tsx#L63) | [MD3FontsConfig](https://github.com/callstack/react-native-paper/blob/main/src/styles/fonts.tsx#L67)) - fonts config object appropriate to the MD version
+ * `isV3` (boolean) - whether adjusting theme fonts for v3. Default it true.
+
+To use your current font config from v2 and migrate to v3 there are two requirements:
+* the font config previously passed directly into function has to be passed into the params object property called `config`
+* the params object property `isV3` has to be set to `false`
+
+```diff
+- configureFonts(fontConfig)
++ configureFonts({config: fontConfig, isV3: false})
+```
+
+:::tip
+If you want to check how to use `configureFonts` on MD3, check the [Fonts](https://callstack.github.io/react-native-paper/docs/guides/fonts.html) guide.
+:::
+
+## Components
+
+### Appbar (Top app bar)
+
+`Appbar` and `Appbar.Header` in the latest version can be used in four various modes due to new prop `mode`:
+
+* `small` - Appbar with default height (64) (default),
+* `medium` - Appbar with medium height (112),
+* `large` - Appbar with large height (152),
+* `center-aligned` - Appbar with default height (64) and center-aligned title.
+
+```js
+
+ /* ... */
+
+```
+
+To make it easier for users to build the `BottomBar`, formed on the `Appbar` components, we have added a property `safeAreaInsets`:
+
+```js
+
+ /* ... */
+
+```
+
+It's worth noting that by default the theme version 3 `Appbar` and `Appbar.Header` don't have a shadow. However, it can be added by passing prop `elevated` into the component:
+
+```js
+
+ /* ... */
+
+```
+
+#### Appbar.Action
+
+`Appbar.Action` received new prop `isLeading`, which defines whether it's the leading button and should be placed at the beginning of the `Appbar`.
+
+```js
+ {}} />
+```
+
+#### Appbar.Content
+
+New design guidelines indicate there is no subtitle in `Appbar.Content`, that's why there are two deprecations and the following props won't be supported anymore: `subtitle` and `subtitleStyle`.
+
+```diff
+-
++
+```
+
+### Banner, Searchbar and Snackbar
+
+According to the updates in `Surface` on the top of which `Banner`, `Searchbar` and `Snackbar` are implemented, all three component received `elevation` prop to adjust its value.
+
+```diff
+- Hello
++ Hello
+```
+
+### BottomNavigation (Navigation bar)
+
+For the sake of new animation of pill shape, indicating active destination, and assisting icon change from outlined to filled, there are three changes within `navigationState.routes` property items:
+
+* `color` is deprecated since color is constant and the same for all routes,
+* `icon` is renamed to `focusedIcon`, as the name implies, with theme version 3 it's the outline icon used as focused tab icon and with theme version 2 it's a default icon,
+* `unfocusedIcon` (optional) is the filled icon used as the unfocused tab icon, compatible with theme version 3.
+
+:::info
+`unfocusedIcon` is optional, if you can't find outline icon equivalent, omit that prop, so `focusedIcon` will be displayed in both active and inactive state.
+:::
+
+```diff
+routes: [
+- { key: "album", title: "Album", icon: "image-album", color: "#3F51B5" },
++ { key: "album", title: "Album", focusedIcon: "image-album" },
+- { key: "library", title: "Library", icon: "inbox", color: "#009688" },
++ { key: "library", title: "Library", focusedIcon: "inbox", unfocusedIcon: "inbox-outline" },
+- { key: "favorites", title: "Favorites", icon: "heart", color: "#795548" },
++ { key: "favorites", title: "Favorites", focusedIcon: "heart", unfocusedIcon: "heart-outline; },
+- { key: "purchased", title: "Purchased", icon: "shopping-cart", color: "#607D8B" },
++ { key: "purchased", title: "Purchased", focusedIcon: "shopping-cart" },
+]
+```
+
+The `compact` prop was also introduced, working with both themes. It indicates whether tabs should be spread across the entire width, especially in a horizontal mode.
+
+```js
+
+```
+
+It's worth to mention that default value of prop `shifting` depends on the theme version:
+* 3 - it's `false`,
+* 2 - it's `true` when there are more than 3 tabs.
+
+Two additional props that control the scene animation were introduced that control the animation of the tabs when `sceneAnimationEnabled` is `true`:
+* `sceneAnimationType: "opacity" | "shifting" | undefined` - defines the animation type for the scene. `shifting` enables a new animation where navigating to a scene will shift it horizontally into view. Both `opacity` and `undefined` have the same effect, fading the scene into view.
+* `sceneAnimationEasing` allows specifying a custom easing function for the scene animation.
+
+
+
+On a final note, please be aware that `BottomNavigation` with theme version 3 doesn't have a shadow.
+
+### Button
+
+`Button`'s property `mode` has been expanded with two additional options:
+* `elevated` - button with a background color and elevation, used when absolutely necessary e.g. button requires visual separation from a patterned background,
+* `container-tonal` - button with a secondary background color, an alternative middle ground between contained and outlined buttons.
+
+```js
+<>
+
+
+>
+```
+
+The property `color` is deprecated, but in its place two new props called `buttonColor` and `textColor` are introduced:
+* `buttonColor` - custom button's background color,
+* `textColor` - custom button's text color.
+
+```diff
+-
++
+```
+
+```diff
+-
++
+```
+
+Please be aware that along with theme version 3, by default text in the `Button` component isn't uppercased and `contained` button doesn't have any shadow (use then `elevated`).
+
+### Card
+
+The `Card` component's property `mode` has been expanded with one additional option called `contained`, which applies to the card's specified background color without any elevation and border.
+
+```js
+
+```
+
+#### Card.Title
+
+Since there is no one right way to make a card, there is also no one right way for specifying a title and subtitle variant. Therefore two new props come in handy:
+
+* `titleVariant` - title text variant defines appropriate text styles for type role and its size.
+* `subtitleVariant` - subtitle text variant defines appropriate text styles for type role and its size.
+
+```js
+
+```
+
+### Checkbox
+#### Checkbox.Item
+
+`Checkbox.Item` similarly to `RadioButton.Item` has been expanded with the prop called `labelVariant`, which defines appropriate text styles for type role and its size.
+
+```js
+
+```
+
+### Chip
+
+To properly compose `Chip` component and adjust into required type, there are three new props that will come in handy:
+
+* `compact` - sets smaller horizontal paddings around the label, useful for `Chip` containing only the label,
+* `elevated` - indicating whether `Chip` should be elevated,
+* `showSelectedOverlay` - defining whether to display an overlay on a selected button.
+
+```js
+<>
+ Compact Chip
+ Elevated Chip
+ Chip with selected overlay
+>
+```
+### Dialog
+#### Dialog.Icon
+
+`Dialog.Icon` is another freshly added component presenting an icon within a `Dialog`, placed at the top of the content.
+
+:::caution
+It's working only with theme version 3.
+:::
+
+```js
+
+
+
+```
+### Divider
+
+`Divider` component received two new props:
+
+* `bold` - divider is bolded,
+* `horizontalInset` - divider has horizontal insets on both sides.
+
+Additionally prop `inset` was renamed to `leftInset`.
+
+```diff
+-
++
+```
+
+### Drawer
+#### Drawer.CollapsedItem (Navigation rail)
+
+`Drawer.CollapsedItem` is a newly created side navigation component that can be used within `Drawer`, representing a destination in the form of an action item with an icon and optionally label.
+
+:::caution
+It's working only with theme version 3.
+:::
+
+```js
+
+
+
+
+```
+
+#### Drawer.Section
+
+With the latest version, there is a possibility to specify whether `Drawer.Section` should have a separator, in form of `Divider` component, displayed at the end of the section. To adjust it, a new property called `showDivider` was introduced, which by default is `true`:
+
+```js
+
+
+
+
+```
+
+### FAB
+
+`FAB`, `AnimatedFAB` and `FAB.Group` in the latest version can be used with four variants and two modes, thanks to two new props:
+
+* `variant` defines color mappings variant for combinations of container and icon colors. Can be one of: primary(default), secondary, tertiary or surface.
+
+```js
+
+```
+
+* `mode` specifies whether a button should be flat or elevated:
+ - `flat` - button without a shadow,
+ - `elevated` - button with a shadow.
+
+```js
+
+```
+
+#### FAB
+
+Additionaly `FAB` may be applied in one of three available sizes, thanks to new prop `size`:
+
+* `small` - FAB with small height (40),
+* `medium` - Appbar with default medium height (56),
+* `large` - Appbar with large height (96).
+
+```js
+
+```
+
+However, if you would like to have your own size of `FAB`, there is a new prop called `customSize`:
+
+```js
+
+```
+
+Accordingly to introducing `size="small"`, prop `small` was deprecated.
+
+```diff
+-
++
+```
+
+#### FAB.Group
+
+There is also deprecation in one of the `actions` properties, namely `small` prop is deprecated and replaced in favour of the default `size="small"`.
+
+```diff
+-
++
+```
+
+Additionally, the action item property previously known as `labelStyle` was renamed to `containerStyle` since it's tied mostly with the container styles. At the same time, `labelStyle` is still available with the new role related to styling item label.
+
+```diff
+-
++
+```
+
+### IconButton
+
+`IconButton` received two new props:
+
+* `selected` sets alternative combination of icon and container color,
+
+```js
+
+```
+
+* `containerColor` custom background color of the icon container.
+
+```js
+
+```
+
+At the same time, the `color` prop was renamed to `iconColor`.
+
+```diff
+-
++
+```
+
+### Menu
+#### Menu.Item
+
+`Menu.Item` received two new props:
+
+* `dense` sets smaller item height for more condensed layout,
+* `trailingIcon` which handles displaying an icon at the end of the item row.
+
+```js
+
+```
+
+At the same time, by analogy to the second new prop, the `icon` prop was renamed to `leadingIcon`.
+
+```diff
+- {}} title="Redo" />
++ {}} title="Redo" />
+```
+
+### RadioButton
+##### RadioButton.Item
+
+`RadioButton.Item` has been expanded with the prop called `labelVariant`, which defines appropriate text styles for type role and its size.
+
+```js
+
+```
+
+### SegmentedButtons
+
+`SegmentedButtons` is a completely new component introduced in the latest version. It allows people to select options, switch views, or sort elements. It supports single and multiselect select variant and provide a lot
+of customization options.
+
+
+
+```js
+const MyComponent = () => {
+ const [value, setValue] = React.useState('');
+
+ return (
+
+ );
+};
+```
+
+### Snackbar
+
+`Snackbar` due to the optional close affordance, in form of `IconButton` (located on the right side of action button), received three new props:
+
+* `icon` - icon to display when `onIconPress` is defined. Default will be `close` icon.
+* `onIconPress` - function to execute on icon button press. The icon button appears only when this prop is specified.
+* `iconAccessibilityLabel` - accessibility label for the icon button.
+
+### Surface
+
+`Surface` component received one new prop:
+* `elevation` - accepts values from `0` to `5` and applies background color and shadows to the `Surface` component. Supports both iOS and Android.
+
+Previously `elevation` was passed inside the `style` prop. Since it supported not only Android, but also iOS, we decided to extract it from `style` and create a separate `elevation` prop for that.
+
+```diff
+-
++
+```
+
+### TextInput
+#### TextInput.Icon
+
+The property `name` was renamed to `icon`, since the scope and type of that prop is much wider than just the icon name – it accepts also the function which receives an object with color and size properties and
+
+```diff
+-
++
+```
+
+## Tooltip
+
+Component displayed upon tapping and holding a screen element or component used to present an informative text label identifying an element, such as a description of its function.
+
+
+
+
+```js
+
+ {}} />
+
+```
+
+## Credits
+
+With this, that’s a wrap.
+
+The update wouldn't happen without a group of great React Native experts I'm happy to work with.
+From this place I would like to thank:
+- [Daniel Szczepanik](https://github.com/Drakeoon) for his commitment, effort and collaborative work on adjusting components,
+- [Olimpia Zurek](https://github.com/OlimpiaZurek) for her contribution and help,
+- [Aleksandra Desmurs-Linczewska](https://github.com/p-syche), [Jan Jaworski](https://github.com/jaworek) and [Kewin Wereszczyński](https://github.com/kwereszczynski) for checking and testing changes as well as providing valuable feedback,
+- [Bruno Castro](https://github.com/brunohkbx) for creating a long-awaited `Tooltip` component,
+- [Muhammad Hur Ali](https://github.com/hurali97) for various bug fixes and `List` subcomponents adjustments,
+
+and, last but not least, [Satya Sahoo](https://github.com/satya164) for his mentoring during the process.
diff --git a/docs/5.x/docs/guides/react-native-web.md b/docs/5.x/docs/guides/react-native-web.md
new file mode 100644
index 0000000000..af0331a7d9
--- /dev/null
+++ b/docs/5.x/docs/guides/react-native-web.md
@@ -0,0 +1,282 @@
+---
+title: Using on the Web
+---
+
+# Using on the Web
+
+## Pre-requisites
+
+Make sure that you have followed the getting started guide and have `react-native-paper` installed and configured before following this guide.
+
+We're going to use [react-native-web](https://github.com/necolas/react-native-web) and [webpack](https://webpack.js.org/) to use React Native Paper on the web, so let's install them as well.
+
+To install `react-native-web`, run:
+
+```bash npm2yarn
+npm install react-native-web react-dom react-art
+```
+
+### Using CRA ([Create React App](https://github.com/facebook/create-react-app))
+
+Install [`react-app-rewired`](https://github.com/timarney/react-app-rewired) to override `webpack` configuration:
+
+```bash npm2yarn
+npm install --save-dev react-app-rewired
+```
+
+[Configure `babel-loader`](#2-configure-babel-loader) using a new file called `config-overrides.js`:
+
+```js
+module.exports = function override(config, env) {
+ config.module.rules.push({
+ test: /\.js$/,
+ exclude: /node_modules[/\\](?!react-native-vector-icons)/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ // Disable reading babel configuration
+ babelrc: false,
+ configFile: false,
+
+ // The configuration for compilation
+ presets: [
+ ['@babel/preset-env', { useBuiltIns: 'usage' }],
+ '@babel/preset-react',
+ '@babel/preset-flow',
+ '@babel/preset-typescript',
+ ],
+ plugins: [
+ '@babel/plugin-proposal-class-properties',
+ '@babel/plugin-proposal-object-rest-spread',
+ ],
+ },
+ },
+ });
+
+ return config;
+};
+```
+
+Change your script in `package.json`:
+
+```diff
+/* package.json */
+
+ "scripts": {
+- "start": "react-scripts start",
++ "start": "react-app-rewired start",
+- "build": "react-scripts build",
++ "build": "react-app-rewired build",
+- "test": "react-scripts test --env=jsdom",
++ "test": "react-app-rewired test --env=jsdom"
+}
+```
+
+### Custom webpack setup
+
+To install `webpack`, run:
+
+```bash npm2yarn
+npm install --save-dev webpack webpack-cli webpack-dev-server
+```
+
+If you don't have a webpack config in your project, copy the following to `webpack.config.js` get started:
+
+```js
+const path = require('path');
+
+module.exports = {
+ mode: 'development',
+
+ // Path to the entry file, change it according to the path you have
+ entry: path.join(__dirname, 'App.js'),
+
+ // Path for the output files
+ output: {
+ path: path.join(__dirname, 'dist'),
+ filename: 'app.bundle.js',
+ },
+
+ // Enable source map support
+ devtool: 'source-map',
+
+ // Loaders and resolver config
+ module: {
+ rules: [],
+ },
+ resolve: {},
+
+ // Development server config
+ devServer: {
+ contentBase: [path.join(__dirname, 'public')],
+ historyApiFallback: true,
+ },
+};
+```
+
+Also create a folder named `public` and add the following file named `index.html`:
+
+```html
+
+
+
+
+
+
+
+ App
+
+
+
+
+
+
+
+```
+
+Now we're ready to start configuring the project.
+
+## Configure webpack
+
+### 1. Alias `react-native` to `react-native-web`
+
+First, we have to tell webpack to use `react-native-web` instead of `react-native`. Add the following alias in your webpack config under `resolve`:
+
+```js
+alias: {
+ 'react-native$': require.resolve('react-native-web'),
+}
+```
+
+### 2. Configure `babel-loader`
+
+Next, we want to tell `babel-loader` to compile `react-native-paper` and `react-native-vector-icons`. We would also want to disable reading the babel configuration files to prevent any conflicts.
+
+First install the required dependencies:
+
+```bash npm2yarn
+npm install --save-dev babel-loader @babel/preset-env @babel/preset-react @babel/preset-flow @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
+```
+
+Now, add the following in the `module.rules` array in your webpack config:
+
+```js
+{
+ test: /\.js$/,
+ exclude: /node_modules[/\\](?!react-native-vector-icons)/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ // Disable reading babel configuration
+ babelrc: false,
+ configFile: false,
+
+ // The configuration for compilation
+ presets: [
+ ['@babel/preset-env', { useBuiltIns: 'usage' }],
+ '@babel/preset-react',
+ '@babel/preset-flow',
+ "@babel/preset-typescript"
+ ],
+ plugins: [
+ '@babel/plugin-proposal-class-properties',
+ '@babel/plugin-proposal-object-rest-spread'
+ ],
+ },
+ },
+},
+```
+
+### 3. Configure `file-loader`
+
+#### webpack < 5.0
+
+To be able to import images and other assets using `require`, we need to configure `file-loader`. Let's install it:
+
+```bash npm2yarn
+npm install --save-dev file-loader
+```
+
+To configure it, add the following in the `module.rules` array in your webpack config:
+
+```js
+{
+ test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
+ loader: 'file-loader',
+}
+```
+
+##### webpack >= 5.0
+
+Use `asset/resource`, since `file-loader` was deprecated in webpack v5.
+
+```js
+{
+ test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
+ type: 'asset/resource'
+}
+```
+
+## Load the Material Design Icons
+
+If you followed the getting started guide, you should have the following code in your root component:
+
+```js
+
+
+
+```
+
+Now we need tweak this section to load the Material Design Icons from the [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) library:
+
+```js
+
+
+ {Platform.OS === 'web' ? (
+
+ ) : null}
+
+
+
+```
+
+Remember to import `Platform` from `react-native` at the top:
+
+```js
+import { Platform } from 'react-native';
+```
+
+You can also load these fonts using [`css-loader`](https://github.com/webpack-contrib/css-loader) if you prefer.
+
+## Load the Roboto fonts (optional)
+
+The default theme in React Native Paper uses the Roboto font. You can add them to your project following [the instructions on its Google Fonts page](https://fonts.google.com/specimen/Roboto?selection.family=Roboto:100,300,400,500).
+
+## We're done!
+
+You can run `webpack-dev-server` to run the webpack server and open your project in the browser. You can add the following script in your `package.json` under the `"scripts"` section to make it easier:
+
+```json
+"web": "webpack-dev-server --open"
+```
+
+Now you can run `yarn web` to run the project on web.
diff --git a/docs/5.x/docs/guides/react-navigation.md b/docs/5.x/docs/guides/react-navigation.md
new file mode 100644
index 0000000000..d9227cfb2b
--- /dev/null
+++ b/docs/5.x/docs/guides/react-navigation.md
@@ -0,0 +1,281 @@
+---
+title: Integrate AppBar with React Navigation
+---
+
+# Integrate AppBar with react-navigation
+
+## Prerequisites
+
+ - `react-native-paper`
+ - `react-navigation`
+
+We assume that you have already installed the mentioned libraries above, otherwise please check out the guides below.
+
+ [React Native Paper - Getting Started](https://callstack.github.io/react-native-paper/docs/guides/getting-started)
+
+ [React Navigation - Getting Started](https://reactnavigation.org/docs/getting-started/)
+
+## Stack Navigator
+
+We will start with `react-navigation` by creating a basic navigation stack. Stack navigator gives us a possibility of transition between screens in our app and manage navigation's history. In a simple scenario where there is only one stack navigator present in the app, it resembles a navigation state in a browser.
+Screens are pushed and popped from the stack while the user navigates to a new screen or go back to the previous one.
+
+Let's create two screens. A main screen named `Home` and details screen named `Details`.
+
+```js
+import 'react-native-gesture-handler';
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+const Stack = createStackNavigator();
+
+export default function App() {
+ return (
+
+
+
+
+
+
+ );
+}
+```
+
+At the moment our navigation stack contains two screens and will render `HomeScreen` or `DetailsScreen` components according to the current navigation state. We have not implemented those components yet, so let's do this now:
+
+```js
+import React from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
+
+function HomeScreen() {
+ return (
+
+ Home Screen
+
+ );
+}
+
+function DetailsScreen() {
+ return (
+
+ Details Screen
+
+ );
+}
+
+const style = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+});
+```
+
+Once we have finished implementing the components, we can run the app and check how Stack looks like.
+
+
+
+To navigate from `HomeScreen` to `DetailsScreen` we can use the navigation object provided by `Stack.Screen` component. Every component rendered by `Stack.Screen` has an access to the navigation object via props. Let's modify our `HomeScreen` component:
+
+```js
+import { Button } from 'react-native-paper';
+
+function HomeScreen({ navigation }) {
+ return (
+
+ Home Screen
+
+
+ );
+}
+
+const style = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+});
+```
+
+Our result:
+
+
+
+As you can see, we can already navigate between two screens. In the next steps, we will show you how to use Paper's `AppBar` instead of the default header.
+
+### Adding `AppBar`
+
+We can customize Stack's header by passing custom component:
+
+```js
+export default function App() {
+ return (
+
+ ,
+ }}>
+
+
+
+
+ );
+}
+```
+
+Now we will implement `CustomNavigationBar` using `AppBar` component:
+
+```js
+import { Appbar } from 'react-native-paper';
+
+export default function CustomNavigationBar() {
+ return (
+
+
+
+ );
+}
+```
+
+Current implementation of the `CustomNavigationBar` is simple - we just render a title inside of it, however it's hardcoded "My awesome app" text, so let's adjust it.
+To automatically get the correct `title` for the screen, we're going to take the advantage of `getHeaderTitle` helper available in `@react-navigation/elements` in the following way:
+
+```js
+import { Appbar } from 'react-native-paper';
+import { getHeaderTitle } from '@react-navigation/elements';
+
+export default function CustomNavigationBar({ route, options }) {
+ const title = getHeaderTitle(options, route.name);
+
+ return (
+
+
+
+ );
+}
+```
+
+You may notice there is no way to go back to the previous screen, because the back button is not visible in the header. Let's add it now and let's make sure it's visible on all Stack's screens except `Home` screen.
+
+In order to achieve it, we firstly check, if the navigation bar receives a `back` prop. If it has, it means there is another screen on the stack beneath the current screen and we should render the back arrow button in such a case.
+
+```js
+import { Appbar } from 'react-native-paper';
+import { getHeaderTitle } from '@react-navigation/elements';
+
+export default function CustomNavigationBar({ navigation, route, options, back }) {
+ const title = getHeaderTitle(options, route.name);
+
+ return (
+
+ {back ? : null}
+
+
+ );
+}
+```
+
+
+
+### Adding more items to `Appbar`
+
+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
+
+:::note
+To have properly working `Menu` component, remember to wrap your root component with the `PaperProvider`:
+
+```js
+import { PaperProvider } from 'react-native-paper';
+
+// ...
+
+
+
+ ,
+ }}>
+
+
+
+
+
+```
+:::
+
+We also want the menu to appear only on `HomeScreen`, which means we will render it conditionally based on the `back` prop.
+
+```js
+import React from 'react';
+import { Appbar, Menu } from 'react-native-paper';
+import { getHeaderTitle } from '@react-navigation/elements';
+
+export default function CustomNavigationBar({
+ navigation,
+ route,
+ options,
+ back,
+}) {
+ const [visible, setVisible] = React.useState(false);
+ const openMenu = () => setVisible(true);
+ const closeMenu = () => setVisible(false);
+
+ const title = getHeaderTitle(options, route.name);
+
+ return (
+
+ {back ? : null}
+
+ {!back ? (
+
+ }>
+ {
+ console.log('Option 1 was pressed');
+ }}
+ title="Option 1"
+ />
+ {
+ console.log('Option 2 was pressed');
+ }}
+ title="Option 2"
+ />
+ {
+ console.log('Option 3 was pressed');
+ }}
+ title="Option 3"
+ disabled
+ />
+
+ ) : null}
+
+ );
+}
+```
+
+Final result:
+
+
+
+That's all we need! We have app bar that contains everything we need to navigate through screens and access an additional menu on the main screen. As you can see, with Material design `Appbar` provided by `react-native-paper` used together with `react-navigation` we can easily create an app that looks and works great.
+
+Grab the Expo [snack](https://snack.expo.dev/@react-native-paper/integrate-appbar-with-react-navigation) if you want to check the whole code!
diff --git a/docs/5.x/docs/guides/recommended-libraries.md b/docs/5.x/docs/guides/recommended-libraries.md
new file mode 100644
index 0000000000..e70157ca1d
--- /dev/null
+++ b/docs/5.x/docs/guides/recommended-libraries.md
@@ -0,0 +1,40 @@
+---
+title: Recommended Libraries
+---
+
+# Recommended Libraries
+
+Our mission is to provide a full suite of well-integrated components built with Material Design in mind. However, many components already have better well maintained implementations.
+
+Here are some of the libraries we recommend:
+
+## Tabs
+
+[react-native-community/react-native-tab-view](https://github.com/react-native-community/react-native-tab-view)
+Material Design themed [swipeable tabs](https://material.io/design/components/tabs.html), maintained by [@satya164](https://twitter.com/satya164) and [@mosdnk](https://twitter.com/mosdnk).
+
+[react-native-paper-tabs](https://github.com/web-ridge/react-native-paper-tabs)
+Material Design themed [swipeable tabs](https://material.io/design/components/tabs.html) for React Native Paper, maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
+
+## Bottom sheet
+
+[osdnk/reanimated-bottom-sheet](https://github.com/osdnk/react-native-reanimated-bottom-sheet)
+An implementation of the [bottom sheet behaviour](https://material.io/design/components/sheets-bottom.html), maintained by [@mosdnk](https://twitter.com/mosdnk).
+
+[gorhom/react-native-bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet)
+An implementation of the [bottom sheet behaviour](https://material.io/design/components/sheets-bottom.html), maintained by [@Gorhom](https://twitter.com/Gorhom).
+
+
+## Date Picker
+[web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)
+Material Design themed [date picker](https://material.io/components/date-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
+
+[react-native-community/react-native-datetimepicker](https://github.com/react-native-community/react-native-datetimepicker)
+
+## Time Picker
+[web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)
+Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
+
+## System Colors
+[pchmn/expo-material3-theme](https://github.com/pchmn/expo-material3-theme)
+Retrieve Material 3 system colors from Android 12+ devices
\ No newline at end of file
diff --git a/docs/5.x/docs/guides/ripple-effect.md b/docs/5.x/docs/guides/ripple-effect.md
new file mode 100644
index 0000000000..31845060d7
--- /dev/null
+++ b/docs/5.x/docs/guides/ripple-effect.md
@@ -0,0 +1,45 @@
+---
+title: Ripple effect
+---
+
+The ripple effect is a visual feedback that occurs when a user interacts with a pressable UI element, such as a button. This response takes the form of a circular ripple expanding from the point of contact, much like a drop falling into water and creating ripples.
+
+The ripple effect is an essential aspect of Material Design, and Paper's pressable components have it enabled by default. Nonetheless, it can be tailored to suit specific needs.
+
+:::note
+The ripple effect on the iOS platform is replaced by a highlight effect.
+:::
+
+## Customize ripple effect color in component
+
+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
+
+```
+
+## Disable ripple effect in all components
+
+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';
+// ...
+
+
+ // ...
+
+```
+
+
+
diff --git a/docs/5.x/docs/guides/theming-with-react-navigation.md b/docs/5.x/docs/guides/theming-with-react-navigation.md
new file mode 100644
index 0000000000..b7a638a08d
--- /dev/null
+++ b/docs/5.x/docs/guides/theming-with-react-navigation.md
@@ -0,0 +1,356 @@
+---
+title: Theming with React Navigation
+---
+
+# Theming with React Navigation
+
+In this guide, we will look into how to apply theming for an application using React Native Paper and React Navigation at the same time.
+
+Offering different theme options, especially dark/light ones, has become increasingly a standard requirement of the modern mobile application. Fortunately, both React Navigation and React Native Paper support configurable theming out-of-the-box.
+But how to make them work together?
+
+## Themes adaptation
+
+### Material Design 2
+
+Fortunately, in Material Design 2, both React Navigation and React Native Paper offer very similar API when it comes to theming and theme color structure. It's possible to import them in light and dark variants from both.
+
+```js
+import {
+ DarkTheme as NavigationDarkTheme,
+ DefaultTheme as NavigationDefaultTheme,
+} from '@react-navigation/native';
+
+import {
+ MD2LightTheme,
+ MD2DarkTheme,
+} from 'react-native-paper';
+```
+
+### Material Design 3
+
+From v5, React Native Paper theme colors structure follows the Material Design 3 (known as Material You) colors system, which differs significantly from both the previous Paper's theme and React Navigation theme.
+
+However, to simplify adapting React Navigation theme colors, to use the ones from React Native Paper, it's worth using a utility called `adaptNavigationTheme` – it accepts navigation-compliant themes in both modes and returns their equivalents adjusted to Material Design 3.
+
+```ts
+import {
+ DarkTheme as NavigationDarkTheme,
+ DefaultTheme as NavigationDefaultTheme,
+} from '@react-navigation/native';
+import { adaptNavigationTheme } from 'react-native-paper';
+
+const { LightTheme, DarkTheme } = adaptNavigationTheme({
+ reactNavigationLight: NavigationDefaultTheme,
+ reactNavigationDark: NavigationDarkTheme,
+});
+```
+
+Library exports also Material Design 3 themes in both modes:
+
+```js
+import {
+ MD3LightTheme,
+ MD3DarkTheme,
+} from 'react-native-paper';
+```
+
+## Combining theme objects
+
+Both libraries require a wrapper to be used at the entry point of the application.
+React Navigation exposes `NavigationContainer`, which ensures that navigation works correctly and accepts `theme` as an optional property. Read more about setting up navigation [here](https://reactnavigation.org/docs/getting-started/).
+For React Native Paper theme to work, we need to use `PaperProvider` also at the application's entry point.
+
+```js
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { TouchableOpacity } from 'react-native';
+import {
+ Card,
+ Title,
+ Paragraph,
+ List,
+ PaperProvider,
+} from 'react-native-paper';
+
+const Stack = createStackNavigator();
+
+const HomeScreen = ({ navigation }) => (
+
+ navigation?.push('Details', {
+ title,
+ content,
+ })
+ }
+ >
+
+
+ {title}
+ {content}
+
+
+
+);
+
+const DetailsScreen = (props) => {
+ const { title, content } = props?.route?.params;
+ return (
+
+ {title}
+
+
+ );
+};
+
+export default function App() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+
+
+Our goal here is to combine those two themes, so that we could control the theme for the entire application from a single place.
+
+To make things easier we can use [deepmerge](https://www.npmjs.com/package/deepmerge) package. We can install it with:
+
+```bash npm2yarn
+npm install deepmerge
+```
+
+### Material Design 2
+
+```js
+import {
+ NavigationContainer,
+ DarkTheme as NavigationDarkTheme,
+ DefaultTheme as NavigationDefaultTheme,
+} from '@react-navigation/native';
+import {
+ MD2DarkTheme,
+ MD2LightTheme,
+} from 'react-native-paper';
+import merge from 'deepmerge';
+
+const CombinedDefaultTheme = merge(MD2LightTheme, NavigationDefaultTheme);
+const CombinedDarkTheme = merge(MD2DarkTheme, NavigationDarkTheme);
+```
+
+### Material Design 3
+
+```js
+import {
+ NavigationContainer,
+ DarkTheme as NavigationDarkTheme,
+ DefaultTheme as NavigationDefaultTheme,
+} from '@react-navigation/native';
+import {
+ MD3DarkTheme,
+ MD3LightTheme,
+ adaptNavigationTheme,
+} from 'react-native-paper';
+import merge from 'deepmerge';
+
+const { LightTheme, DarkTheme } = adaptNavigationTheme({
+ reactNavigationLight: NavigationDefaultTheme,
+ reactNavigationDark: NavigationDarkTheme,
+});
+
+const CombinedDefaultTheme = merge(MD3LightTheme, LightTheme);
+const CombinedDarkTheme = merge(MD3DarkTheme, DarkTheme);
+```
+
+Alternatively, we could merge those themes using vanilla JavaScript:
+
+### Material Design 2
+
+```js
+const CombinedDefaultTheme = {
+ ...MD2LightTheme,
+ ...NavigationDefaultTheme,
+ colors: {
+ ...MD2LightTheme.colors,
+ ...NavigationDefaultTheme.colors,
+ },
+};
+const CombinedDarkTheme = {
+ ...MD2DarkTheme,
+ ...NavigationDarkTheme,
+ colors: {
+ ...MD2DarkTheme.colors,
+ ...NavigationDarkTheme.colors,
+ },
+};
+```
+
+### Material Design 3
+
+```js
+const { LightTheme, DarkTheme } = adaptNavigationTheme({
+ reactNavigationLight: NavigationDefaultTheme,
+ reactNavigationDark: NavigationDarkTheme,
+});
+
+const CombinedDefaultTheme = {
+ ...MD3LightTheme,
+ ...LightTheme,
+ colors: {
+ ...MD3LightTheme.colors,
+ ...LightTheme.colors,
+ },
+};
+const CombinedDarkTheme = {
+ ...MD3DarkTheme,
+ ...DarkTheme,
+ colors: {
+ ...MD3DarkTheme.colors,
+ ...DarkTheme.colors,
+ },
+};
+```
+
+## Passing theme with Providers
+
+After combining the themes, we will be able to control theming in both libraries from a single source, which will come in handy later.
+
+Next, we need to pass merged themes into the Providers. For this part, we use the dark one - `CombinedDarkTheme`.
+
+```js
+const Stack = createStackNavigator();
+
+export default function App() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+## Customizing theme
+
+We don't need to limit ourselves to the themes offered by the libraries' default. Both packages allow for custom themes to be applied.
+You can learn all about it in their documentation:
+
+- [Theming in React Navigation](https://reactnavigation.org/docs/themes/)
+- [Theming in React Native Paper](https://callstack.github.io/react-native-paper/docs/guides/theming)
+
+## React Context for theme customization
+
+Now, we wouldn't want to stay on dark theme forever, which is why we need to gain the ability to control theme dynamically. A bit of state management is needed for this purpose.
+
+React Context proves itself very useful in handling cross-cutting concerns like global theme handling, so we will use just that.
+
+## Creating Context
+
+First, we define our Context.
+
+```js
+import React from 'react';
+
+export const PreferencesContext = React.createContext({
+ toggleTheme: () => {},
+ isThemeDark: false,
+});
+```
+
+## Using Context
+
+Context Provider should be imported also at the entry point, as we want it to wrap the whole app, for the theme values to be accessible at every component that we have.
+
+```js
+import React from 'react';
+import { PreferencesContext } from './PreferencesContext';
+
+const Stack = createStackNavigator();
+
+export default function App() {
+ const [isThemeDark, setIsThemeDark] = React.useState(false);
+
+ let theme = isThemeDark ? CombinedDarkTheme : CombinedDefaultTheme;
+
+ const toggleTheme = React.useCallback(() => {
+ return setIsThemeDark(!isThemeDark);
+ }, [isThemeDark]);
+
+ const preferences = React.useMemo(
+ () => ({
+ toggleTheme,
+ isThemeDark,
+ }),
+ [toggleTheme, isThemeDark]
+ );
+
+ return (
+ // Context is wired into the local state of our main component, so that its values could be propagated throughout the entire application
+
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+Now that the Context is available at every component, all we need to do is import it. Next, provide the user with some UI element to control changing the theme. We will use `Paper`'s [Switch](https://callstack.github.io/react-native-paper/docs/components/Switch) for this purpose.
+
+```js
+import React from 'react';
+import { useTheme, Appbar, TouchableRipple, Switch } from 'react-native-paper';
+import { PreferencesContext } from './PreferencesContext';
+
+const Header = ({ scene }) => {
+ const theme = useTheme();
+ const { toggleTheme, isThemeDark } = React.useContext(PreferencesContext);
+
+ return (
+
+
+
+
+ );
+};
+```
+
+And now you can switch between light and dark theme!
+
+
+
+Thanks to the linking of themes that we did earlier, switching themes can be controlled with only one piece of state.
+
+React Native Paper components will automatically use the provided theme thanks to the `PaperProvider` that is wrapped around the entry point of our application, but we can also access theme values manually with `useTheme` hook,
+exposed by the library. You can see how it's done in the `Header` component code above.
+
+If light/dark themes are not enough for your use case, you can learn more about creating Material Design themes [here](https://material.io/design/material-theming/implementing-your-theme.html#color).
+On `main` branch of the example app, you will find implemented [Menu](https://callstack.github.io/react-native-paper/docs/components/Menu) component, which allows you to choose a few custom themes. Inspecting code in `utils` and `Header` may give you some idea of how to use your own themes with `Paper`, in addition to dedicated [docs](https://callstack.github.io/react-native-paper/docs/components/Menu).
+
+Read more about integrating `Paper` with `React Navigation` in a brilliant [article](https://reactnavigation.org/blog/2020/01/29/using-react-navigation-5-with-react-native-paper/) by [@trensik](https://twitter.com/trensik)
diff --git a/docs/5.x/docs/guides/theming.mdx b/docs/5.x/docs/guides/theming.mdx
new file mode 100644
index 0000000000..efd6fc081e
--- /dev/null
+++ b/docs/5.x/docs/guides/theming.mdx
@@ -0,0 +1,634 @@
+---
+title: Theming
+---
+
+import DynamicColorTheme from '@site/src/components/DynamicColorTheme.tsx';
+
+# Theming
+
+:::note
+To observe changes related to switching between light and dark mode in the app, ensure that the "Override force-dark" feature in the "developer options" settings on your Android device is not overridden.
+:::
+
+## Applying a theme to the whole app
+
+To support custom themes, paper exports a `PaperProvider` component. You need to wrap your root component with the provider to be able to support themes:
+
+```js
+import * as React from 'react';
+import { PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+By default React Native Paper will apply the [Material You theme (MD3)](https://github.com/callstack/react-native-paper/blob/main/src/styles/themes/v3/LightTheme.tsx) if no `theme` or `version` prop is passed to the `PaperProvider`.
+
+## Accessing theme properties
+
+Use the built-in `useTheme()` hook to get access to the theme's variables:
+
+```js
+import * as React from 'react';
+import { useTheme } from 'react-native-paper';
+
+export default function PaymentScreen() {
+ const theme = useTheme();
+
+ return ;
+}
+```
+
+You can also use the `withTheme()` HOC exported from the library. If you wrap your component with the HOC, you'll receive the theme as a prop:
+
+```js
+import * as React from 'react';
+import { withTheme } from 'react-native-paper';
+
+function PaymentScreen({ theme }) {
+ return ;
+}
+
+export default withTheme(PaymentScreen);
+```
+
+## Theme properties
+
+You can change the theme prop dynamically and all the components will automatically update to reflect the new theme.
+
+A theme usually contains the following properties:
+
+- `dark` (`boolean`): whether this is a dark theme or light theme.
+- `version`: specify which design system components should follow in the app
+ - 3 - new Material You (MD3)
+ - 2 - previous Material Design (MD2)
+- `mode` (`'adaptive' | 'exact'`): color mode for dark theme (See [Dark Theme](#dark-theme)).
+- `roundness` (`number`): roundness of common elements, such as buttons.
+- `colors` (`object`): various colors used throughout different elements.
+
+ > The primary key color is used to derive roles for key components across the UI, such as the FAB, prominent buttons, active states, as well as the tint of elevated surfaces.
+
+ - `primary`
+ - `onPrimary`
+ - `primaryContainer`
+ - `onPrimaryContainer`
+
+ > The secondary key color is used for less prominent components in the UI such as filter chips, while expanding the opportunity for color expression.
+
+ - `secondary`
+ - `onSecondary`
+ - `secondaryContainer`
+ - `onSecondaryContainer`
+
+ > The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element.
+
+ > The tertiary color role is left for teams to use at their discretion and is intended to support broader color expression in products.
+
+ - `tertiary`
+ - `onTertiary`
+ - `tertiaryContainer`
+ - `onTertiaryContainer`
+
+ > The neutral key color is used to derive the roles of surface and background, as well as high emphasis text and icons.
+
+ - `background`
+ - `onBackground`
+ - `surface`
+ - `onSurface`
+
+ > The neutral variant key color is used to derive medium emphasis text and icons, surface variants, and component outlines.
+
+ - `surfaceVariant`
+ - `onSurfaceVariant`
+ - `outline`
+
+ > In addition to the accent and neutral key color, the color system includes a semantic color role for error
+
+ - `error`
+ - `onError`
+ - `errorContainer`
+ - `onErrorContainer`
+
+ > Surfaces at elevation levels 0-5 are tinted via color overlays based on the primary color, such as app bars or menus. The addition of a grade from 0-5 introduces tonal variation to the surface baseline.
+
+ - `elevation` (`object`)
+ - `level0` - transparent
+ - `level1` - 5% opacity
+ - `level2` - 8% opacity
+ - `level3` - 11% opacity
+ - `level4` - 12% opacity
+ - `level5` - 14% opacity
+
+ > Colors for disabled state
+
+ - `surfaceDisabled`
+ - `onSurfaceDisabled`
+
+ > These additional role mappings exist in a scheme and are mapped to components where needed.
+
+ - `shadow`
+ - `inverseOnSurface`
+ - `inverseSurface`
+ - `inversePrimary`
+ - `backdrop`
+
+- `fonts` (`object`): various fonts styling properties under the text variant key used in component.
+ - [`variant` e.g. `labelMedium`] (`object`):
+ - `fontFamily`
+ - `letterSpacing`
+ - `fontWeight`
+ - `lineHeight`
+ - `fontSize`
+- `animation` (`object`)
+ - `scale` - scale for all animations
+
+When creating a custom theme, you will need to provide all of these properties.
+
+If you don't use a custom theme, Paper will automatically turn animations on/off, depending on device settings.
+
+Otherwise, your custom theme will need to handle it manually, using React Native's [AccessibilityInfo API](https://reactnative.dev/docs/accessibilityinfo).
+
+## Extending the theme
+
+Keeping your own properties in the theme is fully supported by our library:
+
+```js
+import * as React from 'react';
+import {
+ MD3LightTheme as DefaultTheme,
+ PaperProvider,
+} from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ ...DefaultTheme,
+ // Specify custom property
+ myOwnProperty: true,
+ // Specify custom property in nested object
+ colors: {
+ ...DefaultTheme.colors,
+ myOwnColor: '#BADA55',
+ },
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+## Creating dynamic theme colors
+
+Dynamic Color Themes allows for generating two color schemes lightScheme and darkScheme, based on the provided source color.
+Created schemes are following the Material Design 3 color system and covering colors structure from the Paper theme. User may generate these schemes using the following tool:
+
+
+
+
+
+Passed source color into the util is translated into tones to automatically provide the range of tones that map to color roles.
+
+
+
+_Source: [Material You Color System](https://m3.material.io/styles/color/the-color-system/custom-colors)_
+
+### Using schemes
+
+Once we have copied the color schemes from the generated JSON above, we can use by passing it to the colors in `theme` object as below:
+
+```jsx
+import * as React from 'react';
+import {
+ MD3LightTheme as DefaultTheme,
+ PaperProvider,
+} from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ ...DefaultTheme,
+ colors: yourGeneratedLightOrDarkScheme.colors, // Copy it from the color codes scheme and then use it here
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+### Sync dynamic colors with system colors
+
+Using [`pchmn/expo-material3-theme`](https://github.com/pchmn/expo-material3-theme) library you can easily access the Material 3 system colors from Android 12+ devices and seamlessly integrate them into your dynamic theme. Any changes made by the user to the system colors will be automatically reflected in the theme.
+
+:::info
+In case of incompatible devices, the library will revert to a default theme.
+:::
+
+To get started, follow the [installation instructions](https://github.com/pchmn/expo-material3-theme#installation) and check the following code:
+
+```tsx
+import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
+import { useColorScheme } from 'react-native';
+import { MD3DarkTheme, MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+export default function Main() {
+ const colorScheme = useColorScheme();
+ const { theme } = useMaterial3Theme();
+
+ const paperTheme =
+ colorScheme === 'dark'
+ ? { ...MD3DarkTheme, colors: theme.dark }
+ : { ...MD3LightTheme, colors: theme.light };
+
+ return (
+
+
+
+ );
+}
+```
+
+## Adapting React Navigation theme
+
+The `adaptNavigationTheme` function takes an existing React Navigation theme and returns a React Navigation theme using the colors from Material Design 3. This theme can be passed to `NavigationContainer` so that React Navigation's UI elements have the same color scheme as Paper.
+
+```ts
+adaptNavigationTheme(themes);
+```
+
+:::info
+For users of `react-navigation` version `7.0.0` and above, `adaptNavigationTheme` overrides the **fonts** from the navigation theme as follows:
+
+```ts
+fonts: {
+ regular: {
+ fontFamily: materialTheme.fonts.bodyMedium.fontFamily,
+ fontWeight: materialTheme.fonts.bodyMedium.fontWeight,
+ letterSpacing: materialTheme.fonts.bodyMedium.letterSpacing,
+ },
+ medium: {
+ fontFamily: materialTheme.fonts.titleMedium.fontFamily,
+ fontWeight: materialTheme.fonts.titleMedium.fontWeight,
+ letterSpacing: materialTheme.fonts.titleMedium.letterSpacing,
+ },
+ bold: {
+ fontFamily: materialTheme.fonts.headlineSmall.fontFamily,
+ fontWeight: materialTheme.fonts.headlineSmall.fontWeight,
+ letterSpacing: materialTheme.fonts.headlineSmall.letterSpacing,
+ },
+ heavy: {
+ fontFamily: materialTheme.fonts.headlineLarge.fontFamily,
+ fontWeight: materialTheme.fonts.headlineLarge.fontWeight,
+ letterSpacing: materialTheme.fonts.headlineLarge.letterSpacing,
+ },
+}
+```
+
+:::
+
+Parameters:
+
+| NAME | TYPE |
+| ------ | ------ |
+| themes | object |
+
+Valid `themes` keys are:
+
+- `reactNavigationLight` () - React Navigation compliant light theme.
+- `reactNavigationDark` () - React Navigation compliant dark theme.
+- `materialLight` () - React Native Paper compliant light theme.
+- `materialDark` () - React Native Paper compliant dark theme.
+
+```ts
+// App.tsx
+import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import {
+ PaperProvider,
+ MD3LightTheme,
+ adaptNavigationTheme,
+} from 'react-native-paper';
+const Stack = createStackNavigator();
+const { LightTheme } = adaptNavigationTheme({
+ reactNavigationLight: DefaultTheme,
+});
+export default function App() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+## TypeScript
+
+By default, TypeScript works well whenever you change the value of the built-in theme's properties. It gets more complicated when you want to extend the theme's properties or change their types. In order to fully support TypeScript, you will need to follow the guide that fits your use-case most accurately:
+
+There are two supported ways of overriding the theme:
+
+1. Simple built-in theme overrides - when you only customize the values and
+ the whole theme schema remains the same
+2. Advanced theme overrides - when you add new properties or change the built-in schema shape
+
+:::caution
+TypeScript support for `withTheme` is currently limited to Material You (MD3) theme only.
+
+We are planning to provide a better support of handling custom theme overrides in future releases.
+:::
+
+### Simple built-in theme overrides
+
+You can provide a `theme` prop with a theme object with the same properties as the default theme:
+
+```js
+import * as React from 'react';
+import { MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ ...MD3LightTheme, // or MD3DarkTheme
+ roundness: 2,
+ colors: {
+ ...MD3LightTheme.colors,
+ primary: '#3498db',
+ secondary: '#f1c40f',
+ tertiary: '#a1b2c3',
+ },
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+### Advanced theme overrides
+
+If you need to modify the built-in theme schema by adding a new property or changing its type, you need to follow these steps:
+
+1. Pass your theme overrides to the PaperProvider component
+
+```ts
+import * as React from 'react';
+import { MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ ...MD3LightTheme,
+
+ // Specify a custom property
+ custom: 'property',
+
+ // Specify a custom property in nested object
+ colors: {
+ ...MD3LightTheme.colors,
+ brandPrimary: '#fefefe',
+ brandSecondary: 'red',
+ },
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+2. Create a typed `useAppTheme()` hook in your project
+
+```ts
+import * as React from 'react';
+import { MD3LightTheme, PaperProvider, useTheme } from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ ...MD3LightTheme,
+
+ // Specify a custom property
+ custom: 'property',
+
+ // Specify a custom property in nested object
+ colors: {
+ ...MD3LightTheme.colors,
+ brandPrimary: '#fefefe',
+ brandSecondary: 'red',
+ },
+};
+
+export type AppTheme = typeof theme;
+
+export const useAppTheme = () => useTheme();
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+3. Start using the `useAppTheme()` hook across your components in the whole app
+
+```ts
+import * as React from 'react';
+import { useAppTheme } from './App';
+
+export default function HomeScreen() {
+ const {
+ colors: { brandPrimary },
+ } = useAppTheme();
+
+ return ...;
+}
+```
+
+## Material Design 2
+
+Using Material Design 2 is fully supported in React Native Paper v5.x.
+
+### Simple setup
+
+In order to use the Material Design 2 theme you can just pass `{ version: 2 }` to the PaperProvider theme prop:
+
+```js
+import * as React from 'react';
+import { PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+Specifying `{ version: 2 }` tells React Native Paper to use the built in Material Design 2 theme, so you don't have to fully extend it on your own.
+
+### Advanced setup
+
+As with any theme, you can also specify your custom properties within the Material Design 2 theme:
+
+```js
+import * as React from 'react';
+import { MD2LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+export default function Main() {
+ const theme = {
+ ...MD2LightTheme,
+
+ // Specify a custom property
+ custom: 'property',
+
+ // Specify a custom nested property
+ colors: {
+ ...MD2LightTheme.colors,
+ primary: '#fefefe',
+ },
+ };
+
+ return (
+
+
+
+ );
+}
+```
+
+### Typescript
+
+Due to the amount of changes in the theme's schema shape it falls into the [Advanced theme overrides](#advanced-theme-overrides) category. The steps are identical as with any advanced theme, just make sure to extend the built-in `MD2LightTheme` or `MD2DarkTheme` instead of `MD3LightTheme` or `MD3DarkTheme`.
+
+The final example for Material Design 2 would look like this:
+
+```ts
+import * as React from 'react';
+import { MD2LightTheme, PaperProvider, useTheme } from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ // Extend Material Design 2 theme
+
+ ...MD2LightTheme, // or MD2DarkTheme
+
+ // Specify a custom property
+ myOwnProperty: true,
+
+ // Specify a custom nested property
+ colors: {
+ ...MD2LightTheme.colors,
+ myOwnColor: '#BADA55',
+ },
+};
+
+export type AppTheme = typeof theme;
+
+export const useAppTheme = () => useTheme();
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+
+// App.tsx
+
+export default function App() {
+ const { theme } = useAppTheme();
+
+ return ;
+}
+```
+
+### Migrating to Material You
+
+If you are migrating from Material Design 2 (4.x and lower) to Material You (5.x), please refer to our [Migration Guide](https://callstack.github.io/react-native-paper/docs/guides/migration-guide-to-5.0)
+
+## Applying a theme to a paper component
+
+If you want to change the theme for a certain component from the library, you can directly pass the `theme` prop to the component. The theme passed as the prop is merged with the theme from the `PaperProvider`:
+
+```js
+import * as React from 'react';
+import { Button } from 'react-native-paper';
+
+export default function ButtonExample() {
+ return (
+
+ );
+}
+```
+
+## Customizing all instances of a component
+
+Sometimes you want to style a component in a different way everywhere, but don't want to change the properties in the theme, so that other components are not affected. For example, say you want to change the font for all your buttons, but don't want to change `theme.fonts.labelLarge` because it affects other components.
+
+We don't have an API to do this, because you can already do it with components:
+
+```js
+import * as React from 'react';
+import { Button } from 'react-native-paper';
+
+export default function FancyButton(props) {
+ return (
+
+ );
+}
+```
+
+Now you can use your `FancyButton` component everywhere instead of using `Button` from Paper.
+
+## Dark Theme
+
+Since 3.0 we adapt dark theme to follow [Material design guidelines](https://material.io/design/color/dark-theme.html).
+In contrast to light theme, dark theme by default uses `surface` colour instead of `primary` on large components like `AppBar` or `BottomNavigation`.
+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.
+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.
+- `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.
+
+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.
+
+Otherwise, your custom theme will need to handle it manually, using React Native's [Appearance API](https://reactnative.dev/docs/appearance).
+
+## Gotchas
+
+The `PaperProvider` exposes the theme to the components via [React's context API](https://reactjs.org/docs/context.html), which means that the component must be in the same tree as the `PaperProvider`. Some React Native components will render a different tree such as a `Modal`, in which case the components inside the `Modal` won't be able to access the theme. The work around is to get the theme using the `withTheme` HOC and pass it down to the components as props, or expose it again with the exported `ThemeProvider` component.
+
+The `Modal` component from the library already handles this edge case, so you won't need to do anything.
diff --git a/docs/5.x/docs/showcase.mdx b/docs/5.x/docs/showcase.mdx
new file mode 100644
index 0000000000..7024ab018d
--- /dev/null
+++ b/docs/5.x/docs/showcase.mdx
@@ -0,0 +1,11 @@
+---
+title: Showcase
+---
+
+import Showcase from '@site/src/components/Showcase.tsx';
+
+# Who's using Paper?
+
+Check out these apps built using Paper. Send us a [pull request](https://github.com/callstack/react-native-paper/pulls) to add your app to this list.
+
+
diff --git a/docs/5.x/index.mdx b/docs/5.x/index.mdx
new file mode 100644
index 0000000000..91f12670f9
--- /dev/null
+++ b/docs/5.x/index.mdx
@@ -0,0 +1,38 @@
+---
+pageType: home
+hero:
+ name: Cross-platform Material Design for React Native
+ tagline: Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.
+ actions:
+ - text: Get started
+ link: /docs/guides/getting-started
+ theme: brand
+ - text: Try on Snack
+ link: https://snack.expo.dev/@react-native-paper/react-native-paper-example_v5
+ theme: alt
+features:
+ - title: Production-ready components
+ details: Buttons, inputs, lists, cards, menus, dialogs, navigation, and feedback patterns built for day-to-day product work.
+ icon: /react-native-paper/images/home/components.svg
+ span: 4
+ - title: Material You theming
+ details: Adopt Material 3 color, typography, elevation, and state layers with a theme system designed for real apps.
+ icon: /react-native-paper/images/home/palette.svg
+ span: 4
+ - title: Accessible by default
+ details: Common interactions, contrast, and state handling are already baked into the component surface instead of left to each screen.
+ icon: /react-native-paper/images/home/accessibility.svg
+ span: 4
+ - title: Cross-platform parity
+ details: Keep design language and component behavior aligned across iOS, Android, and React Native Web from one codebase.
+ icon: /react-native-paper/images/home/devices.svg
+ span: 4
+ - title: Dark mode support
+ details: Ship light and dark experiences with the same primitives, including adaptive surfaces and semantic color roles.
+ icon: /react-native-paper/images/home/moon.svg
+ span: 4
+ - title: Migration-friendly docs
+ details: Browse stable 5.x, preview 6.x, and legacy static docs from one version selector without splitting the docs experience.
+ icon: /react-native-paper/images/home/versions.svg
+ span: 4
+---
diff --git a/docs/6.x/_nav.json b/docs/6.x/_nav.json
new file mode 100644
index 0000000000..f7de8846cb
--- /dev/null
+++ b/docs/6.x/_nav.json
@@ -0,0 +1,17 @@
+[
+ {
+ "text": "Guides",
+ "link": "/docs/guides/getting-started",
+ "activeMatch": "^/(?:6\\.x/)?docs/guides/"
+ },
+ {
+ "text": "Components",
+ "link": "/docs/components/ActivityIndicator",
+ "activeMatch": "^/(?:6\\.x/)?docs/components/"
+ },
+ {
+ "text": "Showcase",
+ "link": "/docs/showcase",
+ "activeMatch": "^/(?:6\\.x/)?docs/showcase$"
+ }
+]
diff --git a/docs/6.x/docs/_meta.json b/docs/6.x/docs/_meta.json
new file mode 100644
index 0000000000..9e4ac38659
--- /dev/null
+++ b/docs/6.x/docs/_meta.json
@@ -0,0 +1,17 @@
+[
+ {
+ "type": "dir-section-header",
+ "name": "guides",
+ "label": "Guides"
+ },
+ {
+ "type": "dir-section-header",
+ "name": "components",
+ "label": "Components"
+ },
+ {
+ "type": "file",
+ "name": "showcase",
+ "label": "Showcase"
+ }
+]
diff --git a/docs/6.x/docs/components/ActivityIndicator.mdx b/docs/6.x/docs/components/ActivityIndicator.mdx
new file mode 100644
index 0000000000..e988042b2d
--- /dev/null
+++ b/docs/6.x/docs/components/ActivityIndicator.mdx
@@ -0,0 +1,96 @@
+---
+title: ActivityIndicator
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Activity indicator is used to present progress of some activity in the app.
+It can be used as a drop-in replacement for the ActivityIndicator shipped with React Native.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { ActivityIndicator, Palette } from 'react-native-paper';
+
+const MyComponent = () => (
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### animating
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### size
+
+
+
+
+
+
+
+### hidesWhenStopped
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Appbar/Appbar.mdx b/docs/6.x/docs/components/Appbar/Appbar.mdx
new file mode 100644
index 0000000000..157a38b7e5
--- /dev/null
+++ b/docs/6.x/docs/components/Appbar/Appbar.mdx
@@ -0,0 +1,174 @@
+---
+title: Appbar
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to display action items in a bar. It can be placed at the top or bottom.
+The top bar usually contains the screen title, controls such as navigation buttons, menu button etc.
+The bottom bar usually provides access to a drawer and up to four actions.
+
+By default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
+See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more informations
+
+
+
+
+
+
+
+## Usage
+### Top bar
+```js
+import * as React from 'react';
+import { Appbar } from 'react-native-paper';
+
+const MyComponent = () => (
+
+ {}} />
+
+ {}} />
+ {}} />
+
+);
+
+export default MyComponent;
+```
+
+### Bottom bar
+```js
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { Appbar, FAB, useTheme } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const BOTTOM_APPBAR_HEIGHT = 80;
+const MEDIUM_FAB_HEIGHT = 56;
+
+const MyComponent = () => {
+ const { bottom } = useSafeAreaInsets();
+ const theme = useTheme();
+
+ return (
+
+ {}} />
+ {}} />
+ {}} />
+ {}} />
+ {}}
+ style={[
+ styles.fab,
+ { top: (BOTTOM_APPBAR_HEIGHT - MEDIUM_FAB_HEIGHT) / 2 },
+ ]}
+ />
+
+ );
+};
+
+const styles = StyleSheet.create({
+ bottom: {
+ backgroundColor: 'aquamarine',
+ position: 'absolute',
+ left: 0,
+ right: 0,
+ bottom: 0,
+ },
+ fab: {
+ position: 'absolute',
+ right: 16,
+ },
+});
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### dark
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### elevated Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### safeAreaInsets
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Appbar/AppbarAction.mdx b/docs/6.x/docs/components/Appbar/AppbarAction.mdx
new file mode 100644
index 0000000000..67b8b3c630
--- /dev/null
+++ b/docs/6.x/docs/components/Appbar/AppbarAction.mdx
@@ -0,0 +1,134 @@
+---
+title: Appbar.Action
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component used to display an action item in the appbar.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Appbar } from 'react-native-paper';
+import { Platform } from 'react-native';
+
+const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
+
+const MyComponent = () => (
+
+
+ {}} />
+ {}} />
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+
+
+### size
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### isLeading Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### ref
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Appbar/AppbarBackAction.mdx b/docs/6.x/docs/components/Appbar/AppbarBackAction.mdx
new file mode 100644
index 0000000000..f634e011fb
--- /dev/null
+++ b/docs/6.x/docs/components/Appbar/AppbarBackAction.mdx
@@ -0,0 +1,101 @@
+---
+title: Appbar.BackAction
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component used to display a back button in the appbar.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Appbar } from 'react-native-paper';
+
+const MyComponent = () => (
+
+ {}} />
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### size
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### ref
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Appbar/AppbarContent.mdx b/docs/6.x/docs/components/Appbar/AppbarContent.mdx
new file mode 100644
index 0000000000..eae06a2960
--- /dev/null
+++ b/docs/6.x/docs/components/Appbar/AppbarContent.mdx
@@ -0,0 +1,129 @@
+---
+title: Appbar.Content
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component used to display a title in an appbar.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Appbar } from 'react-native-paper';
+
+const MyComponent = () => (
+
+
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### title (required)
+
+
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+
+
+### titleRef
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Appbar/AppbarHeader.mdx b/docs/6.x/docs/components/Appbar/AppbarHeader.mdx
new file mode 100644
index 0000000000..805e843d3a
--- /dev/null
+++ b/docs/6.x/docs/components/Appbar/AppbarHeader.mdx
@@ -0,0 +1,125 @@
+---
+title: Appbar.Header
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to use as a header at the top of the screen.
+It can contain the screen title, controls such as navigation buttons, menu button etc.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Appbar } from 'react-native-paper';
+
+const MyComponent = () => {
+ const _goBack = () => console.log('Went back');
+
+ const _handleSearch = () => console.log('Searching');
+
+ const _handleMore = () => console.log('Shown more');
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### dark
+
+
+
+
+
+
+
+### statusBarHeight
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### elevated Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Appbar/_meta.json b/docs/6.x/docs/components/Appbar/_meta.json
new file mode 100644
index 0000000000..d4243fea02
--- /dev/null
+++ b/docs/6.x/docs/components/Appbar/_meta.json
@@ -0,0 +1,7 @@
+[
+ "Appbar",
+ "AppbarAction",
+ "AppbarBackAction",
+ "AppbarContent",
+ "AppbarHeader"
+]
diff --git a/docs/6.x/docs/components/Avatar/AvatarIcon.mdx b/docs/6.x/docs/components/Avatar/AvatarIcon.mdx
new file mode 100644
index 0000000000..dd5163e2ba
--- /dev/null
+++ b/docs/6.x/docs/components/Avatar/AvatarIcon.mdx
@@ -0,0 +1,81 @@
+---
+title: Avatar.Icon
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Avatars can be used to represent people in a graphical way.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Avatar } from 'react-native-paper';
+
+const MyComponent = () => (
+
+);
+```
+
+
+ ## Props
+
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+
+
+### size
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Avatar/AvatarImage.mdx b/docs/6.x/docs/components/Avatar/AvatarImage.mdx
new file mode 100644
index 0000000000..ec6ce94574
--- /dev/null
+++ b/docs/6.x/docs/components/Avatar/AvatarImage.mdx
@@ -0,0 +1,122 @@
+---
+title: Avatar.Image
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Avatars can be used to represent people in a graphical way.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Avatar } from 'react-native-paper';
+
+const MyComponent = () => (
+
+);
+export default MyComponent
+```
+
+
+ ## Props
+
+
+
+
+
+
+### source (required)
+
+
+
+
+
+
+
+### size
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### onError
+
+
+
+
+
+
+
+### onLayout
+
+
+
+
+
+
+
+### onLoad
+
+
+
+
+
+
+
+### onLoadEnd
+
+
+
+
+
+
+
+### onLoadStart
+
+
+
+
+
+
+
+### onProgress
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Avatar/AvatarText.mdx b/docs/6.x/docs/components/Avatar/AvatarText.mdx
new file mode 100644
index 0000000000..e2820fc765
--- /dev/null
+++ b/docs/6.x/docs/components/Avatar/AvatarText.mdx
@@ -0,0 +1,97 @@
+---
+title: Avatar.Text
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Avatars can be used to represent people in a graphical way.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Avatar } from 'react-native-paper';
+
+const MyComponent = () => (
+
+);
+```
+
+
+ ## Props
+
+
+
+
+
+
+### label (required)
+
+
+
+
+
+
+
+### size
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Avatar/_meta.json b/docs/6.x/docs/components/Avatar/_meta.json
new file mode 100644
index 0000000000..b3967b8318
--- /dev/null
+++ b/docs/6.x/docs/components/Avatar/_meta.json
@@ -0,0 +1,5 @@
+[
+ "AvatarIcon",
+ "AvatarImage",
+ "AvatarText"
+]
diff --git a/docs/6.x/docs/components/Badge.mdx b/docs/6.x/docs/components/Badge.mdx
new file mode 100644
index 0000000000..fb71878bf0
--- /dev/null
+++ b/docs/6.x/docs/components/Badge.mdx
@@ -0,0 +1,96 @@
+---
+title: Badge
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Badges are small status descriptors for UI elements.
+A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Badge } from 'react-native-paper';
+
+const MyComponent = () => (
+ 3
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### visible
+
+
+
+
+
+
+
+### children
+
+
+
+
+
+
+
+### size
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### ref
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Banner.mdx b/docs/6.x/docs/components/Banner.mdx
new file mode 100644
index 0000000000..9b0f17a1c2
--- /dev/null
+++ b/docs/6.x/docs/components/Banner.mdx
@@ -0,0 +1,172 @@
+---
+title: Banner
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Banner displays a prominent message and related actions.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Image } from 'react-native';
+import { Banner } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [visible, setVisible] = React.useState(true);
+
+ return (
+ setVisible(false),
+ },
+ {
+ label: 'Learn more',
+ onPress: () => setVisible(false),
+ },
+ ]}
+ icon={({size}) => (
+
+ )}>
+ There was a problem processing a transaction on your credit card.
+
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### visible (required)
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### icon
+
+
+
+
+
+
+
+### actions
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### ref
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### onShowAnimationFinished
+
+
+
+
+
+
+
+### onHideAnimationFinished
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/BottomNavigation/BottomNavigation.mdx b/docs/6.x/docs/components/BottomNavigation/BottomNavigation.mdx
new file mode 100644
index 0000000000..ca07b34b3e
--- /dev/null
+++ b/docs/6.x/docs/components/BottomNavigation/BottomNavigation.mdx
@@ -0,0 +1,308 @@
+---
+title: BottomNavigation
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+BottomNavigation provides quick navigation between top-level views of an app with a bottom navigation bar.
+It is primarily designed for use on mobile. If you want to use the navigation bar only see [`BottomNavigation.Bar`](BottomNavigationBar).
+
+By default BottomNavigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
+See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { BottomNavigation, Text } from 'react-native-paper';
+
+const MusicRoute = () => Music;
+
+const AlbumsRoute = () => Albums;
+
+const RecentsRoute = () => Recents;
+
+const NotificationsRoute = () => Notifications;
+
+const MyComponent = () => {
+ const [index, setIndex] = React.useState(0);
+ const [routes] = React.useState([
+ { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
+ { key: 'albums', title: 'Albums', focusedIcon: 'album' },
+ { key: 'recents', title: 'Recents', focusedIcon: 'history' },
+ { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
+ ]);
+
+ const renderScene = BottomNavigation.SceneMap({
+ music: MusicRoute,
+ albums: AlbumsRoute,
+ recents: RecentsRoute,
+ notifications: NotificationsRoute,
+ });
+
+ return (
+
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/BottomNavigation/_meta.json b/docs/6.x/docs/components/BottomNavigation/_meta.json
new file mode 100644
index 0000000000..94a0b010f3
--- /dev/null
+++ b/docs/6.x/docs/components/BottomNavigation/_meta.json
@@ -0,0 +1,4 @@
+[
+ "BottomNavigation",
+ "BottomNavigationBar"
+]
diff --git a/docs/6.x/docs/components/Button/Button.mdx b/docs/6.x/docs/components/Button/Button.mdx
new file mode 100644
index 0000000000..c4719b5d8f
--- /dev/null
+++ b/docs/6.x/docs/components/Button/Button.mdx
@@ -0,0 +1,273 @@
+---
+title: Button
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A button is component that the user can press to trigger an action.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Button } from 'react-native-paper';
+
+const MyComponent = () => (
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### mode
+
+
+
+
+
+
+
+### dark
+
+
+
+
+
+
+
+### compact
+
+
+
+
+
+
+
+### buttonColor
+
+
+
+
+
+
+
+### textColor
+
+
+
+
+
+
+
+### loading
+
+
+
+
+
+
+
+### icon
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### uppercase
+
+
+
+
+
+
+
+### background
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+### accessibilityHint
+
+
+
+
+
+
+
+### accessibilityRole
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### touchableRef
+
+
+
+
+
+
+
+### ref
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Button/_meta.json b/docs/6.x/docs/components/Button/_meta.json
new file mode 100644
index 0000000000..a6d17d5990
--- /dev/null
+++ b/docs/6.x/docs/components/Button/_meta.json
@@ -0,0 +1,3 @@
+[
+ "Button"
+]
diff --git a/docs/6.x/docs/components/Card/Card.mdx b/docs/6.x/docs/components/Card/Card.mdx
new file mode 100644
index 0000000000..f505767bc8
--- /dev/null
+++ b/docs/6.x/docs/components/Card/Card.mdx
@@ -0,0 +1,172 @@
+---
+title: Card
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A card is a sheet of material that serves as an entry point to more detailed information.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Avatar, Button, Card, Text } from 'react-native-paper';
+
+const LeftContent = props =>
+
+const MyComponent = () => (
+
+
+
+ Card title
+ Card content
+
+
+
+
+
+
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### mode
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### elevation
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### accessible
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Card/CardActions.mdx b/docs/6.x/docs/components/Card/CardActions.mdx
new file mode 100644
index 0000000000..9e7dfda577
--- /dev/null
+++ b/docs/6.x/docs/components/Card/CardActions.mdx
@@ -0,0 +1,72 @@
+---
+title: Card.Actions
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show a list of actions inside a Card.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Card, Button } from 'react-native-paper';
+
+const MyComponent = () => (
+
+
+
+
+
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Card/CardContent.mdx b/docs/6.x/docs/components/Card/CardContent.mdx
new file mode 100644
index 0000000000..bffe9f4826
--- /dev/null
+++ b/docs/6.x/docs/components/Card/CardContent.mdx
@@ -0,0 +1,64 @@
+---
+title: Card.Content
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show content inside a Card.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Card, Text } from 'react-native-paper';
+
+const MyComponent = () => (
+
+
+ Card title
+ Card content
+
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Card/CardCover.mdx b/docs/6.x/docs/components/Card/CardCover.mdx
new file mode 100644
index 0000000000..dab9cedf7a
--- /dev/null
+++ b/docs/6.x/docs/components/Card/CardCover.mdx
@@ -0,0 +1,63 @@
+---
+title: Card.Cover
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show a cover image inside a Card.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Card } from 'react-native-paper';
+
+const MyComponent = () => (
+
+
+
+);
+
+export default MyComponent;
+```
+
+
+
+
+ ## Props
+ ### Image props
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Card/CardTitle.mdx b/docs/6.x/docs/components/Card/CardTitle.mdx
new file mode 100644
index 0000000000..064c0571b4
--- /dev/null
+++ b/docs/6.x/docs/components/Card/CardTitle.mdx
@@ -0,0 +1,176 @@
+---
+title: Card.Title
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show a title, subtitle and an avatar inside a Card.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Avatar, Card, IconButton } from 'react-native-paper';
+
+const MyComponent = () => (
+ }
+ right={(props) => {}} />}
+ />
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### title (required)
+
+
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+
+
+### titleNumberOfLines
+
+
+
+
+
+
+
+### titleVariant Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### subtitle
+
+
+
+
+
+
+
+### subtitleStyle
+
+
+
+
+
+
+
+### subtitleNumberOfLines
+
+
+
+
+
+
+
+### subtitleVariant Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### left
+
+
+
+
+
+
+
+### leftStyle
+
+
+
+
+
+
+
+### right
+
+
+
+
+
+
+
+### rightStyle
+
+
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### subtitleMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Card/_meta.json b/docs/6.x/docs/components/Card/_meta.json
new file mode 100644
index 0000000000..3b7edb1615
--- /dev/null
+++ b/docs/6.x/docs/components/Card/_meta.json
@@ -0,0 +1,7 @@
+[
+ "Card",
+ "CardActions",
+ "CardContent",
+ "CardCover",
+ "CardTitle"
+]
diff --git a/docs/6.x/docs/components/Checkbox/Checkbox.mdx b/docs/6.x/docs/components/Checkbox/Checkbox.mdx
new file mode 100644
index 0000000000..a3cdbbe837
--- /dev/null
+++ b/docs/6.x/docs/components/Checkbox/Checkbox.mdx
@@ -0,0 +1,124 @@
+---
+title: Checkbox
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Checkboxes allow the selection of multiple options from a set.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Checkbox } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [checked, setChecked] = React.useState(false);
+
+ return (
+ {
+ setChecked(!checked);
+ }}
+ />
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### status (required)
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### error
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Checkbox/CheckboxItem.mdx b/docs/6.x/docs/components/Checkbox/CheckboxItem.mdx
new file mode 100644
index 0000000000..284a83e5c2
--- /dev/null
+++ b/docs/6.x/docs/components/Checkbox/CheckboxItem.mdx
@@ -0,0 +1,180 @@
+---
+title: Checkbox.Item
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { Checkbox } from 'react-native-paper';
+
+const MyComponent = () => (
+
+
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### status (required)
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### label (required)
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+
+
+### background
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+
+
+### labelVariant Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### position
+
+
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Checkbox/_meta.json b/docs/6.x/docs/components/Checkbox/_meta.json
new file mode 100644
index 0000000000..69a54c00fd
--- /dev/null
+++ b/docs/6.x/docs/components/Checkbox/_meta.json
@@ -0,0 +1,4 @@
+[
+ "Checkbox",
+ "CheckboxItem"
+]
diff --git a/docs/6.x/docs/components/Chip/Chip.mdx b/docs/6.x/docs/components/Chip/Chip.mdx
new file mode 100644
index 0000000000..339f20743a
--- /dev/null
+++ b/docs/6.x/docs/components/Chip/Chip.mdx
@@ -0,0 +1,283 @@
+---
+title: Chip
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Chips are compact elements that can represent inputs, attributes, or actions.
+They can have an icon or avatar on the left, and a close button icon on the right.
+They are typically used to:
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/List/ListAccordionGroup.mdx b/docs/6.x/docs/components/List/ListAccordionGroup.mdx
new file mode 100644
index 0000000000..2f80979de1
--- /dev/null
+++ b/docs/6.x/docs/components/List/ListAccordionGroup.mdx
@@ -0,0 +1,85 @@
+---
+title: List.AccordionGroup
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+List.AccordionGroup allows to control a group of List Accordions. `id` prop for List.Accordion is required in order for group to work.
+List.AccordionGroup can be a controlled or uncontrolled component. The example shows the uncontrolled version.
+At most one Accordion can be expanded at a given time.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { List } from 'react-native-paper';
+
+const MyComponent = () => (
+
+
+
+
+
+
+
+
+
+ List.Accordion can be wrapped because implementation uses React.Context.
+
+
+
+
+
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### onAccordionPress
+
+
+
+
+
+
+
+### expandedId
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/List/ListIcon.mdx b/docs/6.x/docs/components/List/ListIcon.mdx
new file mode 100644
index 0000000000..f1cfd03031
--- /dev/null
+++ b/docs/6.x/docs/components/List/ListIcon.mdx
@@ -0,0 +1,79 @@
+---
+title: List.Icon
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show an icon in a list item.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { List, Palette } from 'react-native-paper';
+
+const MyComponent = () => (
+ <>
+
+
+
+ >
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/List/ListItem.mdx b/docs/6.x/docs/components/List/ListItem.mdx
new file mode 100644
index 0000000000..6919341e21
--- /dev/null
+++ b/docs/6.x/docs/components/List/ListItem.mdx
@@ -0,0 +1,201 @@
+---
+title: List.Item
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show tiles inside a List.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { List } from 'react-native-paper';
+
+const MyComponent = () => (
+ }
+ />
+);
+
+export default MyComponent;
+```
+
+
+
+
+ ## Props
+ ### TouchableRipple props
+
+
+
+
+
+### title (required)
+
+
+
+
+
+
+
+### description
+
+
+
+
+
+
+
+### left
+
+
+
+
+
+
+
+### right
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### ref
+
+
+
+
+
+
+
+### containerStyle
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+
+
+### descriptionStyle
+
+
+
+
+
+
+
+### titleNumberOfLines
+
+
+
+
+
+
+
+### descriptionNumberOfLines
+
+
+
+
+
+
+
+### titleEllipsizeMode
+
+
+
+
+
+
+
+### descriptionEllipsizeMode
+
+
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### descriptionMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/List/ListSection.mdx b/docs/6.x/docs/components/List/ListSection.mdx
new file mode 100644
index 0000000000..d408e665b5
--- /dev/null
+++ b/docs/6.x/docs/components/List/ListSection.mdx
@@ -0,0 +1,90 @@
+---
+title: List.Section
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component used to group list items.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { List, Palette } from 'react-native-paper';
+
+const MyComponent = () => (
+
+ Some title
+ } />
+ }
+ />
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### title
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/List/ListSubheader.mdx b/docs/6.x/docs/components/List/ListSubheader.mdx
new file mode 100644
index 0000000000..13388687f2
--- /dev/null
+++ b/docs/6.x/docs/components/List/ListSubheader.mdx
@@ -0,0 +1,63 @@
+---
+title: List.Subheader
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component used to display a header in lists.
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { List } from 'react-native-paper';
+
+const MyComponent = () => My List Title;
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/List/_meta.json b/docs/6.x/docs/components/List/_meta.json
new file mode 100644
index 0000000000..4ba864114c
--- /dev/null
+++ b/docs/6.x/docs/components/List/_meta.json
@@ -0,0 +1,8 @@
+[
+ "ListAccordion",
+ "ListAccordionGroup",
+ "ListIcon",
+ "ListItem",
+ "ListSection",
+ "ListSubheader"
+]
diff --git a/docs/6.x/docs/components/Menu/Menu.mdx b/docs/6.x/docs/components/Menu/Menu.mdx
new file mode 100644
index 0000000000..82e7c78a4d
--- /dev/null
+++ b/docs/6.x/docs/components/Menu/Menu.mdx
@@ -0,0 +1,190 @@
+---
+title: Menu
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { Button, Menu, Divider, PaperProvider } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [visible, setVisible] = React.useState(false);
+
+ const openMenu = () => setVisible(true);
+
+ const closeMenu = () => setVisible(false);
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default MyComponent;
+```
+
+### Note
+When using `Menu` within a React Native's `Modal` component, you need to wrap all
+`Modal` contents within a `PaperProvider` in order for the menu to show. This
+wrapping is not necessary if you use Paper's `Modal` instead.
+
+
+ ## Props
+
+
+
+
+
+
+### visible (required)
+
+
+
+
+
+
+
+### anchor (required)
+
+
+
+
+
+
+
+### anchorPosition
+
+
+
+
+
+
+
+### statusBarHeight
+
+
+
+
+
+
+
+### onDismiss
+
+
+
+
+
+
+
+### overlayAccessibilityLabel
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### elevation
+
+
+
+
+
+
+
+### mode
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### keyboardShouldPersistTaps
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Menu/MenuItem.mdx b/docs/6.x/docs/components/Menu/MenuItem.mdx
new file mode 100644
index 0000000000..601cb117ea
--- /dev/null
+++ b/docs/6.x/docs/components/Menu/MenuItem.mdx
@@ -0,0 +1,190 @@
+---
+title: Menu.Item
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to show a single list item inside a Menu.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { Menu } from 'react-native-paper';
+
+const MyComponent = () => (
+
+ {}} title="Redo" />
+ {}} title="Undo" />
+ {}} title="Cut" disabled />
+ {}} title="Copy" disabled />
+ {}} title="Paste" />
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### title (required)
+
+
+
+
+
+
+
+### leadingIcon Renamed from 'icon' to 'leadingIcon' in v5.x
+
+
+
+
+
+
+
+### trailingIcon Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### dense Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### background
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### containerStyle
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+### accessibilityState
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Menu/_meta.json b/docs/6.x/docs/components/Menu/_meta.json
new file mode 100644
index 0000000000..50192eb25e
--- /dev/null
+++ b/docs/6.x/docs/components/Menu/_meta.json
@@ -0,0 +1,4 @@
+[
+ "Menu",
+ "MenuItem"
+]
diff --git a/docs/6.x/docs/components/Modal.mdx b/docs/6.x/docs/components/Modal.mdx
new file mode 100644
index 0000000000..ca6bf3be99
--- /dev/null
+++ b/docs/6.x/docs/components/Modal.mdx
@@ -0,0 +1,146 @@
+---
+title: Modal
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+The Modal component is a simple way to present content above an enclosing view.
+To render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal/Portal) component.
+Note that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [visible, setVisible] = React.useState(false);
+
+ const showModal = () => setVisible(true);
+ const hideModal = () => setVisible(false);
+ const containerStyle = { backgroundColor: 'white', padding: 20 };
+
+ return (
+
+
+
+ Example Modal. Click outside this area to dismiss.
+
+
+
+
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### dismissable
+
+
+
+
+
+
+
+### dismissableBackButton
+
+
+
+
+
+
+
+### onDismiss
+
+
+
+
+
+
+
+### overlayAccessibilityLabel
+
+
+
+
+
+
+
+### visible
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### contentContainerStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Portal/Portal.mdx b/docs/6.x/docs/components/Portal/Portal.mdx
new file mode 100644
index 0000000000..fc93055908
--- /dev/null
+++ b/docs/6.x/docs/components/Portal/Portal.mdx
@@ -0,0 +1,74 @@
+---
+title: Portal
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Portal allows rendering a component at a different place in the parent tree.
+You can use it to render content which should appear above other elements, similar to `Modal`.
+It requires a [`Portal.Host`](PortalHost) component to be rendered somewhere in the parent tree.
+Note that if you're using the `Provider` component, this already includes a `Portal.Host`.
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Portal, Text } from 'react-native-paper';
+
+const MyComponent = () => (
+
+ This is rendered at a different place
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### theme (required)
+
+
+
+
+
+
+
+
+ ## More Examples
+
+ Toggle to grab more examples
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Portal/PortalHost.mdx b/docs/6.x/docs/components/Portal/PortalHost.mdx
new file mode 100644
index 0000000000..58014b36a4
--- /dev/null
+++ b/docs/6.x/docs/components/Portal/PortalHost.mdx
@@ -0,0 +1,56 @@
+---
+title: Portal.Host
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Portal host renders all of its children `Portal` elements.
+For example, you can wrap a screen in `Portal.Host` to render items above the screen.
+If you're using the `Provider` component, it already includes `Portal.Host`.
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Text } from 'react-native';
+import { Portal } from 'react-native-paper';
+
+const MyComponent = () => (
+
+ Content of the app
+
+);
+
+export default MyComponent;
+```
+
+Here any `Portal` elements under `` are rendered alongside `` and will appear above `` like a `Modal`.
+
+
+ ## Props
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Portal/_meta.json b/docs/6.x/docs/components/Portal/_meta.json
new file mode 100644
index 0000000000..6e5b7b374b
--- /dev/null
+++ b/docs/6.x/docs/components/Portal/_meta.json
@@ -0,0 +1,4 @@
+[
+ "Portal",
+ "PortalHost"
+]
diff --git a/docs/6.x/docs/components/ProgressBar.mdx b/docs/6.x/docs/components/ProgressBar.mdx
new file mode 100644
index 0000000000..bf62906571
--- /dev/null
+++ b/docs/6.x/docs/components/ProgressBar.mdx
@@ -0,0 +1,119 @@
+---
+title: ProgressBar
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Progress bar is an indicator used to present progress of some activity in the app.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { ProgressBar, Palette } from 'react-native-paper';
+
+const MyComponent = () => (
+
+);
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### animatedValue
+
+
+
+
+
+
+
+### progress
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### indeterminate
+
+
+
+
+
+
+
+### visible
+
+
+
+
+
+
+
+### fillStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/RadioButton/RadioButton.mdx b/docs/6.x/docs/components/RadioButton/RadioButton.mdx
new file mode 100644
index 0000000000..8bfd2ae2ff
--- /dev/null
+++ b/docs/6.x/docs/components/RadioButton/RadioButton.mdx
@@ -0,0 +1,123 @@
+---
+title: RadioButton
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Radio buttons allow the selection a single option from a set.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { RadioButton } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [checked, setChecked] = React.useState('first');
+
+ return (
+
+ setChecked('first')}
+ />
+ setChecked('second')}
+ />
+
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### status
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/RadioButton/RadioButtonAndroid.mdx b/docs/6.x/docs/components/RadioButton/RadioButtonAndroid.mdx
new file mode 100644
index 0000000000..d8d195ce4b
--- /dev/null
+++ b/docs/6.x/docs/components/RadioButton/RadioButtonAndroid.mdx
@@ -0,0 +1,99 @@
+---
+title: RadioButton.Android
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+
+
+
+
+
+
+Radio buttons allow the selection a single option from a set.
+This component follows platform guidelines for Android, but can be used
+on any platform.
+
+
+
+
+ ## Props
+ ### TouchableRipple props
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### status
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/RadioButton/RadioButtonGroup.mdx b/docs/6.x/docs/components/RadioButton/RadioButtonGroup.mdx
new file mode 100644
index 0000000000..af2504366d
--- /dev/null
+++ b/docs/6.x/docs/components/RadioButton/RadioButtonGroup.mdx
@@ -0,0 +1,81 @@
+---
+title: RadioButton.Group
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Radio button group allows to control a group of radio buttons.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { RadioButton, Text } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [value, setValue] = React.useState('first');
+
+ return (
+ setValue(newValue)} value={value}>
+
+ First
+
+
+
+ Second
+
+
+
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### onValueChange (required)
+
+
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/RadioButton/RadioButtonIOS.mdx b/docs/6.x/docs/components/RadioButton/RadioButtonIOS.mdx
new file mode 100644
index 0000000000..d631458aad
--- /dev/null
+++ b/docs/6.x/docs/components/RadioButton/RadioButtonIOS.mdx
@@ -0,0 +1,91 @@
+---
+title: RadioButton.IOS
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+
+
+
+
+
+
+Radio buttons allow the selection a single option from a set.
+This component follows platform guidelines for iOS, but can be used
+on any platform.
+
+
+
+
+ ## Props
+ ### TouchableRipple props
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### status
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/RadioButton/RadioButtonItem.mdx b/docs/6.x/docs/components/RadioButton/RadioButtonItem.mdx
new file mode 100644
index 0000000000..9fa04cadfa
--- /dev/null
+++ b/docs/6.x/docs/components/RadioButton/RadioButtonItem.mdx
@@ -0,0 +1,202 @@
+---
+title: RadioButton.Item
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { RadioButton } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [value, setValue] = React.useState('first');
+
+ return (
+ setValue(value)} value={value}>
+
+
+
+ );
+};
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### label (required)
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### background
+
+
+
+
+
+
+
+### onPress
+
+
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+
+
+### color
+
+
+
+
+
+
+
+### status
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+
+
+### labelVariant Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### mode
+
+
+
+
+
+
+
+### position
+
+
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/RadioButton/_meta.json b/docs/6.x/docs/components/RadioButton/_meta.json
new file mode 100644
index 0000000000..f9c20c781a
--- /dev/null
+++ b/docs/6.x/docs/components/RadioButton/_meta.json
@@ -0,0 +1,7 @@
+[
+ "RadioButton",
+ "RadioButtonAndroid",
+ "RadioButtonGroup",
+ "RadioButtonIOS",
+ "RadioButtonItem"
+]
diff --git a/docs/6.x/docs/components/Searchbar.mdx b/docs/6.x/docs/components/Searchbar.mdx
new file mode 100644
index 0000000000..1868e2a8f9
--- /dev/null
+++ b/docs/6.x/docs/components/Searchbar.mdx
@@ -0,0 +1,248 @@
+---
+title: Searchbar
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Searchbar is a simple input box where users can type search queries.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Searchbar } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [searchQuery, setSearchQuery] = React.useState('');
+
+ return (
+
+ );
+};
+
+export default MyComponent;
+
+```
+
+
+ ## Props
+
+
+
+
+
+
+### placeholder
+
+
+
+
+
+
+
+### value (required)
+
+
+
+
+
+
+
+### onChangeText
+
+
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### icon
+
+
+
+
+
+
+
+### iconColor
+
+
+
+
+
+
+
+### onIconPress
+
+
+
+
+
+
+
+### onClearIconPress
+
+
+
+
+
+
+
+### searchAccessibilityLabel
+
+
+
+
+
+
+
+### clearIcon
+
+
+
+
+
+
+
+### clearAccessibilityLabel
+
+
+
+
+
+
+
+### traileringIcon Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### traileringIconColor Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### onTraileringIconPress
+
+
+
+
+
+
+
+### traileringIconAccessibilityLabel
+
+
+
+
+
+
+
+### right Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### showDivider Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### inputStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### loading
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### ref
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/SegmentedButtons/SegmentedButtons.mdx b/docs/6.x/docs/components/SegmentedButtons/SegmentedButtons.mdx
new file mode 100644
index 0000000000..78f2f5f9e0
--- /dev/null
+++ b/docs/6.x/docs/components/SegmentedButtons/SegmentedButtons.mdx
@@ -0,0 +1,107 @@
+---
+title: SegmentedButtons
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Segmented buttons can be used to select options, switch views or sort elements.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+import { SegmentedButtons } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [value, setValue] = React.useState('');
+
+ return (
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ },
+});
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### buttons (required)
+
+
+
+
+
+
+
+### density
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/SegmentedButtons/_meta.json b/docs/6.x/docs/components/SegmentedButtons/_meta.json
new file mode 100644
index 0000000000..85b4317790
--- /dev/null
+++ b/docs/6.x/docs/components/SegmentedButtons/_meta.json
@@ -0,0 +1,3 @@
+[
+ "SegmentedButtons"
+]
diff --git a/docs/6.x/docs/components/Snackbar.mdx b/docs/6.x/docs/components/Snackbar.mdx
new file mode 100644
index 0000000000..97b6a0b062
--- /dev/null
+++ b/docs/6.x/docs/components/Snackbar.mdx
@@ -0,0 +1,218 @@
+---
+title: Snackbar
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Snackbars provide brief feedback about an operation through a message rendered at the bottom of the container in which it's wrapped.
+
+Note: To display it as a popup, regardless of the parent's position, wrap it with a `Portal` component – refer to the example in the "More Examples` section.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Button, Snackbar } from 'react-native-paper';
+
+const MyComponent = () => {
+ const [visible, setVisible] = React.useState(false);
+
+ const onToggleSnackBar = () => setVisible(!visible);
+
+ const onDismissSnackBar = () => setVisible(false);
+
+ return (
+
+
+ {
+ // Do something
+ },
+ }}>
+ Hey there! I'm a Snackbar.
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'space-between',
+ },
+});
+
+export default MyComponent;
+```
+
+
+ ## Props
+
+
+
+
+
+
+### visible (required)
+
+
+
+
+
+
+
+### action
+
+
+
+
+
+
+
+### icon Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### onIconPress
+
+
+
+
+
+
+
+### iconAccessibilityLabel Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### duration
+
+
+
+
+
+
+
+### onDismiss (required)
+
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+
+
+### wrapperStyle
+
+
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### ref
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+ ## More Examples
+
+ Toggle to grab more examples
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Surface.mdx b/docs/6.x/docs/components/Surface.mdx
new file mode 100644
index 0000000000..ff6f9b95a1
--- /dev/null
+++ b/docs/6.x/docs/components/Surface.mdx
@@ -0,0 +1,119 @@
+---
+title: Surface
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Surface is a basic container that can give depth to an element with elevation shadow.
+On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
+See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
+Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Surface, Text } from 'react-native-paper';
+import { StyleSheet } from 'react-native';
+
+const MyComponent = () => (
+
+ Surface
+
+);
+
+export default MyComponent;
+
+const styles = StyleSheet.create({
+ surface: {
+ padding: 8,
+ height: 80,
+ width: 80,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+});
+```
+
+
+ ## Props
+
+
+
+
+
+
+### children (required)
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### ref
+
+
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Switch/Switch.mdx b/docs/6.x/docs/components/Switch/Switch.mdx
new file mode 100644
index 0000000000..940864569b
--- /dev/null
+++ b/docs/6.x/docs/components/Switch/Switch.mdx
@@ -0,0 +1,125 @@
+---
+title: Switch
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Material 3 toggle between two mutually exclusive states (on / off).
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Switch } from 'react-native-paper';
+
+const Example = () => {
+ const [on, setOn] = React.useState(false);
+ return ;
+};
+```
+
+## Theming
+Customize by overriding these `theme.colors` roles:
+- `primary` / `onPrimary`: selected track + icon / selected handle
+- `primaryContainer`: selected handle on hover, press
+- `surfaceContainerHighest`: unselected track + icon
+- `outline`: unselected resting handle, unselected track outline
+- `onSurfaceVariant`: unselected handle on hover, press
+- `onSurface`: disabled track, handle, and icon fills
+- `surface`: disabled selected handle
+- `secondary`: focus indicator
+
+
+ ## Props
+
+
+
+
+
+
+### value
+
+
+
+
+
+
+
+### onValueChange
+
+
+
+
+
+
+
+### disabled
+
+
+
+
+
+
+
+### checkedIcon
+
+
+
+
+
+
+
+### uncheckedIcon
+
+
+
+
+
+
+
+### style
+
+
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+### theme
+
+
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/6.x/docs/components/Switch/_meta.json b/docs/6.x/docs/components/Switch/_meta.json
new file mode 100644
index 0000000000..3bc6b9e49c
--- /dev/null
+++ b/docs/6.x/docs/components/Switch/_meta.json
@@ -0,0 +1,3 @@
+[
+ "Switch"
+]
diff --git a/docs/6.x/docs/components/Text/Text.mdx b/docs/6.x/docs/components/Text/Text.mdx
new file mode 100644
index 0000000000..d13d455596
--- /dev/null
+++ b/docs/6.x/docs/components/Text/Text.mdx
@@ -0,0 +1,109 @@
+---
+title: Text
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Typography component showing styles complied with passed `variant` prop and supported by the type system.
+
+
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Text } from 'react-native-paper';
+
+const MyComponent = () => (
+ <>
+ Display Large
+ Display Medium
+ Display small
+
+ Headline Large
+ Headline Medium
+ Headline Small
+
+ Title Large
+ Title Medium
+ Title Small
+
+ Body Large
+ Body Medium
+ Body Small
+
+ Label Large
+ Label Medium
+ Label Small
+ >
+);
+
+export default MyComponent;
+```
+
+
+
+
+ ## Props
+ ### Text props
+
+
+
+
+
+### variant Available in v5.x with theme version 3
+
+
+
+:::info
+If any component uses Paper's `Text` component, without specified variant, then `default` variant is applied:
+
+```json
+"default": {
+ "fontFamily": "FontFamily",
+ "fontWeight": "400",
+ "letterSpacing": 0,
+},
+```
+:::
+
+#### Using `configureFonts` helper
+
+* If there is a need to create a custom font variant, prepare its config object including required all fonts properties. After that, defined `fontConfig` has to be passed under the `variant` name as `config` into the params object:
+
+```js
+import * as React from 'react';
+import { configureFonts, MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const fontConfig = {
+ customVariant: {
+ fontFamily: Platform.select({
+ web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+ ios: 'System',
+ default: 'sans-serif',
+ }),
+ fontWeight: '400',
+ letterSpacing: 0.5,
+ lineHeight: 22,
+ fontSize: 20,
+ }
+};
+
+const theme = {
+ ...MD3LightTheme,
+ fonts: configureFonts({config: fontConfig}),
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+If you're using TypeScript you will need to create a custom `Text` component which accepts your custom variants:
+
+```typescript
+import { customText } from 'react-native-paper'
+
+// Use this instead of importing `Text` from `react-native-paper`
+export const Text = customText<'customVariant'>()
+```
+
+
+* In order to override one of the available `variant`'s font properties, pass the modified `fontConfig` under specific `variant` name as `config` into the params object:
+
+```js
+import * as React from 'react';
+import { configureFonts, MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const fontConfig = {
+ bodyLarge: {
+ letterSpacing: 0.5,
+ lineHeight: 22,
+ fontSize: 20,
+ }
+};
+
+const theme = {
+ ...MD3LightTheme,
+ fonts: configureFonts({config: fontConfig}),
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+* However, if you just want to override any font property e.g. `fontFamily` or `letterSpacing` for all variants, you can pass the `fontConfig` as a `config` into the params object without specifying variant name:
+
+```js
+import * as React from 'react';
+import { configureFonts, MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const fontConfig = {
+ fontFamily: 'NotoSans'
+};
+
+const theme = {
+ ...MD3LightTheme,
+ fonts: configureFonts({config: fontConfig}),
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+
+## Variable fonts
+
+Although React Native Paper supports `fontWeight` and `fontStyle` properties, there are multiple limitations to custom
+fonts in React Native. Using custom [variable fonts](https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts)
+is especially problematic, with some platforms failing to render variants entirely. To ensure correct typography in your
+app, we suggest installing each font variant as a separate file. Below you'll find example on how to set up React Native Paper
+theme with custom fonts.
+
+Should you decide to use a variable font anyway, second example will show you how to test if the font is rendered correctly in React Native on all platforms.
+
+
+ Variable fonts examples
+
+
diff --git a/docs/6.x/docs/guides/getting-started.mdx b/docs/6.x/docs/guides/getting-started.mdx
new file mode 100644
index 0000000000..53c3c3519e
--- /dev/null
+++ b/docs/6.x/docs/guides/getting-started.mdx
@@ -0,0 +1,193 @@
+---
+title: Getting Started
+---
+
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+
+# Getting Started
+
+## Installation
+
+Open a Terminal in your project's folder and install the library:
+
+```bash npm2yarn
+npm install react-native-paper
+```
+
+React Native Paper uses [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area, [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) and [react-native-worklets](https://docs.swmansion.com/react-native-worklets/) for animations.
+
+
+
+
+```bash
+npx expo install react-native-safe-area-context react-native-reanimated react-native-worklets
+```
+
+Minimum requirements:
+
+- `react-native-reanimated` **≥ 4.3.0**
+- `react-native-worklets` **≥ 0.8.1**
+- `react-native-safe-area-context` — version compatible with your React Native toolchain.
+
+Follow the [React Native Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/).
+
+If you use Expo, you don't need to install vector icons - those are the part of the expo package. However, if you have a `babel.config.js` or `.babelrc` file, make sure that it includes `babel-preset-expo`.
+
+
+
+
+```bash npm2yarn
+npm install react-native-safe-area-context react-native-reanimated react-native-worklets
+```
+
+Minimum requirements:
+
+- `react-native-reanimated` **≥ 4.3.0**
+- `react-native-worklets` **≥ 0.8.1**
+- `react-native-safe-area-context` — version compatible with your React Native toolchain.
+
+Follow the [React Native Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/).
+
+If you're on a vanilla React Native project, you also need to install [@react-native-vector-icons/material-design-icons](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons).
+
+Specifically, the `MaterialDesignIcons` icon pack needs to be included in the project because some components use those icons internally, such as `AppBar.BackAction` on Android.
+
+```bash npm2yarn
+npm install @react-native-vector-icons/material-design-icons
+```
+
+:::note
+`@react-native-vector-icons/material-design-icons` may require some additional setup steps depending on platform. To ensure the icon font is configured correctly, please follow the upstream [installation guide](https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#setup).
+:::
+
+:::info
+If you don't want to install vector icons, you can use [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require) to opt-out.
+:::
+
+
+
+
+### Bundle size optimization
+
+To get smaller bundle size by excluding modules you don't use, you can use our optional babel plugin. The plugin automatically rewrites the import statements so that only the modules you use are imported instead of the whole library. Add `react-native-paper/babel` to the `plugins` section in your `babel.config.js` for production environment. It should look like this:
+
+```js
+module.exports = {
+ presets: ['module:metro-react-native-babel-preset'],
+ env: {
+ production: {
+ plugins: ['react-native-paper/babel'],
+ },
+ },
+};
+```
+
+If you created your project using Expo, it'll look something like this:
+
+```js
+module.exports = function (api) {
+ api.cache(true);
+ return {
+ presets: ['babel-preset-expo'],
+ env: {
+ production: {
+ plugins: ['react-native-paper/babel'],
+ },
+ },
+ };
+};
+```
+
+The plugin only works if you are importing the library using ES2015 import statements and not with `require`.
+
+:::note
+The above examples are for the latest `react-native` using Babel 7. If you have `react-native <= 0.55`, you'll have a `.babelrc` file instead of a `babel.config.js` file and the content of the file will be different.
+:::
+
+If you're using Flow for typechecking your code, you need to add the following under the `[options]` section in your `.flowconfig`:
+
+```ini
+module.file_ext=.js
+module.file_ext=.native.js
+module.file_ext=.android.js
+module.file_ext=.ios.js
+```
+
+## Usage
+
+Wrap your root component in `PaperProvider` from `react-native-paper`(if you are using versions prior to 5.8.0 you need to use `Provider`). If you have a vanilla React Native project, it's a good idea to add it in the component which is passed to `AppRegistry.registerComponent`. This will usually be in the `index.js` file. If you have an Expo project, you can do this inside the exported component in the `App.js` file.
+
+Example:
+
+```js
+import * as React from 'react';
+import { AppRegistry } from 'react-native';
+import { PaperProvider } from 'react-native-paper';
+import { name as appName } from './app.json';
+import App from './src/App';
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+
+AppRegistry.registerComponent(appName, () => Main);
+```
+
+The `PaperProvider` component provides the theme to all the components in the framework. It also acts as a portal to components which need to be rendered at the top level.
+
+If you have another provider (such as `Redux`), wrap it outside `PaperProvider` so that the context is available to components rendered inside a `Modal` from the library:
+
+```js
+import * as React from 'react';
+import { PaperProvider } from 'react-native-paper';
+import { Provider as StoreProvider } from 'react-redux';
+import App from './src/App';
+import store from './store';
+
+export default function Main() {
+ return (
+
+
+
+
+
+ );
+}
+```
+
+## Customization
+
+You can provide a custom theme to customize the colors, typescales etc. with the `Provider` component. Check the [Material Design 3 default theme](https://github.com/callstack/react-native-paper/blob/main/src/styles/themes/v3/LightTheme.tsx) to see what customization options are supported.
+
+Example:
+
+```js
+import * as React from 'react';
+import {
+ MD3LightTheme as DefaultTheme,
+ PaperProvider,
+} from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ ...DefaultTheme,
+ colors: {
+ ...DefaultTheme.colors,
+ primary: 'tomato',
+ secondary: 'yellow',
+ },
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
diff --git a/docs/6.x/docs/guides/icons.mdx b/docs/6.x/docs/guides/icons.mdx
new file mode 100644
index 0000000000..4584b28122
--- /dev/null
+++ b/docs/6.x/docs/guides/icons.mdx
@@ -0,0 +1,169 @@
+---
+title: Icons
+---
+
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+import IconsList from '@site/src/components/IconsList.tsx';
+
+# Icons
+
+## Configuring icons
+
+Many of the components render icon names using [`@react-native-vector-icons/material-design-icons`](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons). In Expo projects this usually works without extra setup. In vanilla React Native projects, install the package and complete any required platform setup as described in the [getting started guide](./getting-started).
+
+:::note
+If you opted out of vector icons support using [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require), you won't be able to use icon names for the icon prop. Some components may not look correct without vector icons and might need extra configuration.
+:::
+
+## Using the `icon` prop
+
+Many components such as `Button` accept an `icon` prop which is used to display an icon. The `icon` prop supports the following types of values:
+
+### 1. An icon name
+
+You can pass the name of an icon from [`MaterialDesignIcons`](https://pictogrammers.com/library/mdi/). This will use the [`@react-native-vector-icons/material-design-icons`](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons) library to display the icon.
+
+Example:
+
+```js
+
+```
+
+:::note
+Choose the correct tab below based on your `react-native-vector-icons` version:
+
+- Use **latest** tab if you're using the latest version of `@react-native-vector-icons/material-design-icons`
+- Use **10.x** tab if you're still using the old single package `react-native-vector-icons`, version `10.x`
+
+If you are using `@expo/vector-icons`, please check their [searchable list of icons](https://icons.expo.fyi/).
+:::
+
+
+
+
+ See the list of supported icons
+
+
+
+
+
+ See the list of supported icons
+
+
+
+
+
+### 2. An image source
+
+You can pass an image source, such as an object of shape `{ uri: 'https://path.to' }` or a local image: `require('../path/to/image.png')` to use as an icon. The image might be rendered with a different color than the one provided depending on the component. If don't want this behavior, see the next example to pass an `Image` element.
+
+Remote image:
+
+```js
+
+```
+
+Local image:
+
+```js
+
+```
+
+### 3. A render function
+
+You can pass a function which returns a react element to be used an icon. The function receives an object with `size` and `color` properties as its arguments. The element is used as is without any modification. However, it might get clipped if the provided element's size is bigger than what the component renders. It's up to you to make sure that the size of the element is correct.
+
+Example:
+
+```js
+
+```
+
+### 4. Use custom icons
+
+If you want to use icons other than `MaterialDesignIcons` you need to import the icons and pass it to the `settings` prop within `PaperProvider`.
+
+Example:
+
+```js
+import AwesomeIcon from '@react-native-vector-icons/fontawesome';
+// ...
+
+,
+ }}
+ theme={this.state.theme}
+>
+ // ...
+;
+```
+
+## RTL support
+
+If you want your icon to behave properly in a RTL environment, you can pass an object to the `icon` prop with shape: `{ source: { uri: 'https://path.to' }, direction : 'rtl' }`. `source` can be any of the values that the `icon` prop accepts in [option 1](#1.-an-icon-name) and [option 2](#2.-an-image-source). For `direction` you have a few options:
+
+1. `auto` - uses the device language to determine if icon should be displayed from rtl. Uses the `I18nManager` module to get this info.
+2. `rtl` - flips the icon so that it is rtl, this is regardless of the device language.
+3. `ltr` - displays from ltr, even if in an rtl environment.
+
+Example for using an image source:
+
+```js
+
+```
+
+Example for using an icon name:
+
+```js
+
+```
+
+You can also use a render function. Along with `size` and `color`, you have access to `direction` which will either be `'rtl'` or `'ltr'`. You can then decide how to render your icon component accordingly.
+
+Example of using a render function:
+
+```js
+
+```
diff --git a/docs/6.x/docs/guides/migration.md b/docs/6.x/docs/guides/migration.md
new file mode 100644
index 0000000000..1fcd32bd25
--- /dev/null
+++ b/docs/6.x/docs/guides/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)
+
+
+
+// After (v6)
+
+
+```
+
+#### Adornments
+
+- **`left` / `right`** → **`startAccessory` / `endAccessory`**
+- **`TextInput.Affix`** → **`prefix` / `suffix`**, or **`TextInput.Icon`**, or **`startAccessory` / `endAccessory`**
+
+```tsx
+// Before (v5)
+}
+ right={}
+/>
+
+// After (v6)
+}
+ endAccessory={(p) => }
+ maxLength={100}
+ prefix="$"
+ suffix="/100"
+ counter
+/>
+```
+
+#### Label and supporting text
+
+- **`label: React.Element | string`** → **`string`**
+- **`HelperText`** was removed; use **`supportingText`**.
+
+```tsx
+// Before (v5)
+<>
+
+
+ Enter a valid email
+
+>
+
+// After (v6)
+
+```
+
+#### 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)
+
+
+// After (v6)
+
+```
diff --git a/docs/6.x/docs/guides/react-native-web.md b/docs/6.x/docs/guides/react-native-web.md
new file mode 100644
index 0000000000..3cf441cdc3
--- /dev/null
+++ b/docs/6.x/docs/guides/react-native-web.md
@@ -0,0 +1,42 @@
+---
+title: Using on the Web
+---
+
+# Using on the Web
+
+React Native Paper supports web via [React Native for Web](https://necolas.github.io/react-native-web/), which lets you run React Native components in a browser using React DOM.
+
+Before continuing, make sure you have React Native Paper installed and configured by following the [Getting Started guide](getting-started).
+
+## Setting up web support with Expo
+
+The recommended way to run React Native Paper on the web is with Expo, which has built-in web support via React Native for Web. Install the required dependencies:
+
+```bash
+npx expo install react-dom react-native-web @expo/metro-runtime
+```
+
+Then start the web server:
+
+```bash
+npx expo start --web
+```
+
+No additional bundler configuration is required. See the [Expo Web docs](https://docs.expo.dev/workflow/web/) for details on how Expo configures React Native for Web under the hood.
+
+## Without Expo
+
+If you're not using Expo, follow the [React Native for Web setup guide](https://necolas.github.io/react-native-web/docs/setup/) to configure your bundler. The setup covers aliasing `react-native` to `react-native-web` in webpack, Babel, and Jest.
+
+You will also need to manually load the Material Design icon font used by Paper. Add the following to your HTML shell or inject it at the root of your app:
+
+```css
+@font-face {
+ font-family: 'MaterialDesignIcons';
+ src: url('~@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf') format('truetype');
+}
+```
+
+## Load the Roboto font (optional)
+
+The default Paper theme uses the Roboto typeface. With Expo, use the [`@expo-google-fonts/roboto`](https://github.com/expo/google-fonts/tree/master/font-packages/roboto) package. For other setups, follow the instructions on the [Roboto specimen page](https://fonts.google.com/specimen/Roboto).
diff --git a/docs/6.x/docs/guides/react-navigation.md b/docs/6.x/docs/guides/react-navigation.md
new file mode 100644
index 0000000000..5ea5d556fa
--- /dev/null
+++ b/docs/6.x/docs/guides/react-navigation.md
@@ -0,0 +1,281 @@
+---
+title: Integrate AppBar with React Navigation
+---
+
+# Integrate AppBar with react-navigation
+
+## Prerequisites
+
+ - `react-native-paper`
+ - `react-navigation`
+
+We assume that you have already installed the mentioned libraries above, otherwise please check out the guides below.
+
+ [React Native Paper - Getting Started](https://callstack.github.io/react-native-paper/docs/guides/getting-started)
+
+ [React Navigation - Getting Started](https://reactnavigation.org/docs/getting-started/)
+
+## Stack Navigator
+
+We will start with `react-navigation` by creating a basic navigation stack. Stack navigator gives us a possibility of transition between screens in our app and manage navigation's history. In a simple scenario where there is only one stack navigator present in the app, it resembles a navigation state in a browser.
+Screens are pushed and popped from the stack while the user navigates to a new screen or go back to the previous one.
+
+Let's create two screens. A main screen named `Home` and details screen named `Details`.
+
+```js
+import 'react-native-gesture-handler';
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+ return (
+
+
+
+
+
+
+ );
+}
+```
+
+At the moment our navigation stack contains two screens and will render `HomeScreen` or `DetailsScreen` components according to the current navigation state. We have not implemented those components yet, so let's do this now:
+
+```js
+import React from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
+
+function HomeScreen() {
+ return (
+
+ Home Screen
+
+ );
+}
+
+function DetailsScreen() {
+ return (
+
+ Details Screen
+
+ );
+}
+
+const style = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+});
+```
+
+Once we have finished implementing the components, we can run the app and check how Stack looks like.
+
+
+
+To navigate from `HomeScreen` to `DetailsScreen` we can use the navigation object provided by `Stack.Screen` component. Every component rendered by `Stack.Screen` has an access to the navigation object via props. Let's modify our `HomeScreen` component:
+
+```js
+import { Button } from 'react-native-paper';
+
+function HomeScreen({ navigation }) {
+ return (
+
+ Home Screen
+
+
+ );
+}
+
+const style = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+});
+```
+
+Our result:
+
+
+
+As you can see, we can already navigate between two screens. In the next steps, we will show you how to use Paper's `AppBar` instead of the default header.
+
+### Adding `AppBar`
+
+We can customize Stack's header by passing custom component:
+
+```js
+export default function App() {
+ return (
+
+ ,
+ }}>
+
+
+
+
+ );
+}
+```
+
+Now we will implement `CustomNavigationBar` using `AppBar` component:
+
+```js
+import { Appbar } from 'react-native-paper';
+
+export default function CustomNavigationBar() {
+ return (
+
+
+
+ );
+}
+```
+
+Current implementation of the `CustomNavigationBar` is simple - we just render a title inside of it, however it's hardcoded "My awesome app" text, so let's adjust it.
+To automatically get the correct `title` for the screen, we're going to take the advantage of `getHeaderTitle` helper available in `@react-navigation/elements` in the following way:
+
+```js
+import { Appbar } from 'react-native-paper';
+import { getHeaderTitle } from '@react-navigation/elements';
+
+export default function CustomNavigationBar({ route, options }) {
+ const title = getHeaderTitle(options, route.name);
+
+ return (
+
+
+
+ );
+}
+```
+
+You may notice there is no way to go back to the previous screen, because the back button is not visible in the header. Let's add it now and let's make sure it's visible on all Stack's screens except `Home` screen.
+
+In order to achieve it, we firstly check, if the navigation bar receives a `back` prop. If it has, it means there is another screen on the stack beneath the current screen and we should render the back arrow button in such a case.
+
+```js
+import { Appbar } from 'react-native-paper';
+import { getHeaderTitle } from '@react-navigation/elements';
+
+export default function CustomNavigationBar({ navigation, route, options, back }) {
+ const title = getHeaderTitle(options, route.name);
+
+ return (
+
+ {back ? : null}
+
+
+ );
+}
+```
+
+
+
+### Adding more items to `Appbar`
+
+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
+
+:::note
+To have properly working `Menu` component, remember to wrap your root component with the `PaperProvider`:
+
+```js
+import { PaperProvider } from 'react-native-paper';
+
+// ...
+
+
+
+ ,
+ }}>
+
+
+
+
+
+```
+:::
+
+We also want the menu to appear only on `HomeScreen`, which means we will render it conditionally based on the `back` prop.
+
+```js
+import React from 'react';
+import { Appbar, Menu } from 'react-native-paper';
+import { getHeaderTitle } from '@react-navigation/elements';
+
+export default function CustomNavigationBar({
+ navigation,
+ route,
+ options,
+ back,
+}) {
+ const [visible, setVisible] = React.useState(false);
+ const openMenu = () => setVisible(true);
+ const closeMenu = () => setVisible(false);
+
+ const title = getHeaderTitle(options, route.name);
+
+ return (
+
+ {back ? : null}
+
+ {!back ? (
+
+ }>
+ {
+ console.log('Option 1 was pressed');
+ }}
+ title="Option 1"
+ />
+ {
+ console.log('Option 2 was pressed');
+ }}
+ title="Option 2"
+ />
+ {
+ console.log('Option 3 was pressed');
+ }}
+ title="Option 3"
+ disabled
+ />
+
+ ) : null}
+
+ );
+}
+```
+
+Final result:
+
+
+
+That's all we need! We have app bar that contains everything we need to navigate through screens and access an additional menu on the main screen. As you can see, with Material design `Appbar` provided by `react-native-paper` used together with `react-navigation` we can easily create an app that looks and works great.
+
+Grab the Expo [snack](https://snack.expo.dev/@react-native-paper/integrate-appbar-with-react-navigation) if you want to check the whole code!
diff --git a/docs/6.x/docs/guides/recommended-libraries.md b/docs/6.x/docs/guides/recommended-libraries.md
new file mode 100644
index 0000000000..7be319cedf
--- /dev/null
+++ b/docs/6.x/docs/guides/recommended-libraries.md
@@ -0,0 +1,36 @@
+---
+title: Recommended Libraries
+---
+
+# Recommended Libraries
+
+Our mission is to provide a full suite of well-integrated components built with Material Design in mind. However, many components already have better well maintained implementations.
+
+Here are some of the libraries we recommend:
+
+## Tabs
+
+[react-native-community/react-native-tab-view](https://github.com/react-native-community/react-native-tab-view)
+Material Design themed [swipeable tabs](https://material.io/design/components/tabs.html), maintained by [@satya164](https://twitter.com/satya164) and [@mosdnk](https://twitter.com/mosdnk).
+
+[react-native-paper-tabs](https://github.com/web-ridge/react-native-paper-tabs)
+Material Design themed [swipeable tabs](https://material.io/design/components/tabs.html) for React Native Paper, maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
+
+## Bottom sheet
+
+[osdnk/reanimated-bottom-sheet](https://github.com/osdnk/react-native-reanimated-bottom-sheet)
+An implementation of the [bottom sheet behaviour](https://material.io/design/components/sheets-bottom.html), maintained by [@mosdnk](https://twitter.com/mosdnk).
+
+[gorhom/react-native-bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet)
+An implementation of the [bottom sheet behaviour](https://material.io/design/components/sheets-bottom.html), maintained by [@Gorhom](https://twitter.com/Gorhom).
+
+
+## Date Picker
+[web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)
+Material Design themed [date picker](https://material.io/components/date-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
+
+[react-native-community/react-native-datetimepicker](https://github.com/react-native-community/react-native-datetimepicker)
+
+## Time Picker
+[web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)
+Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
diff --git a/docs/6.x/docs/guides/ripple-effect.md b/docs/6.x/docs/guides/ripple-effect.md
new file mode 100644
index 0000000000..31845060d7
--- /dev/null
+++ b/docs/6.x/docs/guides/ripple-effect.md
@@ -0,0 +1,45 @@
+---
+title: Ripple effect
+---
+
+The ripple effect is a visual feedback that occurs when a user interacts with a pressable UI element, such as a button. This response takes the form of a circular ripple expanding from the point of contact, much like a drop falling into water and creating ripples.
+
+The ripple effect is an essential aspect of Material Design, and Paper's pressable components have it enabled by default. Nonetheless, it can be tailored to suit specific needs.
+
+:::note
+The ripple effect on the iOS platform is replaced by a highlight effect.
+:::
+
+## Customize ripple effect color in component
+
+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
+
+```
+
+## Disable ripple effect in all components
+
+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';
+// ...
+
+
+ // ...
+
+```
+
+
+
diff --git a/docs/6.x/docs/guides/rtl.md b/docs/6.x/docs/guides/rtl.md
new file mode 100644
index 0000000000..796ec3595c
--- /dev/null
+++ b/docs/6.x/docs/guides/rtl.md
@@ -0,0 +1,82 @@
+---
+title: RTL Support
+---
+
+# RTL Support
+
+React Native Paper supports right-to-left (RTL) layouts for languages such as Arabic and Hebrew.
+
+## How it works
+
+By default, React Native Paper reads the writing direction from `I18nManager.getConstants().isRTL` on native platforms. So it will use your existing RTL setup on initial render.
+
+See [I18nManager](http://reactnative.dev/docs/i18nmanager) docs and [Enabling RTL support in Expo](https://docs.expo.dev/guides/localization/#enabling-rtl-support) to configure your app properly.
+
+On the Web, the RTL value is not set globally, unlike native platforms. `I18nManager.getConstants().isRTL` is a no-op on [React Native Web](https://necolas.github.io/react-native-web/). To enable RTL globally, you can specify `dir` attribute on the `html` element:
+
+```html
+
+
+
+```
+
+Then, let `react-native-paper` know about it by using the `direction` prop on `PaperProvider` or the `LocaleProvider` component to match the writing direction in your app.
+
+:::note
+The `direction` prop informs React Native Paper about the text direction in the app i.e. it doesn't change the text direction by itself. If you intend to support RTL languages, it's important to set this prop to the correct value that's configured in the app. If it doesn't match the actual text direction, the layout might be incorrect.
+:::
+
+## Setting direction for the whole app
+
+Pass the `direction` prop to `PaperProvider`. Defaults to `'rtl'` when `I18nManager.getConstants().isRTL` returns `true`, otherwise `'ltr'`.
+
+Supported values:
+
+- `'ltr'`: Left-to-right text direction for languages like English, French etc.
+- `'rtl'`: Right-to-left text direction for languages like Arabic, Hebrew etc.
+
+```js
+import * as React from 'react';
+import { PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+## Overriding direction for a subtree
+
+Use `LocaleProvider` to override the direction for a specific part of the tree without affecting the rest of the app:
+
+```js
+import * as React from 'react';
+import { LocaleProvider } from 'react-native-paper';
+
+export default function ArabicSection() {
+ return (
+
+ {/* Components here will use RTL layout */}
+
+ );
+}
+```
+
+## Reading the current direction
+
+The direction is available in your own components via the `useLocale` hook:
+
+```js
+import * as React from 'react';
+import { useLocale } from 'react-native-paper';
+
+function MyComponent() {
+ const { direction } = useLocale();
+
+ // Use the direction
+}
+```
diff --git a/docs/6.x/docs/guides/theming-with-react-navigation.md b/docs/6.x/docs/guides/theming-with-react-navigation.md
new file mode 100644
index 0000000000..d328e60920
--- /dev/null
+++ b/docs/6.x/docs/guides/theming-with-react-navigation.md
@@ -0,0 +1,300 @@
+---
+title: Theming with React Navigation
+---
+
+# Theming with React Navigation
+
+In this guide, we will look into how to apply theming for an application using React Native Paper and React Navigation at the same time.
+
+Offering different theme options, especially dark/light ones, has become increasingly a standard requirement of the modern mobile application. Fortunately, both React Navigation and React Native Paper support configurable theming out-of-the-box.
+But how to make them work together?
+
+## Themes adaptation
+
+### Material Design 3
+
+React Native Paper follows the Material Design 3 (Material You) color system, which differs from React Navigation’s default theme shape.
+
+However, to simplify adapting React Navigation theme colors, to use the ones from React Native Paper, it's worth using a utility called `adaptNavigationTheme` – it accepts navigation-compliant themes in both modes and returns their equivalents adjusted to Material Design 3.
+
+```ts
+import {
+ DarkTheme as NavigationDarkTheme,
+ DefaultTheme as NavigationDefaultTheme,
+} from '@react-navigation/native';
+import { adaptNavigationTheme } from 'react-native-paper';
+
+const { LightTheme, DarkTheme } = adaptNavigationTheme({
+ reactNavigationLight: NavigationDefaultTheme,
+ reactNavigationDark: NavigationDarkTheme,
+});
+```
+
+Library exports also Material Design 3 themes in both modes:
+
+```js
+import {
+ MD3LightTheme,
+ MD3DarkTheme,
+} from 'react-native-paper';
+```
+
+## Combining theme objects
+
+Both libraries require a wrapper to be used at the entry point of the application.
+React Navigation exposes `NavigationContainer`, which ensures that navigation works correctly and accepts `theme` as an optional property. Read more about setting up navigation [here](https://reactnavigation.org/docs/getting-started/).
+For React Native Paper theme to work, we need to use `PaperProvider` also at the application's entry point.
+
+```js
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { TouchableOpacity } from 'react-native';
+import {
+ Card,
+ Text,
+ List,
+ PaperProvider,
+} from 'react-native-paper';
+
+const Stack = createNativeStackNavigator();
+
+const HomeScreen = ({ navigation }) => (
+
+ navigation?.push('Details', {
+ title,
+ content,
+ })
+ }
+ >
+
+
+ {title}
+ {content}
+
+
+
+);
+
+const DetailsScreen = (props) => {
+ const { title, content } = props?.route?.params;
+ return (
+
+ {title}
+
+
+ );
+};
+
+export default function App() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+
+
+Our goal here is to combine those two themes, so that we could control the theme for the entire application from a single place.
+
+To make things easier we can use [deepmerge](https://www.npmjs.com/package/deepmerge) package. We can install it with:
+
+```bash npm2yarn
+npm install deepmerge
+```
+
+### Material Design 3
+
+```js
+import {
+ NavigationContainer,
+ DarkTheme as NavigationDarkTheme,
+ DefaultTheme as NavigationDefaultTheme,
+} from '@react-navigation/native';
+import {
+ MD3DarkTheme,
+ MD3LightTheme,
+ adaptNavigationTheme,
+} from 'react-native-paper';
+import merge from 'deepmerge';
+
+const { LightTheme, DarkTheme } = adaptNavigationTheme({
+ reactNavigationLight: NavigationDefaultTheme,
+ reactNavigationDark: NavigationDarkTheme,
+});
+
+const CombinedDefaultTheme = merge(MD3LightTheme, LightTheme);
+const CombinedDarkTheme = merge(MD3DarkTheme, DarkTheme);
+```
+
+Alternatively, we could merge those themes using vanilla JavaScript:
+
+### Material Design 3
+
+```js
+const { LightTheme, DarkTheme } = adaptNavigationTheme({
+ reactNavigationLight: NavigationDefaultTheme,
+ reactNavigationDark: NavigationDarkTheme,
+});
+
+const CombinedDefaultTheme = {
+ ...MD3LightTheme,
+ ...LightTheme,
+ colors: {
+ ...MD3LightTheme.colors,
+ ...LightTheme.colors,
+ },
+};
+const CombinedDarkTheme = {
+ ...MD3DarkTheme,
+ ...DarkTheme,
+ colors: {
+ ...MD3DarkTheme.colors,
+ ...DarkTheme.colors,
+ },
+};
+```
+
+## Passing theme with Providers
+
+After combining the themes, we will be able to control theming in both libraries from a single source, which will come in handy later.
+
+Next, we need to pass merged themes into the Providers. For this part, we use the dark one - `CombinedDarkTheme`.
+
+```js
+const Stack = createStackNavigator();
+
+export default function App() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+## Customizing theme
+
+We don't need to limit ourselves to the themes offered by the libraries' default. Both packages allow for custom themes to be applied.
+You can learn all about it in their documentation:
+
+- [Theming in React Navigation](https://reactnavigation.org/docs/themes/)
+- [Theming in React Native Paper](https://callstack.github.io/react-native-paper/docs/guides/theming)
+
+## React Context for theme customization
+
+Now, we wouldn't want to stay on dark theme forever, which is why we need to gain the ability to control theme dynamically. A bit of state management is needed for this purpose.
+
+React Context proves itself very useful in handling cross-cutting concerns like global theme handling, so we will use just that.
+
+## Creating Context
+
+First, we define our Context.
+
+```js
+import React from 'react';
+
+export const PreferencesContext = React.createContext({
+ toggleTheme: () => {},
+ isThemeDark: false,
+});
+```
+
+## Using Context
+
+Context Provider should be imported also at the entry point, as we want it to wrap the whole app, for the theme values to be accessible at every component that we have.
+
+```js
+import React from 'react';
+import { PreferencesContext } from './PreferencesContext';
+
+const Stack = createStackNavigator();
+
+export default function App() {
+ const [isThemeDark, setIsThemeDark] = React.useState(false);
+
+ let theme = isThemeDark ? CombinedDarkTheme : CombinedDefaultTheme;
+
+ const toggleTheme = React.useCallback(() => {
+ return setIsThemeDark(!isThemeDark);
+ }, [isThemeDark]);
+
+ const preferences = React.useMemo(
+ () => ({
+ toggleTheme,
+ isThemeDark,
+ }),
+ [toggleTheme, isThemeDark]
+ );
+
+ return (
+ // Context is wired into the local state of our main component, so that its values could be propagated throughout the entire application
+
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+Now that the Context is available at every component, all we need to do is import it. Next, provide the user with some UI element to control changing the theme. We will use `Paper`'s [Switch](https://callstack.github.io/react-native-paper/docs/components/Switch) for this purpose.
+
+```js
+import React from 'react';
+import { useTheme, Appbar, TouchableRipple, Switch } from 'react-native-paper';
+import { PreferencesContext } from './PreferencesContext';
+
+const Header = ({ scene }) => {
+ const theme = useTheme();
+ const { toggleTheme, isThemeDark } = React.useContext(PreferencesContext);
+
+ return (
+
+
+
+
+ );
+};
+```
+
+And now you can switch between light and dark theme!
+
+
+
+Thanks to the linking of themes that we did earlier, switching themes can be controlled with only one piece of state.
+
+React Native Paper components will automatically use the provided theme thanks to the `PaperProvider` that is wrapped around the entry point of our application, but we can also access theme values manually with `useTheme` hook,
+exposed by the library. You can see how it's done in the `Header` component code above.
+
+If light/dark themes are not enough for your use case, you can learn more about creating Material Design themes [here](https://material.io/design/material-theming/implementing-your-theme.html#color).
+On `main` branch of the example app, you will find implemented [Menu](https://callstack.github.io/react-native-paper/docs/components/Menu) component, which allows you to choose a few custom themes. Inspecting code in `utils` and `Header` may give you some idea of how to use your own themes with `Paper`, in addition to dedicated [docs](https://callstack.github.io/react-native-paper/docs/components/Menu).
+
+Read more about integrating `Paper` with `React Navigation` in a brilliant [article](https://reactnavigation.org/blog/2020/01/29/using-react-navigation-5-with-react-native-paper/) by [@trensik](https://twitter.com/trensik)
diff --git a/docs/6.x/docs/guides/theming.mdx b/docs/6.x/docs/guides/theming.mdx
new file mode 100644
index 0000000000..d121717c26
--- /dev/null
+++ b/docs/6.x/docs/guides/theming.mdx
@@ -0,0 +1,528 @@
+---
+title: Theming
+---
+
+import DynamicColorTheme from '@site/src/components/DynamicColorTheme.tsx';
+
+# Theming
+
+:::note
+To observe changes related to switching between light and dark mode in the app, ensure that the "Override force-dark" feature in the "developer options" settings on your Android device is not overridden.
+:::
+
+## Applying a theme to the whole app
+
+To support custom themes, paper exports a `PaperProvider` component. You need to wrap your root component with the provider to be able to support themes:
+
+```js
+import * as React from 'react';
+import { PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+By default React Native Paper will apply the [Material You theme (MD3)](https://github.com/callstack/react-native-paper/blob/main/src/styles/themes/v3/LightTheme.tsx) if no `theme` or `version` prop is passed to the `PaperProvider`.
+
+## Accessing theme properties
+
+Use the built-in `useTheme()` hook to get access to the theme's variables:
+
+```js
+import * as React from 'react';
+import { useTheme } from 'react-native-paper';
+
+export default function PaymentScreen() {
+ const theme = useTheme();
+
+ return ;
+}
+```
+
+You can also use the `withTheme()` HOC exported from the library. If you wrap your component with the HOC, you'll receive the theme as a prop:
+
+```js
+import * as React from 'react';
+import { withTheme } from 'react-native-paper';
+
+function PaymentScreen({ theme }) {
+ return ;
+}
+
+export default withTheme(PaymentScreen);
+```
+
+## Theme properties
+
+You can change the theme prop dynamically and all the components will automatically update to reflect the new theme.
+
+A theme usually contains the following properties:
+
+- `dark` (`boolean`): whether this is a dark theme or light theme.
+- `version`: Material You (MD3); kept for compatibility and normalized to `3` by `PaperProvider`
+- `mode` (`'adaptive' | 'exact'`): color mode for dark theme (See [Dark Theme](#dark-theme)).
+- `roundness` (`number`): roundness of common elements, such as buttons.
+- `colors` (`object`): various colors used throughout different elements.
+
+ > The primary key color is used to derive roles for key components across the UI, such as the FAB, prominent buttons, active states, as well as the tint of elevated surfaces.
+
+ - `primary`
+ - `onPrimary`
+ - `primaryContainer`
+ - `onPrimaryContainer`
+
+ > The secondary key color is used for less prominent components in the UI such as filter chips, while expanding the opportunity for color expression.
+
+ - `secondary`
+ - `onSecondary`
+ - `secondaryContainer`
+ - `onSecondaryContainer`
+
+ > The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element.
+
+ > The tertiary color role is left for teams to use at their discretion and is intended to support broader color expression in products.
+
+ - `tertiary`
+ - `onTertiary`
+ - `tertiaryContainer`
+ - `onTertiaryContainer`
+
+ > The neutral key color is used to derive the roles of surface and background, as well as high emphasis text and icons.
+
+ - `background`
+ - `onBackground`
+ - `surface`
+ - `onSurface`
+
+ > The neutral variant key color is used to derive medium emphasis text and icons, surface variants, and component outlines.
+
+ - `surfaceVariant`
+ - `onSurfaceVariant`
+ - `outline`
+
+ > In addition to the accent and neutral key color, the color system includes a semantic color role for error
+
+ - `error`
+ - `onError`
+ - `errorContainer`
+ - `onErrorContainer`
+
+ > Surfaces at elevation levels 0-5 are tinted via color overlays based on the primary color, such as app bars or menus. The addition of a grade from 0-5 introduces tonal variation to the surface baseline.
+
+ - `elevation` (`object`)
+ - `level0` - transparent
+ - `level1` - 5% opacity
+ - `level2` - 8% opacity
+ - `level3` - 11% opacity
+ - `level4` - 12% opacity
+ - `level5` - 14% opacity
+
+ > Colors for disabled state
+
+ - `surfaceDisabled`
+ - `onSurfaceDisabled`
+
+ > These additional role mappings exist in a scheme and are mapped to components where needed.
+
+ - `shadow`
+ - `inverseOnSurface`
+ - `inverseSurface`
+ - `inversePrimary`
+ - `backdrop`
+
+- `fonts` (`object`): various fonts styling properties under the text variant key used in component.
+ - [`variant` e.g. `labelMedium`] (`object`):
+ - `fontFamily`
+ - `letterSpacing`
+ - `fontWeight`
+ - `lineHeight`
+ - `fontSize`
+- `animation` (`object`)
+ - `scale` - scale for all animations
+
+When creating a custom theme, you will need to provide all of these properties.
+
+If you don't use a custom theme, Paper will automatically turn animations on/off, depending on device settings.
+
+Otherwise, your custom theme will need to handle it manually, using React Native's [AccessibilityInfo API](https://reactnative.dev/docs/accessibilityinfo).
+
+## Extending the theme
+
+Keeping your own properties in the theme is fully supported by our library:
+
+```js
+import * as React from 'react';
+import {
+ MD3LightTheme as DefaultTheme,
+ PaperProvider,
+} from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ ...DefaultTheme,
+ // Specify custom property
+ myOwnProperty: true,
+ // Specify custom property in nested object
+ colors: {
+ ...DefaultTheme.colors,
+ myOwnColor: '#BADA55',
+ },
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+## Creating dynamic theme colors
+
+Dynamic Color Themes allows for generating two color schemes lightScheme and darkScheme, based on the provided source color.
+Created schemes are following the Material Design 3 color system and covering colors structure from the Paper theme. User may generate these schemes using the following tool:
+
+
+
+
+
+Passed source color into the util is translated into tones to automatically provide the range of tones that map to color roles.
+
+
+
+_Source: [Material You Color System](https://m3.material.io/styles/color/the-color-system/custom-colors)_
+
+### Using schemes
+
+Once we have copied the color schemes from the generated JSON above, we can use by passing it to the colors in `theme` object as below:
+
+```jsx
+import * as React from 'react';
+import {
+ MD3LightTheme as DefaultTheme,
+ PaperProvider,
+} from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ ...DefaultTheme,
+ colors: yourGeneratedLightOrDarkScheme.colors, // Copy it from the color codes scheme and then use it here
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+### Sync dynamic colors with system colors
+
+React Native Paper provides built-in support for Android dynamic colors through `DynamicLightTheme` and `DynamicDarkTheme`. These themes use React Native's `PlatformColor` API to map all Material Design 3 color roles to Android system colors, so any changes the user makes to their system palette are automatically reflected in the app.
+
+:::info
+Dynamic colors require Android 12 (API 31+). On older Android versions and all other platforms, these themes fall back to the default `LightTheme` / `DarkTheme`.
+:::
+
+```tsx
+import { useColorScheme } from 'react-native';
+import {
+ DynamicDarkTheme,
+ DynamicLightTheme,
+ PaperProvider,
+} from 'react-native-paper';
+import App from './src/App';
+
+export default function Main() {
+ const isDarkMode = useColorScheme() === 'dark';
+
+ return (
+
+
+
+ );
+}
+```
+
+## Adapting React Navigation theme
+
+The `adaptNavigationTheme` function takes an existing React Navigation theme and returns a React Navigation theme using the colors from Material Design 3. This theme can be passed to `NavigationContainer` so that React Navigation's UI elements have the same color scheme as Paper.
+
+```ts
+adaptNavigationTheme(themes);
+```
+
+:::info
+For users of `react-navigation` version `7.0.0` and above, `adaptNavigationTheme` overrides the **fonts** from the navigation theme as follows:
+
+```ts
+fonts: {
+ regular: {
+ fontFamily: materialTheme.fonts.bodyMedium.fontFamily,
+ fontWeight: materialTheme.fonts.bodyMedium.fontWeight,
+ letterSpacing: materialTheme.fonts.bodyMedium.letterSpacing,
+ },
+ medium: {
+ fontFamily: materialTheme.fonts.titleMedium.fontFamily,
+ fontWeight: materialTheme.fonts.titleMedium.fontWeight,
+ letterSpacing: materialTheme.fonts.titleMedium.letterSpacing,
+ },
+ bold: {
+ fontFamily: materialTheme.fonts.headlineSmall.fontFamily,
+ fontWeight: materialTheme.fonts.headlineSmall.fontWeight,
+ letterSpacing: materialTheme.fonts.headlineSmall.letterSpacing,
+ },
+ heavy: {
+ fontFamily: materialTheme.fonts.headlineLarge.fontFamily,
+ fontWeight: materialTheme.fonts.headlineLarge.fontWeight,
+ letterSpacing: materialTheme.fonts.headlineLarge.letterSpacing,
+ },
+}
+```
+
+:::
+
+Parameters:
+
+| NAME | TYPE |
+| ------ | ------ |
+| themes | object |
+
+Valid `themes` keys are:
+
+- `reactNavigationLight` () - React Navigation compliant light theme.
+- `reactNavigationDark` () - React Navigation compliant dark theme.
+- `materialLight` () - React Native Paper compliant light theme.
+- `materialDark` () - React Native Paper compliant dark theme.
+
+```ts
+// App.tsx
+import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {
+ PaperProvider,
+ MD3LightTheme,
+ adaptNavigationTheme,
+} from 'react-native-paper';
+
+const Stack = createNativeStackNavigator();
+
+const { LightTheme } = adaptNavigationTheme({
+ reactNavigationLight: DefaultTheme,
+});
+
+export default function App() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+## TypeScript
+
+By default, TypeScript works well whenever you change the value of the built-in theme's properties. It gets more complicated when you want to extend the theme's properties or change their types. In order to fully support TypeScript, you will need to follow the guide that fits your use-case most accurately:
+
+There are two supported ways of overriding the theme:
+
+1. Simple built-in theme overrides - when you only customize the values and
+ the whole theme schema remains the same
+2. Advanced theme overrides - when you add new properties or change the built-in schema shape
+
+:::caution
+TypeScript support for `withTheme` is currently limited to Material You (MD3) theme only.
+
+We are planning to provide a better support of handling custom theme overrides in future releases.
+:::
+
+### Simple built-in theme overrides
+
+You can provide a `theme` prop with a theme object with the same properties as the default theme:
+
+```js
+import * as React from 'react';
+import { MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ ...MD3LightTheme, // or MD3DarkTheme
+ roundness: 2,
+ colors: {
+ ...MD3LightTheme.colors,
+ primary: '#3498db',
+ secondary: '#f1c40f',
+ tertiary: '#a1b2c3',
+ },
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+### Advanced theme overrides
+
+If you need to modify the built-in theme schema by adding a new property or changing its type, you need to follow these steps:
+
+1. Pass your theme overrides to the PaperProvider component
+
+```ts
+import * as React from 'react';
+import { MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ ...MD3LightTheme,
+
+ // Specify a custom property
+ custom: 'property',
+
+ // Specify a custom property in nested object
+ colors: {
+ ...MD3LightTheme.colors,
+ brandPrimary: '#fefefe',
+ brandSecondary: 'red',
+ },
+};
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+2. Create a typed `useAppTheme()` hook in your project
+
+```ts
+import * as React from 'react';
+import { MD3LightTheme, PaperProvider, useTheme } from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+ ...MD3LightTheme,
+
+ // Specify a custom property
+ custom: 'property',
+
+ // Specify a custom property in nested object
+ colors: {
+ ...MD3LightTheme.colors,
+ brandPrimary: '#fefefe',
+ brandSecondary: 'red',
+ },
+};
+
+export type AppTheme = typeof theme;
+
+export const useAppTheme = () => useTheme();
+
+export default function Main() {
+ return (
+
+
+
+ );
+}
+```
+
+3. Start using the `useAppTheme()` hook across your components in the whole app
+
+```ts
+import * as React from 'react';
+import { useAppTheme } from './App';
+
+export default function HomeScreen() {
+ const {
+ colors: { brandPrimary },
+ } = useAppTheme();
+
+ return ...;
+}
+```
+
+## Material Design 3
+
+React Native Paper ships with Material Design 3 (Material You) only. Customize the default experience by extending `MD3LightTheme` or `MD3DarkTheme` (see [Extending the theme](#extending-the-theme) and [Advanced theme overrides](#advanced-theme-overrides)).
+
+## Applying a theme to a paper component
+
+If you want to change the theme for a certain component from the library, you can directly pass the `theme` prop to the component. The theme passed as the prop is merged with the theme from the `PaperProvider`:
+
+```js
+import * as React from 'react';
+import { Button } from 'react-native-paper';
+
+export default function ButtonExample() {
+ return (
+
+ );
+}
+```
+
+## Customizing all instances of a component
+
+Sometimes you want to style a component in a different way everywhere, but don't want to change the properties in the theme, so that other components are not affected. For example, say you want to change the font for all your buttons, but don't want to change `theme.fonts.labelLarge` because it affects other components.
+
+We don't have an API to do this, because you can already do it with components:
+
+```js
+import * as React from 'react';
+import { Button } from 'react-native-paper';
+
+export default function FancyButton(props) {
+ return (
+
+ );
+}
+```
+
+Now you can use your `FancyButton` component everywhere instead of using `Button` from Paper.
+
+## Dark Theme
+
+Since 3.0 we adapt dark theme to follow [Material design guidelines](https://material.io/design/color/dark-theme.html).
+In contrast to light theme, dark theme by default uses `surface` colour instead of `primary` on large components like `AppBar` or `BottomNavigation`.
+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.
+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.
+- `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.
+
+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.
+
+Otherwise, your custom theme will need to handle it manually, using React Native's [Appearance API](https://reactnative.dev/docs/appearance).
+
+## Gotchas
+
+The `PaperProvider` exposes the theme to the components via [React's context API](https://reactjs.org/docs/context.html), which means that the component must be in the same tree as the `PaperProvider`. Some React Native components will render a different tree such as a `Modal`, in which case the components inside the `Modal` won't be able to access the theme. The work around is to get the theme using the `withTheme` HOC and pass it down to the components as props, or expose it again with the exported `ThemeProvider` component.
+
+The `Modal` component from the library already handles this edge case, so you won't need to do anything.
diff --git a/docs/6.x/docs/showcase.mdx b/docs/6.x/docs/showcase.mdx
new file mode 100644
index 0000000000..7024ab018d
--- /dev/null
+++ b/docs/6.x/docs/showcase.mdx
@@ -0,0 +1,11 @@
+---
+title: Showcase
+---
+
+import Showcase from '@site/src/components/Showcase.tsx';
+
+# Who's using Paper?
+
+Check out these apps built using Paper. Send us a [pull request](https://github.com/callstack/react-native-paper/pulls) to add your app to this list.
+
+
diff --git a/docs/6.x/index.mdx b/docs/6.x/index.mdx
new file mode 100644
index 0000000000..91f12670f9
--- /dev/null
+++ b/docs/6.x/index.mdx
@@ -0,0 +1,38 @@
+---
+pageType: home
+hero:
+ name: Cross-platform Material Design for React Native
+ tagline: Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.
+ actions:
+ - text: Get started
+ link: /docs/guides/getting-started
+ theme: brand
+ - text: Try on Snack
+ link: https://snack.expo.dev/@react-native-paper/react-native-paper-example_v5
+ theme: alt
+features:
+ - title: Production-ready components
+ details: Buttons, inputs, lists, cards, menus, dialogs, navigation, and feedback patterns built for day-to-day product work.
+ icon: /react-native-paper/images/home/components.svg
+ span: 4
+ - title: Material You theming
+ details: Adopt Material 3 color, typography, elevation, and state layers with a theme system designed for real apps.
+ icon: /react-native-paper/images/home/palette.svg
+ span: 4
+ - title: Accessible by default
+ details: Common interactions, contrast, and state handling are already baked into the component surface instead of left to each screen.
+ icon: /react-native-paper/images/home/accessibility.svg
+ span: 4
+ - title: Cross-platform parity
+ details: Keep design language and component behavior aligned across iOS, Android, and React Native Web from one codebase.
+ icon: /react-native-paper/images/home/devices.svg
+ span: 4
+ - title: Dark mode support
+ details: Ship light and dark experiences with the same primitives, including adaptive surfaces and semantic color roles.
+ icon: /react-native-paper/images/home/moon.svg
+ span: 4
+ - title: Migration-friendly docs
+ details: Browse stable 5.x, preview 6.x, and legacy static docs from one version selector without splitting the docs experience.
+ icon: /react-native-paper/images/home/versions.svg
+ span: 4
+---
diff --git a/docs/component-docs-plugin/generatePageMDX.js b/docs/component-docs-plugin/generatePageMDX.js
index 0165ecdb8d..bafcaef32f 100644
--- a/docs/component-docs-plugin/generatePageMDX.js
+++ b/docs/component-docs-plugin/generatePageMDX.js
@@ -1,6 +1,4 @@
-const config = require('../docusaurus.config');
-
-const { baseUrl, customFields } = config;
+const { baseUrl, customFields } = require('../component-docs.config');
function renderBadge(annotation) {
const [annotType, ...annotLabel] = annotation.split(' ');
@@ -86,7 +84,7 @@ function generateScreenshots(componentName, screenshotData) {
`;
}
-function generatePropsTable(data, link, extendsAttributes) {
+function generatePropsTable(data, link, extendsAttributes, version) {
const ANNOTATION_OPTIONAL = '@optional';
const ANNOTATION_INTERNAL = '@internal';
@@ -121,7 +119,7 @@ function generatePropsTable(data, link, extendsAttributes) {
-
+
`;
})
.join('');
@@ -182,13 +180,16 @@ function generateExtendedExamples(usage, extendedExamplesData) {
`;
}
-function generatePageMDX(doc, link) {
+function generatePageMDX(doc, link, options = {}) {
const summaryRegex = /([\s\S]*?)## Usage/;
+ const version = options.version ?? '6.x';
const description = doc.description
.replace(/<\/br>/g, '')
.replace(/style="[a-zA-Z0-9:;.\s()\-,]*"/gi, '')
.replace(/src="screenshots/g, `src="${baseUrl}screenshots`)
+ .replace(/\(\.\/Portal\)/g, '(./Portal/Portal)')
+ .replace(/\(\.\.\/Portal\)/g, '(../Portal/Portal)')
.replace(/@extends.+$/, '');
const summary = summaryRegex.exec(description)
@@ -221,7 +222,7 @@ ${generateScreenshots(doc.title, screenshotData)}
${generateExtendedExamples(usage, extendedExamplesData)}
-${generatePropsTable(doc.data.props, link, extendsAttributes)}
+${generatePropsTable(doc.data.props, link, extendsAttributes, version)}
${generateMoreExamples(doc.title)}
@@ -230,7 +231,11 @@ ${generateThemeColors(doc.title, themeColorsData)}
${generateKnownIssues(doc.title)}
`;
- return mdx.slice(1);
+ return mdx
+ .slice(1)
+ .split('\n')
+ .map((line) => line.trimEnd())
+ .join('\n');
}
module.exports = generatePageMDX;
diff --git a/docs/component-docs-plugin/useDocs.tsx b/docs/component-docs-plugin/useDocs.tsx
index 5747fafb5c..e4e9edc636 100644
--- a/docs/component-docs-plugin/useDocs.tsx
+++ b/docs/component-docs-plugin/useDocs.tsx
@@ -1,11 +1,5 @@
-import { useActiveDocContext } from '@docusaurus/plugin-content-docs/client';
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved
-import { usePluginData } from '@docusaurus/useGlobalData';
-
import componentDocs5x from '../src/data/componentDocs5x.json';
-
-const pluginName = 'component-docs-plugin';
+import componentDocs6x from '../src/data/componentDocs6x.json';
export interface ComponentDocsPluginData {
docs: { [key in string]: PageDoc };
@@ -42,17 +36,11 @@ export interface Prop {
const versionedDocs: { [versionName: string]: ComponentDocsPluginData } = {
'5.x': componentDocs5x,
+ '6.x': componentDocs6x,
};
-function useDoc(withPath: string) {
- const activeDocContext = useActiveDocContext(undefined);
- const pluginData = usePluginData(pluginName) as ComponentDocsPluginData;
- const versionName = activeDocContext.activeVersion?.name;
- const versionedDoc = versionName
- ? versionedDocs[versionName]?.docs?.[withPath]
- : undefined;
-
- return versionedDoc ?? pluginData?.docs?.[withPath];
+function useDoc(withPath: string, versionName = '5.x') {
+ return versionedDocs[versionName]?.docs?.[withPath];
}
export default useDoc;
diff --git a/docs/component-docs.config.js b/docs/component-docs.config.js
new file mode 100644
index 0000000000..698f5ff6cf
--- /dev/null
+++ b/docs/component-docs.config.js
@@ -0,0 +1,150 @@
+const path = require('path');
+
+const { extendedExamples } = require('./src/data/extendedExamples.js');
+const { screenshots } = require('./src/data/screenshots.js');
+const { themeColors } = require('./src/data/themeColors.js');
+
+const pages = {
+ ActivityIndicator: 'ActivityIndicator',
+ Appbar: {
+ Appbar: 'Appbar/Appbar',
+ AppbarAction: 'Appbar/AppbarAction',
+ AppbarBackAction: 'Appbar/AppbarBackAction',
+ AppbarContent: 'Appbar/AppbarContent',
+ AppbarHeader: 'Appbar/AppbarHeader',
+ },
+ Avatar: {
+ AvatarIcon: 'Avatar/AvatarIcon',
+ AvatarImage: 'Avatar/AvatarImage',
+ AvatarText: 'Avatar/AvatarText',
+ },
+ Badge: 'Badge',
+ Banner: 'Banner',
+ BottomNavigation: {
+ BottomNavigation: 'BottomNavigation/BottomNavigation',
+ BottomNavigationBar: 'BottomNavigation/BottomNavigationBar',
+ },
+ Button: {
+ Button: 'Button/Button',
+ },
+ Card: {
+ Card: 'Card/Card',
+ CardActions: 'Card/CardActions',
+ CardContent: 'Card/CardContent',
+ CardCover: 'Card/CardCover',
+ CardTitle: 'Card/CardTitle',
+ },
+ Checkbox: {
+ Checkbox: 'Checkbox/Checkbox',
+ CheckboxItem: 'Checkbox/CheckboxItem',
+ },
+ Chip: {
+ Chip: 'Chip/Chip',
+ },
+ DataTable: {
+ DataTable: 'DataTable/DataTable',
+ DataTableCell: 'DataTable/DataTableCell',
+ DataTableHeader: 'DataTable/DataTableHeader',
+ DataTablePagination: 'DataTable/DataTablePagination',
+ DataTableRow: 'DataTable/DataTableRow',
+ DataTableTitle: 'DataTable/DataTableTitle',
+ },
+ Dialog: {
+ Dialog: 'Dialog/Dialog',
+ DialogActions: 'Dialog/DialogActions',
+ DialogContent: 'Dialog/DialogContent',
+ DialogIcon: 'Dialog/DialogIcon',
+ DialogScrollArea: 'Dialog/DialogScrollArea',
+ DialogTitle: 'Dialog/DialogTitle',
+ },
+ Divider: 'Divider',
+ Drawer: {
+ DrawerCollapsedItem: 'Drawer/DrawerCollapsedItem',
+ DrawerItem: 'Drawer/DrawerItem',
+ DrawerSection: 'Drawer/DrawerSection',
+ },
+ FAB: {
+ FAB: 'FAB/FAB',
+ FABExtended: 'FAB/Extended',
+ FABMenu: 'FAB/Menu',
+ },
+ IconButton: {
+ IconButton: 'IconButton/IconButton',
+ },
+ Icon: 'Icon',
+ List: {
+ ListAccordion: 'List/ListAccordion',
+ ListAccordionGroup: 'List/ListAccordionGroup',
+ ListIcon: 'List/ListIcon',
+ ListItem: 'List/ListItem',
+ ListSection: 'List/ListSection',
+ ListSubheader: 'List/ListSubheader',
+ },
+ Menu: {
+ Menu: 'Menu/Menu',
+ MenuItem: 'Menu/MenuItem',
+ },
+ Modal: 'Modal',
+ Portal: {
+ Portal: 'Portal/Portal',
+ PortalHost: 'Portal/PortalHost',
+ },
+ ProgressBar: 'ProgressBar',
+ RadioButton: {
+ RadioButton: 'RadioButton/RadioButton',
+ RadioButtonAndroid: 'RadioButton/RadioButtonAndroid',
+ RadioButtonGroup: 'RadioButton/RadioButtonGroup',
+ RadioButtonIOS: 'RadioButton/RadioButtonIOS',
+ RadioButtonItem: 'RadioButton/RadioButtonItem',
+ },
+ Searchbar: 'Searchbar',
+ SegmentedButtons: {
+ SegmentedButtons: 'SegmentedButtons/SegmentedButtons',
+ },
+ Snackbar: 'Snackbar',
+ Surface: 'Surface',
+ Switch: {
+ Switch: 'Switch/Switch',
+ },
+ TextInput: {
+ TextInput: 'TextInput/TextInput',
+ TextInputIcon: 'TextInput/TextInputIcon',
+ },
+ ToggleButton: {
+ ToggleButton: 'ToggleButton/ToggleButton',
+ ToggleButtonGroup: 'ToggleButton/ToggleButtonGroup',
+ ToggleButtonRow: 'ToggleButton/ToggleButtonRow',
+ },
+ Tooltip: {
+ Tooltip: 'Tooltip/Tooltip',
+ },
+ TouchableRipple: {
+ TouchableRipple: 'TouchableRipple/TouchableRipple',
+ },
+ Text: {
+ Text: 'Typography/Text',
+ },
+};
+
+module.exports = {
+ baseUrl: '/react-native-paper/',
+ docsRootDir: path.join(__dirname, '6.x', 'docs', 'components'),
+ libsRootDir: path.join(__dirname, '..', 'src', 'components'),
+ pages,
+ customFields: {
+ moreExamples: {
+ Portal: {
+ 'Comprehensive Portal example':
+ 'https://snack.expo.dev/@react-native-paper/more-examples---comprehensive-portal-example',
+ },
+ Snackbar: {
+ 'Snackbar rendered regardless of the parent positioning':
+ 'https://snack.expo.dev/@react-native-paper/more-examples---snackbar-rendered-regardless-of-the-parent-positioning',
+ },
+ },
+ knownIssues: {},
+ themeColors,
+ screenshots,
+ extendedExamples,
+ },
+};
diff --git a/docs/package.json b/docs/package.json
index ded467eb2b..48f1c39ed5 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -3,49 +3,40 @@
"version": "0.0.0",
"private": true,
"scripts": {
- "docusaurus": "docusaurus",
- "start": "docusaurus start",
- "build": "docusaurus build",
- "swizzle": "docusaurus swizzle",
- "deploy": "docusaurus deploy",
- "clear": "docusaurus clear",
- "serve": "docusaurus serve",
- "write-translations": "docusaurus write-translations",
- "write-heading-ids": "docusaurus write-heading-ids",
- "typecheck": "tsc",
- "prepare": "patch-package"
+ "dev": "yarn generate && rspress dev",
+ "start": "yarn dev",
+ "build": "yarn generate && rspress build",
+ "preview": "rspress preview",
+ "typecheck": "tsc --noEmit",
+ "generate": "node scripts/generate-rspress-content.mjs && node scripts/generate-current-component-docs.mjs",
+ "test:generate": "node --test tests/**/*.test.mjs"
},
"dependencies": {
"@callstack/react-theme-provider": "^3.0.9",
- "@docusaurus/core": "^2.3.6",
- "@docusaurus/preset-classic": "^2.3.6",
- "@docusaurus/remark-plugin-npm2yarn": "^2.3.6",
- "@easyops-cn/docusaurus-search-local": "^0.33.4",
+ "@callstack/rspress-preset": "0.6.6",
+ "@callstack/rspress-theme": "0.6.6",
"@material/material-color-utilities": "0.2.4",
- "@mdx-js/react": "^1.6.22",
"@react-native-vector-icons/material-design-icons": "^12.0.0",
+ "@rspress/core": "2.0.14",
"camelcase": "^7.0.1",
- "clsx": "^1.2.1",
"color": "^4.2.3",
"marked": "^4.1.1",
- "prism-react-renderer": "^1.3.5",
"process": "^0.11.10",
- "react": "17.0.2",
+ "react": "19.2.6",
"react-color": "^2.19.3",
- "react-dom": "17.0.2",
- "react-native-safe-area-context": "^4.5.0",
- "react-native-web": "^0.18.12",
- "use-latest-callback": "^0.1.7"
+ "react-dom": "19.2.6",
+ "react-native-safe-area-context": "5.7.0",
+ "react-native-web": "^0.21.2",
+ "use-latest-callback": "^0.2.3"
},
"devDependencies": {
- "@docusaurus/module-type-aliases": "^2.3.6",
"@jest/globals": "^29.7.0",
- "@tsconfig/docusaurus": "^1.0.6",
"@types/marked": "^4.0.7",
+ "@types/react": "^19.2.7",
"@types/react-color": "^3.0.6",
+ "@types/react-dom": "^19.2.3",
"component-docs": "^0.24.0",
- "patch-package": "^6.5.0",
- "typescript": "^4.8.4"
+ "typescript": "5.8.3"
},
"browserslist": {
"production": [
@@ -60,10 +51,6 @@
]
},
"engines": {
- "node": ">=18"
- },
- "resolutions": {
- "@types/react": "18.0.8",
- "@types/react-dom": "18.0.8"
+ "node": ">=20"
}
}
diff --git a/docs/public/.nojekyll b/docs/public/.nojekyll
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/docs/public/gallery/appbar-dark.png b/docs/public/gallery/appbar-dark.png
new file mode 100644
index 0000000000..63c0196210
Binary files /dev/null and b/docs/public/gallery/appbar-dark.png differ
diff --git a/docs/public/gallery/appbar.png b/docs/public/gallery/appbar.png
new file mode 100644
index 0000000000..ca3a16c28d
Binary files /dev/null and b/docs/public/gallery/appbar.png differ
diff --git a/docs/public/gallery/bottom-navigation-dark.png b/docs/public/gallery/bottom-navigation-dark.png
new file mode 100644
index 0000000000..1d86919817
Binary files /dev/null and b/docs/public/gallery/bottom-navigation-dark.png differ
diff --git a/docs/public/gallery/bottom-navigation.png b/docs/public/gallery/bottom-navigation.png
new file mode 100644
index 0000000000..3b7296835f
Binary files /dev/null and b/docs/public/gallery/bottom-navigation.png differ
diff --git a/docs/public/gallery/button-dark.png b/docs/public/gallery/button-dark.png
new file mode 100644
index 0000000000..727605ac7b
Binary files /dev/null and b/docs/public/gallery/button-dark.png differ
diff --git a/docs/public/gallery/button.png b/docs/public/gallery/button.png
new file mode 100644
index 0000000000..0e6884acf3
Binary files /dev/null and b/docs/public/gallery/button.png differ
diff --git a/docs/public/gallery/card-dark.png b/docs/public/gallery/card-dark.png
new file mode 100644
index 0000000000..e138bbc72c
Binary files /dev/null and b/docs/public/gallery/card-dark.png differ
diff --git a/docs/public/gallery/card.png b/docs/public/gallery/card.png
new file mode 100644
index 0000000000..a2d319638d
Binary files /dev/null and b/docs/public/gallery/card.png differ
diff --git a/docs/public/gallery/chip-dark.png b/docs/public/gallery/chip-dark.png
new file mode 100644
index 0000000000..ac6ea638fe
Binary files /dev/null and b/docs/public/gallery/chip-dark.png differ
diff --git a/docs/public/gallery/chip.png b/docs/public/gallery/chip.png
new file mode 100644
index 0000000000..6613a45bb5
Binary files /dev/null and b/docs/public/gallery/chip.png differ
diff --git a/docs/public/gallery/fab-dark.png b/docs/public/gallery/fab-dark.png
new file mode 100644
index 0000000000..fcf9b46b02
Binary files /dev/null and b/docs/public/gallery/fab-dark.png differ
diff --git a/docs/public/gallery/fab.png b/docs/public/gallery/fab.png
new file mode 100644
index 0000000000..bb46d46aee
Binary files /dev/null and b/docs/public/gallery/fab.png differ
diff --git a/docs/public/gallery/input-dark.png b/docs/public/gallery/input-dark.png
new file mode 100644
index 0000000000..34157229dc
Binary files /dev/null and b/docs/public/gallery/input-dark.png differ
diff --git a/docs/public/gallery/input.png b/docs/public/gallery/input.png
new file mode 100644
index 0000000000..e880a266e0
Binary files /dev/null and b/docs/public/gallery/input.png differ
diff --git a/docs/public/gallery/list-accordion-dark.png b/docs/public/gallery/list-accordion-dark.png
new file mode 100644
index 0000000000..21d0a8d07b
Binary files /dev/null and b/docs/public/gallery/list-accordion-dark.png differ
diff --git a/docs/public/gallery/list-accordion.png b/docs/public/gallery/list-accordion.png
new file mode 100644
index 0000000000..2d36a640ce
Binary files /dev/null and b/docs/public/gallery/list-accordion.png differ
diff --git a/docs/public/gallery/list-dark.png b/docs/public/gallery/list-dark.png
new file mode 100644
index 0000000000..8fdd05f37b
Binary files /dev/null and b/docs/public/gallery/list-dark.png differ
diff --git a/docs/public/gallery/list.png b/docs/public/gallery/list.png
new file mode 100644
index 0000000000..dff5ffb410
Binary files /dev/null and b/docs/public/gallery/list.png differ
diff --git a/docs/public/gallery/searchbar-dark.png b/docs/public/gallery/searchbar-dark.png
new file mode 100644
index 0000000000..85a2e0e43c
Binary files /dev/null and b/docs/public/gallery/searchbar-dark.png differ
diff --git a/docs/public/gallery/searchbar.png b/docs/public/gallery/searchbar.png
new file mode 100644
index 0000000000..ce68bfec18
Binary files /dev/null and b/docs/public/gallery/searchbar.png differ
diff --git a/docs/public/gallery/snackbar-dark.png b/docs/public/gallery/snackbar-dark.png
new file mode 100644
index 0000000000..01b200fb84
Binary files /dev/null and b/docs/public/gallery/snackbar-dark.png differ
diff --git a/docs/public/gallery/snackbar.png b/docs/public/gallery/snackbar.png
new file mode 100644
index 0000000000..79aeb96bf3
Binary files /dev/null and b/docs/public/gallery/snackbar.png differ
diff --git a/docs/public/gallery/toggle-button.png b/docs/public/gallery/toggle-button.png
new file mode 100644
index 0000000000..ccad46c19e
Binary files /dev/null and b/docs/public/gallery/toggle-button.png differ
diff --git a/docs/public/gallery/typography-dark.png b/docs/public/gallery/typography-dark.png
new file mode 100644
index 0000000000..b3f798782d
Binary files /dev/null and b/docs/public/gallery/typography-dark.png differ
diff --git a/docs/public/gallery/typography.png b/docs/public/gallery/typography.png
new file mode 100644
index 0000000000..0a47e4dfee
Binary files /dev/null and b/docs/public/gallery/typography.png differ
diff --git a/docs/public/images/expo-qr.png b/docs/public/images/expo-qr.png
new file mode 100644
index 0000000000..9515a7b89e
Binary files /dev/null and b/docs/public/images/expo-qr.png differ
diff --git a/docs/public/images/favicon.ico b/docs/public/images/favicon.ico
new file mode 100644
index 0000000000..e2cbd5519d
Binary files /dev/null and b/docs/public/images/favicon.ico differ
diff --git a/docs/public/images/home/accessibility.svg b/docs/public/images/home/accessibility.svg
new file mode 100644
index 0000000000..4b4aabefe5
--- /dev/null
+++ b/docs/public/images/home/accessibility.svg
@@ -0,0 +1,7 @@
+
diff --git a/docs/public/images/home/components.svg b/docs/public/images/home/components.svg
new file mode 100644
index 0000000000..69bd14f161
--- /dev/null
+++ b/docs/public/images/home/components.svg
@@ -0,0 +1,6 @@
+
diff --git a/docs/public/images/home/devices.svg b/docs/public/images/home/devices.svg
new file mode 100644
index 0000000000..6660a426b1
--- /dev/null
+++ b/docs/public/images/home/devices.svg
@@ -0,0 +1,6 @@
+
diff --git a/docs/public/images/home/moon.svg b/docs/public/images/home/moon.svg
new file mode 100644
index 0000000000..88edf2d9d9
--- /dev/null
+++ b/docs/public/images/home/moon.svg
@@ -0,0 +1,3 @@
+
diff --git a/docs/public/images/home/palette.svg b/docs/public/images/home/palette.svg
new file mode 100644
index 0000000000..7cd25bc873
--- /dev/null
+++ b/docs/public/images/home/palette.svg
@@ -0,0 +1,7 @@
+
diff --git a/docs/public/images/home/versions.svg b/docs/public/images/home/versions.svg
new file mode 100644
index 0000000000..76c32cfc9d
--- /dev/null
+++ b/docs/public/images/home/versions.svg
@@ -0,0 +1,8 @@
+
diff --git a/docs/public/images/paper-logo.svg b/docs/public/images/paper-logo.svg
new file mode 100644
index 0000000000..ddea950fa7
--- /dev/null
+++ b/docs/public/images/paper-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/public/images/sidebar-logo.svg b/docs/public/images/sidebar-logo.svg
new file mode 100644
index 0000000000..f55ebff88a
--- /dev/null
+++ b/docs/public/images/sidebar-logo.svg
@@ -0,0 +1 @@
+
diff --git a/docs/public/migration/color-palette.png b/docs/public/migration/color-palette.png
new file mode 100644
index 0000000000..51eb950c91
Binary files /dev/null and b/docs/public/migration/color-palette.png differ
diff --git a/docs/public/screenshots/activity-indicator.gif b/docs/public/screenshots/activity-indicator.gif
new file mode 100644
index 0000000000..c4bbc7a15e
Binary files /dev/null and b/docs/public/screenshots/activity-indicator.gif differ
diff --git a/docs/public/screenshots/animated-fab.gif b/docs/public/screenshots/animated-fab.gif
new file mode 100644
index 0000000000..8a25cca3a2
Binary files /dev/null and b/docs/public/screenshots/animated-fab.gif differ
diff --git a/docs/public/screenshots/appbar-action-android.png b/docs/public/screenshots/appbar-action-android.png
new file mode 100644
index 0000000000..1abf8e39f2
Binary files /dev/null and b/docs/public/screenshots/appbar-action-android.png differ
diff --git a/docs/public/screenshots/appbar-backaction-android.png b/docs/public/screenshots/appbar-backaction-android.png
new file mode 100644
index 0000000000..4045c3fd6a
Binary files /dev/null and b/docs/public/screenshots/appbar-backaction-android.png differ
diff --git a/docs/public/screenshots/appbar-center-aligned.png b/docs/public/screenshots/appbar-center-aligned.png
new file mode 100644
index 0000000000..a92f4df466
Binary files /dev/null and b/docs/public/screenshots/appbar-center-aligned.png differ
diff --git a/docs/public/screenshots/appbar-content.png b/docs/public/screenshots/appbar-content.png
new file mode 100644
index 0000000000..393ccdf96c
Binary files /dev/null and b/docs/public/screenshots/appbar-content.png differ
diff --git a/docs/public/screenshots/appbar-large.png b/docs/public/screenshots/appbar-large.png
new file mode 100644
index 0000000000..1baee9860d
Binary files /dev/null and b/docs/public/screenshots/appbar-large.png differ
diff --git a/docs/public/screenshots/appbar-medium.png b/docs/public/screenshots/appbar-medium.png
new file mode 100644
index 0000000000..3ed767e5c9
Binary files /dev/null and b/docs/public/screenshots/appbar-medium.png differ
diff --git a/docs/public/screenshots/appbar-small.png b/docs/public/screenshots/appbar-small.png
new file mode 100644
index 0000000000..2a0078c352
Binary files /dev/null and b/docs/public/screenshots/appbar-small.png differ
diff --git a/docs/public/screenshots/appbar.png b/docs/public/screenshots/appbar.png
new file mode 100644
index 0000000000..24921211d2
Binary files /dev/null and b/docs/public/screenshots/appbar.png differ
diff --git a/docs/public/screenshots/avatar-icon.png b/docs/public/screenshots/avatar-icon.png
new file mode 100644
index 0000000000..0e7370d193
Binary files /dev/null and b/docs/public/screenshots/avatar-icon.png differ
diff --git a/docs/public/screenshots/avatar-image.png b/docs/public/screenshots/avatar-image.png
new file mode 100644
index 0000000000..b18a049332
Binary files /dev/null and b/docs/public/screenshots/avatar-image.png differ
diff --git a/docs/public/screenshots/avatar-text.png b/docs/public/screenshots/avatar-text.png
new file mode 100644
index 0000000000..24f2287f9a
Binary files /dev/null and b/docs/public/screenshots/avatar-text.png differ
diff --git a/docs/public/screenshots/badge-1.png b/docs/public/screenshots/badge-1.png
new file mode 100644
index 0000000000..4dabd4b811
Binary files /dev/null and b/docs/public/screenshots/badge-1.png differ
diff --git a/docs/public/screenshots/badge-2.png b/docs/public/screenshots/badge-2.png
new file mode 100644
index 0000000000..d0507ca22e
Binary files /dev/null and b/docs/public/screenshots/badge-2.png differ
diff --git a/docs/public/screenshots/badge-3.png b/docs/public/screenshots/badge-3.png
new file mode 100644
index 0000000000..92c1fd517f
Binary files /dev/null and b/docs/public/screenshots/badge-3.png differ
diff --git a/docs/public/screenshots/badge-example.png b/docs/public/screenshots/badge-example.png
new file mode 100644
index 0000000000..9faf375da1
Binary files /dev/null and b/docs/public/screenshots/badge-example.png differ
diff --git a/docs/public/screenshots/badge-wrapper.png b/docs/public/screenshots/badge-wrapper.png
new file mode 100644
index 0000000000..99ef3bd7dc
Binary files /dev/null and b/docs/public/screenshots/badge-wrapper.png differ
diff --git a/docs/public/screenshots/banner.gif b/docs/public/screenshots/banner.gif
new file mode 100644
index 0000000000..c8b50a9add
Binary files /dev/null and b/docs/public/screenshots/banner.gif differ
diff --git a/docs/public/screenshots/bottom-navigation-shifting.gif b/docs/public/screenshots/bottom-navigation-shifting.gif
new file mode 100644
index 0000000000..04e915a1ac
Binary files /dev/null and b/docs/public/screenshots/bottom-navigation-shifting.gif differ
diff --git a/docs/public/screenshots/bottom-navigation-tabs.jpg b/docs/public/screenshots/bottom-navigation-tabs.jpg
new file mode 100644
index 0000000000..be9a372041
Binary files /dev/null and b/docs/public/screenshots/bottom-navigation-tabs.jpg differ
diff --git a/docs/public/screenshots/bottom-navigation.gif b/docs/public/screenshots/bottom-navigation.gif
new file mode 100644
index 0000000000..63e80cc471
Binary files /dev/null and b/docs/public/screenshots/bottom-navigation.gif differ
diff --git a/docs/public/screenshots/button-1.png b/docs/public/screenshots/button-1.png
new file mode 100644
index 0000000000..39bbd5cc1a
Binary files /dev/null and b/docs/public/screenshots/button-1.png differ
diff --git a/docs/public/screenshots/button-2.png b/docs/public/screenshots/button-2.png
new file mode 100644
index 0000000000..44148f1b30
Binary files /dev/null and b/docs/public/screenshots/button-2.png differ
diff --git a/docs/public/screenshots/button-3.png b/docs/public/screenshots/button-3.png
new file mode 100644
index 0000000000..d308245dd0
Binary files /dev/null and b/docs/public/screenshots/button-3.png differ
diff --git a/docs/public/screenshots/button-4.png b/docs/public/screenshots/button-4.png
new file mode 100644
index 0000000000..d450f3dc1c
Binary files /dev/null and b/docs/public/screenshots/button-4.png differ
diff --git a/docs/public/screenshots/button-5.png b/docs/public/screenshots/button-5.png
new file mode 100644
index 0000000000..6a7d90af8d
Binary files /dev/null and b/docs/public/screenshots/button-5.png differ
diff --git a/docs/public/screenshots/card-1.png b/docs/public/screenshots/card-1.png
new file mode 100644
index 0000000000..6b9514ca12
Binary files /dev/null and b/docs/public/screenshots/card-1.png differ
diff --git a/docs/public/screenshots/card-2.png b/docs/public/screenshots/card-2.png
new file mode 100644
index 0000000000..ad37f1049b
Binary files /dev/null and b/docs/public/screenshots/card-2.png differ
diff --git a/docs/public/screenshots/card-3.png b/docs/public/screenshots/card-3.png
new file mode 100644
index 0000000000..c6d38234fb
Binary files /dev/null and b/docs/public/screenshots/card-3.png differ
diff --git a/docs/public/screenshots/card-actions.png b/docs/public/screenshots/card-actions.png
new file mode 100644
index 0000000000..405c1a26b3
Binary files /dev/null and b/docs/public/screenshots/card-actions.png differ
diff --git a/docs/public/screenshots/card-content-example.png b/docs/public/screenshots/card-content-example.png
new file mode 100644
index 0000000000..bf18b19b24
Binary files /dev/null and b/docs/public/screenshots/card-content-example.png differ
diff --git a/docs/public/screenshots/card-cover.png b/docs/public/screenshots/card-cover.png
new file mode 100644
index 0000000000..a66d95c066
Binary files /dev/null and b/docs/public/screenshots/card-cover.png differ
diff --git a/docs/public/screenshots/card-title-1.png b/docs/public/screenshots/card-title-1.png
new file mode 100644
index 0000000000..ad297e21e4
Binary files /dev/null and b/docs/public/screenshots/card-title-1.png differ
diff --git a/docs/public/screenshots/checkbox-disabled.android.png b/docs/public/screenshots/checkbox-disabled.android.png
new file mode 100644
index 0000000000..7db49248f8
Binary files /dev/null and b/docs/public/screenshots/checkbox-disabled.android.png differ
diff --git a/docs/public/screenshots/checkbox-disabled.ios.png b/docs/public/screenshots/checkbox-disabled.ios.png
new file mode 100644
index 0000000000..78c9092fac
Binary files /dev/null and b/docs/public/screenshots/checkbox-disabled.ios.png differ
diff --git a/docs/public/screenshots/checkbox-enabled.android.png b/docs/public/screenshots/checkbox-enabled.android.png
new file mode 100644
index 0000000000..fd8edc4640
Binary files /dev/null and b/docs/public/screenshots/checkbox-enabled.android.png differ
diff --git a/docs/public/screenshots/checkbox-enabled.ios.png b/docs/public/screenshots/checkbox-enabled.ios.png
new file mode 100644
index 0000000000..91e6ff4c30
Binary files /dev/null and b/docs/public/screenshots/checkbox-enabled.ios.png differ
diff --git a/docs/public/screenshots/chip-1.png b/docs/public/screenshots/chip-1.png
new file mode 100644
index 0000000000..1a4ab79820
Binary files /dev/null and b/docs/public/screenshots/chip-1.png differ
diff --git a/docs/public/screenshots/chip-2.png b/docs/public/screenshots/chip-2.png
new file mode 100644
index 0000000000..86c5c1bf22
Binary files /dev/null and b/docs/public/screenshots/chip-2.png differ
diff --git a/docs/public/screenshots/custom-colors.png b/docs/public/screenshots/custom-colors.png
new file mode 100644
index 0000000000..bfe4c5041d
Binary files /dev/null and b/docs/public/screenshots/custom-colors.png differ
diff --git a/docs/public/screenshots/data-table-full-width.png b/docs/public/screenshots/data-table-full-width.png
new file mode 100644
index 0000000000..d35e98274b
Binary files /dev/null and b/docs/public/screenshots/data-table-full-width.png differ
diff --git a/docs/public/screenshots/data-table-header.png b/docs/public/screenshots/data-table-header.png
new file mode 100644
index 0000000000..33a631098c
Binary files /dev/null and b/docs/public/screenshots/data-table-header.png differ
diff --git a/docs/public/screenshots/data-table-pagination.png b/docs/public/screenshots/data-table-pagination.png
new file mode 100644
index 0000000000..b609af4ee4
Binary files /dev/null and b/docs/public/screenshots/data-table-pagination.png differ
diff --git a/docs/public/screenshots/data-table-row-cell.png b/docs/public/screenshots/data-table-row-cell.png
new file mode 100644
index 0000000000..41cbeb5cac
Binary files /dev/null and b/docs/public/screenshots/data-table-row-cell.png differ
diff --git a/docs/public/screenshots/dialog-1.png b/docs/public/screenshots/dialog-1.png
new file mode 100644
index 0000000000..65cc38c7cb
Binary files /dev/null and b/docs/public/screenshots/dialog-1.png differ
diff --git a/docs/public/screenshots/dialog-2.png b/docs/public/screenshots/dialog-2.png
new file mode 100644
index 0000000000..6d901164fc
Binary files /dev/null and b/docs/public/screenshots/dialog-2.png differ
diff --git a/docs/public/screenshots/dialog-actions.png b/docs/public/screenshots/dialog-actions.png
new file mode 100644
index 0000000000..4d235b5ed7
Binary files /dev/null and b/docs/public/screenshots/dialog-actions.png differ
diff --git a/docs/public/screenshots/dialog-content.png b/docs/public/screenshots/dialog-content.png
new file mode 100644
index 0000000000..a9bb33e04e
Binary files /dev/null and b/docs/public/screenshots/dialog-content.png differ
diff --git a/docs/public/screenshots/dialog-icon.png b/docs/public/screenshots/dialog-icon.png
new file mode 100644
index 0000000000..ace73be2bb
Binary files /dev/null and b/docs/public/screenshots/dialog-icon.png differ
diff --git a/docs/public/screenshots/dialog-scroll-area.gif b/docs/public/screenshots/dialog-scroll-area.gif
new file mode 100644
index 0000000000..dca16f5e4f
Binary files /dev/null and b/docs/public/screenshots/dialog-scroll-area.gif differ
diff --git a/docs/public/screenshots/dialog-title.png b/docs/public/screenshots/dialog-title.png
new file mode 100644
index 0000000000..e614c38651
Binary files /dev/null and b/docs/public/screenshots/dialog-title.png differ
diff --git a/docs/public/screenshots/divider.png b/docs/public/screenshots/divider.png
new file mode 100644
index 0000000000..e6ebfeb2ea
Binary files /dev/null and b/docs/public/screenshots/divider.png differ
diff --git a/docs/public/screenshots/dot-badges.png b/docs/public/screenshots/dot-badges.png
new file mode 100644
index 0000000000..4e86ed3691
Binary files /dev/null and b/docs/public/screenshots/dot-badges.png differ
diff --git a/docs/public/screenshots/drawer-collapsed.png b/docs/public/screenshots/drawer-collapsed.png
new file mode 100644
index 0000000000..0316d22780
Binary files /dev/null and b/docs/public/screenshots/drawer-collapsed.png differ
diff --git a/docs/public/screenshots/drawer-item.png b/docs/public/screenshots/drawer-item.png
new file mode 100644
index 0000000000..811aef04e7
Binary files /dev/null and b/docs/public/screenshots/drawer-item.png differ
diff --git a/docs/public/screenshots/drawer-section.png b/docs/public/screenshots/drawer-section.png
new file mode 100644
index 0000000000..a309aab159
Binary files /dev/null and b/docs/public/screenshots/drawer-section.png differ
diff --git a/docs/public/screenshots/fab-1.png b/docs/public/screenshots/fab-1.png
new file mode 100644
index 0000000000..46a536420e
Binary files /dev/null and b/docs/public/screenshots/fab-1.png differ
diff --git a/docs/public/screenshots/fab-2.png b/docs/public/screenshots/fab-2.png
new file mode 100644
index 0000000000..acf8804091
Binary files /dev/null and b/docs/public/screenshots/fab-2.png differ
diff --git a/docs/public/screenshots/fab-3.png b/docs/public/screenshots/fab-3.png
new file mode 100644
index 0000000000..93885bc404
Binary files /dev/null and b/docs/public/screenshots/fab-3.png differ
diff --git a/docs/public/screenshots/fab-4.png b/docs/public/screenshots/fab-4.png
new file mode 100644
index 0000000000..c425304199
Binary files /dev/null and b/docs/public/screenshots/fab-4.png differ
diff --git a/docs/public/screenshots/fab-group.gif b/docs/public/screenshots/fab-group.gif
new file mode 100644
index 0000000000..2e5074d7bf
Binary files /dev/null and b/docs/public/screenshots/fab-group.gif differ
diff --git a/docs/public/screenshots/fab-group.png b/docs/public/screenshots/fab-group.png
new file mode 100644
index 0000000000..118de10d0f
Binary files /dev/null and b/docs/public/screenshots/fab-group.png differ
diff --git a/docs/public/screenshots/helper-text.gif b/docs/public/screenshots/helper-text.gif
new file mode 100644
index 0000000000..a13a14ce00
Binary files /dev/null and b/docs/public/screenshots/helper-text.gif differ
diff --git a/docs/public/screenshots/icon-button-1.png b/docs/public/screenshots/icon-button-1.png
new file mode 100644
index 0000000000..acfa6e7097
Binary files /dev/null and b/docs/public/screenshots/icon-button-1.png differ
diff --git a/docs/public/screenshots/icon-button-2.png b/docs/public/screenshots/icon-button-2.png
new file mode 100644
index 0000000000..d555823405
Binary files /dev/null and b/docs/public/screenshots/icon-button-2.png differ
diff --git a/docs/public/screenshots/icon-button-3.png b/docs/public/screenshots/icon-button-3.png
new file mode 100644
index 0000000000..367f7d0c3c
Binary files /dev/null and b/docs/public/screenshots/icon-button-3.png differ
diff --git a/docs/public/screenshots/icon-button-4.png b/docs/public/screenshots/icon-button-4.png
new file mode 100644
index 0000000000..57c723ade5
Binary files /dev/null and b/docs/public/screenshots/icon-button-4.png differ
diff --git a/docs/public/screenshots/icon.png b/docs/public/screenshots/icon.png
new file mode 100644
index 0000000000..c86261c000
Binary files /dev/null and b/docs/public/screenshots/icon.png differ
diff --git a/docs/public/screenshots/list-accordion-1.png b/docs/public/screenshots/list-accordion-1.png
new file mode 100644
index 0000000000..cb68886a74
Binary files /dev/null and b/docs/public/screenshots/list-accordion-1.png differ
diff --git a/docs/public/screenshots/list-accordion-2.png b/docs/public/screenshots/list-accordion-2.png
new file mode 100644
index 0000000000..f3d8a7093d
Binary files /dev/null and b/docs/public/screenshots/list-accordion-2.png differ
diff --git a/docs/public/screenshots/list-accordion-3.png b/docs/public/screenshots/list-accordion-3.png
new file mode 100644
index 0000000000..de3668d964
Binary files /dev/null and b/docs/public/screenshots/list-accordion-3.png differ
diff --git a/docs/public/screenshots/list-accordion-group.png b/docs/public/screenshots/list-accordion-group.png
new file mode 100644
index 0000000000..a3e9e5b48b
Binary files /dev/null and b/docs/public/screenshots/list-accordion-group.png differ
diff --git a/docs/public/screenshots/list-icon.png b/docs/public/screenshots/list-icon.png
new file mode 100644
index 0000000000..ec9be1f418
Binary files /dev/null and b/docs/public/screenshots/list-icon.png differ
diff --git a/docs/public/screenshots/list-item-1.png b/docs/public/screenshots/list-item-1.png
new file mode 100644
index 0000000000..376fdfa5aa
Binary files /dev/null and b/docs/public/screenshots/list-item-1.png differ
diff --git a/docs/public/screenshots/list-item-2.png b/docs/public/screenshots/list-item-2.png
new file mode 100644
index 0000000000..3444be2e52
Binary files /dev/null and b/docs/public/screenshots/list-item-2.png differ
diff --git a/docs/public/screenshots/list-item-3.png b/docs/public/screenshots/list-item-3.png
new file mode 100644
index 0000000000..f7747f9546
Binary files /dev/null and b/docs/public/screenshots/list-item-3.png differ
diff --git a/docs/public/screenshots/list-section.png b/docs/public/screenshots/list-section.png
new file mode 100644
index 0000000000..76baec2e2c
Binary files /dev/null and b/docs/public/screenshots/list-section.png differ
diff --git a/docs/public/screenshots/material-bottom-tabs.gif b/docs/public/screenshots/material-bottom-tabs.gif
new file mode 100644
index 0000000000..7faf6e66f6
Binary files /dev/null and b/docs/public/screenshots/material-bottom-tabs.gif differ
diff --git a/docs/public/screenshots/menu-1.png b/docs/public/screenshots/menu-1.png
new file mode 100644
index 0000000000..babbd17e84
Binary files /dev/null and b/docs/public/screenshots/menu-1.png differ
diff --git a/docs/public/screenshots/menu-2.png b/docs/public/screenshots/menu-2.png
new file mode 100644
index 0000000000..313453f353
Binary files /dev/null and b/docs/public/screenshots/menu-2.png differ
diff --git a/docs/public/screenshots/menu-item.png b/docs/public/screenshots/menu-item.png
new file mode 100644
index 0000000000..09a7702557
Binary files /dev/null and b/docs/public/screenshots/menu-item.png differ
diff --git a/docs/public/screenshots/modal.gif b/docs/public/screenshots/modal.gif
new file mode 100644
index 0000000000..634b2d33ab
Binary files /dev/null and b/docs/public/screenshots/modal.gif differ
diff --git a/docs/public/screenshots/progress-bar.png b/docs/public/screenshots/progress-bar.png
new file mode 100644
index 0000000000..270c5f27af
Binary files /dev/null and b/docs/public/screenshots/progress-bar.png differ
diff --git a/docs/public/screenshots/radio-button-group-android.gif b/docs/public/screenshots/radio-button-group-android.gif
new file mode 100644
index 0000000000..2d1351a6de
Binary files /dev/null and b/docs/public/screenshots/radio-button-group-android.gif differ
diff --git a/docs/public/screenshots/radio-button-group-ios.gif b/docs/public/screenshots/radio-button-group-ios.gif
new file mode 100644
index 0000000000..b0c7987db4
Binary files /dev/null and b/docs/public/screenshots/radio-button-group-ios.gif differ
diff --git a/docs/public/screenshots/radio-disabled.android.png b/docs/public/screenshots/radio-disabled.android.png
new file mode 100644
index 0000000000..eb21d7dd28
Binary files /dev/null and b/docs/public/screenshots/radio-disabled.android.png differ
diff --git a/docs/public/screenshots/radio-disabled.ios.png b/docs/public/screenshots/radio-disabled.ios.png
new file mode 100644
index 0000000000..78c9092fac
Binary files /dev/null and b/docs/public/screenshots/radio-disabled.ios.png differ
diff --git a/docs/public/screenshots/radio-enabled.android.png b/docs/public/screenshots/radio-enabled.android.png
new file mode 100644
index 0000000000..9f589bc97f
Binary files /dev/null and b/docs/public/screenshots/radio-enabled.android.png differ
diff --git a/docs/public/screenshots/radio-enabled.ios.png b/docs/public/screenshots/radio-enabled.ios.png
new file mode 100644
index 0000000000..91e6ff4c30
Binary files /dev/null and b/docs/public/screenshots/radio-enabled.ios.png differ
diff --git a/docs/public/screenshots/radio-item.ios.png b/docs/public/screenshots/radio-item.ios.png
new file mode 100644
index 0000000000..ae5ec2c956
Binary files /dev/null and b/docs/public/screenshots/radio-item.ios.png differ
diff --git a/docs/public/screenshots/react-navigation-appBar1.png b/docs/public/screenshots/react-navigation-appBar1.png
new file mode 100644
index 0000000000..1c4399057b
Binary files /dev/null and b/docs/public/screenshots/react-navigation-appBar1.png differ
diff --git a/docs/public/screenshots/react-navigation-appBar2.gif b/docs/public/screenshots/react-navigation-appBar2.gif
new file mode 100644
index 0000000000..c7606c63ce
Binary files /dev/null and b/docs/public/screenshots/react-navigation-appBar2.gif differ
diff --git a/docs/public/screenshots/react-navigation-appBar3.gif b/docs/public/screenshots/react-navigation-appBar3.gif
new file mode 100644
index 0000000000..973c608dc2
Binary files /dev/null and b/docs/public/screenshots/react-navigation-appBar3.gif differ
diff --git a/docs/public/screenshots/react-navigation-appBar4.gif b/docs/public/screenshots/react-navigation-appBar4.gif
new file mode 100644
index 0000000000..cac63ae122
Binary files /dev/null and b/docs/public/screenshots/react-navigation-appBar4.gif differ
diff --git a/docs/public/screenshots/searchbar-view.png b/docs/public/screenshots/searchbar-view.png
new file mode 100644
index 0000000000..f7071d41ee
Binary files /dev/null and b/docs/public/screenshots/searchbar-view.png differ
diff --git a/docs/public/screenshots/searchbar.png b/docs/public/screenshots/searchbar.png
new file mode 100644
index 0000000000..c87ce15abc
Binary files /dev/null and b/docs/public/screenshots/searchbar.png differ
diff --git a/docs/public/screenshots/segmented-button-multi-select.png b/docs/public/screenshots/segmented-button-multi-select.png
new file mode 100644
index 0000000000..c89f85d03b
Binary files /dev/null and b/docs/public/screenshots/segmented-button-multi-select.png differ
diff --git a/docs/public/screenshots/segmented-button-single-select.png b/docs/public/screenshots/segmented-button-single-select.png
new file mode 100644
index 0000000000..7a374c986d
Binary files /dev/null and b/docs/public/screenshots/segmented-button-single-select.png differ
diff --git a/docs/public/screenshots/segmentedbuttons.gif b/docs/public/screenshots/segmentedbuttons.gif
new file mode 100644
index 0000000000..72bb80868d
Binary files /dev/null and b/docs/public/screenshots/segmentedbuttons.gif differ
diff --git a/docs/public/screenshots/snackbar.gif b/docs/public/screenshots/snackbar.gif
new file mode 100644
index 0000000000..5ea8a95a0b
Binary files /dev/null and b/docs/public/screenshots/snackbar.gif differ
diff --git a/docs/public/screenshots/surface-elevated-full-width.png b/docs/public/screenshots/surface-elevated-full-width.png
new file mode 100644
index 0000000000..20ba6ae7f3
Binary files /dev/null and b/docs/public/screenshots/surface-elevated-full-width.png differ
diff --git a/docs/public/screenshots/surface-flat-full-width.png b/docs/public/screenshots/surface-flat-full-width.png
new file mode 100644
index 0000000000..72d4ab51ab
Binary files /dev/null and b/docs/public/screenshots/surface-flat-full-width.png differ
diff --git a/docs/public/screenshots/switch-disabled.android.png b/docs/public/screenshots/switch-disabled.android.png
new file mode 100644
index 0000000000..8879741833
Binary files /dev/null and b/docs/public/screenshots/switch-disabled.android.png differ
diff --git a/docs/public/screenshots/switch-disabled.ios.png b/docs/public/screenshots/switch-disabled.ios.png
new file mode 100644
index 0000000000..8508e43f15
Binary files /dev/null and b/docs/public/screenshots/switch-disabled.ios.png differ
diff --git a/docs/public/screenshots/switch-enabled.android.png b/docs/public/screenshots/switch-enabled.android.png
new file mode 100644
index 0000000000..aa83d9179f
Binary files /dev/null and b/docs/public/screenshots/switch-enabled.android.png differ
diff --git a/docs/public/screenshots/switch-enabled.ios.png b/docs/public/screenshots/switch-enabled.ios.png
new file mode 100644
index 0000000000..66e4d8019e
Binary files /dev/null and b/docs/public/screenshots/switch-enabled.ios.png differ
diff --git a/docs/public/screenshots/text-badges.png b/docs/public/screenshots/text-badges.png
new file mode 100644
index 0000000000..d7e69056e8
Binary files /dev/null and b/docs/public/screenshots/text-badges.png differ
diff --git a/docs/public/screenshots/text-input-filled.png b/docs/public/screenshots/text-input-filled.png
new file mode 100644
index 0000000000..03ab10d37e
Binary files /dev/null and b/docs/public/screenshots/text-input-filled.png differ
diff --git a/docs/public/screenshots/text-input-outlined.png b/docs/public/screenshots/text-input-outlined.png
new file mode 100644
index 0000000000..1abb39e072
Binary files /dev/null and b/docs/public/screenshots/text-input-outlined.png differ
diff --git a/docs/public/screenshots/themingWithReactNavigationDarkLightSwitch.gif b/docs/public/screenshots/themingWithReactNavigationDarkLightSwitch.gif
new file mode 100644
index 0000000000..47c6e90b40
Binary files /dev/null and b/docs/public/screenshots/themingWithReactNavigationDarkLightSwitch.gif differ
diff --git a/docs/public/screenshots/toggle-button-group.gif b/docs/public/screenshots/toggle-button-group.gif
new file mode 100644
index 0000000000..da3f444e35
Binary files /dev/null and b/docs/public/screenshots/toggle-button-group.gif differ
diff --git a/docs/public/screenshots/toggle-button-row.gif b/docs/public/screenshots/toggle-button-row.gif
new file mode 100644
index 0000000000..a78fdb9160
Binary files /dev/null and b/docs/public/screenshots/toggle-button-row.gif differ
diff --git a/docs/public/screenshots/toggle-button.png b/docs/public/screenshots/toggle-button.png
new file mode 100644
index 0000000000..86618d573c
Binary files /dev/null and b/docs/public/screenshots/toggle-button.png differ
diff --git a/docs/public/screenshots/tooltip.png b/docs/public/screenshots/tooltip.png
new file mode 100644
index 0000000000..52f204c341
Binary files /dev/null and b/docs/public/screenshots/tooltip.png differ
diff --git a/docs/public/screenshots/tooltips.gif b/docs/public/screenshots/tooltips.gif
new file mode 100644
index 0000000000..648b08b63b
Binary files /dev/null and b/docs/public/screenshots/tooltips.gif differ
diff --git a/docs/public/screenshots/touchable-ripple.gif b/docs/public/screenshots/touchable-ripple.gif
new file mode 100644
index 0000000000..7e3ab12d9d
Binary files /dev/null and b/docs/public/screenshots/touchable-ripple.gif differ
diff --git a/docs/public/screenshots/typography.png b/docs/public/screenshots/typography.png
new file mode 100644
index 0000000000..5a1ae9a835
Binary files /dev/null and b/docs/public/screenshots/typography.png differ
diff --git a/docs/public/showcase/appngo.png b/docs/public/showcase/appngo.png
new file mode 100644
index 0000000000..bf31f9e5e1
Binary files /dev/null and b/docs/public/showcase/appngo.png differ
diff --git a/docs/public/showcase/astrale.png b/docs/public/showcase/astrale.png
new file mode 100644
index 0000000000..14f7253a86
Binary files /dev/null and b/docs/public/showcase/astrale.png differ
diff --git a/docs/public/showcase/bluebirding.png b/docs/public/showcase/bluebirding.png
new file mode 100644
index 0000000000..909b14384d
Binary files /dev/null and b/docs/public/showcase/bluebirding.png differ
diff --git a/docs/public/showcase/clutch.png b/docs/public/showcase/clutch.png
new file mode 100644
index 0000000000..d7eb42fb08
Binary files /dev/null and b/docs/public/showcase/clutch.png differ
diff --git a/docs/public/showcase/crazythursday.jpg b/docs/public/showcase/crazythursday.jpg
new file mode 100644
index 0000000000..983131363f
Binary files /dev/null and b/docs/public/showcase/crazythursday.jpg differ
diff --git a/docs/public/showcase/darkhackernews.png b/docs/public/showcase/darkhackernews.png
new file mode 100644
index 0000000000..c086b96252
Binary files /dev/null and b/docs/public/showcase/darkhackernews.png differ
diff --git a/docs/public/showcase/groovy.png b/docs/public/showcase/groovy.png
new file mode 100644
index 0000000000..ec7e80994e
Binary files /dev/null and b/docs/public/showcase/groovy.png differ
diff --git a/docs/public/showcase/homeworkhelper.png b/docs/public/showcase/homeworkhelper.png
new file mode 100644
index 0000000000..3021fc9f05
Binary files /dev/null and b/docs/public/showcase/homeworkhelper.png differ
diff --git a/docs/public/showcase/lyracollect.png b/docs/public/showcase/lyracollect.png
new file mode 100644
index 0000000000..c852ff2a55
Binary files /dev/null and b/docs/public/showcase/lyracollect.png differ
diff --git a/docs/public/showcase/moonmeet.png b/docs/public/showcase/moonmeet.png
new file mode 100644
index 0000000000..20ec7256e9
Binary files /dev/null and b/docs/public/showcase/moonmeet.png differ
diff --git a/docs/public/showcase/pandadeals.png b/docs/public/showcase/pandadeals.png
new file mode 100644
index 0000000000..1893074ee8
Binary files /dev/null and b/docs/public/showcase/pandadeals.png differ
diff --git a/docs/public/showcase/paper.png b/docs/public/showcase/paper.png
new file mode 100644
index 0000000000..4e068719dc
Binary files /dev/null and b/docs/public/showcase/paper.png differ
diff --git a/docs/public/showcase/quakemap.png b/docs/public/showcase/quakemap.png
new file mode 100644
index 0000000000..667a113ce9
Binary files /dev/null and b/docs/public/showcase/quakemap.png differ
diff --git a/docs/public/showcase/racecalendar.png b/docs/public/showcase/racecalendar.png
new file mode 100644
index 0000000000..a78108e803
Binary files /dev/null and b/docs/public/showcase/racecalendar.png differ
diff --git a/docs/public/showcase/rozy.png b/docs/public/showcase/rozy.png
new file mode 100644
index 0000000000..6840abcb46
Binary files /dev/null and b/docs/public/showcase/rozy.png differ
diff --git a/docs/public/showcase/showman.png b/docs/public/showcase/showman.png
new file mode 100644
index 0000000000..5d4a323a9b
Binary files /dev/null and b/docs/public/showcase/showman.png differ
diff --git a/docs/public/showcase/tracksnz.png b/docs/public/showcase/tracksnz.png
new file mode 100644
index 0000000000..4dfe0bb7f8
Binary files /dev/null and b/docs/public/showcase/tracksnz.png differ
diff --git a/docs/public/showcase/unicore.png b/docs/public/showcase/unicore.png
new file mode 100644
index 0000000000..42c752fe12
Binary files /dev/null and b/docs/public/showcase/unicore.png differ
diff --git a/docs/public/showcase/vibemap.png b/docs/public/showcase/vibemap.png
new file mode 100644
index 0000000000..ce11a5eec0
Binary files /dev/null and b/docs/public/showcase/vibemap.png differ
diff --git a/docs/public/showcase/weatherforecast.png b/docs/public/showcase/weatherforecast.png
new file mode 100644
index 0000000000..0b2d22144f
Binary files /dev/null and b/docs/public/showcase/weatherforecast.png differ
diff --git a/docs/public/showcase/yummeals.png b/docs/public/showcase/yummeals.png
new file mode 100644
index 0000000000..f509bf02b1
Binary files /dev/null and b/docs/public/showcase/yummeals.png differ
diff --git a/docs/public/showcase/zoomapto.png b/docs/public/showcase/zoomapto.png
new file mode 100644
index 0000000000..d0ab1e7998
Binary files /dev/null and b/docs/public/showcase/zoomapto.png differ
diff --git a/docs/rspress.config.ts b/docs/rspress.config.ts
new file mode 100644
index 0000000000..def1ece6d9
--- /dev/null
+++ b/docs/rspress.config.ts
@@ -0,0 +1,149 @@
+import { withCallstackPreset } from '@callstack/rspress-preset';
+import { defineConfig } from '@rspress/core';
+import path from 'path';
+
+const base = process.env.RSPRESS_BASE_URL ?? '/react-native-paper/';
+const repoUrl = 'https://github.com/callstack/react-native-paper';
+
+const rootDir = __dirname;
+const srcDir = path.join(rootDir, 'src');
+const compatDir = path.join(srcDir, 'rspress-compat');
+
+export default withCallstackPreset(
+ {
+ context: rootDir,
+ docs: {
+ title: 'React Native Paper',
+ description: 'Material Design for React Native',
+ editUrl: `${repoUrl}/edit/main/docs`,
+ rootUrl: 'https://callstack.github.io/react-native-paper',
+ icon: 'public/images/favicon.ico',
+ logoLight: '/react-native-paper/images/sidebar-logo.svg',
+ logoDark: '/react-native-paper/images/sidebar-logo.svg',
+ rootDir: '.',
+ socials: {
+ github: repoUrl,
+ discord: 'https://discord.gg/zwR2Cdh',
+ x: 'https://twitter.com/rn_paper',
+ },
+ },
+ theme: {
+ content: {
+ docFooterCTAHeadline: '',
+ docFooterCTAButtonText: '',
+ homeBannerHeadline: '',
+ homeBannerDescription: '',
+ homeBannerButtonText: '',
+ outlineCTAHeadline: '',
+ outlineCTADescription: '',
+ outlineCTAButtonText: '',
+ },
+ links: {
+ docFooterCTA: '',
+ homeBanner: '',
+ homeFooter: 'https://www.callstack.com',
+ outlineCTA: '',
+ },
+ },
+ vercelAnalytics: false,
+ },
+ defineConfig({
+ base,
+ outDir: 'build',
+ globalStyles: path.join(srcDir, 'css', 'custom.css'),
+ multiVersion: {
+ default: '5.x',
+ versions: ['5.x', '6.x'],
+ },
+ route: {
+ cleanUrls: true,
+ extensions: ['.md', '.mdx'],
+ include: ['5.x/**/*.{md,mdx}', '6.x/**/*.{md,mdx}'],
+ exclude: [
+ 'src/**',
+ 'scripts/**',
+ 'public/**',
+ 'static/**',
+ 'build/**',
+ 'test-results/**',
+ 'tests/**',
+ 'visual/**',
+ 'component-docs-plugin/**',
+ 'versioned_docs/**',
+ 'versioned_sidebars/**',
+ 'README.md',
+ ],
+ },
+ search: {
+ versioned: true,
+ codeBlocks: true,
+ },
+ builderConfig: {
+ html: {
+ tags: [
+ {
+ tag: 'script',
+ children: `window.process = window.process || { env: {} };
+window.process.env = window.process.env || {};
+window.process.env.NODE_ENV = window.process.env.NODE_ENV || '${
+ process.env.NODE_ENV ?? 'development'
+ }';
+globalThis.process = window.process;`,
+ },
+ ],
+ },
+ resolve: {
+ alias: {
+ '@site': rootDir,
+ '@theme/Admonition': path.join(compatDir, 'Admonition.tsx'),
+ '@theme/CodeBlock': path.join(compatDir, 'CodeBlock.tsx'),
+ '@theme/TabItem': path.join(compatDir, 'TabItem.tsx'),
+ '@theme/Tabs': path.join(compatDir, 'Tabs.tsx'),
+ '@docusaurus/BrowserOnly': path.join(compatDir, 'BrowserOnly.tsx'),
+ '@docusaurus/Link': path.join(compatDir, 'Link.tsx'),
+ '@docusaurus/theme-common': path.join(compatDir, 'theme-common.ts'),
+ '@react-native-vector-icons/get-image': path.join(
+ compatDir,
+ 'empty-module.ts'
+ ),
+ 'react-native-reanimated': path.join(
+ compatDir,
+ 'react-native-reanimated.ts'
+ ),
+ 'react-native-safe-area-context': path.join(
+ compatDir,
+ 'react-native-safe-area-context.tsx'
+ ),
+ 'react-native$': path.join(
+ rootDir,
+ 'node_modules',
+ 'react-native-web'
+ ),
+ 'react-native-paper': path.join(
+ rootDir,
+ '..',
+ 'lib',
+ 'module',
+ 'index.js'
+ ),
+ react: path.join(rootDir, 'node_modules', 'react'),
+ 'react-dom': path.join(rootDir, 'node_modules', 'react-dom'),
+ },
+ },
+ source: {
+ define: {
+ __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
+ 'process.env.NODE_ENV': JSON.stringify(
+ process.env.NODE_ENV ?? 'development'
+ ),
+ },
+ },
+ },
+ themeConfig: {
+ outlineTitle: 'Contents',
+ overview: { filterNameText: '' },
+ searchNoResultsText: 'No results found, try something different than',
+ searchSuggestedQueryText: '',
+ } as any,
+ })
+);
diff --git a/docs/scripts/generate-current-component-docs.mjs b/docs/scripts/generate-current-component-docs.mjs
new file mode 100644
index 0000000000..4a57505083
--- /dev/null
+++ b/docs/scripts/generate-current-component-docs.mjs
@@ -0,0 +1,168 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const parseComponentDocs =
+ require('component-docs/dist/parsers/component').default;
+const generatePageMDX = require('../component-docs-plugin/generatePageMDX');
+const componentDocsConfig = require('../component-docs.config');
+
+const rootDir = path.resolve(
+ path.dirname(new URL(import.meta.url).pathname),
+ '..'
+);
+const repoRootDir = path.resolve(rootDir, '..');
+const outputDir = componentDocsConfig.docsRootDir;
+const metadataPath = path.join(rootDir, 'src', 'data', 'componentDocs6x.json');
+
+const isRecord = (value) => typeof value === 'object' && value !== null;
+
+const normalizeDocs = (value, sourceDir) => {
+ if (Array.isArray(value)) {
+ return value.map((item) => normalizeDocs(item, sourceDir));
+ }
+
+ if (!isRecord(value)) {
+ return value;
+ }
+
+ return Object.fromEntries(
+ Object.entries(value).map(([key, item]) => {
+ if (key !== 'dependencies' || !Array.isArray(item)) {
+ return [key, normalizeDocs(item, sourceDir)];
+ }
+
+ return [
+ key,
+ item.map((dependency) => {
+ if (typeof dependency !== 'string' || !path.isAbsolute(dependency)) {
+ return dependency;
+ }
+
+ const realDependency = fs.existsSync(dependency)
+ ? fs.realpathSync(dependency)
+ : dependency;
+ const relativeDependency = path.relative(sourceDir, realDependency);
+
+ if (
+ relativeDependency.startsWith('..') ||
+ path.isAbsolute(relativeDependency)
+ ) {
+ return dependency;
+ }
+
+ return relativeDependency.split(path.sep).join('/');
+ }),
+ ];
+ })
+ );
+};
+
+const ensureDir = (dirPath) => {
+ fs.mkdirSync(dirPath, { recursive: true });
+};
+
+const writeJson = (filePath, value) => {
+ ensureDir(path.dirname(filePath));
+ fs.writeFileSync(filePath, `${JSON.stringify(value, null, 2)}\n`);
+};
+
+const writeDocPage = (targetPath, sourcePath, docs) => {
+ const doc = parseComponentDocs(sourcePath, {
+ root: componentDocsConfig.libsRootDir,
+ });
+
+ ensureDir(path.dirname(targetPath));
+ fs.writeFileSync(
+ targetPath,
+ generatePageMDX(
+ doc,
+ path
+ .relative(componentDocsConfig.libsRootDir, sourcePath)
+ .replace(/\.tsx$/, '')
+ .split(path.sep)
+ .join('/'),
+ { version: '6.x' }
+ )
+ );
+
+ docs[
+ path
+ .relative(componentDocsConfig.libsRootDir, sourcePath)
+ .replace(/\.tsx$/, '')
+ .split(path.sep)
+ .join('/')
+ ] = doc;
+};
+
+const writeMetaFiles = () => {
+ writeJson(
+ path.join(outputDir, '_meta.json'),
+ Object.entries(componentDocsConfig.pages).map(([entryName, pageValue]) => {
+ if (typeof pageValue === 'string') {
+ return entryName;
+ }
+
+ return {
+ type: 'dir',
+ name: entryName,
+ label: entryName,
+ collapsible: true,
+ collapsed: false,
+ };
+ })
+ );
+
+ for (const [entryName, pageValue] of Object.entries(componentDocsConfig.pages)) {
+ if (typeof pageValue === 'string') {
+ continue;
+ }
+
+ writeJson(path.join(outputDir, entryName, '_meta.json'), Object.keys(pageValue));
+ }
+};
+
+const main = () => {
+ fs.rmSync(outputDir, { recursive: true, force: true });
+ ensureDir(outputDir);
+
+ const docs = {};
+
+ for (const [entryName, pageValue] of Object.entries(componentDocsConfig.pages)) {
+ if (typeof pageValue === 'string') {
+ writeDocPage(
+ path.join(outputDir, `${entryName}.mdx`),
+ path.join(componentDocsConfig.libsRootDir, `${pageValue}.tsx`),
+ docs
+ );
+ continue;
+ }
+
+ const groupDir = path.join(outputDir, entryName);
+
+ for (const [subitem, source] of Object.entries(pageValue)) {
+ writeDocPage(
+ path.join(groupDir, `${subitem}.mdx`),
+ path.join(componentDocsConfig.libsRootDir, `${source}.tsx`),
+ docs
+ );
+ }
+ }
+
+ ensureDir(path.dirname(metadataPath));
+ fs.writeFileSync(
+ metadataPath,
+ `${JSON.stringify(
+ {
+ docs: normalizeDocs(docs, fs.realpathSync(repoRootDir)),
+ },
+ null,
+ 2
+ )}\n`
+ );
+
+ writeMetaFiles();
+};
+
+main();
diff --git a/docs/scripts/generate-rspress-content.mjs b/docs/scripts/generate-rspress-content.mjs
new file mode 100644
index 0000000000..f3cdd53987
--- /dev/null
+++ b/docs/scripts/generate-rspress-content.mjs
@@ -0,0 +1,319 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const componentDocsConfig = require('../component-docs.config');
+
+const rootDir = path.resolve(path.dirname(new URL(import.meta.url).pathname), '..');
+const versionedDocsDir = path.join(rootDir, 'versioned_docs');
+const sourcePagesDir = path.join(rootDir, 'src', 'pages');
+const staticDir = path.join(rootDir, 'static');
+const publicDir = path.join(rootDir, 'public');
+const docsOrder = ['5.x', '6.x'];
+
+const FRONTMATTER_TITLE = /^---[\s\S]*?title:\s*(.+?)\s*$/m;
+const NUMERIC_PREFIX = /^\d+-/;
+
+const ensureDir = (dirPath) => {
+ fs.mkdirSync(dirPath, { recursive: true });
+};
+
+const readFile = (filePath) => fs.readFileSync(filePath, 'utf8');
+
+const writeJson = (filePath, value) => {
+ ensureDir(path.dirname(filePath));
+ fs.writeFileSync(filePath, `${JSON.stringify(value, null, 2)}\n`);
+};
+
+const stripExtension = (fileName) => fileName.replace(/\.(md|mdx)$/, '');
+
+const stripNumericPrefix = (fileName) =>
+ stripExtension(fileName).replace(NUMERIC_PREFIX, '');
+
+const getTitle = (content, fallbackName) => {
+ const match = content.match(FRONTMATTER_TITLE);
+ if (match?.[1]) {
+ return match[1].trim();
+ }
+
+ return fallbackName;
+};
+
+const transformSharedContent = (content, version) =>
+ content
+ .replace(/((?:\.\.\/)+)static\//g, '/react-native-paper/')
+ .replace(
+ /\]\(((?:\.\.\/|\.\/)?)(\d{2}-[a-z0-9-]+)\.(md|mdx)\)/gi,
+ (_, prefix, fileName) => `](${prefix}${fileName.replace(NUMERIC_PREFIX, '')})`
+ )
+ .replace(/\]\(\.\/Portal\)/g, '](./Portal/Portal)')
+ .replace(/\]\(\.\.\/Portal\)/g, '](../Portal/Portal)')
+ .replace(
+ /2\. Advanced theme overrides<\/b> - when you add new properties<\/i> or \s+change the built-in schema shape\s+<\/i>/g,
+ '2. Advanced theme overrides - when you add new properties or change the built-in schema shape'
+ )
+ .replace(
+ /\s+We are planning to provide a better support of handling custom theme overrides\s+in future releases\.\s+<\/i>/g,
+ 'We are planning to provide a better support of handling custom theme overrides in future releases.'
+ )
+ .replace(
+ //g,
+ ''
+ );
+
+const transformIndexContent = (content) =>
+ content
+ .replace(
+ '',
+ ''
+ )
+ .replace(
+ "import GetStartedButtons from '../components/GetStartedButtons';",
+ "import GetStartedButtons from '../src/components/GetStartedButtons';"
+ )
+ .replace("import {Button} from 'react-native-paper';\n", '')
+ .replace(
+ "import BannerExample from '../components/BannerExample';",
+ "import BannerExample from '../src/components/BannerExample';"
+ )
+ .replace(/src="\.\/*gallery\//g, 'src="/react-native-paper/gallery/');
+
+const copyFile = (sourcePath, targetPath, transform) => {
+ ensureDir(path.dirname(targetPath));
+ const source = readFile(sourcePath);
+ fs.writeFileSync(targetPath, transform(source));
+};
+
+const createNav = (version) => {
+ const activePrefix =
+ version === '6.x' ? '^/(?:6\\.x/)?docs' : '^/docs';
+
+ return [
+ {
+ text: 'Guides',
+ link: '/docs/guides/getting-started',
+ activeMatch: `${activePrefix}/guides/`,
+ },
+ {
+ text: 'Components',
+ link: '/docs/components/ActivityIndicator',
+ activeMatch: `${activePrefix}/components/`,
+ },
+ {
+ text: 'Showcase',
+ link: '/docs/showcase',
+ activeMatch: `${activePrefix}/showcase$`,
+ },
+ ];
+};
+
+const getVersionComponentOrder = (version) => {
+ const fromConfig = Object.entries(componentDocsConfig.pages).map(
+ ([entryName, value]) => {
+ if (typeof value === 'string') {
+ return entryName;
+ }
+
+ return {
+ type: 'dir',
+ name: entryName,
+ label: entryName,
+ collapsible: true,
+ collapsed: false,
+ };
+ }
+ );
+
+ if (version !== '5.x') {
+ return fromConfig;
+ }
+
+ return [
+ ...fromConfig,
+ {
+ type: 'dir',
+ name: 'HelperText',
+ label: 'HelperText',
+ collapsible: true,
+ collapsed: false,
+ },
+ ];
+};
+
+const getComponentChildOrder = (version, dirName) => {
+ const configEntry = componentDocsConfig.pages[dirName];
+
+ if (version !== '5.x' && configEntry && typeof configEntry !== 'string') {
+ return Object.keys(configEntry);
+ }
+
+ const dirPath = path.join(
+ versionedDocsDir,
+ `version-${version}`,
+ 'components',
+ dirName
+ );
+
+ return fs
+ .readdirSync(dirPath, { withFileTypes: true })
+ .filter((entry) => entry.isFile() && /\.(md|mdx)$/.test(entry.name))
+ .map((entry) => stripExtension(entry.name));
+};
+
+const createGuidesMeta = (version) => {
+ const guidesDir = path.join(versionedDocsDir, `version-${version}`, 'guides');
+
+ return fs
+ .readdirSync(guidesDir, { withFileTypes: true })
+ .filter((entry) => entry.isFile() && /\.(md|mdx)$/.test(entry.name))
+ .sort((left, right) => left.name.localeCompare(right.name, undefined, { numeric: true }))
+ .map((entry) => stripNumericPrefix(entry.name));
+};
+
+const createComponentMeta = (version) => {
+ return getVersionComponentOrder(version);
+};
+
+const copyGuides = (version, targetVersionDir) => {
+ const guidesDir = path.join(versionedDocsDir, `version-${version}`, 'guides');
+ const targetGuidesDir = path.join(targetVersionDir, 'docs', 'guides');
+
+ for (const entry of fs.readdirSync(guidesDir, { withFileTypes: true })) {
+ if (!entry.isFile() || !/\.(md|mdx)$/.test(entry.name)) {
+ continue;
+ }
+
+ const sourcePath = path.join(guidesDir, entry.name);
+ const cleanName = `${stripNumericPrefix(entry.name)}${path.extname(entry.name)}`;
+ copyFile(sourcePath, path.join(targetGuidesDir, cleanName), (content) =>
+ transformSharedContent(content, version)
+ );
+ }
+};
+
+const copyComponentDocs = (version, targetVersionDir) => {
+ const componentsDir = path.join(
+ versionedDocsDir,
+ `version-${version}`,
+ 'components'
+ );
+ const targetComponentsDir = path.join(targetVersionDir, 'docs', 'components');
+
+ const walk = (sourceDir, outputDir) => {
+ ensureDir(outputDir);
+
+ for (const entry of fs.readdirSync(sourceDir, { withFileTypes: true })) {
+ if (entry.name === '_category_.json') {
+ continue;
+ }
+
+ const sourcePath = path.join(sourceDir, entry.name);
+ const targetPath = path.join(outputDir, entry.name);
+
+ if (entry.isDirectory()) {
+ walk(sourcePath, targetPath);
+ continue;
+ }
+
+ if (!/\.(md|mdx)$/.test(entry.name)) {
+ continue;
+ }
+
+ copyFile(sourcePath, targetPath, (content) =>
+ transformSharedContent(content, version)
+ );
+ }
+ };
+
+ walk(componentsDir, targetComponentsDir);
+};
+
+const writeMetaFiles = (version, targetVersionDir) => {
+ const docsDir = path.join(targetVersionDir, 'docs');
+ const componentsDir = path.join(docsDir, 'components');
+
+ writeJson(path.join(docsDir, '_meta.json'), [
+ {
+ type: 'dir-section-header',
+ name: 'guides',
+ label: 'Guides',
+ },
+ {
+ type: 'dir-section-header',
+ name: 'components',
+ label: 'Components',
+ },
+ {
+ type: 'file',
+ name: 'showcase',
+ label: 'Showcase',
+ },
+ ]);
+
+ writeJson(
+ path.join(docsDir, 'guides', '_meta.json'),
+ createGuidesMeta(version)
+ );
+ writeJson(path.join(componentsDir, '_meta.json'), createComponentMeta(version));
+
+ for (const entry of fs.readdirSync(componentsDir, { withFileTypes: true })) {
+ if (!entry.isDirectory()) {
+ continue;
+ }
+
+ writeJson(
+ path.join(componentsDir, entry.name, '_meta.json'),
+ getComponentChildOrder(version, entry.name)
+ );
+ }
+};
+
+const writeIndexPage = (targetVersionDir) => {
+ copyFile(
+ path.join(sourcePagesDir, 'index.mdx'),
+ path.join(targetVersionDir, 'index.mdx'),
+ transformIndexContent
+ );
+};
+
+const writeShowcasePage = (version, targetVersionDir) => {
+ copyFile(
+ path.join(versionedDocsDir, `version-${version}`, 'showcase.mdx'),
+ path.join(targetVersionDir, 'docs', 'showcase.mdx'),
+ (content) => transformSharedContent(content, version)
+ );
+};
+
+const copyStaticAssets = () => {
+ fs.cpSync(staticDir, publicDir, { recursive: true, force: true });
+ fs.cpSync(staticDir, path.join(publicDir, 'react-native-paper'), {
+ recursive: true,
+ force: true,
+ });
+};
+
+const prepareVersionDir = (version) => {
+ const targetVersionDir = path.join(rootDir, version);
+ fs.rmSync(targetVersionDir, { recursive: true, force: true });
+ ensureDir(targetVersionDir);
+
+ writeJson(path.join(targetVersionDir, '_nav.json'), createNav(version));
+ writeIndexPage(targetVersionDir);
+ writeShowcasePage(version, targetVersionDir);
+ copyGuides(version, targetVersionDir);
+ copyComponentDocs(version, targetVersionDir);
+ writeMetaFiles(version, targetVersionDir);
+};
+
+const main = () => {
+ copyStaticAssets();
+ fs.rmSync(path.join(rootDir, 'docs'), { recursive: true, force: true });
+ fs.rmSync(path.join(rootDir, 'index.mdx'), { force: true });
+
+ for (const version of docsOrder) {
+ prepareVersionDir(version);
+ }
+};
+
+main();
diff --git a/docs/src/components/BannerExample.tsx b/docs/src/components/BannerExample.tsx
index fcb3e0a8e2..e49e017f87 100644
--- a/docs/src/components/BannerExample.tsx
+++ b/docs/src/components/BannerExample.tsx
@@ -1,18 +1,14 @@
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
-//@ts-ignore
-import BrowserOnly from '@docusaurus/BrowserOnly';
-//@ts-ignore
-import { useColorMode } from '@docusaurus/theme-common';
import {
Avatar,
Button,
- FAB,
DarkTheme,
+ FAB,
LightTheme,
ProgressBar,
- PaperProvider,
+ Provider,
RadioButton,
Switch,
Text,
@@ -20,6 +16,9 @@ import {
useTheme,
} from 'react-native-paper';
+import BrowserOnly from '../rspress-compat/BrowserOnly';
+import { useColorMode } from '../rspress-compat/theme-common';
+
const styles = StyleSheet.create({
container: {
padding: 24,
@@ -109,13 +108,13 @@ const BannerExample = () => {
setText(text)}
+ onChangeText={(value) => setText(value)}
/>
setText(text)}
+ onChangeText={(value) => setText(value)}
/>
@@ -142,9 +141,6 @@ const BannerExample = () => {
};
const Shimmer = () => {
- /* Docusaurus won't call StyleSheet.create() server-side */
- /* eslint-disable react-native/no-inline-styles, react-native/no-color-literals */
-
return (
{
const ThemedBannerExample = () => {
const isDarkTheme = useColorMode().colorMode === 'dark';
+
return (
-
+
-
+
);
};
diff --git a/docs/src/components/GetStartedButtons.tsx b/docs/src/components/GetStartedButtons.tsx
index 76a126600f..38a11670c1 100644
--- a/docs/src/components/GetStartedButtons.tsx
+++ b/docs/src/components/GetStartedButtons.tsx
@@ -1,109 +1,57 @@
-import { StyleSheet, View } from 'react-native';
-
-//@ts-ignore
-import BrowserOnly from '@docusaurus/BrowserOnly';
-//@ts-ignore
-import Link from '@docusaurus/Link';
-//@ts-ignore
-import { useColorMode } from '@docusaurus/theme-common';
-import {
- Button,
- DarkTheme,
- LightTheme,
- PaperProvider,
-} from 'react-native-paper';
-
-const styles = StyleSheet.create({
- container: {
- flexDirection: 'row',
- justifyContent: 'center',
- paddingBottom: 16,
- },
- button: {
- marginRight: 16,
- },
-});
-
-const noTextDecoration = {
+import { useColorMode } from '../rspress-compat/theme-common';
+
+const baseButtonStyle = {
+ alignItems: 'center',
+ borderRadius: '999px',
+ borderStyle: 'solid',
+ borderWidth: '1px',
+ display: 'inline-flex',
+ fontSize: '0.95rem',
+ fontWeight: 600,
+ justifyContent: 'center',
+ minHeight: '2.75rem',
+ padding: '0 1.25rem',
textDecoration: 'none',
+ transition: 'transform 120ms ease, background-color 120ms ease',
};
-// Needed for ripple effect when pressing `Button`, however navigation is handled by `Link`
-const noop = () => {};
-
-const GetStartedButton = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-const Shimmer = () => {
- /* Docusaurus won't call StyleSheet.create() server-side */
- /* eslint-disable react-native/no-inline-styles, react-native/no-color-literals */
+export default function GetStartedButtons() {
+ const isDarkTheme = useColorMode().colorMode === 'dark';
return (
-
-
-
+ Get started
+
+
-
- );
-};
-
-const ThemedGetStarted = () => {
- const isDarkTheme = useColorMode().colorMode === 'dark';
- return (
-
-
-
- );
-};
-
-export default function ClientSideGetStarted() {
- return (
- }>
- {() => }
-
+ >
+ Try on Snack
+
+
);
}
diff --git a/docs/src/components/PaperHomeShowcase.tsx b/docs/src/components/PaperHomeShowcase.tsx
new file mode 100644
index 0000000000..2b9db2a775
--- /dev/null
+++ b/docs/src/components/PaperHomeShowcase.tsx
@@ -0,0 +1,82 @@
+import BannerExample from './BannerExample';
+
+const lightImages = [
+ 'button.png',
+ 'input.png',
+ 'card.png',
+ 'searchbar.png',
+ 'appbar.png',
+ 'snackbar.png',
+ 'chip.png',
+ 'list.png',
+ 'list-accordion.png',
+ 'typography.png',
+ 'bottom-navigation.png',
+ 'fab.png',
+];
+
+const darkImages = [
+ 'button-dark.png',
+ 'input-dark.png',
+ 'card-dark.png',
+ 'searchbar-dark.png',
+ 'appbar-dark.png',
+ 'snackbar-dark.png',
+ 'chip-dark.png',
+ 'list-dark.png',
+ 'list-accordion-dark.png',
+ 'typography-dark.png',
+ 'bottom-navigation-dark.png',
+ 'fab-dark.png',
+];
+
+const renderGallery = (images: string[]) =>
+ images.map((imageName) => (
+
+ ));
+
+export default function PaperHomeShowcase() {
+ return (
+
+
+
+
In practice
+
+ Material components, typography, and controls
+
+
+
+ Browse the component surface the way it appears in real product UI,
+ not as generic documentation chrome.
+
+ );
+}
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index a382d6268e..74c69c0ddc 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -247,7 +247,10 @@ a .badge .badge-text {
display: flex;
flex-direction: row;
flex-wrap: wrap;
+ gap: 32px;
min-width: 0;
+ align-items: flex-start;
+ overflow: visible;
}
.color-picker {
@@ -406,50 +409,58 @@ a .badge .badge-text {
}
}
+.showcase-card {
+ flex: 0 0 auto;
+ overflow: visible;
+}
+
.showcase-image-container {
+ position: relative;
overflow: hidden;
- margin: 16px;
+ width: 270px;
+ height: 480px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+ background: #ffffff;
+ isolation: isolate;
}
-@media (min-width: 420px) {
- .showcase-image-container {
- height: 528px;
- }
-
- .showcase-image-container:hover .showcase-info,
- .showcase-image-container:focus .showcase-info {
- transform: translateY(-48px);
- }
+.showcase-image-container:hover,
+.showcase-image-container:focus-within {
+ z-index: 2;
+ box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}
+.showcase-image-container:hover .showcase-info,
+.showcase-image-container:focus-within .showcase-info {
+ transform: translateY(0);
+}
.showcase-image {
display: block;
- max-height: 480px;
- width: auto;
-}
-
-@media (min-width: 420px) {
- .showcase-image {
- height: 480px;
- width: 270px;
- }
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
}
.showcase-info {
- height: 96px;
- padding: 12px;
- transform: translateY(0);
- transition: 150ms;
-}
-
-.showcase-app-name {
- font-size: 16px;
- margin-top: 0;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ min-height: 136px;
+ padding: 18px 24px 20px;
+ transform: translateY(calc(100% - 68px));
+ transition: transform 180ms ease;
+ box-shadow: 0 -16px 32px rgba(15, 23, 42, 0.18);
+}
+
+.showcase-info .showcase-app-name {
+ font-size: 17px;
+ line-height: 1.2;
+ margin-block-start: 0;
+ margin-block-end: 12px;
margin-bottom: 12px;
-
- width: 246px;
+ width: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@@ -458,14 +469,36 @@ a .badge .badge-text {
.showcase-badge-container {
display: flex;
flex-direction: row;
+ align-items: center;
margin-top: 16px;
- padding-left: 3px;
+ padding-left: 1px;
}
.showcase-separation {
margin: 0 10px;
}
+@media (max-width: 420px) {
+ .showcase-gallery {
+ gap: 24px;
+ }
+
+ .showcase-image-container {
+ width: min(270px, 100%);
+ height: auto;
+ }
+
+ .showcase-image {
+ height: auto;
+ aspect-ratio: 9 / 16;
+ }
+
+ .showcase-info {
+ min-height: 124px;
+ transform: translateY(calc(100% - 60px));
+ }
+}
+
/* Switch.tsx */
.react-switch-checkbox {
@@ -534,4 +567,673 @@ a .badge .badge-text {
.extends {
margin-bottom: 20px;
-}
\ No newline at end of file
+}
+
+.paper-version-selector {
+ position: relative;
+ z-index: 10;
+ min-width: 88px;
+ border: 1px solid var(--rp-c-divider, rgba(148, 163, 184, 0.24));
+ border-radius: 999px;
+ background: var(--rp-c-bg-soft, rgba(18, 18, 20, 0.96));
+ color: var(--rp-c-text-1, #fff);
+ backdrop-filter: blur(12px);
+}
+
+.paper-version-selector summary {
+ list-style: none;
+ cursor: pointer;
+ padding: 8px 14px;
+ font-size: 13px;
+ font-weight: 600;
+ text-align: center;
+ white-space: nowrap;
+}
+
+.paper-version-selector summary::-webkit-details-marker {
+ display: none;
+}
+
+.paper-version-selector[open] {
+ border-radius: 18px;
+}
+
+.paper-version-selector-menu {
+ position: absolute;
+ top: calc(100% + 8px);
+ right: 0;
+ display: grid;
+ min-width: 88px;
+ padding: 8px;
+ gap: 4px;
+ border: 1px solid var(--rp-c-divider, rgba(148, 163, 184, 0.24));
+ border-radius: 18px;
+ background: inherit;
+ box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
+}
+
+.paper-version-selector-link {
+ display: block;
+ border-radius: 12px;
+ padding: 8px 10px;
+ color: inherit;
+ text-decoration: none;
+}
+
+.paper-version-selector-link:hover,
+.paper-version-selector-link.active {
+ background: rgba(104, 88, 196, 0.22);
+}
+
+html:not(.dark) .paper-version-selector {
+ background: rgba(255, 255, 255, 0.92);
+ color: #1c1b1f;
+}
+
+html:not(.dark) .paper-version-selector-menu {
+ box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+}
+
+@media (max-width: 960px) {
+ .paper-version-selector {
+ min-width: 76px;
+ }
+
+ .paper-version-selector summary {
+ padding-inline: 12px;
+ }
+}
+
+.rp-doc-layout__outline:empty,
+.rp-doc-layout__outline:not(:has(.rp-toc-item)) {
+ display: none;
+}
+
+.rp-outline__action-row:has(.rp-llms-copy-button),
+.rp-outline__action-row:has(.rp-llms-view-options__trigger) {
+ display: none;
+}
+
+.rp-outline__bottom:not(:has(.rp-edit-link, .rp-scroll-to-top)) {
+ display: none;
+}
+
+.rp-outline__bottom:not(:has(.rp-edit-link, .rp-scroll-to-top))
+ + .rp-outline__divider,
+.rp-outline__divider:has(+ .rp-outline__bottom:not(:has(.rp-edit-link, .rp-scroll-to-top))) {
+ display: none;
+}
+
+.rp-llms-container {
+ display: none !important;
+}
+
+.paper-home-showcase {
+ margin: 56px auto 0;
+ box-sizing: border-box;
+ width: min(72rem, calc(100% - 16px));
+ padding: 0 40px 56px;
+}
+
+.paper-home-showcase__intro {
+ display: grid;
+ gap: 16px;
+ margin-bottom: 18px;
+}
+
+.paper-home-showcase__eyebrow {
+ margin: 0 0 12px;
+ color: #7c4dff;
+ font-size: 14px;
+ font-weight: 600;
+ letter-spacing: 0;
+ text-transform: uppercase;
+}
+
+.paper-home-showcase__title {
+ margin: 0;
+ font-size: clamp(32px, 4vw, 54px);
+ line-height: 1.04;
+}
+
+.paper-home-showcase__copy,
+.paper-home-showcase__links {
+ color: var(--rp-c-text-2);
+ font-size: 18px;
+ line-height: 1.55;
+}
+
+.paper-home-showcase__copy {
+ margin: 0;
+ max-width: 760px;
+}
+
+.paper-home-showcase__links {
+ margin: 0 0 24px;
+}
+
+.paper-home-showcase__links a {
+ color: inherit;
+}
+
+.paper-home-showcase__gallery {
+ display: grid;
+ gap: 16px;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ margin-top: 24px;
+}
+
+.paper-home-showcase__gallery-image {
+ width: min(100%, 348px);
+ margin: 0 auto;
+ border-radius: 20px;
+ border: 1px solid rgba(124, 77, 255, 0.12);
+ background: rgba(124, 77, 255, 0.03);
+}
+
+.paper-prerelease-notice {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 20px;
+ margin: 0 0 32px;
+ padding: 20px 24px;
+ border: 1px solid rgba(245, 158, 11, 0.28);
+ border-left: 4px solid #f59e0b;
+ border-radius: 20px;
+ background: rgba(255, 251, 235, 0.82);
+ box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
+}
+
+.paper-prerelease-notice__icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ border: 2px solid #f59e0b;
+ border-radius: 12px;
+ color: #f59e0b;
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1;
+}
+
+.paper-prerelease-notice__content {
+ min-width: 0;
+}
+
+.paper-prerelease-notice__title,
+.paper-prerelease-notice__body {
+ margin: 0;
+}
+
+.paper-prerelease-notice__title {
+ color: #1f2937;
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.paper-prerelease-notice__body {
+ margin-top: 10px;
+ color: #374151;
+ font-size: 16px;
+ line-height: 1.6;
+}
+
+.paper-prerelease-notice__body a {
+ color: #7c4dff;
+ font-weight: 600;
+}
+
+.paper-banner-example {
+ margin: 0;
+ padding: 28px;
+ border-radius: 32px;
+ border: 1px solid var(--paper-example-border);
+ background: linear-gradient(
+ 180deg,
+ var(--paper-example-panel-alt) 0%,
+ var(--paper-example-panel) 100%
+ );
+ color: var(--paper-example-text);
+ box-shadow: var(--paper-example-shadow);
+}
+
+.paper-banner-example__toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ align-items: center;
+ margin-bottom: 18px;
+}
+
+.paper-banner-example__button,
+.paper-banner-example__avatar,
+.paper-banner-example__fab,
+.paper-banner-example__folder-button {
+ border: 1px solid transparent;
+ font: inherit;
+ letter-spacing: 0;
+ transition:
+ transform 120ms ease,
+ box-shadow 120ms ease,
+ background-color 120ms ease,
+ border-color 120ms ease;
+}
+
+.paper-banner-example__button:hover,
+.paper-banner-example__avatar:hover,
+.paper-banner-example__fab:hover,
+.paper-banner-example__folder-button:hover {
+ transform: translateY(-1px);
+}
+
+.paper-banner-example__button {
+ display: inline-flex;
+ align-items: center;
+ gap: 12px;
+ min-height: 48px;
+ padding: 0 24px;
+ border-radius: 999px;
+ font-size: 16px;
+ font-weight: 600;
+}
+
+.paper-banner-example__button-status {
+ width: 10px;
+ height: 10px;
+ border-radius: 999px;
+ background: color-mix(
+ in srgb,
+ var(--paper-example-accent) 36%,
+ var(--paper-example-panel-soft)
+ );
+}
+
+.paper-banner-example__button-status--busy {
+ background: var(--paper-example-accent);
+ box-shadow: 0 0 0 6px rgba(103, 80, 164, 0.12);
+}
+
+.paper-banner-example__button--outlined,
+.paper-banner-example__button--tonal,
+.paper-banner-example__avatar,
+.paper-banner-example__folder-button {
+ border-color: var(--paper-example-border);
+ background: var(--paper-example-panel-soft);
+ color: var(--paper-example-text);
+}
+
+.paper-banner-example__button--tonal {
+ box-shadow: 0 12px 24px rgba(103, 80, 164, 0.08);
+}
+
+.paper-banner-example__button--selected {
+ border-color: color-mix(
+ in srgb,
+ var(--paper-example-accent) 40%,
+ var(--paper-example-border)
+ );
+}
+
+.paper-banner-example__camera-icon {
+ position: relative;
+ width: 18px;
+ height: 12px;
+ border: 2px solid currentColor;
+ border-radius: 4px;
+}
+
+.paper-banner-example__camera-icon::before {
+ content: '';
+ position: absolute;
+ top: -5px;
+ left: 3px;
+ width: 8px;
+ height: 4px;
+ border-radius: 2px 2px 0 0;
+ background: currentColor;
+}
+
+.paper-banner-example__button--contained,
+.paper-banner-example__fab,
+.paper-banner-example__avatar {
+ background: var(--paper-example-accent);
+ color: var(--paper-example-accent-text);
+ box-shadow: 0 10px 18px rgba(103, 80, 164, 0.22);
+}
+
+.paper-banner-example__fab-group {
+ display: flex;
+ gap: 14px;
+ align-items: center;
+}
+
+.paper-banner-example__fab,
+.paper-banner-example__avatar,
+.paper-banner-example__folder-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ font-weight: 600;
+}
+
+.paper-banner-example__fab {
+ width: 64px;
+ height: 64px;
+ border-radius: 24px;
+}
+
+.paper-banner-example__fab--small {
+ width: 54px;
+ height: 54px;
+ border-radius: 20px;
+}
+
+.paper-banner-example__fab--medium {
+ width: 78px;
+ height: 78px;
+ border-radius: 28px;
+}
+
+.paper-banner-example__fab--large {
+ width: 108px;
+ height: 108px;
+ border-radius: 34px;
+ font-size: 34px;
+}
+
+.paper-banner-example__avatar {
+ width: 84px;
+ height: 84px;
+ border-radius: 999px;
+ font-size: 40px;
+ margin-left: auto;
+}
+
+.paper-banner-example__hero-row {
+ display: flex;
+ margin-bottom: 16px;
+}
+
+.paper-banner-example__folder-button {
+ width: 84px;
+ height: 84px;
+ border-radius: 999px;
+ box-shadow: 0 14px 26px rgba(103, 80, 164, 0.12);
+}
+
+.paper-banner-example__folder-button--raised {
+ box-shadow: 0 18px 32px rgba(103, 80, 164, 0.2);
+}
+
+.paper-banner-example__folder-icon {
+ position: relative;
+ width: 34px;
+ height: 24px;
+ border-radius: 6px;
+ background: currentColor;
+}
+
+.paper-banner-example__folder-icon::before {
+ content: '';
+ position: absolute;
+ top: -5px;
+ left: 3px;
+ width: 14px;
+ height: 8px;
+ border-radius: 4px 4px 0 0;
+ background: currentColor;
+}
+
+.paper-banner-example__progress {
+ height: 8px;
+ border-radius: 999px;
+ overflow: hidden;
+ background: var(--paper-example-panel-soft);
+ margin-bottom: 28px;
+}
+
+.paper-banner-example__progress-bar {
+ width: 64%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ var(--paper-example-accent) 0%,
+ var(--paper-example-accent-strong) 100%
+ );
+}
+
+.paper-banner-example__headline-group {
+ margin-bottom: 24px;
+}
+
+.paper-banner-example__display-large,
+.paper-banner-example__display-medium {
+ margin: 0;
+ letter-spacing: 0;
+}
+
+.paper-banner-example__display-large {
+ font-size: clamp(44px, 6vw, 72px);
+ line-height: 0.98;
+}
+
+.paper-banner-example__display-medium {
+ margin-top: 14px;
+ font-size: clamp(28px, 4vw, 44px);
+ line-height: 1.08;
+}
+
+.paper-banner-example__body {
+ margin: 20px 0 0;
+ max-width: 780px;
+ color: var(--paper-example-muted);
+ font-size: 18px;
+ line-height: 1.65;
+}
+
+.paper-banner-example__switches,
+.paper-banner-example__radios {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+}
+
+.paper-banner-example__switches {
+ margin-bottom: 24px;
+}
+
+.paper-banner-example__switch,
+.paper-banner-example__radio {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 18px;
+}
+
+.paper-banner-example__switch input,
+.paper-banner-example__radio input {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+
+.paper-banner-example__switch-control {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ width: 54px;
+ height: 32px;
+}
+
+.paper-banner-example__switch-track {
+ width: 54px;
+ height: 32px;
+ border-radius: 999px;
+ border: 2px solid var(--paper-example-muted);
+ background: transparent;
+ transition: background-color 120ms ease, border-color 120ms ease;
+}
+
+.paper-banner-example__switch-thumb {
+ position: absolute;
+ top: 7px;
+ left: 7px;
+ width: 14px;
+ height: 14px;
+ border-radius: 999px;
+ background: var(--paper-example-muted);
+ transition: transform 120ms ease, background-color 120ms ease;
+}
+
+.paper-banner-example__switch input:checked + .paper-banner-example__switch-control
+ .paper-banner-example__switch-track {
+ border-color: var(--paper-example-accent);
+ background: color-mix(
+ in srgb,
+ var(--paper-example-accent) 28%,
+ transparent
+ );
+}
+
+.paper-banner-example__switch input:checked + .paper-banner-example__switch-control
+ .paper-banner-example__switch-thumb {
+ transform: translateX(22px);
+ background: var(--paper-example-accent);
+}
+
+.paper-banner-example__fields {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 24px;
+ margin-bottom: 24px;
+}
+
+.paper-banner-example__field {
+ display: grid;
+ gap: 10px;
+ color: var(--paper-example-muted);
+ font-size: 15px;
+}
+
+.paper-banner-example__field input {
+ min-height: 64px;
+ padding: 0 18px;
+ border: 1px solid var(--paper-example-border);
+ border-radius: 20px;
+ background: var(--paper-example-panel-soft);
+ color: var(--paper-example-text);
+ font: inherit;
+}
+
+.paper-banner-example__field input::placeholder {
+ color: var(--paper-example-muted);
+}
+
+.paper-banner-example__field-input--outlined {
+ background: transparent !important;
+ border-color: var(--paper-example-accent) !important;
+}
+
+.paper-banner-example__radio-control {
+ width: 28px;
+ height: 28px;
+ border: 2px solid var(--paper-example-muted);
+ border-radius: 999px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.paper-banner-example__radio-dot {
+ width: 12px;
+ height: 12px;
+ border-radius: 999px;
+ background: transparent;
+}
+
+.paper-banner-example__radio input:checked + .paper-banner-example__radio-control {
+ border-color: var(--paper-example-accent);
+}
+
+.paper-banner-example__radio input:checked + .paper-banner-example__radio-control
+ .paper-banner-example__radio-dot {
+ background: var(--paper-example-accent);
+}
+
+@media (min-width: 997px) {
+ .paper-home-showcase__intro {
+ grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.8fr);
+ align-items: end;
+ }
+}
+
+@media (max-width: 996px) {
+ .paper-home-showcase {
+ width: min(100%, calc(100% - 16px));
+ padding: 0 16px 40px;
+ margin-top: 44px;
+ }
+
+ .paper-home-showcase__gallery {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .paper-banner-example {
+ padding: 22px;
+ border-radius: 28px;
+ }
+
+ .paper-banner-example__avatar {
+ margin-left: 0;
+ }
+
+ .paper-banner-example__fields {
+ grid-template-columns: 1fr;
+ gap: 18px;
+ }
+
+ .paper-prerelease-notice {
+ padding: 20px 22px;
+ }
+}
+
+@media (max-width: 640px) {
+ .paper-home-showcase__gallery {
+ grid-template-columns: 1fr;
+ }
+
+ .paper-home-showcase__gallery-image {
+ width: 100%;
+ }
+
+ .paper-banner-example__switch,
+ .paper-banner-example__radio {
+ font-size: 16px;
+ }
+
+ .paper-banner-example__fab-group {
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .paper-banner-example__fab--large {
+ width: 88px;
+ height: 88px;
+ }
+
+ .paper-banner-example__avatar {
+ width: 72px;
+ height: 72px;
+ font-size: 30px;
+ }
+
+ .paper-prerelease-notice {
+ grid-template-columns: 1fr;
+ gap: 16px;
+ margin-bottom: 24px;
+ padding: 18px;
+ }
+}
diff --git a/docs/src/data/componentDocs6x.json b/docs/src/data/componentDocs6x.json
new file mode 100644
index 0000000000..dcacb1f99f
--- /dev/null
+++ b/docs/src/data/componentDocs6x.json
@@ -0,0 +1,12256 @@
+{
+ "docs": {
+ "ActivityIndicator": {
+ "filepath": "ActivityIndicator.tsx",
+ "title": "ActivityIndicator",
+ "description": "Activity indicator is used to present progress of some activity in the app.\nIt can be used as a drop-in replacement for the ActivityIndicator shipped with React Native.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ActivityIndicator, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```",
+ "link": "activity-indicator",
+ "data": {
+ "description": "Activity indicator is used to present progress of some activity in the app.\nIt can be used as a drop-in replacement for the ActivityIndicator shipped with React Native.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ActivityIndicator, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "ActivityIndicator",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "animating": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show the indicator or hide it.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "The color of the spinner."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'small' | 'large' | number",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'small'"
+ },
+ {
+ "name": "literal",
+ "value": "'large'"
+ },
+ {
+ "name": "number"
+ }
+ ]
+ },
+ "description": "Size of the indicator.",
+ "defaultValue": {
+ "value": "'small'",
+ "computed": false
+ }
+ },
+ "hidesWhenStopped": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the indicator should hide when not animating.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/ActivityIndicator.tsx"
+ ]
+ },
+ "Appbar/Appbar": {
+ "filepath": "Appbar/Appbar.tsx",
+ "title": "Appbar",
+ "description": "A component to display action items in a bar. It can be placed at the top or bottom.\nThe top bar usually contains the screen title, controls such as navigation buttons, menu button etc.\nThe bottom bar usually provides access to a drawer and up to four actions.\n\nBy default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more informations\n\n## Usage\n### Top bar\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} />\n \n {}} />\n {}} />\n \n);\n\nexport default MyComponent;\n```\n\n### Bottom bar\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { Appbar, FAB, useTheme } from 'react-native-paper';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nconst BOTTOM_APPBAR_HEIGHT = 80;\nconst MEDIUM_FAB_HEIGHT = 56;\n\nconst MyComponent = () => {\n const { bottom } = useSafeAreaInsets();\n const theme = useTheme();\n\n return (\n \n {}} />\n {}} />\n {}} />\n {}} />\n {}}\n style={[\n styles.fab,\n { top: (BOTTOM_APPBAR_HEIGHT - MEDIUM_FAB_HEIGHT) / 2 },\n ]}\n />\n \n );\n};\n\nconst styles = StyleSheet.create({\n bottom: {\n backgroundColor: 'aquamarine',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n },\n fab: {\n position: 'absolute',\n right: 16,\n },\n});\n\nexport default MyComponent;\n```",
+ "link": "appbar",
+ "data": {
+ "description": "A component to display action items in a bar. It can be placed at the top or bottom.\nThe top bar usually contains the screen title, controls such as navigation buttons, menu button etc.\nThe bottom bar usually provides access to a drawer and up to four actions.\n\nBy default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more informations\n\n## Usage\n### Top bar\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} />\n \n {}} />\n {}} />\n \n);\n\nexport default MyComponent;\n```\n\n### Bottom bar\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { Appbar, FAB, useTheme } from 'react-native-paper';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nconst BOTTOM_APPBAR_HEIGHT = 80;\nconst MEDIUM_FAB_HEIGHT = 56;\n\nconst MyComponent = () => {\n const { bottom } = useSafeAreaInsets();\n const theme = useTheme();\n\n return (\n \n {}} />\n {}} />\n {}} />\n {}} />\n {}}\n style={[\n styles.fab,\n { top: (BOTTOM_APPBAR_HEIGHT - MEDIUM_FAB_HEIGHT) / 2 },\n ]}\n />\n \n );\n};\n\nconst styles = StyleSheet.create({\n bottom: {\n backgroundColor: 'aquamarine',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n },\n fab: {\n position: 'absolute',\n right: 16,\n },\n});\n\nexport default MyComponent;\n```",
+ "displayName": "Appbar",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "dark": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the background color is a dark color. A dark appbar will render light text and vice-versa."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `Appbar`."
+ },
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'small' | 'medium' | 'large' | 'center-aligned'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'small'"
+ },
+ {
+ "name": "literal",
+ "value": "'medium'"
+ },
+ {
+ "name": "literal",
+ "value": "'large'"
+ },
+ {
+ "name": "literal",
+ "value": "'center-aligned'"
+ }
+ ]
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nMode of the Appbar.\n- `small` - Appbar with default height (64).\n- `medium` - Appbar with medium height (112).\n- `large` - Appbar with large height (152).\n- `center-aligned` - Appbar with default height and center-aligned title.",
+ "defaultValue": {
+ "value": "'small'",
+ "computed": false
+ }
+ },
+ "elevated": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nWhether Appbar background should have the elevation along with primary color pigment."
+ },
+ "safeAreaInsets": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n bottom?: number;\n top?: number;\n left?: number;\n right?: number;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "bottom",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ },
+ {
+ "key": "top",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ },
+ {
+ "key": "left",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ },
+ {
+ "key": "right",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ "description": "Safe area insets for the Appbar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Appbar/Appbar.tsx"
+ ]
+ },
+ "Appbar/AppbarAction": {
+ "filepath": "Appbar/AppbarAction.tsx",
+ "title": "Appbar.Action",
+ "description": "A component used to display an action item in the appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\nimport { Platform } from 'react-native';\n\nconst MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';\n\nconst MyComponent = () => (\n \n \n {}} />\n {}} />\n \n);\n\nexport default MyComponent;\n```",
+ "link": "appbar-action",
+ "data": {
+ "description": "A component used to display an action item in the appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\nimport { Platform } from 'react-native';\n\nconst MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';\n\nconst MyComponent = () => (\n \n \n {}} />\n {}} />\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Appbar.Action",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom color for action icon."
+ },
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Name of the icon to show."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Optional icon size.",
+ "defaultValue": {
+ "value": "24",
+ "computed": false
+ }
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "isLeading": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nWhether it's the leading button. Note: If `Appbar.BackAction` is present, it will be rendered before any `isLeading` icons."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Appbar/AppbarAction.tsx"
+ ],
+ "group": "Appbar"
+ },
+ "Appbar/AppbarBackAction": {
+ "filepath": "Appbar/AppbarBackAction.tsx",
+ "title": "Appbar.BackAction",
+ "description": "A component used to display a back button in the appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} />\n \n);\n\nexport default MyComponent;\n```",
+ "link": "appbar-back-action",
+ "data": {
+ "description": "A component used to display a back button in the appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} />\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Appbar.BackAction",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom color for back icon."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Optional icon size."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button.",
+ "defaultValue": {
+ "value": "'Back'",
+ "computed": false
+ }
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Appbar/AppbarBackAction.tsx"
+ ],
+ "group": "Appbar"
+ },
+ "Appbar/AppbarContent": {
+ "filepath": "Appbar/AppbarContent.tsx",
+ "title": "Appbar.Content",
+ "description": "A component used to display a title in an appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n);\n\nexport default MyComponent;\n```",
+ "link": "appbar-content",
+ "data": {
+ "description": "A component used to display a title in an appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Appbar.Content",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "title": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Text or component for the title."
+ },
+ "titleStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the title, if `title` is a string."
+ },
+ "titleRef": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRefObject",
+ "raw": "React.RefObject",
+ "elements": [
+ {
+ "name": "TextRef"
+ }
+ ]
+ },
+ "description": "Reference for the title."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "If true, disable all interactions for this component."
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for the text."
+ },
+ "titleMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a title font can reach."
+ },
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'small' | 'medium' | 'large' | 'center-aligned'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'small'"
+ },
+ {
+ "name": "literal",
+ "value": "'medium'"
+ },
+ {
+ "name": "literal",
+ "value": "'large'"
+ },
+ {
+ "name": "literal",
+ "value": "'center-aligned'"
+ }
+ ]
+ },
+ "description": "@internal",
+ "defaultValue": {
+ "value": "'small'",
+ "computed": false
+ }
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests.",
+ "defaultValue": {
+ "value": "'appbar-content'",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Appbar/AppbarContent.tsx"
+ ],
+ "group": "Appbar"
+ },
+ "Appbar/AppbarHeader": {
+ "filepath": "Appbar/AppbarHeader.tsx",
+ "title": "Appbar.Header",
+ "description": "A component to use as a header at the top of the screen.\nIt can contain the screen title, controls such as navigation buttons, menu button etc.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const _goBack = () => console.log('Went back');\n\n const _handleSearch = () => console.log('Searching');\n\n const _handleMore = () => console.log('Shown more');\n\n return (\n \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "appbar-header",
+ "data": {
+ "description": "A component to use as a header at the top of the screen.\nIt can contain the screen title, controls such as navigation buttons, menu button etc.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const _goBack = () => console.log('Went back');\n\n const _handleSearch = () => console.log('Searching');\n\n const _handleMore = () => console.log('Shown more');\n\n return (\n \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "Appbar.Header",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "dark": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the background color is a dark color. A dark header will render light text and vice-versa."
+ },
+ "statusBarHeight": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Extra padding to add at the top of header to account for translucent status bar.\nThis is automatically handled on iOS >= 11 including iPhone X using `SafeAreaView`.\nIf you are using Expo, we assume translucent status bar and set a height for status bar automatically.\nPass `0` or a custom value to disable the default behaviour, and customize the height."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the header."
+ },
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'small' | 'medium' | 'large' | 'center-aligned'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'small'"
+ },
+ {
+ "name": "literal",
+ "value": "'medium'"
+ },
+ {
+ "name": "literal",
+ "value": "'large'"
+ },
+ {
+ "name": "literal",
+ "value": "'center-aligned'"
+ }
+ ]
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nMode of the Appbar.\n- `small` - Appbar with default height (64).\n- `medium` - Appbar with medium height (112).\n- `large` - Appbar with large height (152).\n- `center-aligned` - Appbar with default height and center-aligned title.",
+ "defaultValue": {
+ "value": "Platform.OS === 'ios' ? 'center-aligned' : 'small'",
+ "computed": false
+ }
+ },
+ "elevated": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nWhether Appbar background should have the elevation along with primary color pigment.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "testID": {
+ "defaultValue": {
+ "value": "'appbar-header'",
+ "computed": false
+ },
+ "required": false,
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Appbar/AppbarHeader.tsx"
+ ],
+ "group": "Appbar"
+ },
+ "Avatar/AvatarIcon": {
+ "filepath": "Avatar/AvatarIcon.tsx",
+ "title": "Avatar.Icon",
+ "description": "Avatars can be used to represent people in a graphical way.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n```",
+ "link": "avatar-icon",
+ "data": {
+ "description": "Avatars can be used to represent people in a graphical way.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n```",
+ "displayName": "Avatar.Icon",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display for the `Avatar`."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Size of the avatar.",
+ "defaultValue": {
+ "value": "64",
+ "computed": false
+ }
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for the icon."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Avatar/AvatarIcon.tsx"
+ ],
+ "group": "Avatar"
+ },
+ "Avatar/AvatarImage": {
+ "filepath": "Avatar/AvatarImage.tsx",
+ "title": "Avatar.Image",
+ "description": "Avatars can be used to represent people in a graphical way.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\nexport default MyComponent\n```",
+ "link": "avatar-image",
+ "data": {
+ "description": "Avatars can be used to represent people in a graphical way.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\nexport default MyComponent\n```",
+ "displayName": "Avatar.Image",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "source": {
+ "required": true,
+ "tsType": {
+ "name": "union",
+ "raw": "| ImageSourcePropType\n| ((props: { size: number }) => React.ReactNode)",
+ "elements": [
+ {
+ "name": "ImageSourcePropType"
+ },
+ {
+ "name": "unknown"
+ }
+ ]
+ },
+ "description": "Image to display for the `Avatar`.\nIt accepts a standard React Native Image `source` prop\nOr a function that returns an `Image`."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Size of the avatar.",
+ "defaultValue": {
+ "value": "64",
+ "computed": false
+ }
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "onError": {
+ "required": false,
+ "tsType": {
+ "name": "ImageProps['onError']",
+ "raw": "ImageProps['onError']"
+ },
+ "description": "Invoked on load error."
+ },
+ "onLayout": {
+ "required": false,
+ "tsType": {
+ "name": "ImageProps['onLayout']",
+ "raw": "ImageProps['onLayout']"
+ },
+ "description": "Invoked on mount and on layout changes."
+ },
+ "onLoad": {
+ "required": false,
+ "tsType": {
+ "name": "ImageProps['onLoad']",
+ "raw": "ImageProps['onLoad']"
+ },
+ "description": "Invoked when load completes successfully."
+ },
+ "onLoadEnd": {
+ "required": false,
+ "tsType": {
+ "name": "ImageProps['onLoadEnd']",
+ "raw": "ImageProps['onLoadEnd']"
+ },
+ "description": "Invoked when load either succeeds or fails."
+ },
+ "onLoadStart": {
+ "required": false,
+ "tsType": {
+ "name": "ImageProps['onLoadStart']",
+ "raw": "ImageProps['onLoadStart']"
+ },
+ "description": "Invoked on load start."
+ },
+ "onProgress": {
+ "required": false,
+ "tsType": {
+ "name": "ImageProps['onProgress']",
+ "raw": "ImageProps['onProgress']"
+ },
+ "description": "Invoked on download progress."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Avatar/AvatarImage.tsx"
+ ],
+ "group": "Avatar"
+ },
+ "Avatar/AvatarText": {
+ "filepath": "Avatar/AvatarText.tsx",
+ "title": "Avatar.Text",
+ "description": "Avatars can be used to represent people in a graphical way.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n```",
+ "link": "avatar-text",
+ "data": {
+ "description": "Avatars can be used to represent people in a graphical way.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n```",
+ "displayName": "Avatar.Text",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "label": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Initials to show as the text in the `Avatar`."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Size of the avatar.",
+ "defaultValue": {
+ "value": "64",
+ "computed": false
+ }
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for the text."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for text container"
+ },
+ "labelStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the title."
+ },
+ "maxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a text font can reach."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Avatar/AvatarText.tsx"
+ ],
+ "group": "Avatar"
+ },
+ "Badge": {
+ "filepath": "Badge.tsx",
+ "title": "Badge",
+ "description": "Badges are small status descriptors for UI elements.\nA badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Badge } from 'react-native-paper';\n\nconst MyComponent = () => (\n 3\n);\n\nexport default MyComponent;\n```",
+ "link": "badge",
+ "data": {
+ "description": "Badges are small status descriptors for UI elements.\nA badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Badge } from 'react-native-paper';\n\nconst MyComponent = () => (\n 3\n);\n\nexport default MyComponent;\n```",
+ "displayName": "Badge",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "visible": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the badge is visible",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "children": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "string | number",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "number"
+ }
+ ]
+ },
+ "description": "Content of the `Badge`."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Size of the `Badge`.",
+ "defaultValue": {
+ "value": "20",
+ "computed": false
+ }
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRefObject",
+ "raw": "React.RefObject",
+ "elements": [
+ {}
+ ]
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Badge.tsx"
+ ]
+ },
+ "Banner": {
+ "filepath": "Banner.tsx",
+ "title": "Banner",
+ "description": "Banner displays a prominent message and related actions.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Image } from 'react-native';\nimport { Banner } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(true);\n\n return (\n setVisible(false),\n },\n {\n label: 'Learn more',\n onPress: () => setVisible(false),\n },\n ]}\n icon={({size}) => (\n \n )}>\n There was a problem processing a transaction on your credit card.\n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "banner",
+ "data": {
+ "description": "Banner displays a prominent message and related actions.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Image } from 'react-native';\nimport { Banner } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(true);\n\n return (\n setVisible(false),\n },\n {\n label: 'Learn more',\n onPress: () => setVisible(false),\n },\n ]}\n icon={({size}) => (\n \n )}>\n There was a problem processing a transaction on your credit card.\n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "Banner",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "visible": {
+ "required": true,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether banner is currently visible."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content that will be displayed inside banner."
+ },
+ "icon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display for the `Banner`. Can be an image."
+ },
+ "actions": {
+ "required": false,
+ "tsType": {
+ "name": "Array",
+ "elements": [
+ {
+ "name": "intersection",
+ "raw": "{\n label: string;\n} & $RemoveChildren",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n label: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "$RemoveChildren",
+ "elements": [
+ {
+ "name": "Button"
+ }
+ ],
+ "raw": "$RemoveChildren"
+ }
+ ]
+ }
+ ],
+ "raw": "Array<\n {\n label: string;\n } & $RemoveChildren\n>"
+ },
+ "description": "Action items to shown in the banner.\nAn action item should contain the following properties:\n\n- `label`: label of the action button (required)\n- `onPress`: callback that is called when button is pressed (required)\n\nTo customize button you can pass other props that button component takes.",
+ "defaultValue": {
+ "value": "[]",
+ "computed": false
+ }
+ },
+ "contentStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style of banner's inner content.\nUse this prop to apply custom width for wide layouts."
+ },
+ "elevation": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "0 | 1 | 2 | 3 | 4 | 5 | Animated.Value",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "0"
+ },
+ {
+ "name": "literal",
+ "value": "1"
+ },
+ {
+ "name": "literal",
+ "value": "2"
+ },
+ {
+ "name": "literal",
+ "value": "3"
+ },
+ {
+ "name": "literal",
+ "value": "4"
+ },
+ {
+ "name": "literal",
+ "value": "5"
+ },
+ {
+ "name": "Animated.Value"
+ }
+ ]
+ },
+ "description": "@supported Available in v5.x with theme version 3\nChanges Banner shadow and background on iOS and Android.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "maxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a text font can reach."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRefObject",
+ "raw": "React.RefObject",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "onShowAnimationFinished": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.EndCallback"
+ },
+ "description": "\nOptional callback that will be called after the opening animation finished running normally",
+ "defaultValue": {
+ "value": "() => {}",
+ "computed": false
+ }
+ },
+ "onHideAnimationFinished": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.EndCallback"
+ },
+ "description": "\nOptional callback that will be called after the closing animation finished running normally",
+ "defaultValue": {
+ "value": "() => {}",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Banner.tsx"
+ ]
+ },
+ "BottomNavigation/BottomNavigation": {
+ "filepath": "BottomNavigation/BottomNavigation.tsx",
+ "title": "BottomNavigation",
+ "description": "BottomNavigation provides quick navigation between top-level views of an app with a bottom navigation bar.\nIt is primarily designed for use on mobile. If you want to use the navigation bar only see [`BottomNavigation.Bar`](BottomNavigationBar).\n\nBy default BottomNavigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { BottomNavigation, Text } from 'react-native-paper';\n\nconst MusicRoute = () => Music;\n\nconst AlbumsRoute = () => Albums;\n\nconst RecentsRoute = () => Recents;\n\nconst NotificationsRoute = () => Notifications;\n\nconst MyComponent = () => {\n const [index, setIndex] = React.useState(0);\n const [routes] = React.useState([\n { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},\n { key: 'albums', title: 'Albums', focusedIcon: 'album' },\n { key: 'recents', title: 'Recents', focusedIcon: 'history' },\n { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },\n ]);\n\n const renderScene = BottomNavigation.SceneMap({\n music: MusicRoute,\n albums: AlbumsRoute,\n recents: RecentsRoute,\n notifications: NotificationsRoute,\n });\n\n return (\n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "bottom-navigation",
+ "data": {
+ "description": "BottomNavigation provides quick navigation between top-level views of an app with a bottom navigation bar.\nIt is primarily designed for use on mobile. If you want to use the navigation bar only see [`BottomNavigation.Bar`](BottomNavigationBar).\n\nBy default BottomNavigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { BottomNavigation, Text } from 'react-native-paper';\n\nconst MusicRoute = () => Music;\n\nconst AlbumsRoute = () => Albums;\n\nconst RecentsRoute = () => Recents;\n\nconst NotificationsRoute = () => Notifications;\n\nconst MyComponent = () => {\n const [index, setIndex] = React.useState(0);\n const [routes] = React.useState([\n { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},\n { key: 'albums', title: 'Albums', focusedIcon: 'album' },\n { key: 'recents', title: 'Recents', focusedIcon: 'history' },\n { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },\n ]);\n\n const renderScene = BottomNavigation.SceneMap({\n music: MusicRoute,\n albums: AlbumsRoute,\n recents: RecentsRoute,\n notifications: NotificationsRoute,\n });\n\n return (\n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "BottomNavigation",
+ "methods": [
+ {
+ "name": "SceneMap",
+ "docblock": "Function which takes a map of route keys to components.\nPure components are used to minimize re-rendering of the pages.\nThis drastically improves the animation performance.",
+ "modifiers": [
+ "static"
+ ],
+ "params": [
+ {
+ "name": "scenes",
+ "optional": false,
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n [key: string]: React.ComponentType<{\n route: Route;\n jumpTo: (key: string) => void;\n }>;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": {
+ "name": "string"
+ },
+ "value": {
+ "name": "ReactComponentType",
+ "raw": "React.ComponentType<{\n route: Route;\n jumpTo: (key: string) => void;\n}>",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n route: Route;\n jumpTo: (key: string) => void;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ },
+ {
+ "key": "jumpTo",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(key: string) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "key",
+ "type": {
+ "name": "string"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "returns": null,
+ "description": "Function which takes a map of route keys to components.\nPure components are used to minimize re-rendering of the pages.\nThis drastically improves the animation performance."
+ }
+ ],
+ "statics": [],
+ "props": {
+ "shifting": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.\n\nBy default, this is `false` with theme version 3 and `true` when you have more than 3 tabs.\nPass `shifting={false}` to explicitly disable this animation, or `shifting={true}` to always use this animation.\nNote that you need at least 2 tabs be able to run this animation."
+ },
+ "labeled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show labels in tabs. When `false`, only icons will be displayed.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "compact": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether tabs should be spread across the entire width."
+ },
+ "navigationState": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n index: number;\n routes: Route[];\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "index",
+ "value": {
+ "name": "number",
+ "required": true
+ }
+ },
+ {
+ "key": "routes",
+ "value": {
+ "name": "Array",
+ "elements": [
+ {
+ "name": "Route"
+ }
+ ],
+ "raw": "Route[]",
+ "required": true
+ }
+ }
+ ]
+ }
+ },
+ "description": "State for the bottom navigation. The state should contain the following properties:\n\n- `index`: a number representing the index of the active route in the `routes` array\n- `routes`: an array containing a list of route objects used for rendering the tabs\n\nEach route object should contain the following properties:\n\n- `key`: a unique key to identify the route (required)\n- `title`: title of the route to use as the tab label\n- `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x\n- `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3\n- `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.\n- `accessibilityLabel`: accessibility label for the tab button\n- `testID`: test id for the tab button\n\nExample:\n\n```js\n{\n index: 1,\n routes: [\n { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},\n { key: 'albums', title: 'Albums', focusedIcon: 'album' },\n { key: 'recents', title: 'Recents', focusedIcon: 'history' },\n { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },\n ]\n}\n```\n\n`BottomNavigation` is a controlled component, which means the `index` needs to be updated via the `onIndexChange` callback."
+ },
+ "onIndexChange": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(index: number) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "index",
+ "type": {
+ "name": "number"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Callback which is called on tab change, receives the index of the new tab as argument.\nThe navigation state needs to be updated when it's called, otherwise the change is dropped."
+ },
+ "renderScene": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: {\n route: Route;\n jumpTo: (key: string) => void;\n}) => React.ReactNode | null",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n route: Route;\n jumpTo: (key: string) => void;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ },
+ {
+ "key": "jumpTo",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(key: string) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "key",
+ "type": {
+ "name": "string"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "React.ReactNode | null",
+ "elements": [
+ {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ {
+ "name": "null"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Callback which returns a react element to render as the page for the tab. Receives an object containing the route as the argument:\n\n```js\nrenderScene = ({ route, jumpTo }) => {\n switch (route.key) {\n case 'music':\n return ;\n case 'albums':\n return ;\n }\n}\n```\n\nPages are lazily rendered, which means that a page will be rendered the first time you navigate to it.\nAfter initial render, all the pages stay rendered to preserve their state.\n\nYou need to make sure that your individual routes implement a `shouldComponentUpdate` to improve the performance.\nTo make it easier to specify the components, you can use the `SceneMap` helper:\n\n```js\nrenderScene = BottomNavigation.SceneMap({\n music: MusicRoute,\n albums: AlbumsRoute,\n});\n```\n\nSpecifying the components this way is easier and takes care of implementing a `shouldComponentUpdate` method.\nEach component will receive the current route and a `jumpTo` method as it's props.\nThe `jumpTo` method can be used to navigate to other tabs programmatically:\n\n```js\nthis.props.jumpTo('albums')\n```"
+ },
+ "renderIcon": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: {\n route: Route;\n focused: boolean;\n color: ColorValue;\n}) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n route: Route;\n focused: boolean;\n color: ColorValue;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ },
+ {
+ "key": "focused",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ },
+ {
+ "key": "color",
+ "value": {
+ "name": "ColorValue",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React Element to be used as tab icon."
+ },
+ "renderLabel": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: {\n route: Route;\n focused: boolean;\n color: ColorValue;\n}) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n route: Route;\n focused: boolean;\n color: ColorValue;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ },
+ {
+ "key": "focused",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ },
+ {
+ "key": "color",
+ "value": {
+ "name": "ColorValue",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which React Element to be used as tab label."
+ },
+ "renderTouchable": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: TouchableProps) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "intersection",
+ "raw": "TouchableRippleProps & {\n key: string;\n route: Route;\n children: React.ReactNode;\n borderless?: boolean;\n centered?: boolean;\n rippleColor?: ColorValue;\n}",
+ "elements": [
+ {
+ "name": "TouchableRippleProps"
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n key: string;\n route: Route;\n children: React.ReactNode;\n borderless?: boolean;\n centered?: boolean;\n rippleColor?: ColorValue;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "key",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ },
+ {
+ "key": "children",
+ "value": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode",
+ "required": true
+ }
+ },
+ {
+ "key": "borderless",
+ "value": {
+ "name": "boolean",
+ "required": false
+ }
+ },
+ {
+ "key": "centered",
+ "value": {
+ "name": "boolean",
+ "required": false
+ }
+ },
+ {
+ "key": "rippleColor",
+ "value": {
+ "name": "ColorValue",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to be used as the touchable for the tab item.\nRenders a `TouchableRipple` on Android and `Pressable` on iOS."
+ },
+ "getAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => string | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "string | undefined",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.\nUses `route.accessibilityLabel` by default."
+ },
+ "getBadge": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => boolean | number | string | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "boolean | number | string | undefined",
+ "elements": [
+ {
+ "name": "boolean"
+ },
+ {
+ "name": "number"
+ },
+ {
+ "name": "string"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get badge for the tab, uses `route.badge` by default."
+ },
+ "getLabelText": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => string | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "string | undefined",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component."
+ },
+ "getLazy": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => boolean | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "boolean | undefined",
+ "elements": [
+ {
+ "name": "boolean"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get lazy for the current screen. Uses true by default.",
+ "defaultValue": {
+ "value": "({ route }: { route: Route }) => route.lazy",
+ "computed": false
+ }
+ },
+ "getTestID": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => string | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "string | undefined",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get the id to locate this tab button in tests, uses `route.testID` by default."
+ },
+ "onTabPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route } & TabPressEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "intersection",
+ "raw": "{ route: Route } & TabPressEvent",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n defaultPrevented: boolean;\n preventDefault(): void;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "defaultPrevented",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ },
+ {
+ "key": "preventDefault",
+ "value": {
+ "name": "void",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on tab press. It receives the route for the pressed tab, useful for things like scroll to top."
+ },
+ "onTabLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route } & TabPressEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "intersection",
+ "raw": "{ route: Route } & TabPressEvent",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n defaultPrevented: boolean;\n preventDefault(): void;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "defaultPrevented",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ },
+ {
+ "key": "preventDefault",
+ "value": {
+ "name": "void",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on tab long press. It receives the route for the pressed tab, useful for things like custom action when longed pressed."
+ },
+ "activeColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for icon and label in the active tab."
+ },
+ "inactiveColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for icon and label in the inactive tab."
+ },
+ "sceneAnimationEnabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether animation is enabled for scenes transitions in `shifting` mode.\nBy default, the scenes cross-fade during tab change when `shifting` is enabled.\nSpecify `sceneAnimationEnabled` as `false` to disable the animation.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "sceneAnimationType": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'opacity' | 'shifting'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'opacity'"
+ },
+ {
+ "name": "literal",
+ "value": "'shifting'"
+ }
+ ]
+ },
+ "description": "The scene animation effect. Specify `'shifting'` for a different effect.\nBy default, 'opacity' will be used.",
+ "defaultValue": {
+ "value": "'opacity'",
+ "computed": false
+ }
+ },
+ "sceneAnimationEasing": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "EasingFunction | undefined",
+ "elements": [
+ {
+ "name": "EasingFunction"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ },
+ "description": "The scene animation Easing."
+ },
+ "keyboardHidesNavigationBar": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the bottom navigation bar is hidden when keyboard is shown.\nOn Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.",
+ "defaultValue": {
+ "value": "Platform.OS === 'android'",
+ "computed": false
+ }
+ },
+ "safeAreaInsets": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n top?: number;\n right?: number;\n bottom?: number;\n left?: number;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "top",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ },
+ {
+ "key": "right",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ },
+ {
+ "key": "bottom",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ },
+ {
+ "key": "left",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ "description": "Safe area insets for the tab bar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS.\nThe bottom insets for iOS is added by default. You can override the behavior with this option."
+ },
+ "barStyle": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": "Style for the bottom navigation bar. You can pass a custom background color here:\n\n```js\nbarStyle={{ backgroundColor: '#694fad' }}\n```"
+ },
+ "labelMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a label font can reach.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "activeIndicatorStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes",
+ "defaultValue": {
+ "value": "'bottom-navigation'",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/BottomNavigation/BottomNavigation.tsx"
+ ]
+ },
+ "BottomNavigation/BottomNavigationBar": {
+ "filepath": "BottomNavigation/BottomNavigationBar.tsx",
+ "title": "BottomNavigation.Bar",
+ "description": "A navigation bar which can easily be integrated with [React Navigation's Bottom Tabs Navigator](https://reactnavigation.org/docs/bottom-tab-navigator/).\n\n## Usage\n### without React Navigation\n```js\nimport React from 'react';\nimport { useState } from 'react';\nimport { View } from 'react-native';\nimport { BottomNavigation, Text, Provider } from 'react-native-paper';\nimport MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\nexport default function MyComponent() {\n const [index, setIndex] = useState(0);\n\n const routes = [\n { key: 'home', title: 'Home', icon: 'home' },\n { key: 'settings', title: 'Settings', icon: 'cog' },\n ];\n\n const renderScene = ({ route }) => {\n switch (route.key) {\n case 'home':\n return ;\n case 'settings':\n return ;\n default:\n return null;\n }\n };\n\n return (\n \n {renderScene({ route: routes[index] })}\n {\n const newIndex = routes.findIndex((r) => r.key === route.key);\n if (newIndex !== -1) {\n setIndex(newIndex);\n }\n }}\n renderIcon={({ route, color }) => (\n \n )}\n getLabelText={({ route }) => route.title}\n />\n \n );\n}\n```",
+ "link": "bottom-navigation-bar",
+ "data": {
+ "description": "A navigation bar which can easily be integrated with [React Navigation's Bottom Tabs Navigator](https://reactnavigation.org/docs/bottom-tab-navigator/).\n\n## Usage\n### without React Navigation\n```js\nimport React from 'react';\nimport { useState } from 'react';\nimport { View } from 'react-native';\nimport { BottomNavigation, Text, Provider } from 'react-native-paper';\nimport MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\nexport default function MyComponent() {\n const [index, setIndex] = useState(0);\n\n const routes = [\n { key: 'home', title: 'Home', icon: 'home' },\n { key: 'settings', title: 'Settings', icon: 'cog' },\n ];\n\n const renderScene = ({ route }) => {\n switch (route.key) {\n case 'home':\n return ;\n case 'settings':\n return ;\n default:\n return null;\n }\n };\n\n return (\n \n {renderScene({ route: routes[index] })}\n {\n const newIndex = routes.findIndex((r) => r.key === route.key);\n if (newIndex !== -1) {\n setIndex(newIndex);\n }\n }}\n renderIcon={({ route, color }) => (\n \n )}\n getLabelText={({ route }) => route.title}\n />\n \n );\n}\n```",
+ "displayName": "BottomNavigation.Bar",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "shifting": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.\n\nBy default, this is `false` with theme version 3 and `true` when you have more than 3 tabs.\nPass `shifting={false}` to explicitly disable this animation, or `shifting={true}` to always use this animation.\nNote that you need at least 2 tabs be able to run this animation."
+ },
+ "labeled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show labels in tabs. When `false`, only icons will be displayed.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "compact": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether tabs should be spread across the entire width."
+ },
+ "navigationState": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n index: number;\n routes: Route[];\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "index",
+ "value": {
+ "name": "number",
+ "required": true
+ }
+ },
+ {
+ "key": "routes",
+ "value": {
+ "name": "Array",
+ "elements": [
+ {
+ "name": "Route"
+ }
+ ],
+ "raw": "Route[]",
+ "required": true
+ }
+ }
+ ]
+ }
+ },
+ "description": "State for the bottom navigation. The state should contain the following properties:\n\n- `index`: a number representing the index of the active route in the `routes` array\n- `routes`: an array containing a list of route objects used for rendering the tabs\n\nEach route object should contain the following properties:\n\n- `key`: a unique key to identify the route (required)\n- `title`: title of the route to use as the tab label\n- `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x\n- `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3\n- `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.\n- `accessibilityLabel`: accessibility label for the tab button\n- `testID`: test id for the tab button\n\nExample:\n\n```js\n{\n index: 1,\n routes: [\n { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},\n { key: 'albums', title: 'Albums', focusedIcon: 'album' },\n { key: 'recents', title: 'Recents', focusedIcon: 'history' },\n { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },\n ]\n}\n```\n\n`BottomNavigation.Bar` is a controlled component, which means the `index` needs to be updated via the `onTabPress` callback."
+ },
+ "renderIcon": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: {\n route: Route;\n focused: boolean;\n color: ColorValue;\n}) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n route: Route;\n focused: boolean;\n color: ColorValue;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ },
+ {
+ "key": "focused",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ },
+ {
+ "key": "color",
+ "value": {
+ "name": "ColorValue",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React Element to be used as tab icon."
+ },
+ "renderLabel": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: {\n route: Route;\n focused: boolean;\n color: ColorValue;\n}) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n route: Route;\n focused: boolean;\n color: ColorValue;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ },
+ {
+ "key": "focused",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ },
+ {
+ "key": "color",
+ "value": {
+ "name": "ColorValue",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which React Element to be used as tab label."
+ },
+ "renderTouchable": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: TouchableProps) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "intersection",
+ "raw": "TouchableRippleProps & {\n key: string;\n route: Route;\n children: React.ReactNode;\n borderless?: boolean;\n centered?: boolean;\n rippleColor?: ColorValue;\n}",
+ "elements": [
+ {
+ "name": "TouchableRippleProps"
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n key: string;\n route: Route;\n children: React.ReactNode;\n borderless?: boolean;\n centered?: boolean;\n rippleColor?: ColorValue;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "key",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ },
+ {
+ "key": "children",
+ "value": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode",
+ "required": true
+ }
+ },
+ {
+ "key": "borderless",
+ "value": {
+ "name": "boolean",
+ "required": false
+ }
+ },
+ {
+ "key": "centered",
+ "value": {
+ "name": "boolean",
+ "required": false
+ }
+ },
+ {
+ "key": "rippleColor",
+ "value": {
+ "name": "ColorValue",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to be used as the touchable for the tab item.\nRenders a `TouchableRipple` on Android and `Pressable` on iOS.",
+ "defaultValue": {
+ "value": "({ key, ...props }: TouchableProps) => (\n \n)",
+ "computed": false
+ }
+ },
+ "getAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => string | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "string | undefined",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.\nUses `route.accessibilityLabel` by default.",
+ "defaultValue": {
+ "value": "({ route }: { route: Route }) =>\nroute.accessibilityLabel",
+ "computed": false
+ }
+ },
+ "getBadge": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => boolean | number | string | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "boolean | number | string | undefined",
+ "elements": [
+ {
+ "name": "boolean"
+ },
+ {
+ "name": "number"
+ },
+ {
+ "name": "string"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get badge for the tab, uses `route.badge` by default.",
+ "defaultValue": {
+ "value": "({ route }: { route: Route }) => route.badge",
+ "computed": false
+ }
+ },
+ "getLabelText": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => string | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "string | undefined",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component.",
+ "defaultValue": {
+ "value": "({ route }: { route: Route }) => route.title",
+ "computed": false
+ }
+ },
+ "getTestID": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => string | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "string | undefined",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get the id to locate this tab button in tests, uses `route.testID` by default.",
+ "defaultValue": {
+ "value": "({ route }: { route: Route }) => route.testID",
+ "computed": false
+ }
+ },
+ "onTabPress": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route } & TabPressEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "intersection",
+ "raw": "{ route: Route } & TabPressEvent",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n defaultPrevented: boolean;\n preventDefault(): void;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "defaultPrevented",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ },
+ {
+ "key": "preventDefault",
+ "value": {
+ "name": "void",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on tab press. It receives the route for the pressed tab. Use this to update the navigation state."
+ },
+ "onTabLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route } & TabPressEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "intersection",
+ "raw": "{ route: Route } & TabPressEvent",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n defaultPrevented: boolean;\n preventDefault(): void;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "defaultPrevented",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ },
+ {
+ "key": "preventDefault",
+ "value": {
+ "name": "void",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on tab long press. It receives the route for the pressed tab"
+ },
+ "activeColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for icon and label in the active tab."
+ },
+ "inactiveColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for icon and label in the inactive tab."
+ },
+ "animationEasing": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "EasingFunction | undefined",
+ "elements": [
+ {
+ "name": "EasingFunction"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ },
+ "description": "The scene animation Easing."
+ },
+ "keyboardHidesNavigationBar": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the bottom navigation bar is hidden when keyboard is shown.\nOn Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.",
+ "defaultValue": {
+ "value": "Platform.OS === 'android'",
+ "computed": false
+ }
+ },
+ "safeAreaInsets": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n top?: number;\n right?: number;\n bottom?: number;\n left?: number;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "top",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ },
+ {
+ "key": "right",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ },
+ {
+ "key": "bottom",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ },
+ {
+ "key": "left",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ "description": "Safe area insets for the tab bar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS.\nThe bottom insets for iOS is added by default. You can override the behavior with this option."
+ },
+ "labelMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a label font can reach.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "activeIndicatorStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes",
+ "defaultValue": {
+ "value": "'bottom-navigation-bar'",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/BottomNavigation/BottomNavigationBar.tsx"
+ ],
+ "group": "BottomNavigation"
+ },
+ "Button/Button": {
+ "filepath": "Button/Button.tsx",
+ "title": "Button",
+ "description": "A button is component that the user can press to trigger an action.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Button } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```",
+ "link": "button",
+ "data": {
+ "description": "A button is component that the user can press to trigger an action.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Button } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Button",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'text'"
+ },
+ {
+ "name": "literal",
+ "value": "'outlined'"
+ },
+ {
+ "name": "literal",
+ "value": "'contained'"
+ },
+ {
+ "name": "literal",
+ "value": "'elevated'"
+ },
+ {
+ "name": "literal",
+ "value": "'contained-tonal'"
+ }
+ ]
+ },
+ "description": "Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.\n- `text` - flat button without background or outline, used for the lowest priority actions, especially when presenting multiple options.\n- `outlined` - button with an outline without background, typically used for important, but not primary action – represents medium emphasis.\n- `contained` - button with a background color, used for important action, have the most visual impact and high emphasis.\n- `elevated` - button with a background color and elevation, used when absolutely necessary e.g. button requires visual separation from a patterned background. @supported Available in v5.x with theme version 3\n- `contained-tonal` - button with a secondary background color, an alternative middle ground between contained and outlined buttons. @supported Available in v5.x with theme version 3",
+ "defaultValue": {
+ "value": "'text'",
+ "computed": false
+ }
+ },
+ "dark": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for:\n * `contained` mode for theme version 2\n * `contained`, `contained-tonal` and `elevated` modes for theme version 3."
+ },
+ "compact": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Use a compact look, useful for `text` buttons in a row."
+ },
+ "buttonColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom button's background color."
+ },
+ "textColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom button's text color."
+ },
+ "loading": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show a loading indicator."
+ },
+ "icon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display for the `Button`."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Label text of the button."
+ },
+ "uppercase": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Make the label text uppercased. Note that this won't work if you pass React elements as children."
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button."
+ },
+ "accessibilityHint": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility hint for the button. This is read by the screen reader when the user taps the button."
+ },
+ "accessibilityRole": {
+ "required": false,
+ "tsType": {
+ "name": "AccessibilityRole"
+ },
+ "description": "Accessibility role for the button. The \"button\" role is set by default.",
+ "defaultValue": {
+ "value": "'button'",
+ "computed": false
+ }
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "onPressIn": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute as soon as the touchable element is pressed and invoked even before onPress."
+ },
+ "onPressOut": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute as soon as the touch is released even before onPress."
+ },
+ "onLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on long press."
+ },
+ "delayLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The number of milliseconds a user must touch the element before executing `onLongPress`."
+ },
+ "contentStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style of button's inner content.\nUse this prop to apply custom height and width, to set a custom padding or to set the icon on the right with `flexDirection: 'row-reverse'`."
+ },
+ "maxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a text font can reach."
+ },
+ "hitSlop": {
+ "required": false,
+ "tsType": {
+ "name": "TouchableRippleProps['hitSlop']",
+ "raw": "TouchableRippleProps['hitSlop']"
+ },
+ "description": "Sets additional distance outside of element in which a press can be detected."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "labelStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the button text."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "touchableRef": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRefObject",
+ "raw": "React.RefObject",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": "Reference for the touchable"
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests.",
+ "defaultValue": {
+ "value": "'button'",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Button/Button.tsx"
+ ]
+ },
+ "Card/Card": {
+ "filepath": "Card/Card.tsx",
+ "title": "Card",
+ "description": "A card is a sheet of material that serves as an entry point to more detailed information.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar, Button, Card, Text } from 'react-native-paper';\n\nconst LeftContent = props => \n\nconst MyComponent = () => (\n \n \n \n Card title\n Card content\n \n \n \n \n \n \n \n);\n\nexport default MyComponent;\n```",
+ "link": "card",
+ "data": {
+ "description": "A card is a sheet of material that serves as an entry point to more detailed information.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar, Button, Card, Text } from 'react-native-paper';\n\nconst LeftContent = props => \n\nconst MyComponent = () => (\n \n \n \n Card title\n Card content\n \n \n \n \n \n \n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Card",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'elevated' | 'outlined' | 'contained'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'elevated'"
+ },
+ {
+ "name": "literal",
+ "value": "'outlined'"
+ },
+ {
+ "name": "literal",
+ "value": "'contained'"
+ }
+ ]
+ },
+ "description": "Mode of the Card.\n- `elevated` - Card with elevation.\n- `contained` - Card without outline and elevation @supported Available in v5.x with theme version 3\n- `outlined` - Card with an outline.",
+ "defaultValue": {
+ "value": "'elevated'",
+ "computed": false
+ }
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `Card`."
+ },
+ "onLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on long press."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "onPressIn": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute as soon as the touchable element is pressed and invoked even before onPress."
+ },
+ "onPressOut": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute as soon as the touch is released even before onPress."
+ },
+ "delayLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The number of milliseconds a user must touch the element before executing `onLongPress`."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "If true, disable all interactions for this component."
+ },
+ "elevation": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "0 | 1 | 2 | 3 | 4 | 5 | Animated.Value",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "0"
+ },
+ {
+ "name": "literal",
+ "value": "1"
+ },
+ {
+ "name": "literal",
+ "value": "2"
+ },
+ {
+ "name": "literal",
+ "value": "3"
+ },
+ {
+ "name": "literal",
+ "value": "4"
+ },
+ {
+ "name": "literal",
+ "value": "5"
+ },
+ {
+ "name": "Animated.Value"
+ }
+ ]
+ },
+ "description": "Changes Card shadow and background on iOS and Android.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "contentStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style of card's inner content."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Pass down testID from card props to touchable",
+ "defaultValue": {
+ "value": "'card'",
+ "computed": false
+ }
+ },
+ "accessible": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Pass down accessible from card props to touchable"
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Card/Card.tsx"
+ ]
+ },
+ "Card/CardActions": {
+ "filepath": "Card/CardActions.tsx",
+ "title": "Card.Actions",
+ "description": "A component to show a list of actions inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card, Button } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n \n \n \n);\n\nexport default MyComponent;\n```",
+ "link": "card-actions",
+ "data": {
+ "description": "A component to show a list of actions inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card, Button } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n \n \n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Card.Actions",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Items inside the `CardActions`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Card/CardActions.tsx"
+ ],
+ "group": "Card"
+ },
+ "Card/CardContent": {
+ "filepath": "Card/CardContent.tsx",
+ "title": "Card.Content",
+ "description": "A component to show content inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n Card title\n Card content\n \n \n);\n\nexport default MyComponent;\n```",
+ "link": "card-content",
+ "data": {
+ "description": "A component to show content inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n Card title\n Card content\n \n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Card.Content",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Items inside the `Card.Content`."
+ },
+ "index": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "@internal"
+ },
+ "total": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "@internal"
+ },
+ "siblings": {
+ "required": false,
+ "tsType": {
+ "name": "Array",
+ "elements": [
+ {
+ "name": "string"
+ }
+ ],
+ "raw": "Array"
+ },
+ "description": "@internal"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Card/CardContent.tsx"
+ ],
+ "group": "Card"
+ },
+ "Card/CardCover": {
+ "filepath": "Card/CardCover.tsx",
+ "title": "Card.Cover",
+ "description": "A component to show a cover image inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n);\n\nexport default MyComponent;\n```\n\n@extends Image props https://reactnative.dev/docs/image#props",
+ "link": "card-cover",
+ "data": {
+ "description": "A component to show a cover image inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n);\n\nexport default MyComponent;\n```\n\n@extends Image props https://reactnative.dev/docs/image#props",
+ "displayName": "Card.Cover",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "index": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "@internal"
+ },
+ "total": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "@internal"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Card/CardCover.tsx"
+ ],
+ "group": "Card"
+ },
+ "Card/CardTitle": {
+ "filepath": "Card/CardTitle.tsx",
+ "title": "Card.Title",
+ "description": "A component to show a title, subtitle and an avatar inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar, Card, IconButton } from 'react-native-paper';\n\nconst MyComponent = () => (\n }\n right={(props) => {}} />}\n />\n);\n\nexport default MyComponent;\n```",
+ "link": "card-title",
+ "data": {
+ "description": "A component to show a title, subtitle and an avatar inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar, Card, IconButton } from 'react-native-paper';\n\nconst MyComponent = () => (\n }\n right={(props) => {}} />}\n />\n);\n\nexport default MyComponent;\n```",
+ "displayName": "Card.Title",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "title": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Text for the title. Note that this will only accept a string or ``-based node."
+ },
+ "titleStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the title."
+ },
+ "titleNumberOfLines": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Number of lines for the title.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "titleVariant": {
+ "required": false,
+ "tsType": {
+ "name": "TypescaleKey"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nTitle text variant defines appropriate text styles for type role and its size.\nAvailable variants:\n\n Display: `displayLarge`, `displayMedium`, `displaySmall`\n\n Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`\n\n Title: `titleLarge`, `titleMedium`, `titleSmall`\n\n Label: `labelLarge`, `labelMedium`, `labelSmall`\n\n Body: `bodyLarge`, `bodyMedium`, `bodySmall`",
+ "defaultValue": {
+ "value": "'bodyLarge'",
+ "computed": false
+ }
+ },
+ "subtitle": {
+ "required": false,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Text for the subtitle. Note that this will only accept a string or ``-based node."
+ },
+ "subtitleStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the subtitle."
+ },
+ "subtitleNumberOfLines": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Number of lines for the subtitle.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "subtitleVariant": {
+ "required": false,
+ "tsType": {
+ "name": "TypescaleKey"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nSubtitle text variant defines appropriate text styles for type role and its size.\nAvailable variants:\n\n Display: `displayLarge`, `displayMedium`, `displaySmall`\n\n Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`\n\n Title: `titleLarge`, `titleMedium`, `titleSmall`\n\n Label: `labelLarge`, `labelMedium`, `labelSmall`\n\n Body: `bodyLarge`, `bodyMedium`, `bodySmall`",
+ "defaultValue": {
+ "value": "'bodyMedium'",
+ "computed": false
+ }
+ },
+ "left": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { size: number }) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ size: number }",
+ "signature": {
+ "properties": [
+ {
+ "key": "size",
+ "value": {
+ "name": "number",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to display on the left side."
+ },
+ "leftStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the left element wrapper."
+ },
+ "right": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { size: number }) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ size: number }",
+ "signature": {
+ "properties": [
+ {
+ "key": "size",
+ "value": {
+ "name": "number",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to display on the right side."
+ },
+ "rightStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the right element wrapper."
+ },
+ "index": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "@internal"
+ },
+ "total": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "@internal"
+ },
+ "titleMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a title font can reach."
+ },
+ "subtitleMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a subtitle font can reach."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Card/CardTitle.tsx"
+ ],
+ "group": "Card"
+ },
+ "Checkbox/Checkbox": {
+ "filepath": "Checkbox/Checkbox.tsx",
+ "title": "Checkbox",
+ "description": "Checkboxes allow the selection of multiple options from a set.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [checked, setChecked] = React.useState(false);\n\n return (\n {\n setChecked(!checked);\n }}\n />\n );\n};\n\nexport default MyComponent;\n```",
+ "link": "checkbox",
+ "data": {
+ "description": "Checkboxes allow the selection of multiple options from a set.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [checked, setChecked] = React.useState(false);\n\n return (\n {\n setChecked(!checked);\n }}\n />\n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "Checkbox",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "status": {
+ "required": true,
+ "tsType": {
+ "name": "union",
+ "raw": "'checked' | 'unchecked' | 'indeterminate'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'checked'"
+ },
+ {
+ "name": "literal",
+ "value": "'unchecked'"
+ },
+ {
+ "name": "literal",
+ "value": "'indeterminate'"
+ }
+ ]
+ },
+ "description": "Status of checkbox."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether checkbox is disabled."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "uncheckedColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom color for unchecked checkbox."
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom color for checkbox."
+ },
+ "error": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the checkbox is in an error state. When true, the outline\n(unchecked) and container (selected) use `theme.colors.error`.\n`disabled` and explicit `color`/`uncheckedColor` overrides take\nprecedence."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Custom style to override the default tap target. Passed through to\nthe underlying `TouchableRipple`."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Checkbox/Checkbox.tsx"
+ ]
+ },
+ "Checkbox/CheckboxItem": {
+ "filepath": "Checkbox/CheckboxItem.tsx",
+ "title": "Checkbox.Item",
+ "description": "Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n);\n\nexport default MyComponent;\n```",
+ "link": "checkbox-item",
+ "data": {
+ "description": "Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Checkbox.Item",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "status": {
+ "required": true,
+ "tsType": {
+ "name": "union",
+ "raw": "'checked' | 'unchecked' | 'indeterminate'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'checked'"
+ },
+ {
+ "name": "literal",
+ "value": "'unchecked'"
+ },
+ {
+ "name": "literal",
+ "value": "'indeterminate'"
+ }
+ ]
+ },
+ "description": "Status of checkbox."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether checkbox is disabled."
+ },
+ "label": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Label to be displayed on the item."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "onLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on long press."
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.",
+ "defaultValue": {
+ "value": "label",
+ "computed": true
+ }
+ },
+ "uncheckedColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for unchecked checkbox."
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for checkbox."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Additional styles for container View."
+ },
+ "labelMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a label font can reach.",
+ "defaultValue": {
+ "value": "1.5",
+ "computed": false
+ }
+ },
+ "labelStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to Label element."
+ },
+ "labelVariant": {
+ "required": false,
+ "tsType": {
+ "name": "TypescaleKey"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nLabel text variant defines appropriate text styles for type role and its size.\nAvailable variants:\n\n Display: `displayLarge`, `displayMedium`, `displaySmall`\n\n Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`\n\n Title: `titleLarge`, `titleMedium`, `titleSmall`\n\n Label: `labelLarge`, `labelMedium`, `labelSmall`\n\n Body: `bodyLarge`, `bodyMedium`, `bodySmall`",
+ "defaultValue": {
+ "value": "'bodyLarge'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests."
+ },
+ "position": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'leading' | 'trailing'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'leading'"
+ },
+ {
+ "name": "literal",
+ "value": "'trailing'"
+ }
+ ]
+ },
+ "description": "Checkbox control position.",
+ "defaultValue": {
+ "value": "'trailing'",
+ "computed": false
+ }
+ },
+ "hitSlop": {
+ "required": false,
+ "tsType": {
+ "name": "TouchableRippleProps['hitSlop']",
+ "raw": "TouchableRippleProps['hitSlop']"
+ },
+ "description": "Sets additional distance outside of element in which a press can be detected."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Checkbox/CheckboxItem.tsx"
+ ],
+ "group": "Checkbox"
+ },
+ "Chip/Chip": {
+ "filepath": "Chip/Chip.tsx",
+ "title": "Chip",
+ "description": "Chips are compact elements that can represent inputs, attributes, or actions.\nThey can have an icon or avatar on the left, and a close button icon on the right.\nThey are typically used to:\n
\n
Present multiple options
\n
Represent attributes active or chosen
\n
Present filter options
\n
Trigger actions related to primary content
\n
\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Chip } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}>Example Chip\n);\n\nexport default MyComponent;\n```",
+ "link": "chip",
+ "data": {
+ "description": "Chips are compact elements that can represent inputs, attributes, or actions.\nThey can have an icon or avatar on the left, and a close button icon on the right.\nThey are typically used to:\n
\n
Present multiple options
\n
Represent attributes active or chosen
\n
Present filter options
\n
Trigger actions related to primary content
\n
\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Chip } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}>Example Chip\n);\n\nexport default MyComponent;\n```",
+ "displayName": "Chip",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'flat' | 'outlined'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'flat'"
+ },
+ {
+ "name": "literal",
+ "value": "'outlined'"
+ }
+ ]
+ },
+ "description": "Mode of the chip.\n- `flat` - flat chip without outline.\n- `outlined` - chip with an outline.",
+ "defaultValue": {
+ "value": "'flat'",
+ "computed": false
+ }
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Text content of the `Chip`."
+ },
+ "icon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display for the `Chip`. Both icon and avatar cannot be specified."
+ },
+ "avatar": {
+ "required": false,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Avatar to display for the `Chip`. Both icon and avatar cannot be specified."
+ },
+ "closeIcon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display as the close button for the `Chip`. The icon appears only when the onClose prop is specified."
+ },
+ "selected": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether chip is selected.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "selectedColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Whether to style the chip color as selected.\nNote: With theme version 3 `selectedColor` doesn't apply to the `icon`.\n If you want specify custom color for the `icon`, render your own `Icon` component."
+ },
+ "showSelectedOverlay": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nWhether to display overlay on selected chip"
+ },
+ "showSelectedCheck": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to display default check icon on selected chip.\nNote: Check will not be shown if `icon` is specified. If specified, `icon` will be shown regardless of `selected`.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the chip. This is read by the screen reader when the user taps the chip."
+ },
+ "closeIconAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the close icon. This is read by the screen reader when the user taps the close icon.",
+ "defaultValue": {
+ "value": "'Close'",
+ "computed": false
+ }
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "onLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on long press."
+ },
+ "onPressIn": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute as soon as the touchable element is pressed and invoked even before onPress."
+ },
+ "onPressOut": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute as soon as the touch is released even before onPress."
+ },
+ "onClose": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on close button press. The close button appears only when this prop is specified."
+ },
+ "delayLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The number of milliseconds a user must touch the element before executing `onLongPress`."
+ },
+ "compact": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nSets smaller horizontal paddings `12dp` around label, when there is only label."
+ },
+ "elevated": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nWhether chip should have the elevation.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "textStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style of chip's text"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "hitSlop": {
+ "required": false,
+ "tsType": {
+ "name": "TouchableRippleProps['hitSlop']",
+ "raw": "TouchableRippleProps['hitSlop']"
+ },
+ "description": "Sets additional distance outside of element in which a press can be detected."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Pass down testID from chip props to touchable for Detox tests.",
+ "defaultValue": {
+ "value": "'chip'",
+ "computed": false
+ }
+ },
+ "ellipsizeMode": {
+ "required": false,
+ "tsType": {
+ "name": "EllipsizeProp"
+ },
+ "description": "Ellipsize Mode for the children text"
+ },
+ "maxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a text font can reach."
+ },
+ "accessibilityRole": {
+ "defaultValue": {
+ "value": "'button'",
+ "computed": false
+ },
+ "required": false,
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Chip/Chip.tsx"
+ ]
+ },
+ "DataTable/DataTable": {
+ "filepath": "DataTable/DataTable.tsx",
+ "title": "DataTable",
+ "description": "Data tables allow displaying sets of data.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [page, setPage] = React.useState(0);\n const [numberOfItemsPerPageList] = React.useState([2, 3, 4]);\n const [itemsPerPage, onItemsPerPageChange] = React.useState(\n numberOfItemsPerPageList[0]\n );\n\n const [items] = React.useState([\n {\n key: 1,\n name: 'Cupcake',\n calories: 356,\n fat: 16,\n },\n {\n key: 2,\n name: 'Eclair',\n calories: 262,\n fat: 16,\n },\n {\n key: 3,\n name: 'Frozen yogurt',\n calories: 159,\n fat: 6,\n },\n {\n key: 4,\n name: 'Gingerbread',\n calories: 305,\n fat: 3.7,\n },\n ]);\n\n const from = page * itemsPerPage;\n const to = Math.min((page + 1) * itemsPerPage, items.length);\n\n React.useEffect(() => {\n setPage(0);\n }, [itemsPerPage]);\n\n return (\n \n \n Dessert\n Calories\n Fat\n \n\n {items.slice(from, to).map((item) => (\n \n {item.name}\n {item.calories}\n {item.fat}\n \n ))}\n\n setPage(page)}\n label={`${from + 1}-${to} of ${items.length}`}\n numberOfItemsPerPageList={numberOfItemsPerPageList}\n numberOfItemsPerPage={itemsPerPage}\n onItemsPerPageChange={onItemsPerPageChange}\n showFastPaginationControls\n selectPageDropdownLabel={'Rows per page'}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "data-table",
+ "data": {
+ "description": "Data tables allow displaying sets of data.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [page, setPage] = React.useState(0);\n const [numberOfItemsPerPageList] = React.useState([2, 3, 4]);\n const [itemsPerPage, onItemsPerPageChange] = React.useState(\n numberOfItemsPerPageList[0]\n );\n\n const [items] = React.useState([\n {\n key: 1,\n name: 'Cupcake',\n calories: 356,\n fat: 16,\n },\n {\n key: 2,\n name: 'Eclair',\n calories: 262,\n fat: 16,\n },\n {\n key: 3,\n name: 'Frozen yogurt',\n calories: 159,\n fat: 6,\n },\n {\n key: 4,\n name: 'Gingerbread',\n calories: 305,\n fat: 3.7,\n },\n ]);\n\n const from = page * itemsPerPage;\n const to = Math.min((page + 1) * itemsPerPage, items.length);\n\n React.useEffect(() => {\n setPage(0);\n }, [itemsPerPage]);\n\n return (\n \n \n Dessert\n Calories\n Fat\n \n\n {items.slice(from, to).map((item) => (\n \n {item.name}\n {item.calories}\n {item.fat}\n \n ))}\n\n setPage(page)}\n label={`${from + 1}-${to} of ${items.length}`}\n numberOfItemsPerPageList={numberOfItemsPerPageList}\n numberOfItemsPerPage={itemsPerPage}\n onItemsPerPageChange={onItemsPerPageChange}\n showFastPaginationControls\n selectPageDropdownLabel={'Rows per page'}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "DataTable",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `DataTable`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/DataTable/DataTable.tsx"
+ ]
+ },
+ "DataTable/DataTableCell": {
+ "filepath": "DataTable/DataTableCell.tsx",
+ "title": "DataTable.Cell",
+ "description": "A component to show a single cell inside of a table.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n 1\n 2\n 3\n 4\n \n);\n\nexport default MyComponent;\n```\n\nIf you want to support multiline text, please use View instead, as multiline text doesn't comply with\nMD Guidelines (https://github.com/callstack/react-native-paper/issues/2381).\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "link": "data-table-cell",
+ "data": {
+ "description": "A component to show a single cell inside of a table.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n 1\n 2\n 3\n 4\n \n);\n\nexport default MyComponent;\n```\n\nIf you want to support multiline text, please use View instead, as multiline text doesn't comply with\nMD Guidelines (https://github.com/callstack/react-native-paper/issues/2381).\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "displayName": "DataTable.Cell",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `DataTableCell`."
+ },
+ "numeric": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Align the text to the right. Generally monetary or number fields are aligned to right."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "textStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Text content style of the `DataTableCell`."
+ },
+ "maxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a text font can reach."
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/DataTable/DataTableCell.tsx"
+ ],
+ "group": "DataTable"
+ },
+ "DataTable/DataTableHeader": {
+ "filepath": "DataTable/DataTableHeader.tsx",
+ "title": "DataTable.Header",
+ "description": "A component to display title in table header.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n Dessert\n \n Calories\n Fat (g)\n \n \n);\n\nexport default MyComponent;\n```",
+ "link": "data-table-header",
+ "data": {
+ "description": "A component to display title in table header.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n Dessert\n \n Calories\n Fat (g)\n \n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "DataTable.Header",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `DataTableHeader`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/DataTable/DataTableHeader.tsx"
+ ],
+ "group": "DataTable"
+ },
+ "DataTable/DataTablePagination": {
+ "filepath": "DataTable/DataTablePagination.tsx",
+ "title": "DataTable.Pagination",
+ "description": "A component to show pagination for data table.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst numberOfItemsPerPageList = [2, 3, 4];\n\nconst items = [\n {\n key: 1,\n name: 'Page 1',\n },\n {\n key: 2,\n name: 'Page 2',\n },\n {\n key: 3,\n name: 'Page 3',\n },\n];\n\nconst MyComponent = () => {\n const [page, setPage] = React.useState(0);\n const [numberOfItemsPerPage, onItemsPerPageChange] = React.useState(numberOfItemsPerPageList[0]);\n const from = page * numberOfItemsPerPage;\n const to = Math.min((page + 1) * numberOfItemsPerPage, items.length);\n\n React.useEffect(() => {\n setPage(0);\n }, [numberOfItemsPerPage]);\n\n return (\n \n setPage(page)}\n label={`${from + 1}-${to} of ${items.length}`}\n showFastPaginationControls\n numberOfItemsPerPageList={numberOfItemsPerPageList}\n numberOfItemsPerPage={numberOfItemsPerPage}\n onItemsPerPageChange={onItemsPerPageChange}\n selectPageDropdownLabel={'Rows per page'}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "data-table-pagination",
+ "data": {
+ "description": "A component to show pagination for data table.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst numberOfItemsPerPageList = [2, 3, 4];\n\nconst items = [\n {\n key: 1,\n name: 'Page 1',\n },\n {\n key: 2,\n name: 'Page 2',\n },\n {\n key: 3,\n name: 'Page 3',\n },\n];\n\nconst MyComponent = () => {\n const [page, setPage] = React.useState(0);\n const [numberOfItemsPerPage, onItemsPerPageChange] = React.useState(numberOfItemsPerPageList[0]);\n const from = page * numberOfItemsPerPage;\n const to = Math.min((page + 1) * numberOfItemsPerPage, items.length);\n\n React.useEffect(() => {\n setPage(0);\n }, [numberOfItemsPerPage]);\n\n return (\n \n setPage(page)}\n label={`${from + 1}-${to} of ${items.length}`}\n showFastPaginationControls\n numberOfItemsPerPageList={numberOfItemsPerPageList}\n numberOfItemsPerPage={numberOfItemsPerPage}\n onItemsPerPageChange={onItemsPerPageChange}\n selectPageDropdownLabel={'Rows per page'}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "DataTable.Pagination",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "page": {
+ "required": true,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The currently visible page (starting with 0)."
+ },
+ "numberOfPages": {
+ "required": true,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The total number of pages."
+ },
+ "onPageChange": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(page: number) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "page",
+ "type": {
+ "name": "number"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on page change."
+ },
+ "showFastPaginationControls": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show fast forward and fast rewind buttons in pagination. False by default.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "numberOfItemsPerPage": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The current number of rows per page."
+ },
+ "numberOfItemsPerPageList": {
+ "required": false,
+ "tsType": {
+ "name": "Array",
+ "elements": [
+ {
+ "name": "number"
+ }
+ ],
+ "raw": "Array"
+ },
+ "description": "Options for a number of rows per page to choose from."
+ },
+ "onItemsPerPageChange": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(numberOfItemsPerPage: number) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "numberOfItemsPerPage",
+ "type": {
+ "name": "number"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "The function to set the number of rows per page."
+ },
+ "selectPageDropdownLabel": {
+ "required": false,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Label text for select page dropdown to display."
+ },
+ "selectPageDropdownAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "AccessibilityLabel for `selectPageDropdownLabel`."
+ },
+ "label": {
+ "required": false,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Label text to display which indicates current pagination."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "AccessibilityLabel for `label`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/DataTable/DataTablePagination.tsx"
+ ],
+ "group": "DataTable"
+ },
+ "DataTable/DataTableRow": {
+ "filepath": "DataTable/DataTableRow.tsx",
+ "title": "DataTable.Row",
+ "description": "A component to show a single row inside of a table.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n 1\n 2\n 3\n 4\n \n);\n\nexport default MyComponent;\n```\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "link": "data-table-row",
+ "data": {
+ "description": "A component to show a single row inside of a table.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n 1\n 2\n 3\n 4\n \n);\n\nexport default MyComponent;\n```\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "displayName": "DataTable.Row",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `DataTableRow`."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "pointerEvents": {
+ "required": false,
+ "tsType": {
+ "name": "ViewProps['pointerEvents']",
+ "raw": "ViewProps['pointerEvents']"
+ },
+ "description": "`pointerEvents` passed to the `View` container, which is wrapping children within `TouchableRipple`."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/DataTable/DataTableRow.tsx"
+ ],
+ "group": "DataTable"
+ },
+ "DataTable/DataTableTitle": {
+ "filepath": "DataTable/DataTableTitle.tsx",
+ "title": "DataTable.Title",
+ "description": "A component to display title in table header.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n Dessert\n \n Calories\n Fat (g)\n \n \n);\n\nexport default MyComponent;\n```",
+ "link": "data-table-title",
+ "data": {
+ "description": "A component to display title in table header.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n Dessert\n \n Calories\n Fat (g)\n \n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "DataTable.Title",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Text content of the `DataTableTitle`."
+ },
+ "numeric": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Align the text to the right. Generally monetary or number fields are aligned to right."
+ },
+ "sortDirection": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'ascending' | 'descending'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'ascending'"
+ },
+ {
+ "name": "literal",
+ "value": "'descending'"
+ }
+ ]
+ },
+ "description": "Direction of sorting. An arrow indicating the direction is displayed when this is given."
+ },
+ "numberOfLines": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The number of lines to show.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "textStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Text content style of the `DataTableTitle`."
+ },
+ "maxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a text font can reach."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/DataTable/DataTableTitle.tsx"
+ ],
+ "group": "DataTable"
+ },
+ "Dialog/Dialog": {
+ "filepath": "Dialog/Dialog.tsx",
+ "title": "Dialog",
+ "description": "Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\nTo render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../Portal) component.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showDialog = () => setVisible(true);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "dialog",
+ "data": {
+ "description": "Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\nTo render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../Portal) component.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showDialog = () => setVisible(true);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "Dialog",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "dismissable": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Determines whether clicking outside the dialog dismiss it.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "dismissableBackButton": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Determines whether clicking Android hardware back button dismiss dialog.",
+ "defaultValue": {
+ "value": "dismissable",
+ "computed": true
+ }
+ },
+ "onDismiss": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Callback that is called when the user dismisses the dialog."
+ },
+ "visible": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Determines Whether the dialog is visible.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `Dialog`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Dialog/Dialog.tsx"
+ ]
+ },
+ "Dialog/DialogActions": {
+ "filepath": "Dialog/DialogActions.tsx",
+ "title": "Dialog.Actions",
+ "description": "A component to show a list of actions in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Button, Dialog, Portal } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "dialog-actions",
+ "data": {
+ "description": "A component to show a list of actions in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Button, Dialog, Portal } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "Dialog.Actions",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `DialogActions`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Dialog/DialogActions.tsx"
+ ],
+ "group": "Dialog"
+ },
+ "Dialog/DialogContent": {
+ "filepath": "Dialog/DialogContent.tsx",
+ "title": "Dialog.Content",
+ "description": "A component to show content in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "dialog-content",
+ "data": {
+ "description": "A component to show content in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "Dialog.Content",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `DialogContent`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Dialog/DialogContent.tsx"
+ ],
+ "group": "Dialog"
+ },
+ "Dialog/DialogIcon": {
+ "filepath": "Dialog/DialogIcon.tsx",
+ "title": "Dialog.Icon",
+ "description": "@supported Available in v5.x with theme version 3\nA component to show an icon in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nconst styles = StyleSheet.create({\n title: {\n textAlign: 'center',\n },\n})\n\nexport default MyComponent;\n```",
+ "link": "dialog-icon",
+ "data": {
+ "description": "@supported Available in v5.x with theme version 3\nA component to show an icon in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nconst styles = StyleSheet.create({\n title: {\n textAlign: 'center',\n },\n})\n\nexport default MyComponent;\n```",
+ "displayName": "Dialog.Icon",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom color for action icon."
+ },
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Name of the icon to show."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Optional icon size.",
+ "defaultValue": {
+ "value": "24",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Dialog/DialogIcon.tsx"
+ ],
+ "group": "Dialog"
+ },
+ "Dialog/DialogScrollArea": {
+ "filepath": "Dialog/DialogScrollArea.tsx",
+ "title": "Dialog.ScrollArea",
+ "description": "A component to show a scrollable content in a Dialog. The component only provides appropriate styling.\nFor the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "dialog-scroll-area",
+ "data": {
+ "description": "A component to show a scrollable content in a Dialog. The component only provides appropriate styling.\nFor the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "Dialog.ScrollArea",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `DialogScrollArea`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Dialog/DialogScrollArea.tsx"
+ ],
+ "group": "Dialog"
+ },
+ "Dialog/DialogTitle": {
+ "filepath": "Dialog/DialogTitle.tsx",
+ "title": "Dialog.Title",
+ "description": "A component to show a title in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "dialog-title",
+ "data": {
+ "description": "A component to show a title in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "Dialog.Title",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Title text for the `DialogTitle`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Dialog/DialogTitle.tsx"
+ ],
+ "group": "Dialog"
+ },
+ "Divider": {
+ "filepath": "Divider.tsx",
+ "title": "Divider",
+ "description": "A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Divider, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Lemon\n \n Mango\n \n \n);\n\nexport default MyComponent;\n```",
+ "link": "divider",
+ "data": {
+ "description": "A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Divider, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Lemon\n \n Mango\n \n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Divider",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "leftInset": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@renamed Renamed from 'inset' to 'leftInset` in v5.x\nWhether divider has a left inset."
+ },
+ "horizontalInset": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n Whether divider has a horizontal inset on both sides.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "bold": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n Whether divider should be bolded.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Divider.tsx"
+ ]
+ },
+ "Drawer/DrawerCollapsedItem": {
+ "filepath": "Drawer/DrawerCollapsedItem.tsx",
+ "title": "Drawer.CollapsedItem",
+ "description": "Note: Available in v5.x with theme version 3\n\nCollapsed component used to show an action item with an icon and optionally label in a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```",
+ "link": "drawer-collapsed-item",
+ "data": {
+ "description": "Note: Available in v5.x with theme version 3\n\nCollapsed component used to show an action item with an icon and optionally label in a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Drawer.CollapsedItem",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "label": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "The label text of the item."
+ },
+ "badge": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "string | number | boolean",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "number"
+ },
+ {
+ "name": "boolean"
+ }
+ ]
+ },
+ "description": "Badge to show on the icon, can be `true` to show a dot, `string` or `number` to show text.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the item is disabled."
+ },
+ "focusedIcon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "@renamed Renamed from 'icon' to 'focusedIcon' in v5.x\nIcon to use as the focused destination icon, can be a string, an image source or a react component"
+ },
+ "unfocusedIcon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "@renamed Renamed from 'icon' to 'focusedIcon' in v5.x\nIcon to use as the unfocused destination icon, can be a string, an image source or a react component"
+ },
+ "active": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to highlight the drawer item as active."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "labelMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a label font can reach."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes",
+ "defaultValue": {
+ "value": "'drawer-collapsed-item'",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Drawer/DrawerCollapsedItem.tsx"
+ ],
+ "group": "Drawer"
+ },
+ "Drawer/DrawerItem": {
+ "filepath": "Drawer/DrawerItem.tsx",
+ "title": "Drawer.Item",
+ "description": "A component used to show an action item with an icon and a label in a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```",
+ "link": "drawer-item",
+ "data": {
+ "description": "A component used to show an action item with an icon and a label in a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Drawer.Item",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "label": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "The label text of the item."
+ },
+ "icon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display for the `DrawerItem`."
+ },
+ "active": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to highlight the drawer item as active."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the item is disabled."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button."
+ },
+ "right": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { color: ColorValue }) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ color: ColorValue }",
+ "signature": {
+ "properties": [
+ {
+ "key": "color",
+ "value": {
+ "name": "ColorValue",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to display on the right side. For instance a Badge."
+ },
+ "labelMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a label font can reach."
+ },
+ "hitSlop": {
+ "required": false,
+ "tsType": {
+ "name": "TouchableRippleProps['hitSlop']",
+ "raw": "TouchableRippleProps['hitSlop']"
+ },
+ "description": "Sets additional distance outside of element in which a press can be detected."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Drawer/DrawerItem.tsx"
+ ],
+ "group": "Drawer"
+ },
+ "Drawer/DrawerSection": {
+ "filepath": "Drawer/DrawerSection.tsx",
+ "title": "Drawer.Section",
+ "description": "A component to group content inside a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [active, setActive] = React.useState('');\n\n return (\n \n setActive('first')}\n />\n setActive('second')}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "drawer-section",
+ "data": {
+ "description": "A component to group content inside a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [active, setActive] = React.useState('');\n\n return (\n \n setActive('first')}\n />\n setActive('second')}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "Drawer.Section",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "title": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Title to show as the header for the section."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `Drawer.Section`."
+ },
+ "showDivider": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show `Divider` at the end of the section. True by default.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "titleMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a title font can reach."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Drawer/DrawerSection.tsx"
+ ],
+ "group": "Drawer"
+ },
+ "FAB/FAB": {
+ "filepath": "FAB/FAB.tsx",
+ "title": "FAB",
+ "description": "A floating action button represents the primary action on a screen.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FAB } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n />\n);\n\nconst styles = StyleSheet.create({\n fab: {\n position: 'absolute',\n margin: 16,\n right: 0,\n bottom: 0,\n },\n});\n\nexport default MyComponent;\n```",
+ "link": "fab",
+ "data": {
+ "description": "A floating action button represents the primary action on a screen.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FAB } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n />\n);\n\nconst styles = StyleSheet.create({\n fab: {\n position: 'absolute',\n margin: 16,\n right: 0,\n bottom: 0,\n },\n});\n\nexport default MyComponent;\n```",
+ "displayName": "FAB",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display inside the FAB."
+ },
+ "variant": {
+ "required": false,
+ "tsType": {
+ "name": "Variant"
+ },
+ "description": "Role-color preset. Defaults to `tonalPrimary`.",
+ "defaultValue": {
+ "value": "'tonalPrimary'",
+ "computed": false
+ }
+ },
+ "containerColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Override the container (background) color."
+ },
+ "contentColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Override the content (icon) color."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "Size"
+ },
+ "description": "Spec size. Defaults to `default`.",
+ "defaultValue": {
+ "value": "'default'",
+ "computed": false
+ }
+ },
+ "visible": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the FAB is currently visible. Toggling animates the spec'd enter\nand exit (scale + alpha) on the FAB itself.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label. Falls back to nothing if unset."
+ },
+ "accessibilityState": {
+ "required": false,
+ "tsType": {
+ "name": "AccessibilityState"
+ },
+ "description": "Accessibility state forwarded to the underlying button."
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawable to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for positioning the FAB. The visual treatment (size, shape, color)\nis driven by `variant` and `size`."
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes.",
+ "defaultValue": {
+ "value": "'floating-action-button'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/FAB/FAB.tsx"
+ ]
+ },
+ "FAB/Extended": {
+ "filepath": "FAB/Extended.tsx",
+ "title": "Extended",
+ "description": "An extended floating action button represents the primary action on a screen\nand shows a label next to the icon. Animates between expanded (icon + label)\nand collapsed (icon only) states.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FAB } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [expanded, setExpanded] = React.useState(true);\n\n return (\n setExpanded((v) => !v)}\n style={styles.fab}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n fab: {\n position: 'absolute',\n margin: 16,\n left: 0,\n bottom: 0,\n },\n});\n\nexport default MyComponent;\n```",
+ "link": "extended",
+ "data": {
+ "description": "An extended floating action button represents the primary action on a screen\nand shows a label next to the icon. Animates between expanded (icon + label)\nand collapsed (icon only) states.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FAB } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [expanded, setExpanded] = React.useState(true);\n\n return (\n setExpanded((v) => !v)}\n style={styles.fab}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n fab: {\n position: 'absolute',\n margin: 16,\n left: 0,\n bottom: 0,\n },\n});\n\nexport default MyComponent;\n```",
+ "displayName": "Extended",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display inside the FAB."
+ },
+ "label": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Label rendered next to the icon when expanded."
+ },
+ "variant": {
+ "required": false,
+ "tsType": {
+ "name": "Variant"
+ },
+ "description": "Role-color preset. Defaults to `tonalPrimary`.",
+ "defaultValue": {
+ "value": "'tonalPrimary'",
+ "computed": false
+ }
+ },
+ "containerColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Override the container (background) color. When set without `contentColor`,\nthe icon and label colors are derived automatically via `contentColorFor`."
+ },
+ "contentColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Override the content (icon + label) color."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "Size"
+ },
+ "description": "Spec size. Defaults to `default`.",
+ "defaultValue": {
+ "value": "'default'",
+ "computed": false
+ }
+ },
+ "expanded": {
+ "required": true,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the FAB is expanded (icon + label) or collapsed (icon only). The\nwidth and label opacity animate per the MD3 Expressive spec on change."
+ },
+ "visible": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the FAB is currently visible. Toggling animates the spec'd enter\nand exit (scale + alpha) on the FAB itself.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label. Falls back to `label` if unset.",
+ "defaultValue": {
+ "value": "label",
+ "computed": true
+ }
+ },
+ "accessibilityState": {
+ "required": false,
+ "tsType": {
+ "name": "AccessibilityState"
+ },
+ "description": "Accessibility state forwarded to the underlying button."
+ },
+ "labelMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a label font can reach."
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawable to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for positioning the FAB. The visual treatment (size, shape, color)\nis driven by `variant` and `size`."
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes.",
+ "defaultValue": {
+ "value": "'extended-floating-action-button'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/FAB/Extended.tsx"
+ ]
+ },
+ "FAB/Menu": {
+ "filepath": "FAB/Menu.tsx",
+ "title": "Menu",
+ "description": "Floating action button menu. Wraps a trigger FAB; when `expanded` is true,\nitems appear stacked above and the trigger morphs into the spec'd close\nbutton (`shape: 'full'`, 56 dp, saturated role color).\n\nNo visual backdrop and no outside-tap dismiss — that matches the MD3 spec\nand lets the user keep interacting with the content underneath. Dismiss\nvia the close button or by tapping an item.\n\n## Usage\n```tsx\nconst [open, setOpen] = React.useState(false);\n\n\n setOpen(false)}\n trigger={{ icon: 'plus', variant: 'primary', onPress: () => setOpen(true) }}\n items={[\n { icon: 'email', label: 'Send', onPress: () => {} },\n { icon: 'bell', label: 'Remind', onPress: () => {} },\n ]}\n />\n\n```",
+ "link": "menu",
+ "data": {
+ "description": "Floating action button menu. Wraps a trigger FAB; when `expanded` is true,\nitems appear stacked above and the trigger morphs into the spec'd close\nbutton (`shape: 'full'`, 56 dp, saturated role color).\n\nNo visual backdrop and no outside-tap dismiss — that matches the MD3 spec\nand lets the user keep interacting with the content underneath. Dismiss\nvia the close button or by tapping an item.\n\n## Usage\n```tsx\nconst [open, setOpen] = React.useState(false);\n\n\n setOpen(false)}\n trigger={{ icon: 'plus', variant: 'primary', onPress: () => setOpen(true) }}\n items={[\n { icon: 'email', label: 'Send', onPress: () => {} },\n { icon: 'bell', label: 'Remind', onPress: () => {} },\n ]}\n />\n\n```",
+ "displayName": "Menu",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "expanded": {
+ "required": true,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the menu is open."
+ },
+ "onDismiss": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Called when the user taps the close button or taps an item."
+ },
+ "trigger": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Icon displayed in the trigger FAB (and cross-faded to `closeIcon` when\n * the menu is open).\n */\n icon: IconSource;\n variant?: Variant;\n size?: Size;\n containerColor?: ColorValue;\n contentColor?: ColorValue;\n visible?: boolean;\n onPress?: (e: GestureResponderEvent) => void;\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": true
+ }
+ },
+ {
+ "key": "variant",
+ "value": {
+ "name": "Variant",
+ "required": false
+ }
+ },
+ {
+ "key": "size",
+ "value": {
+ "name": "Size",
+ "required": false
+ }
+ },
+ {
+ "key": "containerColor",
+ "value": {
+ "name": "ColorValue",
+ "required": false
+ }
+ },
+ {
+ "key": "contentColor",
+ "value": {
+ "name": "ColorValue",
+ "required": false
+ }
+ },
+ {
+ "key": "visible",
+ "value": {
+ "name": "boolean",
+ "required": false
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": false
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ "description": "Trigger FAB configuration. The menu renders a morphing FAB that\nanimates between the trigger appearance and the spec'd close button."
+ },
+ "alignment": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'start' | 'center' | 'end'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'start'"
+ },
+ {
+ "name": "literal",
+ "value": "'center'"
+ },
+ {
+ "name": "literal",
+ "value": "'end'"
+ }
+ ]
+ },
+ "description": "Horizontal side the menu sits on. Default `'end'`.",
+ "defaultValue": {
+ "value": "'end'",
+ "computed": false
+ }
+ },
+ "closeIcon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon used by the close button when the menu is expanded. Default\n`'close'`.",
+ "defaultValue": {
+ "value": "'close'",
+ "computed": false
+ }
+ },
+ "items": {
+ "required": true,
+ "tsType": {
+ "name": "union",
+ "raw": "| [T, T]\n| [T, T, T]\n| [T, T, T, T]\n| [T, T, T, T, T]\n| [T, T, T, T, T, T]",
+ "elements": [
+ {
+ "name": "tuple",
+ "raw": "[T, T]",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "name": "tuple",
+ "raw": "[T, T, T]",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "name": "tuple",
+ "raw": "[T, T, T, T]",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "name": "tuple",
+ "raw": "[T, T, T, T, T]",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "name": "tuple",
+ "raw": "[T, T, T, T, T, T]",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ ]
+ },
+ "description": "Menu items. Spec calls for 2 to 6 items."
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "",
+ "defaultValue": {
+ "value": "'floating-action-button-menu'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/FAB/Menu.tsx"
+ ]
+ },
+ "IconButton/IconButton": {
+ "filepath": "IconButton/IconButton.tsx",
+ "title": "IconButton",
+ "description": "An icon button is a button which displays only an icon without a label.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { IconButton, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n />\n);\n\nexport default MyComponent;\n```\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "link": "icon-button",
+ "data": {
+ "description": "An icon button is a button which displays only an icon without a label.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { IconButton, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n />\n);\n\nexport default MyComponent;\n```\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "displayName": "IconButton",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display."
+ },
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'outlined' | 'contained' | 'contained-tonal'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'outlined'"
+ },
+ {
+ "name": "literal",
+ "value": "'contained'"
+ },
+ {
+ "name": "literal",
+ "value": "'contained-tonal'"
+ }
+ ]
+ },
+ "description": "@supported Available in v5.x with theme version 3\nMode of the icon button. By default there is no specified mode - only pressable icon will be rendered."
+ },
+ "iconColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "@renamed Renamed from 'color' to 'iconColor' in v5.x\nColor of the icon."
+ },
+ "containerColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Background color of the icon container."
+ },
+ "selected": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether icon button is selected. A selected button receives alternative combination of icon and container colors.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Size of the icon.",
+ "defaultValue": {
+ "value": "24",
+ "computed": false
+ }
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."
+ },
+ "animated": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether an icon change is animated.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button."
+ },
+ "contentStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style of button's inner content.\nUse this prop to apply custom height and width or to set a custom padding`."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes",
+ "defaultValue": {
+ "value": "'icon-button'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "loading": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show a loading indicator.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/IconButton/IconButton.tsx"
+ ]
+ },
+ "Icon": {
+ "filepath": "Icon.tsx",
+ "title": "Icon",
+ "description": "An icon component which renders icon from vector library.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Icon, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```",
+ "link": "icon",
+ "data": {
+ "description": "An icon component which renders icon from vector library.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Icon, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Icon",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "size": {
+ "required": true,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Size of icon."
+ },
+ "allowFontScaling": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": ""
+ },
+ "source": {
+ "required": true,
+ "tsType": {
+ "name": "any"
+ },
+ "description": "Icon to display."
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Color of the icon."
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes"
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Icon.tsx"
+ ]
+ },
+ "List/ListAccordion": {
+ "filepath": "List/ListAccordion.tsx",
+ "title": "List.Accordion",
+ "description": "A component used to display an expandable list item.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [expanded, setExpanded] = React.useState(true);\n\n const handlePress = () => setExpanded(!expanded);\n\n return (\n \n }>\n \n \n \n\n }\n expanded={expanded}\n onPress={handlePress}>\n \n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "list-accordion",
+ "data": {
+ "description": "A component used to display an expandable list item.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [expanded, setExpanded] = React.useState(true);\n\n const handlePress = () => setExpanded(!expanded);\n\n return (\n \n }>\n \n \n \n\n }\n expanded={expanded}\n onPress={handlePress}>\n \n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "List.Accordion",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "title": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Title text for the list accordion."
+ },
+ "description": {
+ "required": false,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Description text for the list accordion."
+ },
+ "left": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { color: ColorValue; style: Style }) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ color: ColorValue; style: Style }",
+ "signature": {
+ "properties": [
+ {
+ "key": "color",
+ "value": {
+ "name": "ColorValue",
+ "required": true
+ }
+ },
+ {
+ "key": "style",
+ "value": {
+ "name": "Style",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to display on the left side."
+ },
+ "right": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { isExpanded: boolean }) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ isExpanded: boolean }",
+ "signature": {
+ "properties": [
+ {
+ "key": "isExpanded",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to display on the right side."
+ },
+ "expanded": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the accordion is expanded\nIf this prop is provided, the accordion will behave as a \"controlled component\".\nYou'll need to update this prop when you want to toggle the component or on `onPress`."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "onLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on long press."
+ },
+ "delayLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The number of milliseconds a user must touch the element before executing `onLongPress`."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the section."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to the root TouchableRipple container."
+ },
+ "containerStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to the outermost container that wraps the entire content, including left and right items and both title and description."
+ },
+ "contentStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to the content container, which wraps the title and description."
+ },
+ "titleStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to Title element."
+ },
+ "descriptionStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to Description element."
+ },
+ "titleNumberOfLines": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Truncate Title text such that the total number of lines does not\nexceed this number.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "descriptionNumberOfLines": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Truncate Description text such that the total number of lines does not\nexceed this number.",
+ "defaultValue": {
+ "value": "2",
+ "computed": false
+ }
+ },
+ "titleMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a title font can reach."
+ },
+ "descriptionMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a description font can reach."
+ },
+ "id": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "string | number",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "number"
+ }
+ ]
+ },
+ "description": "Id is used for distinguishing specific accordion when using List.AccordionGroup. Property is required when using List.AccordionGroup and has no impact on behavior when using standalone List.Accordion."
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes"
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the TouchableRipple. This is read by the screen reader when the user taps the touchable."
+ },
+ "pointerEvents": {
+ "required": false,
+ "tsType": {
+ "name": "ViewProps['pointerEvents']",
+ "raw": "ViewProps['pointerEvents']"
+ },
+ "description": "`pointerEvents` passed to the `View` container",
+ "defaultValue": {
+ "value": "'none'",
+ "computed": false
+ }
+ },
+ "hitSlop": {
+ "required": false,
+ "tsType": {
+ "name": "TouchableRippleProps['hitSlop']",
+ "raw": "TouchableRippleProps['hitSlop']"
+ },
+ "description": "Amount of space between the touchable area and the edge of the component.\nThis can be used to enlarge the touchable area beyond the visible component."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/List/ListAccordion.tsx"
+ ],
+ "group": "List"
+ },
+ "List/ListAccordionGroup": {
+ "filepath": "List/ListAccordionGroup.tsx",
+ "title": "List.AccordionGroup",
+ "description": "List.AccordionGroup allows to control a group of List Accordions. `id` prop for List.Accordion is required in order for group to work.\nList.AccordionGroup can be a controlled or uncontrolled component. The example shows the uncontrolled version.\nAt most one Accordion can be expanded at a given time.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n \n \n \n \n \n \n List.Accordion can be wrapped because implementation uses React.Context.\n \n \n \n \n \n \n);\n\nexport default MyComponent;\n```",
+ "link": "list-accordion-group",
+ "data": {
+ "description": "List.AccordionGroup allows to control a group of List Accordions. `id` prop for List.Accordion is required in order for group to work.\nList.AccordionGroup can be a controlled or uncontrolled component. The example shows the uncontrolled version.\nAt most one Accordion can be expanded at a given time.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n \n \n \n \n \n \n List.Accordion can be wrapped because implementation uses React.Context.\n \n \n \n \n \n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "List.AccordionGroup",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "onAccordionPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(expandedId: string | number) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "expandedId",
+ "type": {
+ "name": "union",
+ "raw": "string | number",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "number"
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on selection change."
+ },
+ "expandedId": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "string | number",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "number"
+ }
+ ]
+ },
+ "description": "Id of the currently expanded list accordion"
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "React elements containing list accordions"
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/List/ListAccordionGroup.tsx"
+ ],
+ "group": "List"
+ },
+ "List/ListIcon": {
+ "filepath": "List/ListIcon.tsx",
+ "title": "List.Icon",
+ "description": "A component to show an icon in a list item.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n <>\n \n \n \n >\n);\n\nexport default MyComponent;\n```",
+ "link": "list-icon",
+ "data": {
+ "description": "A component to show an icon in a list item.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n <>\n \n \n \n >\n);\n\nexport default MyComponent;\n```",
+ "displayName": "List.Icon",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to show."
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Color for the icon."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/List/ListIcon.tsx"
+ ],
+ "group": "List"
+ },
+ "List/ListItem": {
+ "filepath": "List/ListItem.tsx",
+ "title": "List.Item",
+ "description": "A component to show tiles inside a List.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => (\n }\n />\n);\n\nexport default MyComponent;\n```\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "link": "list-item",
+ "data": {
+ "description": "A component to show tiles inside a List.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => (\n }\n />\n);\n\nexport default MyComponent;\n```\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "displayName": "List.Item",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "title": {
+ "required": true,
+ "tsType": {
+ "name": "union",
+ "raw": "| React.ReactNode\n| ((props: {\n selectable: boolean;\n ellipsizeMode: EllipsizeProp | undefined;\n color: ColorValue;\n fontSize: number;\n }) => React.ReactNode)",
+ "elements": [
+ {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ {
+ "name": "unknown"
+ }
+ ]
+ },
+ "description": "Title text for the list item."
+ },
+ "description": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "| React.ReactNode\n| ((props: {\n selectable: boolean;\n ellipsizeMode: EllipsizeProp | undefined;\n color: ColorValue;\n fontSize: number;\n }) => React.ReactNode)",
+ "elements": [
+ {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ {
+ "name": "unknown"
+ }
+ ]
+ },
+ "description": "Description text for the list item or callback which returns a React element to display the description."
+ },
+ "left": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { color: ColorValue; style: Style }) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ color: ColorValue; style: Style }",
+ "signature": {
+ "properties": [
+ {
+ "key": "color",
+ "value": {
+ "name": "ColorValue",
+ "required": true
+ }
+ },
+ {
+ "key": "style",
+ "value": {
+ "name": "Style",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to display on the left side."
+ },
+ "right": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { color: ColorValue; style?: Style }) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ color: ColorValue; style?: Style }",
+ "signature": {
+ "properties": [
+ {
+ "key": "color",
+ "value": {
+ "name": "ColorValue",
+ "required": true
+ }
+ },
+ {
+ "key": "style",
+ "value": {
+ "name": "Style",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to display on the right side."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to the root TouchableRipple container."
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "containerStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to the outermost container that wraps the entire content, including left and right items and both title and description."
+ },
+ "contentStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to the content container, which wraps the title and description."
+ },
+ "titleStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to Title element."
+ },
+ "descriptionStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to Description element."
+ },
+ "titleNumberOfLines": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Truncate Title text such that the total number of lines does not\nexceed this number.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "descriptionNumberOfLines": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Truncate Description text such that the total number of lines does not\nexceed this number.",
+ "defaultValue": {
+ "value": "2",
+ "computed": false
+ }
+ },
+ "titleEllipsizeMode": {
+ "required": false,
+ "tsType": {
+ "name": "EllipsizeProp"
+ },
+ "description": "Ellipsize Mode for the Title. One of `'head'`, `'middle'`, `'tail'`, `'clip'`.\n\nSee [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)"
+ },
+ "descriptionEllipsizeMode": {
+ "required": false,
+ "tsType": {
+ "name": "EllipsizeProp"
+ },
+ "description": "Ellipsize Mode for the Description. One of `'head'`, `'middle'`, `'tail'`, `'clip'`.\n\nSee [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)"
+ },
+ "titleMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a title font can reach."
+ },
+ "descriptionMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a description font can reach."
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes"
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/List/ListItem.tsx"
+ ],
+ "group": "List"
+ },
+ "List/ListSection": {
+ "filepath": "List/ListSection.tsx",
+ "title": "List.Section",
+ "description": "A component used to group list items.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Some title\n } />\n }\n />\n \n);\n\nexport default MyComponent;\n```",
+ "link": "list-section",
+ "data": {
+ "description": "A component used to group list items.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Some title\n } />\n }\n />\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "List.Section",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "title": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Title text for the section."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the section."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "titleStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to Title element."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/List/ListSection.tsx"
+ ],
+ "group": "List"
+ },
+ "List/ListSubheader": {
+ "filepath": "List/ListSubheader.tsx",
+ "title": "List.Subheader",
+ "description": "A component used to display a header in lists.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => My List Title;\n\nexport default MyComponent;\n```",
+ "link": "list-subheader",
+ "data": {
+ "description": "A component used to display a header in lists.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => My List Title;\n\nexport default MyComponent;\n```",
+ "displayName": "List.Subheader",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to Text element."
+ },
+ "maxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a text font can reach."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/List/ListSubheader.tsx"
+ ],
+ "group": "List"
+ },
+ "Menu/Menu": {
+ "filepath": "Menu/Menu.tsx",
+ "title": "Menu",
+ "description": "Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Menu, Divider, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const openMenu = () => setVisible(true);\n\n const closeMenu = () => setVisible(false);\n\n return (\n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```\n\n### Note\nWhen using `Menu` within a React Native's `Modal` component, you need to wrap all\n`Modal` contents within a `PaperProvider` in order for the menu to show. This\nwrapping is not necessary if you use Paper's `Modal` instead.",
+ "link": "menu",
+ "data": {
+ "description": "Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Menu, Divider, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const openMenu = () => setVisible(true);\n\n const closeMenu = () => setVisible(false);\n\n return (\n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```\n\n### Note\nWhen using `Menu` within a React Native's `Modal` component, you need to wrap all\n`Modal` contents within a `PaperProvider` in order for the menu to show. This\nwrapping is not necessary if you use Paper's `Modal` instead.",
+ "displayName": "Menu",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "visible": {
+ "required": true,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the Menu is currently visible."
+ },
+ "anchor": {
+ "required": true,
+ "tsType": {
+ "name": "union",
+ "raw": "React.ReactNode | { x: number; y: number }",
+ "elements": [
+ {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ x: number; y: number }",
+ "signature": {
+ "properties": [
+ {
+ "key": "x",
+ "value": {
+ "name": "number",
+ "required": true
+ }
+ },
+ {
+ "key": "y",
+ "value": {
+ "name": "number",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ ]
+ },
+ "description": "The anchor to open the menu from. In most cases, it will be a button that opens the menu."
+ },
+ "anchorPosition": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'top' | 'bottom'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'top'"
+ },
+ {
+ "name": "literal",
+ "value": "'bottom'"
+ }
+ ]
+ },
+ "description": "Whether the menu should open at the top of the anchor or at its bottom.\nApplied only when anchor is a node, not an x/y position."
+ },
+ "statusBarHeight": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Extra margin to add at the top of the menu to account for translucent status bar on Android.\nIf you are using Expo, we assume translucent status bar and set a height for status bar automatically.\nPass `0` or a custom value to and customize it.\nThis is automatically handled on iOS."
+ },
+ "onDismiss": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called."
+ },
+ "overlayAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the overlay. This is read by the screen reader when the user taps outside the menu.",
+ "defaultValue": {
+ "value": "'Close menu'",
+ "computed": false
+ }
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `Menu`."
+ },
+ "contentStyle": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": "Style of menu's inner content."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "elevation": {
+ "required": false,
+ "tsType": {
+ "name": "Elevation"
+ },
+ "description": "Elevation level of the menu's content. Shadow styles are calculated based on this value. Default `backgroundColor` is taken from the corresponding `theme.colors.elevation` property. By default equals `2`.\n@supported Available in v5.x with theme version 3",
+ "defaultValue": {
+ "value": "2",
+ "computed": false
+ }
+ },
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'flat' | 'elevated'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'flat'"
+ },
+ {
+ "name": "literal",
+ "value": "'elevated'"
+ }
+ ]
+ },
+ "description": "Mode of the menu's content.\n- `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.\n- `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.\n\n@supported Available in v5.x with theme version 3",
+ "defaultValue": {
+ "value": "'elevated'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "keyboardShouldPersistTaps": {
+ "required": false,
+ "tsType": {
+ "name": "ScrollViewProps['keyboardShouldPersistTaps']",
+ "raw": "ScrollViewProps['keyboardShouldPersistTaps']"
+ },
+ "description": "Inner ScrollView prop"
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests.",
+ "defaultValue": {
+ "value": "'menu'",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Menu/Menu.tsx"
+ ]
+ },
+ "Menu/MenuItem": {
+ "filepath": "Menu/MenuItem.tsx",
+ "title": "Menu.Item",
+ "description": "A component to show a single list item inside a Menu.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Menu } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} title=\"Redo\" />\n {}} title=\"Undo\" />\n {}} title=\"Cut\" disabled />\n {}} title=\"Copy\" disabled />\n {}} title=\"Paste\" />\n \n);\n\nexport default MyComponent;\n```",
+ "link": "menu-item",
+ "data": {
+ "description": "A component to show a single list item inside a Menu.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Menu } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} title=\"Redo\" />\n {}} title=\"Undo\" />\n {}} title=\"Cut\" disabled />\n {}} title=\"Copy\" disabled />\n {}} title=\"Paste\" />\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Menu.Item",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "title": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Title text for the `MenuItem`."
+ },
+ "leadingIcon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "@renamed Renamed from 'icon' to 'leadingIcon' in v5.x\n\nLeading icon to display for the `MenuItem`."
+ },
+ "trailingIcon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nTrailing icon to display for the `MenuItem`."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the 'item' is disabled. A disabled 'item' is greyed out and `onPress` is not called on touch."
+ },
+ "dense": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nSets min height with densed layout."
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "titleMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a title font can reach.",
+ "defaultValue": {
+ "value": "1.5",
+ "computed": false
+ }
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to the root TouchableRipple container.\n"
+ },
+ "containerStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to the outermost container that wraps the entire content, including leading and trailing icons and title text."
+ },
+ "contentStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to the content container, which wraps the title text."
+ },
+ "titleStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to the Title element."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "hitSlop": {
+ "required": false,
+ "tsType": {
+ "name": "TouchableRippleProps['hitSlop']",
+ "raw": "TouchableRippleProps['hitSlop']"
+ },
+ "description": "Sets additional distance outside of element in which a press can be detected."
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes",
+ "defaultValue": {
+ "value": "'menu-item'",
+ "computed": false
+ }
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the Touchable. This is read by the screen reader when the user taps the component."
+ },
+ "accessibilityState": {
+ "required": false,
+ "tsType": {
+ "name": "AccessibilityState"
+ },
+ "description": "Accessibility state for the Touchable. This is read by the screen reader when the user taps the component."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Menu/MenuItem.tsx"
+ ],
+ "group": "Menu"
+ },
+ "Modal": {
+ "filepath": "Modal.tsx",
+ "title": "Modal",
+ "description": "The Modal component is a simple way to present content above an enclosing view.\nTo render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal) component.\nNote that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showModal = () => setVisible(true);\n const hideModal = () => setVisible(false);\n const containerStyle = { backgroundColor: 'white', padding: 20 };\n\n return (\n \n \n \n Example Modal. Click outside this area to dismiss.\n \n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "modal",
+ "data": {
+ "description": "The Modal component is a simple way to present content above an enclosing view.\nTo render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal) component.\nNote that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showModal = () => setVisible(true);\n const hideModal = () => setVisible(false);\n const containerStyle = { backgroundColor: 'white', padding: 20 };\n\n return (\n \n \n \n Example Modal. Click outside this area to dismiss.\n \n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "Modal",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "dismissable": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Determines whether clicking outside the modal dismisses it.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "dismissableBackButton": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Determines whether clicking Android hardware back button dismisses the dialog.",
+ "defaultValue": {
+ "value": "dismissable",
+ "computed": true
+ }
+ },
+ "onDismiss": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Callback that is called when the user dismisses the modal.",
+ "defaultValue": {
+ "value": "() => {}",
+ "computed": false
+ }
+ },
+ "overlayAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the overlay. This is read by the screen reader when the user taps outside the modal.",
+ "defaultValue": {
+ "value": "'Close modal'",
+ "computed": false
+ }
+ },
+ "visible": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Determines Whether the modal is visible.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `Modal`."
+ },
+ "contentContainerStyle": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": "Style for the content of the modal"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the wrapper of the modal.\nUse this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests.",
+ "defaultValue": {
+ "value": "'modal'",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Modal.tsx"
+ ]
+ },
+ "Portal/Portal": {
+ "filepath": "Portal/Portal.tsx",
+ "title": "Portal",
+ "description": "Portal allows rendering a component at a different place in the parent tree.\nYou can use it to render content which should appear above other elements, similar to `Modal`.\nIt requires a [`Portal.Host`](PortalHost) component to be rendered somewhere in the parent tree.\nNote that if you're using the `Provider` component, this already includes a `Portal.Host`.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n This is rendered at a different place\n \n);\n\nexport default MyComponent;\n```",
+ "link": "portal",
+ "data": {
+ "description": "Portal allows rendering a component at a different place in the parent tree.\nYou can use it to render content which should appear above other elements, similar to `Modal`.\nIt requires a [`Portal.Host`](PortalHost) component to be rendered somewhere in the parent tree.\nNote that if you're using the `Provider` component, this already includes a `Portal.Host`.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n This is rendered at a different place\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Portal",
+ "methods": [],
+ "statics": [
+ {
+ "name": "Host",
+ "docblock": null,
+ "type": {
+ "name": "static",
+ "raw": "static"
+ },
+ "link": "portal-host.html"
+ }
+ ],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `Portal`."
+ },
+ "theme": {
+ "required": true,
+ "tsType": {
+ "name": "InternalTheme"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Portal/Portal.tsx"
+ ]
+ },
+ "Portal/PortalHost": {
+ "filepath": "Portal/PortalHost.tsx",
+ "title": "Portal.Host",
+ "description": "Portal host renders all of its children `Portal` elements.\nFor example, you can wrap a screen in `Portal.Host` to render items above the screen.\nIf you're using the `Provider` component, it already includes `Portal.Host`.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Text } from 'react-native';\nimport { Portal } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Content of the app\n \n);\n\nexport default MyComponent;\n```\n\nHere any `Portal` elements under `` are rendered alongside `` and will appear above `` like a `Modal`.",
+ "link": "portal-host",
+ "data": {
+ "description": "Portal host renders all of its children `Portal` elements.\nFor example, you can wrap a screen in `Portal.Host` to render items above the screen.\nIf you're using the `Provider` component, it already includes `Portal.Host`.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Text } from 'react-native';\nimport { Portal } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Content of the app\n \n);\n\nexport default MyComponent;\n```\n\nHere any `Portal` elements under `` are rendered alongside `` and will appear above `` like a `Modal`.",
+ "displayName": "Portal.Host",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Portal/PortalHost.tsx"
+ ],
+ "group": "Portal"
+ },
+ "ProgressBar": {
+ "filepath": "ProgressBar.tsx",
+ "title": "ProgressBar",
+ "description": "Progress bar is an indicator used to present progress of some activity in the app.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ProgressBar, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```",
+ "link": "progress-bar",
+ "data": {
+ "description": "Progress bar is an indicator used to present progress of some activity in the app.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ProgressBar, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "ProgressBar",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "animatedValue": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Animated value (between 0 and 1). This tells the progress bar to rely on this value to animate it.\nNote: It should not be used in parallel with the `progress` prop."
+ },
+ "progress": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Progress value (between 0 and 1).\nNote: It should not be used in parallel with the `animatedValue` prop.",
+ "defaultValue": {
+ "value": "0",
+ "computed": false
+ }
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Color of the progress bar. The background color will be calculated based on this but you can change it by passing `backgroundColor` to `style` prop."
+ },
+ "indeterminate": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "If the progress bar will show indeterminate progress."
+ },
+ "visible": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show the ProgressBar (true, the default) or hide it (false).",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "fillStyle": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": "Style of filled part of the ProgresBar."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests.",
+ "defaultValue": {
+ "value": "'progress-bar'",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/ProgressBar.tsx"
+ ]
+ },
+ "RadioButton/RadioButton": {
+ "filepath": "RadioButton/RadioButton.tsx",
+ "title": "RadioButton",
+ "description": "Radio buttons allow the selection a single option from a set.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { RadioButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [checked, setChecked] = React.useState('first');\n\n return (\n \n setChecked('first')}\n />\n setChecked('second')}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "radio-button",
+ "data": {
+ "description": "Radio buttons allow the selection a single option from a set.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { RadioButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [checked, setChecked] = React.useState('first');\n\n return (\n \n setChecked('first')}\n />\n setChecked('second')}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "RadioButton",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "value": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Value of the radio button"
+ },
+ "status": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'checked' | 'unchecked'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'checked'"
+ },
+ {
+ "name": "literal",
+ "value": "'unchecked'"
+ }
+ ]
+ },
+ "description": "Status of radio button."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether radio is disabled."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "uncheckedColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for unchecked radio."
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for radio."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/RadioButton/RadioButton.tsx"
+ ]
+ },
+ "RadioButton/RadioButtonAndroid": {
+ "filepath": "RadioButton/RadioButtonAndroid.tsx",
+ "title": "RadioButton.Android",
+ "description": "Radio buttons allow the selection a single option from a set.\nThis component follows platform guidelines for Android, but can be used\non any platform.\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "link": "radio-button-android",
+ "data": {
+ "description": "Radio buttons allow the selection a single option from a set.\nThis component follows platform guidelines for Android, but can be used\non any platform.\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "displayName": "RadioButton.Android",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "value": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Value of the radio button"
+ },
+ "status": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'checked' | 'unchecked'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'checked'"
+ },
+ {
+ "name": "literal",
+ "value": "'unchecked'"
+ }
+ ]
+ },
+ "description": "Status of radio button."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether radio is disabled."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(param?: any) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "param",
+ "type": {
+ "name": "any"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "uncheckedColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for unchecked radio."
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for radio."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/RadioButton/RadioButtonAndroid.tsx"
+ ],
+ "group": "RadioButton"
+ },
+ "RadioButton/RadioButtonGroup": {
+ "filepath": "RadioButton/RadioButtonGroup.tsx",
+ "title": "RadioButton.Group",
+ "description": "Radio button group allows to control a group of radio buttons.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { RadioButton, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('first');\n\n return (\n setValue(newValue)} value={value}>\n \n First\n \n \n \n Second\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "radio-button-group",
+ "data": {
+ "description": "Radio button group allows to control a group of radio buttons.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { RadioButton, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('first');\n\n return (\n setValue(newValue)} value={value}>\n \n First\n \n \n \n Second\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "RadioButton.Group",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "onValueChange": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(value: string) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "value",
+ "type": {
+ "name": "string"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on selection change."
+ },
+ "value": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Value of the currently selected radio button."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "React elements containing radio buttons."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/RadioButton/RadioButtonGroup.tsx"
+ ],
+ "group": "RadioButton"
+ },
+ "RadioButton/RadioButtonIOS": {
+ "filepath": "RadioButton/RadioButtonIOS.tsx",
+ "title": "RadioButton.IOS",
+ "description": "Radio buttons allow the selection a single option from a set.\nThis component follows platform guidelines for iOS, but can be used\non any platform.\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "link": "radio-button-ios",
+ "data": {
+ "description": "Radio buttons allow the selection a single option from a set.\nThis component follows platform guidelines for iOS, but can be used\non any platform.\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "displayName": "RadioButton.IOS",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "value": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Value of the radio button"
+ },
+ "status": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'checked' | 'unchecked'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'checked'"
+ },
+ {
+ "name": "literal",
+ "value": "'unchecked'"
+ }
+ ]
+ },
+ "description": "Status of radio button."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether radio is disabled."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for radio."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/RadioButton/RadioButtonIOS.tsx"
+ ],
+ "group": "RadioButton"
+ },
+ "RadioButton/RadioButtonItem": {
+ "filepath": "RadioButton/RadioButtonItem.tsx",
+ "title": "RadioButton.Item",
+ "description": "RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { RadioButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('first');\n\n return (\n setValue(value)} value={value}>\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "radio-button-item",
+ "data": {
+ "description": "RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { RadioButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('first');\n\n return (\n setValue(value)} value={value}>\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "RadioButton.Item",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "value": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Value of the radio button."
+ },
+ "label": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Label to be displayed on the item."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether radio is disabled."
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "onLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on long press."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.",
+ "defaultValue": {
+ "value": "label",
+ "computed": true
+ }
+ },
+ "uncheckedColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for unchecked radio."
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for radio."
+ },
+ "status": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'checked' | 'unchecked'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'checked'"
+ },
+ {
+ "name": "literal",
+ "value": "'unchecked'"
+ }
+ ]
+ },
+ "description": "Status of radio button."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Additional styles for container View."
+ },
+ "labelStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to Label element."
+ },
+ "labelVariant": {
+ "required": false,
+ "tsType": {
+ "name": "TypescaleKey"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nLabel text variant defines appropriate text styles for type role and its size.\nAvailable variants:\n\n Display: `displayLarge`, `displayMedium`, `displaySmall`\n\n Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`\n\n Title: `titleLarge`, `titleMedium`, `titleSmall`\n\n Label: `labelLarge`, `labelMedium`, `labelSmall`\n\n Body: `bodyLarge`, `bodyMedium`, `bodySmall`",
+ "defaultValue": {
+ "value": "'bodyLarge'",
+ "computed": false
+ }
+ },
+ "labelMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a label font can reach."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests."
+ },
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'android' | 'ios'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'android'"
+ },
+ {
+ "name": "literal",
+ "value": "'ios'"
+ }
+ ]
+ },
+ "description": "Whether `` or `` should be used.\nLeft undefined `` will be used."
+ },
+ "position": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'leading' | 'trailing'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'leading'"
+ },
+ {
+ "name": "literal",
+ "value": "'trailing'"
+ }
+ ]
+ },
+ "description": "Radio button control position.",
+ "defaultValue": {
+ "value": "'trailing'",
+ "computed": false
+ }
+ },
+ "hitSlop": {
+ "required": false,
+ "tsType": {
+ "name": "TouchableRippleProps['hitSlop']",
+ "raw": "TouchableRippleProps['hitSlop']"
+ },
+ "description": "Sets additional distance outside of element in which a press can be detected."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/RadioButton/RadioButtonItem.tsx"
+ ],
+ "group": "RadioButton"
+ },
+ "Searchbar": {
+ "filepath": "Searchbar.tsx",
+ "title": "Searchbar",
+ "description": "Searchbar is a simple input box where users can type search queries.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Searchbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [searchQuery, setSearchQuery] = React.useState('');\n\n return (\n \n );\n};\n\nexport default MyComponent;\n\n```",
+ "link": "searchbar",
+ "data": {
+ "description": "Searchbar is a simple input box where users can type search queries.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Searchbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [searchQuery, setSearchQuery] = React.useState('');\n\n return (\n \n );\n};\n\nexport default MyComponent;\n\n```",
+ "displayName": "Searchbar",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "placeholder": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Hint text shown when the input is empty."
+ },
+ "value": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "The value of the text input."
+ },
+ "onChangeText": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(query: string) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "query",
+ "type": {
+ "name": "string"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Callback that is called when the text input's text changes."
+ },
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'bar' | 'view'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'bar'"
+ },
+ {
+ "name": "literal",
+ "value": "'view'"
+ }
+ ]
+ },
+ "description": "@supported Available in v5.x with theme version 3\nSearch layout mode, the default value is \"bar\".",
+ "defaultValue": {
+ "value": "'bar'",
+ "computed": false
+ }
+ },
+ "icon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon name for the left icon button (see `onIconPress`)."
+ },
+ "iconColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom color for icon, default will be derived from theme"
+ },
+ "onIconPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Callback to execute if we want the left icon to act as button."
+ },
+ "onClearIconPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Callback to execute if we want to add custom behaviour to close icon button."
+ },
+ "searchAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button.",
+ "defaultValue": {
+ "value": "'search'",
+ "computed": false
+ }
+ },
+ "clearIcon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Custom icon for clear button, default will be icon close. It's visible when `loading` is set to `false`.\nIn v5.x with theme version 3, `clearIcon` is visible only if `right` prop is not defined."
+ },
+ "clearAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button.",
+ "defaultValue": {
+ "value": "'clear'",
+ "computed": false
+ }
+ },
+ "traileringIcon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nIcon name for the right trailering icon button.\nWorks only when `mode` is set to \"bar\". It won't be displayed if `loading` is set to `true`."
+ },
+ "traileringIconColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nCustom color for the right trailering icon, default will be derived from theme"
+ },
+ "onTraileringIconPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Callback to execute on the right trailering icon button press."
+ },
+ "traileringIconAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the right trailering icon button. This is read by the screen reader when the user taps the button."
+ },
+ "right": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: {\n color: ColorValue;\n style: Style;\n testID: string;\n}) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n color: ColorValue;\n style: Style;\n testID: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "color",
+ "value": {
+ "name": "ColorValue",
+ "required": true
+ }
+ },
+ {
+ "key": "style",
+ "value": {
+ "name": "Style",
+ "required": true
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "@supported Available in v5.x with theme version 3\nCallback which returns a React element to display on the right side.\nWorks only when `mode` is set to \"bar\"."
+ },
+ "showDivider": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nWhether to show `Divider` at the bottom of the search.\nWorks only when `mode` is set to \"view\". True by default.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "elevation": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "0 | 1 | 2 | 3 | 4 | 5 | Animated.Value",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "0"
+ },
+ {
+ "name": "literal",
+ "value": "1"
+ },
+ {
+ "name": "literal",
+ "value": "2"
+ },
+ {
+ "name": "literal",
+ "value": "3"
+ },
+ {
+ "name": "literal",
+ "value": "4"
+ },
+ {
+ "name": "literal",
+ "value": "5"
+ },
+ {
+ "name": "Animated.Value"
+ }
+ ]
+ },
+ "description": "@supported Available in v5.x with theme version 3\nChanges Searchbar shadow and background on iOS and Android.",
+ "defaultValue": {
+ "value": "0",
+ "computed": false
+ }
+ },
+ "inputStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Set style of the TextInput component inside the searchbar"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "loading": {
+ "required": false,
+ "tsType": {
+ "name": "Boolean"
+ },
+ "description": "Custom flag for replacing clear button with activity indicator.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes",
+ "defaultValue": {
+ "value": "'search-bar'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "Pick",
+ "elements": [
+ {
+ "name": "TextInput"
+ },
+ {
+ "name": "union",
+ "raw": "'setNativeProps' | 'isFocused' | 'clear' | 'blur' | 'focus' | 'setSelection'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'setNativeProps'"
+ },
+ {
+ "name": "literal",
+ "value": "'isFocused'"
+ },
+ {
+ "name": "literal",
+ "value": "'clear'"
+ },
+ {
+ "name": "literal",
+ "value": "'blur'"
+ },
+ {
+ "name": "literal",
+ "value": "'focus'"
+ },
+ {
+ "name": "literal",
+ "value": "'setSelection'"
+ }
+ ]
+ }
+ ],
+ "raw": "Pick<\n TextInput,\n 'setNativeProps' | 'isFocused' | 'clear' | 'blur' | 'focus' | 'setSelection'\n>"
+ }
+ ]
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Searchbar.tsx"
+ ]
+ },
+ "SegmentedButtons/SegmentedButtons": {
+ "filepath": "SegmentedButtons/SegmentedButtons.tsx",
+ "title": "SegmentedButtons",
+ "description": "Segmented buttons can be used to select options, switch views or sort elements.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { SafeAreaView, StyleSheet } from 'react-native';\nimport { SegmentedButtons } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('');\n\n return (\n \n \n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n },\n});\n\nexport default MyComponent;\n```",
+ "link": "segmented-buttons",
+ "data": {
+ "description": "Segmented buttons can be used to select options, switch views or sort elements.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { SafeAreaView, StyleSheet } from 'react-native';\nimport { SegmentedButtons } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('');\n\n return (\n \n \n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n },\n});\n\nexport default MyComponent;\n```",
+ "displayName": "SegmentedButtons",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "buttons": {
+ "required": true,
+ "tsType": {
+ "name": "Array",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n value: T;\n icon?: IconSource;\n disabled?: boolean;\n accessibilityLabel?: string;\n checkedColor?: string;\n uncheckedColor?: string;\n onPress?: (event: GestureResponderEvent) => void;\n label?: string;\n showSelectedCheck?: boolean;\n style?: StyleProp;\n labelStyle?: StyleProp;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "value",
+ "value": {
+ "name": "T",
+ "required": true
+ }
+ },
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "disabled",
+ "value": {
+ "name": "boolean",
+ "required": false
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "checkedColor",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "uncheckedColor",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(event: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "event",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "showSelectedCheck",
+ "value": {
+ "name": "boolean",
+ "required": false
+ }
+ },
+ {
+ "key": "style",
+ "value": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp",
+ "required": false
+ }
+ },
+ {
+ "key": "labelStyle",
+ "value": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "raw": "{\n value: T;\n icon?: IconSource;\n disabled?: boolean;\n accessibilityLabel?: string;\n checkedColor?: string;\n uncheckedColor?: string;\n onPress?: (event: GestureResponderEvent) => void;\n label?: string;\n showSelectedCheck?: boolean;\n style?: StyleProp;\n labelStyle?: StyleProp;\n testID?: string;\n}[]"
+ },
+ "description": "Buttons to display as options in toggle button.\nButton should contain the following properties:\n- `value`: value of button (required)\n- `icon`: icon to display for the item\n- `disabled`: whether the button is disabled\n- `accessibilityLabel`: acccessibility label for the button. This is read by the screen reader when the user taps the button.\n- `checkedColor`: custom color for checked Text and Icon\n- `uncheckedColor`: custom color for unchecked Text and Icon\n- `onPress`: callback that is called when button is pressed\n- `label`: label text of the button\n- `showSelectedCheck`: show optional check icon to indicate selected state\n- `style`: pass additional styles for the button\n- `testID`: testID to be used on tests"
+ },
+ "density": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'regular' | 'small' | 'medium' | 'high'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'regular'"
+ },
+ {
+ "name": "literal",
+ "value": "'small'"
+ },
+ {
+ "name": "literal",
+ "value": "'medium'"
+ },
+ {
+ "name": "literal",
+ "value": "'high'"
+ }
+ ]
+ },
+ "description": "Density is applied to the height, to allow usage in denser UIs"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/SegmentedButtons/SegmentedButtons.tsx"
+ ]
+ },
+ "Snackbar": {
+ "filepath": "Snackbar.tsx",
+ "title": "Snackbar",
+ "description": "Snackbars provide brief feedback about an operation through a message rendered at the bottom of the container in which it's wrapped.\n\nNote: To display it as a popup, regardless of the parent's position, wrap it with a `Portal` component – refer to the example in the \"More Examples` section.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { Button, Snackbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const onToggleSnackBar = () => setVisible(!visible);\n\n const onDismissSnackBar = () => setVisible(false);\n\n return (\n \n \n {\n // Do something\n },\n }}>\n Hey there! I'm a Snackbar.\n \n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'space-between',\n },\n});\n\nexport default MyComponent;\n```",
+ "link": "snackbar",
+ "data": {
+ "description": "Snackbars provide brief feedback about an operation through a message rendered at the bottom of the container in which it's wrapped.\n\nNote: To display it as a popup, regardless of the parent's position, wrap it with a `Portal` component – refer to the example in the \"More Examples` section.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { Button, Snackbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const onToggleSnackBar = () => setVisible(!visible);\n\n const onDismissSnackBar = () => setVisible(false);\n\n return (\n \n \n {\n // Do something\n },\n }}>\n Hey there! I'm a Snackbar.\n \n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'space-between',\n },\n});\n\nexport default MyComponent;\n```",
+ "displayName": "Snackbar",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "visible": {
+ "required": true,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the Snackbar is currently visible."
+ },
+ "action": {
+ "required": false,
+ "tsType": {
+ "name": "intersection",
+ "raw": "$RemoveChildren & {\n label: string;\n}",
+ "elements": [
+ {
+ "name": "$RemoveChildren",
+ "elements": [
+ {
+ "name": "Button"
+ }
+ ],
+ "raw": "$RemoveChildren"
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n label: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ ]
+ },
+ "description": "Label and press callback for the action button. It should contain the following properties:\n- `label` - Label of the action button\n- `onPress` - Callback that is called when action button is pressed."
+ },
+ "icon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nIcon to display when `onIconPress` is defined. Default will be `close` icon."
+ },
+ "onIconPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on icon button press. The icon button appears only when this prop is specified."
+ },
+ "iconAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nAccessibility label for the icon button. This is read by the screen reader when the user taps the button.",
+ "defaultValue": {
+ "value": "'Close icon'",
+ "computed": false
+ }
+ },
+ "duration": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The duration for which the Snackbar is shown.",
+ "defaultValue": {
+ "value": "7000",
+ "computed": false
+ }
+ },
+ "onDismiss": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Callback called when Snackbar is dismissed. The `visible` prop needs to be updated when this is called."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Text content of the Snackbar."
+ },
+ "elevation": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "0 | 1 | 2 | 3 | 4 | 5 | Animated.Value",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "0"
+ },
+ {
+ "name": "literal",
+ "value": "1"
+ },
+ {
+ "name": "literal",
+ "value": "2"
+ },
+ {
+ "name": "literal",
+ "value": "3"
+ },
+ {
+ "name": "literal",
+ "value": "4"
+ },
+ {
+ "name": "literal",
+ "value": "5"
+ },
+ {
+ "name": "Animated.Value"
+ }
+ ]
+ },
+ "description": "@supported Available in v5.x with theme version 3\nChanges Snackbar shadow and background on iOS and Android.",
+ "defaultValue": {
+ "value": "2",
+ "computed": false
+ }
+ },
+ "maxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a text font can reach."
+ },
+ "wrapperStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the wrapper of the snackbar"
+ },
+ "contentStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the content of the snackbar"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRefObject",
+ "raw": "React.RefObject",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes"
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Snackbar.tsx"
+ ]
+ },
+ "Surface": {
+ "filepath": "Surface.tsx",
+ "title": "Surface",
+ "description": "Surface is a basic container that can give depth to an element with elevation shadow.\nOn dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.\nOverlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Surface, Text } from 'react-native-paper';\nimport { StyleSheet } from 'react-native';\n\nconst MyComponent = () => (\n \n Surface\n \n);\n\nexport default MyComponent;\n\nconst styles = StyleSheet.create({\n surface: {\n padding: 8,\n height: 80,\n width: 80,\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n```",
+ "link": "surface",
+ "data": {
+ "description": "Surface is a basic container that can give depth to an element with elevation shadow.\nOn dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.\nOverlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Surface, Text } from 'react-native-paper';\nimport { StyleSheet } from 'react-native';\n\nconst MyComponent = () => (\n \n Surface\n \n);\n\nexport default MyComponent;\n\nconst styles = StyleSheet.create({\n surface: {\n padding: 8,\n height: 80,\n width: 80,\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n```",
+ "displayName": "Surface",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `Surface`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "elevation": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "Elevation | Animated.Value",
+ "elements": [
+ {
+ "name": "Elevation"
+ },
+ {
+ "name": "Animated.Value"
+ }
+ ]
+ },
+ "description": "@supported Available in v5.x with theme version 3\nChanges shadows and background on iOS and Android.\nUsed to create UI hierarchy between components.\n\nNote: If `mode` is set to `flat`, Surface doesn't have a shadow.\n\nNote: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.\nIt's no longer supported with theme version 3 and you should use `elevation` property instead.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'flat' | 'elevated'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'flat'"
+ },
+ {
+ "name": "literal",
+ "value": "'elevated'"
+ }
+ ]
+ },
+ "description": "@supported Available in v5.x with theme version 3\nMode of the Surface.\n- `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.\n- `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.",
+ "defaultValue": {
+ "value": "'elevated'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes",
+ "defaultValue": {
+ "value": "'surface'",
+ "computed": false
+ }
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "container": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@internal"
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Surface.tsx"
+ ]
+ },
+ "Switch/Switch": {
+ "filepath": "Switch/Switch.tsx",
+ "title": "Switch",
+ "description": "Material 3 toggle between two mutually exclusive states (on / off).\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Switch } from 'react-native-paper';\n\nconst Example = () => {\n const [on, setOn] = React.useState(false);\n return ;\n};\n```\n\n## Theming\nCustomize by overriding these `theme.colors` roles:\n- `primary` / `onPrimary`: selected track + icon / selected handle\n- `primaryContainer`: selected handle on hover, press\n- `surfaceContainerHighest`: unselected track + icon\n- `outline`: unselected resting handle, unselected track outline\n- `onSurfaceVariant`: unselected handle on hover, press\n- `onSurface`: disabled track, handle, and icon fills\n- `surface`: disabled selected handle\n- `secondary`: focus indicator",
+ "link": "switch",
+ "data": {
+ "description": "Material 3 toggle between two mutually exclusive states (on / off).\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Switch } from 'react-native-paper';\n\nconst Example = () => {\n const [on, setOn] = React.useState(false);\n return ;\n};\n```\n\n## Theming\nCustomize by overriding these `theme.colors` roles:\n- `primary` / `onPrimary`: selected track + icon / selected handle\n- `primaryContainer`: selected handle on hover, press\n- `surfaceContainerHighest`: unselected track + icon\n- `outline`: unselected resting handle, unselected track outline\n- `onSurfaceVariant`: unselected handle on hover, press\n- `onSurface`: disabled track, handle, and icon fills\n- `surface`: disabled selected handle\n- `secondary`: focus indicator",
+ "displayName": "Switch",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "value": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the switch is on."
+ },
+ "onValueChange": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(value: boolean) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "value",
+ "type": {
+ "name": "boolean"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Called with the new value when the user toggles the switch."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Disables interaction and renders the disabled visual state."
+ },
+ "checkedIcon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon shown inside the handle when checked"
+ },
+ "uncheckedIcon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon shown inside the handle when unchecked."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Switch/Switch.tsx"
+ ]
+ },
+ "TextInput/TextInput": {
+ "filepath": "TextInput/TextInput.tsx",
+ "title": "TextInput",
+ "description": "A text input lets users enter and edit text. It shows an optional floating label,\nsupports `filled` and `outlined` variants, optional supporting text (including\nerror state), and start/end accessories.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { TextInput } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [text, setText] = React.useState('');\n\n const searchAccessory = (accessoryProps) => (\n \n );\n\n const clearAccessory = ({ style, disabled }) => (\n setText('')}\n role=\"button\"\n aria-label=\"Clear text\"\n >\n \n \n );\n\n return (\n \n );\n};\n\nexport default MyComponent;\n```\n\n@extends TextInput props https://reactnative.dev/docs/textinput#props",
+ "link": "text-input",
+ "data": {
+ "description": "A text input lets users enter and edit text. It shows an optional floating label,\nsupports `filled` and `outlined` variants, optional supporting text (including\nerror state), and start/end accessories.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { TextInput } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [text, setText] = React.useState('');\n\n const searchAccessory = (accessoryProps) => (\n \n );\n\n const clearAccessory = ({ style, disabled }) => (\n setText('')}\n role=\"button\"\n aria-label=\"Clear text\"\n >\n \n \n );\n\n return (\n \n );\n};\n\nexport default MyComponent;\n```\n\n@extends TextInput props https://reactnative.dev/docs/textinput#props",
+ "displayName": "TextInput",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "Pick",
+ "elements": [
+ {
+ "name": "NativeTextInput"
+ },
+ {
+ "name": "union",
+ "raw": "'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps' | 'setSelection'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'focus'"
+ },
+ {
+ "name": "literal",
+ "value": "'clear'"
+ },
+ {
+ "name": "literal",
+ "value": "'blur'"
+ },
+ {
+ "name": "literal",
+ "value": "'isFocused'"
+ },
+ {
+ "name": "literal",
+ "value": "'setNativeProps'"
+ },
+ {
+ "name": "literal",
+ "value": "'setSelection'"
+ }
+ ]
+ }
+ ],
+ "raw": "Pick<\n NativeTextInput,\n 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps' | 'setSelection'\n>"
+ }
+ ]
+ },
+ "description": "Imperative handle exposing a subset of native `TextInput` methods\nwith side-effect handling (e.g. `clear()` syncs internal state and animations)."
+ },
+ "variant": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'filled' | 'outlined'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'filled'"
+ },
+ {
+ "name": "literal",
+ "value": "'outlined'"
+ }
+ ]
+ },
+ "description": "Determines the visual style of the text input.\n\n- `filled` — filled background with an animated underline; higher visual emphasis.\n- `outlined` — stroke outline only; lower visual emphasis."
+ },
+ "error": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "When `true`, the field uses error styling and replaces the trailing accessory\nwith an error indicator when no `endAccessory` is provided."
+ },
+ "label": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "The label text to display above the input."
+ },
+ "supportingText": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Supporting text to display below the input (Material Design 3)."
+ },
+ "counter": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "When `true`, displays a character counter below the input on the trailing\nside, showing `currentLength/maxLength`. Requires `maxLength` to be set."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "This is separate from `editable={false}`, which makes the text read-only while the\ninput can still be focused and text selected."
+ },
+ "prefix": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "A short text string displayed at the start of the input (e.g. `\"$\"`)."
+ },
+ "suffix": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "A short text string displayed at the end of the input (e.g. `\"/100\"`)."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "startAccessory": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: TextInputAccessoryProps) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "TextInputAccessoryProps"
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "An optional component to render on the start side of the input (leading in LTR).\nCan be a custom component or `TextInput.Icon`."
+ },
+ "endAccessory": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: TextInputAccessoryProps) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "TextInputAccessoryProps"
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "An optional component to render on the end side of the input (trailing in LTR).\nCan be a custom component or `TextInput.Icon`."
+ },
+ "render": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: TextInputRenderProps) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "intersection",
+ "raw": "React.ComponentPropsWithoutRef<\n typeof NativeTextInput\n> & {\n ref?: React.RefObject;\n}",
+ "elements": [
+ {
+ "name": "ReactComponentPropsWithoutRef",
+ "raw": "React.ComponentPropsWithoutRef<\n typeof NativeTextInput\n>",
+ "elements": [
+ {
+ "name": "NativeTextInput"
+ }
+ ]
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n ref?: React.RefObject;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "ref",
+ "value": {
+ "name": "ReactRefObject",
+ "raw": "React.RefObject",
+ "elements": [
+ {
+ "name": "union",
+ "raw": "NativeTextInput | null",
+ "elements": [
+ {
+ "name": "NativeTextInput"
+ },
+ {
+ "name": "null"
+ }
+ ]
+ }
+ ],
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback to render a custom input component in place of the native `TextInput`.\nReceives all props that would be passed to `TextInput`, allowing integration\nwith third-party inputs such as masked inputs."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/TextInput/TextInput.tsx"
+ ]
+ },
+ "TextInput/TextInputIcon": {
+ "filepath": "TextInput/TextInputIcon.tsx",
+ "title": "TextInput.Icon",
+ "description": "A component to render a leading / trailing icon in the TextInput\n(return it from `startAccessory` or `endAccessory`). Accepts icon-specific props as well as\n`TextInputAccessoryProps`, which TextInput passes into those render props.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { TextInput } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [text, setText] = React.useState('');\n\n const searchAccessory = (props) => (\n \n );\n\n const clearAccessory = (props) => (\n setText('')} />\n );\n\n return (\n \n );\n};\n\nexport default MyComponent;\n```\n\n@extends IconButton props https://callstack.github.io/react-native-paper/docs/components/IconButton",
+ "link": "text-input-icon",
+ "data": {
+ "description": "A component to render a leading / trailing icon in the TextInput\n(return it from `startAccessory` or `endAccessory`). Accepts icon-specific props as well as\n`TextInputAccessoryProps`, which TextInput passes into those render props.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { TextInput } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [text, setText] = React.useState('');\n\n const searchAccessory = (props) => (\n \n );\n\n const clearAccessory = (props) => (\n setText('')} />\n );\n\n return (\n \n );\n};\n\nexport default MyComponent;\n```\n\n@extends IconButton props https://callstack.github.io/react-native-paper/docs/components/IconButton",
+ "displayName": "TextInput.Icon",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "style": {
+ "required": true,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "multiline": {
+ "required": true,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": ""
+ },
+ "disabled": {
+ "required": true,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": ""
+ },
+ "error": {
+ "required": true,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/TextInput/TextInputIcon.tsx"
+ ],
+ "group": "TextInput"
+ },
+ "ToggleButton/ToggleButton": {
+ "filepath": "ToggleButton/ToggleButton.tsx",
+ "title": "ToggleButton",
+ "description": "Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons,\na group should share a common container.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst ToggleButtonExample = () => {\n const [status, setStatus] = React.useState('checked');\n\n const onButtonToggle = value => {\n setStatus(status === 'checked' ? 'unchecked' : 'checked');\n };\n\n return (\n \n );\n};\n\nexport default ToggleButtonExample;\n\n```",
+ "link": "toggle-button",
+ "data": {
+ "description": "Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons,\na group should share a common container.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst ToggleButtonExample = () => {\n const [status, setStatus] = React.useState('checked');\n\n const onButtonToggle = value => {\n setStatus(status === 'checked' ? 'unchecked' : 'checked');\n };\n\n return (\n \n );\n};\n\nexport default ToggleButtonExample;\n\n```",
+ "displayName": "ToggleButton",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display for the `ToggleButton`."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Size of the icon."
+ },
+ "iconColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom text color for button."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the button is disabled."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the `ToggleButton`. This is read by the screen reader when the user taps the button."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(value?: GestureResponderEvent | string) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "value",
+ "type": {
+ "name": "union",
+ "raw": "GestureResponderEvent | string",
+ "elements": [
+ {
+ "name": "GestureResponderEvent"
+ },
+ {
+ "name": "string"
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "value": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Value of button."
+ },
+ "status": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'checked' | 'unchecked'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'checked'"
+ },
+ {
+ "name": "literal",
+ "value": "'unchecked'"
+ }
+ ]
+ },
+ "description": "Status of button."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/ToggleButton/ToggleButton.tsx"
+ ]
+ },
+ "ToggleButton/ToggleButtonGroup": {
+ "filepath": "ToggleButton/ToggleButtonGroup.tsx",
+ "title": "ToggleButton.Group",
+ "description": "Toggle group allows to control a group of toggle buttons.\nIt doesn't change the appearance of the toggle buttons. If you want to group them in a row, check out [ToggleButton.Row](ToggleButtonRow).\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('left');\n\n return (\n setValue(value)}\n value={value}\n >\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "toggle-button-group",
+ "data": {
+ "description": "Toggle group allows to control a group of toggle buttons.\nIt doesn't change the appearance of the toggle buttons. If you want to group them in a row, check out [ToggleButton.Row](ToggleButtonRow).\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('left');\n\n return (\n setValue(value)}\n value={value}\n >\n \n \n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "ToggleButton.Group",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "onValueChange": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(value: Value) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "value",
+ "type": {
+ "name": "Value"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on selection change."
+ },
+ "value": {
+ "required": true,
+ "tsType": {
+ "name": "union",
+ "raw": "Value | null",
+ "elements": [
+ {
+ "name": "Value"
+ },
+ {
+ "name": "null"
+ }
+ ]
+ },
+ "description": "Value of the currently selected toggle button."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "React elements containing toggle buttons."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/ToggleButton/ToggleButtonGroup.tsx"
+ ],
+ "group": "ToggleButton"
+ },
+ "ToggleButton/ToggleButtonRow": {
+ "filepath": "ToggleButton/ToggleButtonRow.tsx",
+ "title": "ToggleButton.Row",
+ "description": "Toggle button row renders a group of toggle buttons in a row.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('left');\n\n return (\n setValue(value)} value={value}>\n \n \n \n );\n};\n\nexport default MyComponent;\n\n```",
+ "link": "toggle-button-row",
+ "data": {
+ "description": "Toggle button row renders a group of toggle buttons in a row.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('left');\n\n return (\n setValue(value)} value={value}>\n \n \n \n );\n};\n\nexport default MyComponent;\n\n```",
+ "displayName": "ToggleButton.Row",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "onValueChange": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(value: string) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "value",
+ "type": {
+ "name": "string"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on selection change."
+ },
+ "value": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Value of the currently selected toggle button."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "React elements containing toggle buttons."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/ToggleButton/ToggleButtonRow.tsx"
+ ],
+ "group": "ToggleButton"
+ },
+ "Tooltip/Tooltip": {
+ "filepath": "Tooltip/Tooltip.tsx",
+ "title": "Tooltip",
+ "description": "Tooltips display informative text when users hover over, focus on, or tap an element.\n\nPlain tooltips, when activated, display a text label identifying an element, such as a description of its function. Tooltips should include only short, descriptive text and avoid restating visible UI text.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { IconButton, Tooltip } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} />\n \n);\n\nexport default MyComponent;\n```",
+ "link": "tooltip",
+ "data": {
+ "description": "Tooltips display informative text when users hover over, focus on, or tap an element.\n\nPlain tooltips, when activated, display a text label identifying an element, such as a description of its function. Tooltips should include only short, descriptive text and avoid restating visible UI text.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { IconButton, Tooltip } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} />\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Tooltip",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactElement",
+ "raw": "React.ReactElement"
+ },
+ "description": "Tooltip reference element. Needs to be able to hold a ref."
+ },
+ "enterTouchDelay": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The number of milliseconds a user must touch the element before showing the tooltip.",
+ "defaultValue": {
+ "value": "500",
+ "computed": false
+ }
+ },
+ "leaveTouchDelay": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The number of milliseconds after the user stops touching an element before hiding the tooltip.",
+ "defaultValue": {
+ "value": "1500",
+ "computed": false
+ }
+ },
+ "title": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Tooltip title"
+ },
+ "titleMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a title font can reach."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Tooltip/Tooltip.tsx"
+ ]
+ },
+ "TouchableRipple/TouchableRipple": {
+ "filepath": "TouchableRipple/TouchableRipple.tsx",
+ "title": "TouchableRipple",
+ "description": "A wrapper for views that should respond to touches.\nProvides a material \"ink ripple\" interaction effect for supported platforms (>= Android Lollipop).\nOn unsupported platforms, it falls back to a highlight effect.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Text, TouchableRipple } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n rippleColor=\"rgba(0, 0, 0, .32)\"\n >\n Press anywhere\n \n);\n\nexport default MyComponent;\n```\n\n@extends Pressable props https://reactnative.dev/docs/Pressable#props",
+ "link": "touchable-ripple",
+ "data": {
+ "description": "A wrapper for views that should respond to touches.\nProvides a material \"ink ripple\" interaction effect for supported platforms (>= Android Lollipop).\nOn unsupported platforms, it falls back to a highlight effect.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Text, TouchableRipple } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n rippleColor=\"rgba(0, 0, 0, .32)\"\n >\n Press anywhere\n \n);\n\nexport default MyComponent;\n```\n\n@extends Pressable props https://reactnative.dev/docs/Pressable#props",
+ "displayName": "TouchableRipple",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "borderless": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to render the ripple outside the view bounds.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "Object"
+ },
+ "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "centered": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to start the ripple at the center (Web)."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to prevent interaction with the touchable."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press. If not set, will cause the touchable to be disabled."
+ },
+ "onLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on long press."
+ },
+ "onPressIn": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute immediately when a touch is engaged, before `onPressOut` and `onPress`."
+ },
+ "onPressOut": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute when a touch is released."
+ },
+ "rippleColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Color of the ripple effect (Android >= 5.0 and Web)."
+ },
+ "underlayColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Color of the underlay for the highlight effect (Android < 5.0 and iOS)."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "union",
+ "raw": "| ((state: PressableStateCallbackType) => React.ReactNode)\n| React.ReactNode",
+ "elements": [
+ {
+ "name": "unknown"
+ },
+ {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ ]
+ },
+ "description": "Content of the `TouchableRipple`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "| StyleProp\n| ((state: PressableStateCallbackType) => StyleProp)\n| undefined",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ {
+ "name": "unknown"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/TouchableRipple/TouchableRipple.tsx"
+ ]
+ },
+ "Typography/Text": {
+ "filepath": "Typography/Text.tsx",
+ "title": "Text",
+ "description": "Typography component showing styles complied with passed `variant` prop and supported by the type system.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n <>\n Display Large\n Display Medium\n Display small\n\n Headline Large\n Headline Medium\n Headline Small\n\n Title Large\n Title Medium\n Title Small\n\n Body Large\n Body Medium\n Body Small\n\n Label Large\n Label Medium\n Label Small\n >\n);\n\nexport default MyComponent;\n```\n\n@extends Text props https://reactnative.dev/docs/text#props",
+ "link": "text",
+ "data": {
+ "description": "Typography component showing styles complied with passed `variant` prop and supported by the type system.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n <>\n Display Large\n Display Medium\n Display small\n\n Headline Large\n Headline Medium\n Headline Small\n\n Title Large\n Title Medium\n Title Small\n\n Body Large\n Body Medium\n Body Small\n\n Label Large\n Label Medium\n Label Small\n >\n);\n\nexport default MyComponent;\n```\n\n@extends Text props https://reactnative.dev/docs/text#props",
+ "displayName": "Text",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "variant": {
+ "required": false,
+ "tsType": {
+ "name": "VariantProp",
+ "elements": [
+ {
+ "name": "T"
+ }
+ ],
+ "raw": "VariantProp"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nVariant defines appropriate text styles for type role and its size.\nAvailable variants:\n\n Display: `displayLarge`, `displayMedium`, `displaySmall`\n\n Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`\n\n Title: `titleLarge`, `titleMedium`, `titleSmall`\n\n Label: `labelLarge`, `labelMedium`, `labelSmall`\n\n Body: `bodyLarge`, `bodyMedium`, `bodySmall`"
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n setNativeProps(args: Object): void;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "setNativeProps",
+ "value": {
+ "name": "void",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ ]
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Typography/Text.tsx"
+ ]
+ }
+ }
+}
diff --git a/docs/src/data/versionRouteFallbacks.json b/docs/src/data/versionRouteFallbacks.json
new file mode 100644
index 0000000000..326741b5b5
--- /dev/null
+++ b/docs/src/data/versionRouteFallbacks.json
@@ -0,0 +1,17 @@
+{
+ "next": {
+ "/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",
+ "/docs/components/FAB/FABGroup": "/6.x/docs/components/FAB/FAB",
+ "/docs/components/HelperText/HelperText": "/6.x/",
+ "/docs/components/TextInput/TextInputAffix": "/6.x/docs/components/TextInput/TextInput",
+ "/docs/guides/migration-guide-to-5.0": "/6.x/docs/guides/migration"
+ },
+ "stable": {
+ "/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",
+ "/6.x/docs/guides/rtl": "/"
+ }
+}
diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx
index 2870fda5b7..91f12670f9 100644
--- a/docs/src/pages/index.mdx
+++ b/docs/src/pages/index.mdx
@@ -1,63 +1,38 @@
-
-
-# Cross-platform Material Design for React Native
-
-import {Button} from 'react-native-paper';
-import GetStartedButtons from '../components/GetStartedButtons';
-import BannerExample from '../components/BannerExample';
-
-Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.
-
-
-
-Or check the demo app on [iOS](https://apps.apple.com/app/react-native-paper/id1548934513) or [Android](https://play.google.com/store/apps/details?id=com.callstack.reactnativepaperexample).
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+---
+pageType: home
+hero:
+ name: Cross-platform Material Design for React Native
+ tagline: Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.
+ actions:
+ - text: Get started
+ link: /docs/guides/getting-started
+ theme: brand
+ - text: Try on Snack
+ link: https://snack.expo.dev/@react-native-paper/react-native-paper-example_v5
+ theme: alt
+features:
+ - title: Production-ready components
+ details: Buttons, inputs, lists, cards, menus, dialogs, navigation, and feedback patterns built for day-to-day product work.
+ icon: /react-native-paper/images/home/components.svg
+ span: 4
+ - title: Material You theming
+ details: Adopt Material 3 color, typography, elevation, and state layers with a theme system designed for real apps.
+ icon: /react-native-paper/images/home/palette.svg
+ span: 4
+ - title: Accessible by default
+ details: Common interactions, contrast, and state handling are already baked into the component surface instead of left to each screen.
+ icon: /react-native-paper/images/home/accessibility.svg
+ span: 4
+ - title: Cross-platform parity
+ details: Keep design language and component behavior aligned across iOS, Android, and React Native Web from one codebase.
+ icon: /react-native-paper/images/home/devices.svg
+ span: 4
+ - title: Dark mode support
+ details: Ship light and dark experiences with the same primitives, including adaptive surfaces and semantic color roles.
+ icon: /react-native-paper/images/home/moon.svg
+ span: 4
+ - title: Migration-friendly docs
+ details: Browse stable 5.x, preview 6.x, and legacy static docs from one version selector without splitting the docs experience.
+ icon: /react-native-paper/images/home/versions.svg
+ span: 4
+---
diff --git a/docs/src/rspress-compat/Admonition.tsx b/docs/src/rspress-compat/Admonition.tsx
new file mode 100644
index 0000000000..099782a878
--- /dev/null
+++ b/docs/src/rspress-compat/Admonition.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+type AdmonitionProps = {
+ children: ReactNode;
+ title?: ReactNode;
+ type?: 'note' | 'tip' | 'info' | 'caution' | 'warning' | 'danger';
+};
+
+const typeClassName = {
+ caution: 'warning',
+ danger: 'danger',
+ info: 'info',
+ note: 'note',
+ tip: 'tip',
+ warning: 'warning',
+};
+
+export default function Admonition({
+ children,
+ title,
+ type = 'note',
+}: AdmonitionProps) {
+ const normalizedType = typeClassName[type] ?? 'note';
+
+ return (
+