diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index 4aa9b15e2d..a8e11ea034 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -30,8 +30,8 @@ jobs:
- name: Setup
uses: ./.github/actions/setup
- - name: Generate 5.x component docs
- run: node scripts/generate-component-docs.ts origin/5.0 docs/src/data/componentDocs5x.json
+ - name: Generate 5.x docs
+ run: yarn --cwd docs generate:5x
- name: Build docs
run: yarn --cwd docs build
diff --git a/.gitignore b/.gitignore
index f9e97800eb..4c86dcc669 100644
--- a/.gitignore
+++ b/.gitignore
@@ -64,6 +64,9 @@ android/keystores/debug.keystore
#
dist/
web-build/
+docs/5.x/component-docs.json
+docs/5.x/docs/components/
+docs/6.x/docs/components/
# Release
#
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 78b2b45937..62c3b9c59b 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -13,8 +13,9 @@ The core team works directly on GitHub and all work is public.
> **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
1. Fork the repo and create your branch from `main` (a guide on [how to fork a repository](https://help.github.com/articles/fork-a-repo/)).
-2. Run `yarn` on the root level, to setup the development environment.
-3. Do the changes you want and test them out in the example app before sending a pull request.
+2. Use the Node.js version specified in `.nvmrc`.
+3. Run `yarn` on the root level, to setup the development environment.
+4. Do the changes you want and test them out in the example app before sending a pull request.
### Commit message convention
@@ -25,7 +26,7 @@ We follow the [conventional commits specification](https://www.conventionalcommi
- `refactor`: code refactor, e.g. new folder structure for components.
- `docs`: changes into documentation, e.g. add usage example for Button.
- `test`: adding or updating tests, eg unit, snapshot testing.
-- `chore`: tooling changes, e.g. change circleci config.
+- `chore`: tooling changes, e.g. change the CI configuration.
- `BREAKING CHANGE`: for changes that break existing usage, e.g. change API of a component.
Our pre-commit hooks verify that your commit message matches this format when committing.
@@ -49,21 +50,34 @@ When you're sending a pull request:
When you're working on a component:
-- Follow the guidelines described in the [official material design docs](https://material.io/guidelines/).
-- Write a brief description of every prop when defining `type Props` to aid with documentation.
-- Provide an example usage for the component (check other components to get a idea).
-- Update the type definitions for Flow and TypeScript if you changed an API or added a component.
+- Follow the guidelines described in the [official material design docs](https://m3.material.io/).
+- Write a brief description of every prop when defining the props type to aid with documentation.
+- Provide an example usage for the component (check other components to get an idea).
+- Update the type definitions for TypeScript if you changed an API or added a component.
### Running the example
-The example app uses [Expo](https://expo.dev/) for the React Native example. You will need to install the Expo app for [Android](https://play.google.com/store/apps/details?id=host.exp.exponent) and [iOS](https://itunes.apple.com/app/apple-store/id982107779) to start developing.
+The example app uses [Expo](https://expo.dev/) development build for the React Native example.
-> [!IMPORTANT]
-> The example app is built with `react-native@0.77.x` and Expo SDK 52, which isn’t compatible with Expo Go. To run the app, you have to create a [development build](https://docs.expo.dev/develop/development-builds/create-a-build/).
+First, generate the native projects:
-After you're done, you can run `yarn example start` in the project root (or `npx expo start` in the `example/` folder) and scan the QR code to launch it on your device.
+```sh
+yarn example expo prebuild
+```
+
+Then build and install the development build:
+
+```sh
+yarn example ios
+```
+
+or:
+
+```sh
+yarn example android
+```
-To run the example on web, run `yarn example web` in the project root.
+After you're done, you can run `yarn example start` in the project root and scan the QR code to launch it on your device, or press `i`, `a` or `w` to launch it on the iOS simulator, Android emulator, or web browser, respectively.
### Testing a specific pull request/commit
@@ -83,7 +97,7 @@ Alternatively, you may clone the `react-native-paper` repo and use the [yalc](ht
### Working on documentation
-The documentation is automatically generated from the [TypeScript](https://www.typescriptlang.org/) annotations in the components. You can add comments above the type annotations to add descriptions. To preview the generated documentation, run `yarn docs start` in the project root.
+To preview the documentation, run `yarn docs dev` in the project root.
### Publishing a release
diff --git a/docs/.gitignore b/docs/.gitignore
index 5cb36e5dac..e59dab5e8d 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -9,7 +9,6 @@
# Generated files
.cache-loader
/public/llms.txt
-/public/react-native-paper
# Misc
.DS_Store
@@ -22,9 +21,6 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
-# component-docs-plugin
-docs/components
-
# legacy
dist/
.linaria-cache/
diff --git a/docs/5.x/_nav.json b/docs/5.x/_nav.json
index 3634f9864d..0099eb059f 100644
--- a/docs/5.x/_nav.json
+++ b/docs/5.x/_nav.json
@@ -4,11 +4,6 @@
"link": "/docs/guides/getting-started",
"activeMatch": "^/docs/guides/"
},
- {
- "text": "Components",
- "link": "/docs/components/ActivityIndicator",
- "activeMatch": "^/docs/components/"
- },
{
"text": "Showcase",
"link": "/docs/showcase",
diff --git a/docs/5.x/docs/_meta.json b/docs/5.x/docs/_meta.json
index 9e4ac38659..1a81e3fb19 100644
--- a/docs/5.x/docs/_meta.json
+++ b/docs/5.x/docs/_meta.json
@@ -4,11 +4,6 @@
"name": "guides",
"label": "Guides"
},
- {
- "type": "dir-section-header",
- "name": "components",
- "label": "Components"
- },
{
"type": "file",
"name": "showcase",
diff --git a/docs/5.x/docs/components/ActivityIndicator.mdx b/docs/5.x/docs/components/ActivityIndicator.mdx
deleted file mode 100644
index 3595f9e66b..0000000000
--- a/docs/5.x/docs/components/ActivityIndicator.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: ActivityIndicator
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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, MD2Colors } from 'react-native-paper';
-
-const MyComponent = () => (
-
-);
-
-export default MyComponent;
-```
-
-## Props
-
-
-
-
-
-### animating
-
-
-
-
-
-
-
-### color
-
-
-
-
-
-
-
-### size
-
-
-
-
-
-
-
-### hidesWhenStopped
-
-
-
-
-
-
-
-### style
-
-
-
-
-
-
-
-### theme
-
-
-
-
-
-
-
-## Theme colors
-
-
-
-
diff --git a/docs/5.x/docs/components/Appbar/Appbar.mdx b/docs/5.x/docs/components/Appbar/Appbar.mdx
deleted file mode 100644
index c02ab5dd57..0000000000
--- a/docs/5.x/docs/components/Appbar/Appbar.mdx
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: Appbar
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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/5.x/docs/components/Appbar/AppbarAction.mdx b/docs/5.x/docs/components/Appbar/AppbarAction.mdx
deleted file mode 100644
index 89de6a56cf..0000000000
--- a/docs/5.x/docs/components/Appbar/AppbarAction.mdx
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: Appbar.Action
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
-
-
-
-
-
-
-
-### rippleColor
-
-
-
-
-
-
-
-### icon (required)
-
-
-
-
-
-
-
-### size
-
-
-
-
-
-
-
-### disabled
-
-
-
-
-
-
-
-### accessibilityLabel
-
-
-
-
-
-
-
-### onPress
-
-
-
-
-
-
-
-### isLeading Available in v5.x with theme version 3
-
-
-
-
-
-
-
-### style
-
-
-
-
-
-
-
-### ref
-
-
-
-
-
-
-
-### theme
-
-
-
-
-
-
-
-## Theme colors
-
-
-
-
diff --git a/docs/5.x/docs/components/Appbar/AppbarBackAction.mdx b/docs/5.x/docs/components/Appbar/AppbarBackAction.mdx
deleted file mode 100644
index 2c4c62fb8c..0000000000
--- a/docs/5.x/docs/components/Appbar/AppbarBackAction.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Appbar.BackAction
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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/5.x/docs/components/Appbar/AppbarContent.mdx b/docs/5.x/docs/components/Appbar/AppbarContent.mdx
deleted file mode 100644
index da9975e3e2..0000000000
--- a/docs/5.x/docs/components/Appbar/AppbarContent.mdx
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: Appbar.Content
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/components/ExtendedExample.tsx';
-
-A component used to display a title and optional subtitle 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
-
-
-
-
-
-
-
-### subtitle Deprecated in v5.x
-
-
-
-
-
-
-
-### subtitleStyle Deprecated in v5.x
-
-
-
-
-
-
-
-### onPress
-
-
-
-
-
-
-
-### disabled
-
-
-
-
-
-
-
-### color
-
-
-
-
-
-
-
-### titleMaxFontSizeMultiplier
-
-
-
-
-
-
-
-### style
-
-
-
-
-
-
-
-### theme
-
-
-
-
-
-
-
-### testID
-
-
-
-
-
-
-
-## Theme colors
-
-
-
-
diff --git a/docs/5.x/docs/components/Appbar/AppbarHeader.mdx b/docs/5.x/docs/components/Appbar/AppbarHeader.mdx
deleted file mode 100644
index b05957f6a3..0000000000
--- a/docs/5.x/docs/components/Appbar/AppbarHeader.mdx
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: Appbar.Header
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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/5.x/docs/components/Appbar/_meta.json b/docs/5.x/docs/components/Appbar/_meta.json
deleted file mode 100644
index d4243fea02..0000000000
--- a/docs/5.x/docs/components/Appbar/_meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-[
- "Appbar",
- "AppbarAction",
- "AppbarBackAction",
- "AppbarContent",
- "AppbarHeader"
-]
diff --git a/docs/5.x/docs/components/Avatar/AvatarIcon.mdx b/docs/5.x/docs/components/Avatar/AvatarIcon.mdx
deleted file mode 100644
index cead6b3256..0000000000
--- a/docs/5.x/docs/components/Avatar/AvatarIcon.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: Avatar.Icon
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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/5.x/docs/components/Avatar/AvatarImage.mdx b/docs/5.x/docs/components/Avatar/AvatarImage.mdx
deleted file mode 100644
index 31c3d960e1..0000000000
--- a/docs/5.x/docs/components/Avatar/AvatarImage.mdx
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: Avatar.Image
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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/5.x/docs/components/Avatar/AvatarText.mdx b/docs/5.x/docs/components/Avatar/AvatarText.mdx
deleted file mode 100644
index 212f688548..0000000000
--- a/docs/5.x/docs/components/Avatar/AvatarText.mdx
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Avatar.Text
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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/5.x/docs/components/Avatar/_meta.json b/docs/5.x/docs/components/Avatar/_meta.json
deleted file mode 100644
index b3967b8318..0000000000
--- a/docs/5.x/docs/components/Avatar/_meta.json
+++ /dev/null
@@ -1,5 +0,0 @@
-[
- "AvatarIcon",
- "AvatarImage",
- "AvatarText"
-]
diff --git a/docs/5.x/docs/components/Badge.mdx b/docs/5.x/docs/components/Badge.mdx
deleted file mode 100644
index d071c3d8eb..0000000000
--- a/docs/5.x/docs/components/Badge.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: Badge
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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/5.x/docs/components/Banner.mdx b/docs/5.x/docs/components/Banner.mdx
deleted file mode 100644
index fc54ae6ba4..0000000000
--- a/docs/5.x/docs/components/Banner.mdx
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: Banner
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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/5.x/docs/components/BottomNavigation/BottomNavigation.mdx b/docs/5.x/docs/components/BottomNavigation/BottomNavigation.mdx
deleted file mode 100644
index 3196cf34f1..0000000000
--- a/docs/5.x/docs/components/BottomNavigation/BottomNavigation.mdx
+++ /dev/null
@@ -1,319 +0,0 @@
----
-title: BottomNavigation
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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/5.x/docs/components/Checkbox/CheckboxAndroid.mdx b/docs/5.x/docs/components/Checkbox/CheckboxAndroid.mdx
deleted file mode 100644
index 08f8502d73..0000000000
--- a/docs/5.x/docs/components/Checkbox/CheckboxAndroid.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Checkbox.Android
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index a669c3b08d..0000000000
--- a/docs/5.x/docs/components/Checkbox/CheckboxIOS.mdx
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: Checkbox.IOS
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index e89ac53743..0000000000
--- a/docs/5.x/docs/components/Checkbox/CheckboxItem.mdx
+++ /dev/null
@@ -1,191 +0,0 @@
----
-title: Checkbox.Item
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index f25fa6d271..0000000000
--- a/docs/5.x/docs/components/Checkbox/_meta.json
+++ /dev/null
@@ -1,6 +0,0 @@
-[
- "Checkbox",
- "CheckboxAndroid",
- "CheckboxIOS",
- "CheckboxItem"
-]
diff --git a/docs/5.x/docs/components/Chip/Chip.mdx b/docs/5.x/docs/components/Chip/Chip.mdx
deleted file mode 100644
index cb0f4c80f8..0000000000
--- a/docs/5.x/docs/components/Chip/Chip.mdx
+++ /dev/null
@@ -1,292 +0,0 @@
----
-title: Chip
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 426430129c..0000000000
--- a/docs/5.x/docs/components/List/ListAccordionGroup.mdx
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: List.AccordionGroup
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 78ae13ec48..0000000000
--- a/docs/5.x/docs/components/List/ListIcon.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: List.Icon
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 7720440943..0000000000
--- a/docs/5.x/docs/components/List/ListItem.mdx
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: List.Item
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 918091af2e..0000000000
--- a/docs/5.x/docs/components/List/ListSection.mdx
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: List.Section
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index ad4a0ec57f..0000000000
--- a/docs/5.x/docs/components/List/ListSubheader.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: List.Subheader
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 4ba864114c..0000000000
--- a/docs/5.x/docs/components/List/_meta.json
+++ /dev/null
@@ -1,8 +0,0 @@
-[
- "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
deleted file mode 100644
index 0793840260..0000000000
--- a/docs/5.x/docs/components/Menu/Menu.mdx
+++ /dev/null
@@ -1,194 +0,0 @@
----
-title: Menu
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index aa663294b0..0000000000
--- a/docs/5.x/docs/components/Menu/MenuItem.mdx
+++ /dev/null
@@ -1,211 +0,0 @@
----
-title: Menu.Item
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 50192eb25e..0000000000
--- a/docs/5.x/docs/components/Menu/_meta.json
+++ /dev/null
@@ -1,4 +0,0 @@
-[
- "Menu",
- "MenuItem"
-]
diff --git a/docs/5.x/docs/components/Modal.mdx b/docs/5.x/docs/components/Modal.mdx
deleted file mode 100644
index 7a1f5c8a18..0000000000
--- a/docs/5.x/docs/components/Modal.mdx
+++ /dev/null
@@ -1,144 +0,0 @@
----
-title: Modal
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index ebc00e8c26..0000000000
--- a/docs/5.x/docs/components/Portal/Portal.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: Portal
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 2418f6efe9..0000000000
--- a/docs/5.x/docs/components/Portal/PortalHost.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Portal.Host
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 6e5b7b374b..0000000000
--- a/docs/5.x/docs/components/Portal/_meta.json
+++ /dev/null
@@ -1,4 +0,0 @@
-[
- "Portal",
- "PortalHost"
-]
diff --git a/docs/5.x/docs/components/ProgressBar.mdx b/docs/5.x/docs/components/ProgressBar.mdx
deleted file mode 100644
index e539839345..0000000000
--- a/docs/5.x/docs/components/ProgressBar.mdx
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: ProgressBar
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index d5d9d7b1a8..0000000000
--- a/docs/5.x/docs/components/RadioButton/RadioButton.mdx
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: RadioButton
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 075bfd8f4b..0000000000
--- a/docs/5.x/docs/components/RadioButton/RadioButtonAndroid.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: RadioButton.Android
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index f6e562f04a..0000000000
--- a/docs/5.x/docs/components/RadioButton/RadioButtonGroup.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: RadioButton.Group
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 75898f44ed..0000000000
--- a/docs/5.x/docs/components/RadioButton/RadioButtonIOS.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: RadioButton.IOS
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 26b5d45c14..0000000000
--- a/docs/5.x/docs/components/RadioButton/RadioButtonItem.mdx
+++ /dev/null
@@ -1,203 +0,0 @@
----
-title: RadioButton.Item
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index f9c20c781a..0000000000
--- a/docs/5.x/docs/components/RadioButton/_meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-[
- "RadioButton",
- "RadioButtonAndroid",
- "RadioButtonGroup",
- "RadioButtonIOS",
- "RadioButtonItem"
-]
diff --git a/docs/5.x/docs/components/Searchbar.mdx b/docs/5.x/docs/components/Searchbar.mdx
deleted file mode 100644
index 8cac720b1c..0000000000
--- a/docs/5.x/docs/components/Searchbar.mdx
+++ /dev/null
@@ -1,264 +0,0 @@
----
-title: Searchbar
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 0f813befb2..0000000000
--- a/docs/5.x/docs/components/SegmentedButtons/SegmentedButtons.mdx
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: SegmentedButtons
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 85b4317790..0000000000
--- a/docs/5.x/docs/components/SegmentedButtons/_meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-[
- "SegmentedButtons"
-]
diff --git a/docs/5.x/docs/components/Snackbar.mdx b/docs/5.x/docs/components/Snackbar.mdx
deleted file mode 100644
index 2e21df5dfc..0000000000
--- a/docs/5.x/docs/components/Snackbar.mdx
+++ /dev/null
@@ -1,220 +0,0 @@
----
-title: Snackbar
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index e25bbfded1..0000000000
--- a/docs/5.x/docs/components/Surface.mdx
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: Surface
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 7a5dac1ddb..0000000000
--- a/docs/5.x/docs/components/Switch/Switch.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Switch
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 3bc6b9e49c..0000000000
--- a/docs/5.x/docs/components/Switch/_meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-[
- "Switch"
-]
diff --git a/docs/5.x/docs/components/Text/Text.mdx b/docs/5.x/docs/components/Text/Text.mdx
deleted file mode 100644
index 22dd4f4315..0000000000
--- a/docs/5.x/docs/components/Text/Text.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Text
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 9ae689e1ae..0000000000
--- a/docs/5.x/docs/components/TextInput/TextInputAffix.mdx
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: TextInput.Affix
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 2fe4ee3037..0000000000
--- a/docs/5.x/docs/components/TextInput/TextInputIcon.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: TextInput.Icon
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 412d6916f3..0000000000
--- a/docs/5.x/docs/components/TextInput/_meta.json
+++ /dev/null
@@ -1,5 +0,0 @@
-[
- "TextInput",
- "TextInputAffix",
- "TextInputIcon"
-]
diff --git a/docs/5.x/docs/components/ToggleButton/ToggleButton.mdx b/docs/5.x/docs/components/ToggleButton/ToggleButton.mdx
deleted file mode 100644
index ff0e636eb5..0000000000
--- a/docs/5.x/docs/components/ToggleButton/ToggleButton.mdx
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: ToggleButton
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 5bc93919a1..0000000000
--- a/docs/5.x/docs/components/ToggleButton/ToggleButtonGroup.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: ToggleButton.Group
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index f04bf5cba5..0000000000
--- a/docs/5.x/docs/components/ToggleButton/ToggleButtonRow.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: ToggleButton.Row
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 935c2b9584..0000000000
--- a/docs/5.x/docs/components/ToggleButton/_meta.json
+++ /dev/null
@@ -1,5 +0,0 @@
-[
- "ToggleButton",
- "ToggleButtonGroup",
- "ToggleButtonRow"
-]
diff --git a/docs/5.x/docs/components/Tooltip/Tooltip.mdx b/docs/5.x/docs/components/Tooltip/Tooltip.mdx
deleted file mode 100644
index 51ce74bdf3..0000000000
--- a/docs/5.x/docs/components/Tooltip/Tooltip.mdx
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Tooltip
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index c39a54301f..0000000000
--- a/docs/5.x/docs/components/Tooltip/_meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-[
- "Tooltip"
-]
diff --git a/docs/5.x/docs/components/TouchableRipple/TouchableRipple.mdx b/docs/5.x/docs/components/TouchableRipple/TouchableRipple.mdx
deleted file mode 100644
index 00dee005e0..0000000000
--- a/docs/5.x/docs/components/TouchableRipple/TouchableRipple.mdx
+++ /dev/null
@@ -1,153 +0,0 @@
----
-title: TouchableRipple
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 91b70a001b..0000000000
--- a/docs/5.x/docs/components/TouchableRipple/_meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-[
- "TouchableRipple"
-]
diff --git a/docs/5.x/docs/components/_meta.json b/docs/5.x/docs/components/_meta.json
deleted file mode 100644
index 548d39075a..0000000000
--- a/docs/5.x/docs/components/_meta.json
+++ /dev/null
@@ -1,180 +0,0 @@
-[
- "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/migration-guide-to-5.0.md b/docs/5.x/docs/guides/migration-guide-to-5.0.md
index 6abf85502c..2e47a8773a 100644
--- a/docs/5.x/docs/guides/migration-guide-to-5.0.md
+++ b/docs/5.x/docs/guides/migration-guide-to-5.0.md
@@ -60,7 +60,7 @@ Each accent and error colors has a group of related tones. The tones are mapped
Dynamic colors are not supported yet
:::
-
+
Colors theme structure should follow the default palette and contain the following properties:
@@ -290,7 +290,7 @@ Two additional props that control the scene animation were introduced that contr
- `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.
@@ -575,7 +575,7 @@ At the same time, by analogy to the second new prop, the `icon` prop was renamed
`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 = () => {
@@ -640,7 +640,7 @@ The property `name` was renamed to `icon`, since the scope and type of that prop
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
diff --git a/docs/5.x/docs/guides/theming-with-react-navigation.md b/docs/5.x/docs/guides/theming-with-react-navigation.md
index d240f5b43d..5ccd78701d 100644
--- a/docs/5.x/docs/guides/theming-with-react-navigation.md
+++ b/docs/5.x/docs/guides/theming-with-react-navigation.md
@@ -328,7 +328,7 @@ const Header = ({ scene }) => {
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.
diff --git a/docs/5.x/docs/guides/theming.mdx b/docs/5.x/docs/guides/theming.mdx
index 89bd6e75af..d2d4392fe8 100644
--- a/docs/5.x/docs/guides/theming.mdx
+++ b/docs/5.x/docs/guides/theming.mdx
@@ -188,7 +188,7 @@ Created schemes are following the Material Design 3 color system and covering co
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)_
diff --git a/docs/6.x/docs/components/ActivityIndicator.mdx b/docs/6.x/docs/components/ActivityIndicator.mdx
deleted file mode 100644
index eac03089ea..0000000000
--- a/docs/6.x/docs/components/ActivityIndicator.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: ActivityIndicator
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 798b6dd136..0000000000
--- a/docs/6.x/docs/components/Appbar/Appbar.mdx
+++ /dev/null
@@ -1,174 +0,0 @@
----
-title: Appbar
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 5db23d4ba9..0000000000
--- a/docs/6.x/docs/components/Appbar/AppbarAction.mdx
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: Appbar.Action
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
-
-
-
-
-
-
-
-### aria-label
-
-
-
-
-
-
-
-### 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
deleted file mode 100644
index 4faa4ec18d..0000000000
--- a/docs/6.x/docs/components/Appbar/AppbarBackAction.mdx
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Appbar.BackAction
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
-
-
-
-
-
-
-
-### aria-label
-
-
-
-
-
-
-
-### onPress
-
-
-
-
-
-
-
-### style
-
-
-
-
-
-
-
-### ref
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/6.x/docs/components/Appbar/AppbarContent.mdx b/docs/6.x/docs/components/Appbar/AppbarContent.mdx
deleted file mode 100644
index a3c4953c66..0000000000
--- a/docs/6.x/docs/components/Appbar/AppbarContent.mdx
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: Appbar.Content
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index f541042a00..0000000000
--- a/docs/6.x/docs/components/Appbar/AppbarHeader.mdx
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: Appbar.Header
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index d4243fea02..0000000000
--- a/docs/6.x/docs/components/Appbar/_meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-[
- "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
deleted file mode 100644
index 045a00c260..0000000000
--- a/docs/6.x/docs/components/Avatar/AvatarIcon.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Avatar.Icon
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index ecd4bcc751..0000000000
--- a/docs/6.x/docs/components/Avatar/AvatarImage.mdx
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: Avatar.Image
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 600c026e9f..0000000000
--- a/docs/6.x/docs/components/Avatar/AvatarText.mdx
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Avatar.Text
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index b3967b8318..0000000000
--- a/docs/6.x/docs/components/Avatar/_meta.json
+++ /dev/null
@@ -1,5 +0,0 @@
-[
- "AvatarIcon",
- "AvatarImage",
- "AvatarText"
-]
diff --git a/docs/6.x/docs/components/Badge.mdx b/docs/6.x/docs/components/Badge.mdx
deleted file mode 100644
index fbb1589d84..0000000000
--- a/docs/6.x/docs/components/Badge.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Badge
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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.
-
-The badge is styled differently based on whether `children` is passed:
-- Small dot when it doesn't have `children`
-- Larger pill when it has `children`
-
-
-
-
-
-
-
-## Usage
-```js
-import * as React from 'react';
-import { Badge } from 'react-native-paper';
-
-const MyComponent = () => (
- 3
-);
-
-export default MyComponent;
-```
-
-
- ## Props
-
-
-
-
-
-
-### visible
-
-
-
-
-
-
-
-### children
-
-
-
-
-
-
-
-### style
-
-
-
-
-
-
-
-### theme
-
-
-
-
-
-
-
-
-
-
- ## Theme colors
-
-
-
-
-
diff --git a/docs/6.x/docs/components/Banner.mdx b/docs/6.x/docs/components/Banner.mdx
deleted file mode 100644
index 344d9103e9..0000000000
--- a/docs/6.x/docs/components/Banner.mdx
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: Banner
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index c4fe55af84..0000000000
--- a/docs/6.x/docs/components/BottomNavigation/BottomNavigation.mdx
+++ /dev/null
@@ -1,308 +0,0 @@
----
-title: BottomNavigation
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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/Checkbox/CheckboxItem.mdx b/docs/6.x/docs/components/Checkbox/CheckboxItem.mdx
deleted file mode 100644
index c81380f62b..0000000000
--- a/docs/6.x/docs/components/Checkbox/CheckboxItem.mdx
+++ /dev/null
@@ -1,180 +0,0 @@
----
-title: Checkbox.Item
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
-
-
-
-
-
-
-
-### aria-label
-
-
-
-
-
-
-
-### 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
deleted file mode 100644
index 69a54c00fd..0000000000
--- a/docs/6.x/docs/components/Checkbox/_meta.json
+++ /dev/null
@@ -1,4 +0,0 @@
-[
- "Checkbox",
- "CheckboxItem"
-]
diff --git a/docs/6.x/docs/components/Chip/Chip.mdx b/docs/6.x/docs/components/Chip/Chip.mdx
deleted file mode 100644
index f1a72dc03d..0000000000
--- a/docs/6.x/docs/components/Chip/Chip.mdx
+++ /dev/null
@@ -1,291 +0,0 @@
----
-title: Chip
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 8829f84049..0000000000
--- a/docs/6.x/docs/components/List/ListAccordionGroup.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: List.AccordionGroup
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index d9eb09a250..0000000000
--- a/docs/6.x/docs/components/List/ListIcon.mdx
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: List.Icon
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index c962a55f9c..0000000000
--- a/docs/6.x/docs/components/List/ListItem.mdx
+++ /dev/null
@@ -1,201 +0,0 @@
----
-title: List.Item
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 8a145c20d0..0000000000
--- a/docs/6.x/docs/components/List/ListSection.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: List.Section
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 78db549903..0000000000
--- a/docs/6.x/docs/components/List/ListSubheader.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: List.Subheader
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 4ba864114c..0000000000
--- a/docs/6.x/docs/components/List/_meta.json
+++ /dev/null
@@ -1,8 +0,0 @@
-[
- "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
deleted file mode 100644
index 1d1ee928b2..0000000000
--- a/docs/6.x/docs/components/Menu/Menu.mdx
+++ /dev/null
@@ -1,190 +0,0 @@
----
-title: Menu
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index b3fb4e5110..0000000000
--- a/docs/6.x/docs/components/Menu/MenuItem.mdx
+++ /dev/null
@@ -1,214 +0,0 @@
----
-title: Menu.Item
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
-
-
-
-
-
-
-
-### aria-label
-
-
-
-
-
-
-
-### aria-checked
-
-
-
-
-
-
-
-### aria-selected
-
-
-
-
-
-
-
-### aria-busy
-
-
-
-
-
-
-
-### aria-expanded
-
-
-
-
-
-
-
-
-
-
- ## Theme colors
-
-
-
-
-
diff --git a/docs/6.x/docs/components/Menu/_meta.json b/docs/6.x/docs/components/Menu/_meta.json
deleted file mode 100644
index 50192eb25e..0000000000
--- a/docs/6.x/docs/components/Menu/_meta.json
+++ /dev/null
@@ -1,4 +0,0 @@
-[
- "Menu",
- "MenuItem"
-]
diff --git a/docs/6.x/docs/components/Modal.mdx b/docs/6.x/docs/components/Modal.mdx
deleted file mode 100644
index f94e758cad..0000000000
--- a/docs/6.x/docs/components/Modal.mdx
+++ /dev/null
@@ -1,176 +0,0 @@
----
-title: Modal
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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 = { padding: 20 };
-
- return (
-
-
-
- Example Modal. Click outside this area to dismiss.
-
-
-
-
- );
-};
-
-export default MyComponent;
-```
-
-
- ## Props
-
-
-
-
-
-
-### dismissable
-
-
-
-
-
-
-
-### dismissableBackButton
-
-
-
-
-
-
-
-### onDismiss
-
-
-
-
-
-
-
-### overlayAccessibilityLabel
-
-
-
-
-
-
-
-### visible
-
-
-
-
-
-
-
-### children (required)
-
-
-
-
-
-
-
-### contentContainerStyle
-
-
-
-
-
-
-
-### contentBackgroundColor
-
-
-
-
-
-
-
-### contentBorderRadius
-
-
-
-
-
-
-
-### contentElevation
-
-
-
-
-
-
-
-### 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
deleted file mode 100644
index 027dec2299..0000000000
--- a/docs/6.x/docs/components/Portal/Portal.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Portal
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 9962cea0a9..0000000000
--- a/docs/6.x/docs/components/Portal/PortalHost.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Portal.Host
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 6e5b7b374b..0000000000
--- a/docs/6.x/docs/components/Portal/_meta.json
+++ /dev/null
@@ -1,4 +0,0 @@
-[
- "Portal",
- "PortalHost"
-]
diff --git a/docs/6.x/docs/components/ProgressBar.mdx b/docs/6.x/docs/components/ProgressBar.mdx
deleted file mode 100644
index 5dd0044793..0000000000
--- a/docs/6.x/docs/components/ProgressBar.mdx
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: ProgressBar
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index e4c0bec6e7..0000000000
--- a/docs/6.x/docs/components/RadioButton/RadioButton.mdx
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: RadioButton
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index a71620c84f..0000000000
--- a/docs/6.x/docs/components/RadioButton/RadioButtonAndroid.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: RadioButton.Android
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 12493f5c32..0000000000
--- a/docs/6.x/docs/components/RadioButton/RadioButtonGroup.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: RadioButton.Group
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index ae561c9972..0000000000
--- a/docs/6.x/docs/components/RadioButton/RadioButtonIOS.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: RadioButton.IOS
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
deleted file mode 100644
index 4bfea5da3d..0000000000
--- a/docs/6.x/docs/components/RadioButton/RadioButtonItem.mdx
+++ /dev/null
@@ -1,202 +0,0 @@
----
-title: RadioButton.Item
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
-
-
-
-
-
-
-
-### aria-label
-
-
-
-
-
-
-
-### uncheckedColor
-
-
-
-
-
-
-
-### color
-
-
-
-
-
-
-
-### status
-
-
-
-
-
-
-
-### style
-
-
-
-
-
-
-
-### labelStyle
-
-
-
-
-
-
-
-### labelVariant Available in v5.x with theme version 3
-
-
-
-
-
-
- ## Theme colors
-
-
-
-
-
diff --git a/docs/6.x/docs/components/Surface.mdx b/docs/6.x/docs/components/Surface.mdx
deleted file mode 100644
index 4add0da5c0..0000000000
--- a/docs/6.x/docs/components/Surface.mdx
+++ /dev/null
@@ -1,247 +0,0 @@
----
-title: Surface
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/components/ExtendedExample.tsx';
-
-Surface is a basic container that can give depth to an element with elevation shadow.
-
-On Android, Surface uses the native `elevation` style,
-and falls back to shadows that approximate the elevation on other platforms.
-
-
-
-
-
-
-
-## 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: {
- height: 80,
- width: 80,
- padding: 8,
- alignItems: 'center',
- justifyContent: 'center',
- },
-});
-```
-
-
- ## Props
-
-
-
-
-
-
-### backgroundColor
-
-
-
-
-
-
-
-### borderRadius
-
-
-
-
-
-
-
-### borderBottomEndRadius
-
-
-
-
-
-
-
-### borderBottomLeftRadius
-
-
-
-
-
-
-
-### borderBottomRightRadius
-
-
-
-
-
-
-
-### borderBottomStartRadius
-
-
-
-
-
-
-
-### borderEndEndRadius
-
-
-
-
-
-
-
-### borderEndStartRadius
-
-
-
-
-
-
-
-### borderStartEndRadius
-
-
-
-
-
-
-
-### borderStartStartRadius
-
-
-
-
-
-
-
-### borderTopEndRadius
-
-
-
-
-
-
-
-### borderTopLeftRadius
-
-
-
-
-
-
-
-### borderTopRightRadius
-
-
-
-
-
-
-
-### borderTopStartRadius
-
-
-
-
-
-
-
-### borderCurve
-
-
-
-
-
-
-
-### transitionDuration
-
-
-
-
-
-
-
-### style
-
-
-
-
-
-
-
-### elevation Available in v5.x with theme version 3
-
-
-
-
-
-
-
-### mode Available in v5.x with theme version 3
-
-
-
-
-
-
-
-### theme
-
-
-
-
-
-
-
-### children (required)
-
-
-
-
-
-
-
-### testID
-
-
-
-
-
-
-
-### ref
-
-
-
-
-
-
-
-
-
-
- ## Theme colors
-
-
-
-
-
diff --git a/docs/6.x/docs/components/Switch/Switch.mdx b/docs/6.x/docs/components/Switch/Switch.mdx
deleted file mode 100644
index 41df316693..0000000000
--- a/docs/6.x/docs/components/Switch/Switch.mdx
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: Switch
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
-
-
-
-
-
-
-
-### aria-label
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/6.x/docs/components/Switch/_meta.json b/docs/6.x/docs/components/Switch/_meta.json
deleted file mode 100644
index 3bc6b9e49c..0000000000
--- a/docs/6.x/docs/components/Switch/_meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-[
- "Switch"
-]
diff --git a/docs/6.x/docs/components/Text/Text.mdx b/docs/6.x/docs/components/Text/Text.mdx
deleted file mode 100644
index 2e38542594..0000000000
--- a/docs/6.x/docs/components/Text/Text.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: Text
----
-
-import PropTable from '@docs/components/PropTable.tsx';
-import ExtendsLink from '@docs/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@docs/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
-
-
);
+};
+
+export default function PropTable(tableProps: PropTableProps) {
+ if ('type' in tableProps) {
+ return renderPropDetails(tableProps);
+ }
+
+ const doc = tableProps.componentDocs[tableProps.componentLink];
+
+ if (!doc?.data?.props) {
+ return null;
+ }
+
+ const prop = doc.data.props[tableProps.prop];
+
+ if (!prop) {
+ return null;
+ }
+
+ let descriptionByLines = prop.description.split('\n');
+
+ // Slice leading badge - it's handled in `generatePageMDX`
+ if (descriptionByLines[0].includes('@')) {
+ descriptionByLines = descriptionByLines.slice(1);
+ }
+
+ const description = descriptionByLines
+ .map((line) => {
+ // Replace annotations with styled badges.
+ if (!line.includes('@')) {
+ return line;
+ }
+
+ const annotIndex = line.indexOf('@');
+
+ return `${line.substr(0, annotIndex)} ${renderBadge(
+ line.substr(annotIndex)
+ )}`;
+ })
+ .join('\n');
+
+ return renderPropDetails({
+ defaultValue: prop.defaultValue?.value,
+ description,
+ type: prop.tsType?.raw ?? prop.tsType?.name ?? '',
+ });
}
diff --git a/docs/src/data/componentDocs5x.json b/docs/src/data/componentDocs5x.json
deleted file mode 100644
index 5aa299568c..0000000000
--- a/docs/src/data/componentDocs5x.json
+++ /dev/null
@@ -1,12185 +0,0 @@
-{
- "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, MD2Colors } 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, MD2Colors } 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": "string"
- },
- "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": "string"
- },
- "description": "Custom color for action icon."
- },
- "rippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the ripple effect."
- },
- "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": "ReactRefObject",
- "raw": "React.RefObject",
- "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": "string"
- },
- "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": "ReactRefObject",
- "raw": "React.RefObject",
- "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 and optional subtitle 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 and optional subtitle 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."
- },
- "subtitle": {
- "required": false,
- "tsType": {
- "name": "ReactReactNode",
- "raw": "React.ReactNode"
- },
- "description": "@deprecated Deprecated in v5.x\nText for the subtitle."
- },
- "subtitleStyle": {
- "required": false,
- "tsType": {
- "name": "StyleProp",
- "elements": [
- {
- "name": "TextStyle"
- }
- ],
- "raw": "StyleProp"
- },
- "description": "@deprecated Deprecated in v5.x\nStyle for the subtitle."
- },
- "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- `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2.\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: string;\n}) => React.ReactNode",
- "signature": {
- "arguments": [
- {
- "name": "props",
- "type": {
- "name": "signature",
- "type": "object",
- "raw": "{\n route: Route;\n focused: boolean;\n color: string;\n}",
- "signature": {
- "properties": [
- {
- "key": "route",
- "value": {
- "name": "Route",
- "required": true
- }
- },
- {
- "key": "focused",
- "value": {
- "name": "boolean",
- "required": true
- }
- },
- {
- "key": "color",
- "value": {
- "name": "string",
- "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: string;\n}) => React.ReactNode",
- "signature": {
- "arguments": [
- {
- "name": "props",
- "type": {
- "name": "signature",
- "type": "object",
- "raw": "{\n route: Route;\n focused: boolean;\n color: string;\n}",
- "signature": {
- "properties": [
- {
- "key": "route",
- "value": {
- "name": "Route",
- "required": true
- }
- },
- {
- "key": "focused",
- "value": {
- "name": "boolean",
- "required": true
- }
- },
- {
- "key": "color",
- "value": {
- "name": "string",
- "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."
- },
- "getColor": {
- "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 color for the tab, uses `route.color` 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 '@expo/vector-icons/MaterialCommunityIcons';\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 '@expo/vector-icons/MaterialCommunityIcons';\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- `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2.\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: string;\n}) => React.ReactNode",
- "signature": {
- "arguments": [
- {
- "name": "props",
- "type": {
- "name": "signature",
- "type": "object",
- "raw": "{\n route: Route;\n focused: boolean;\n color: string;\n}",
- "signature": {
- "properties": [
- {
- "key": "route",
- "value": {
- "name": "Route",
- "required": true
- }
- },
- {
- "key": "focused",
- "value": {
- "name": "boolean",
- "required": true
- }
- },
- {
- "key": "color",
- "value": {
- "name": "string",
- "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: string;\n}) => React.ReactNode",
- "signature": {
- "arguments": [
- {
- "name": "props",
- "type": {
- "name": "signature",
- "type": "object",
- "raw": "{\n route: Route;\n focused: boolean;\n color: string;\n}",
- "signature": {
- "properties": [
- {
- "key": "route",
- "value": {
- "name": "Route",
- "required": true
- }
- },
- {
- "key": "focused",
- "value": {
- "name": "boolean",
- "required": true
- }
- },
- {
- "key": "color",
- "value": {
- "name": "string",
- "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
- }
- },
- "getColor": {
- "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 color for the tab, uses `route.color` by default.",
- "defaultValue": {
- "value": "({ route }: { route: Route }) => route.color",
- "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."
- },
- "color": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "@deprecated Deprecated in v5.x - use `buttonColor` or `textColor` instead.\nCustom text color for flat button, or background color for contained button."
- },
- "buttonColor": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Custom button's background color."
- },
- "textColor": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Custom button's text color."
- },
- "rippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the ripple effect."
- },
- "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"
- },
- "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": "unknown"
- },
- "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": "unknown"
- },
- "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": "string"
- },
- "description": "Custom color for unchecked checkbox."
- },
- "color": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Custom color for checkbox."
- },
- "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/Checkbox/Checkbox.tsx"
- ]
- },
- "Checkbox/CheckboxAndroid": {
- "filepath": "Checkbox/CheckboxAndroid.tsx",
- "title": "Checkbox.Android",
- "description": "Checkboxes allow the selection of multiple options 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": "checkbox-android",
- "data": {
- "description": "Checkboxes allow the selection of multiple options 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": "Checkbox.Android",
- "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": "string"
- },
- "description": "Custom color for unchecked checkbox."
- },
- "color": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Custom color for checkbox."
- },
- "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/Checkbox/CheckboxAndroid.tsx"
- ],
- "group": "Checkbox"
- },
- "Checkbox/CheckboxIOS": {
- "filepath": "Checkbox/CheckboxIOS.tsx",
- "title": "Checkbox.IOS",
- "description": "Checkboxes allow the selection of multiple options 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": "checkbox-ios",
- "data": {
- "description": "Checkboxes allow the selection of multiple options 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": "Checkbox.IOS",
- "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."
- },
- "color": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Custom color for checkbox."
- },
- "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/Checkbox/CheckboxIOS.tsx"
- ],
- "group": "Checkbox"
- },
- "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."
- },
- "rippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the ripple effect."
- },
- "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": "unknown"
- },
- "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
- }
- },
- "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."
- },
- "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": "string"
- },
- "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",
- "defaultValue": {
- "value": "false",
- "computed": false
- }
- },
- "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
- }
- },
- "rippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the ripple effect."
- },
- "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
- }
- },
- "paginationControlRippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the pagination control ripple effect."
- },
- "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."
- },
- "dropdownItemRippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the dropdown item ripple effect."
- },
- "selectPageDropdownRippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the select page dropdown ripple effect."
- },
- "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": "string"
- },
- "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: string }) => React.ReactNode",
- "signature": {
- "arguments": [
- {
- "name": "props",
- "type": {
- "name": "signature",
- "type": "object",
- "raw": "{ color: string }",
- "signature": {
- "properties": [
- {
- "key": "color",
- "value": {
- "name": "string",
- "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."
- },
- "rippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the ripple effect."
- },
- "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. It appears in front of all screen content.\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. It appears in front of all screen content.\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": false,
- "tsType": {
- "name": "IconSource"
- },
- "description": "Icon to display for the `FAB`. It's optional only if `label` is defined."
- },
- "label": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Optional label for extended `FAB`. It's optional only if `icon` is defined."
- },
- "uppercase": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Make the label text uppercased."
- },
- "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 FAB. This is read by the screen reader when the user taps the FAB.\nUses `label` by default if specified.",
- "defaultValue": {
- "value": "label",
- "computed": true
- }
- },
- "accessibilityState": {
- "required": false,
- "tsType": {
- "name": "AccessibilityState"
- },
- "description": "Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB."
- },
- "animated": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Whether an icon change is animated.",
- "defaultValue": {
- "value": "true",
- "computed": false
- }
- },
- "small": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "@deprecated Deprecated in v.5x - use prop size=\"small\".\n\n Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified."
- },
- "color": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Custom color for the icon and label of the `FAB`."
- },
- "rippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the ripple effect."
- },
- "disabled": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch."
- },
- "visible": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Whether `FAB` is currently visible.",
- "defaultValue": {
- "value": "true",
- "computed": false
- }
- },
- "loading": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Whether to show a loading indicator."
- },
- "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`."
- },
- "size": {
- "required": false,
- "tsType": {
- "name": "union",
- "raw": "'small' | 'medium' | 'large'",
- "elements": [
- {
- "name": "literal",
- "value": "'small'"
- },
- {
- "name": "literal",
- "value": "'medium'"
- },
- {
- "name": "literal",
- "value": "'large'"
- }
- ]
- },
- "description": "@supported Available in v5.x with theme version 3\n\nSize of the `FAB`.\n- `small` - FAB with small height (40).\n- `medium` - FAB with default medium height (56).\n- `large` - FAB with large height (96).",
- "defaultValue": {
- "value": "'medium'",
- "computed": false
- }
- },
- "customSize": {
- "required": false,
- "tsType": {
- "name": "number"
- },
- "description": "Custom size for the `FAB`. This prop takes precedence over size prop"
- },
- "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\n\nMode of the `FAB`. You can change the mode to adjust the the shadow:\n- `flat` - button without a shadow.\n- `elevated` - button with a shadow.",
- "defaultValue": {
- "value": "'elevated'",
- "computed": false
- }
- },
- "variant": {
- "required": false,
- "tsType": {
- "name": "union",
- "raw": "'primary' | 'secondary' | 'tertiary' | 'surface'",
- "elements": [
- {
- "name": "literal",
- "value": "'primary'"
- },
- {
- "name": "literal",
- "value": "'secondary'"
- },
- {
- "name": "literal",
- "value": "'tertiary'"
- },
- {
- "name": "literal",
- "value": "'surface'"
- }
- ]
- },
- "description": "@supported Available in v5.x with theme version 3\n\nColor mappings variant for combinations of container and icon colors.",
- "defaultValue": {
- "value": "'primary'",
- "computed": false
- }
- },
- "labelMaxFontSizeMultiplier": {
- "required": false,
- "tsType": {
- "name": "number"
- },
- "description": "Specifies the largest possible scale a label font can reach."
- },
- "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 used for testing purposes",
- "defaultValue": {
- "value": "'fab'",
- "computed": false
- }
- },
- "ref": {
- "required": false,
- "tsType": {
- "name": "ReactRefObject",
- "raw": "React.RefObject",
- "elements": [
- {
- "name": "View"
- }
- ]
- },
- "description": ""
- }
- }
- },
- "type": "component",
- "dependencies": [
- "src/components/FAB/FAB.tsx"
- ]
- },
- "FAB/AnimatedFAB": {
- "filepath": "FAB/AnimatedFAB.tsx",
- "title": "AnimatedFAB",
- "description": "An animated, extending horizontally floating action button represents the primary action in an application.\n\n## Usage\n```js\nimport React from 'react';\nimport {\n StyleProp,\n ViewStyle,\n Animated,\n StyleSheet,\n Platform,\n ScrollView,\n Text,\n SafeAreaView,\n I18nManager,\n} from 'react-native';\nimport { AnimatedFAB } from 'react-native-paper';\n\nconst MyComponent = ({\n animatedValue,\n visible,\n extended,\n label,\n animateFrom,\n style,\n iconMode,\n}) => {\n const [isExtended, setIsExtended] = React.useState(true);\n\n const isIOS = Platform.OS === 'ios';\n\n const onScroll = ({ nativeEvent }) => {\n const currentScrollPosition =\n Math.floor(nativeEvent?.contentOffset?.y) ?? 0;\n\n setIsExtended(currentScrollPosition <= 0);\n };\n\n const fabStyle = { [animateFrom]: 16 };\n\n return (\n \n \n {[...new Array(100).keys()].map((_, i) => (\n {i}\n ))}\n \n console.log('Pressed')}\n visible={visible}\n animateFrom={'right'}\n iconMode={'static'}\n style={[styles.fabStyle, style, fabStyle]}\n />\n \n );\n};\n\nexport default MyComponent;\n\nconst styles = StyleSheet.create({\n container: {\n flexGrow: 1,\n },\n fabStyle: {\n bottom: 16,\n right: 16,\n position: 'absolute',\n },\n});\n```",
- "link": "animated-fab",
- "data": {
- "description": "An animated, extending horizontally floating action button represents the primary action in an application.\n\n## Usage\n```js\nimport React from 'react';\nimport {\n StyleProp,\n ViewStyle,\n Animated,\n StyleSheet,\n Platform,\n ScrollView,\n Text,\n SafeAreaView,\n I18nManager,\n} from 'react-native';\nimport { AnimatedFAB } from 'react-native-paper';\n\nconst MyComponent = ({\n animatedValue,\n visible,\n extended,\n label,\n animateFrom,\n style,\n iconMode,\n}) => {\n const [isExtended, setIsExtended] = React.useState(true);\n\n const isIOS = Platform.OS === 'ios';\n\n const onScroll = ({ nativeEvent }) => {\n const currentScrollPosition =\n Math.floor(nativeEvent?.contentOffset?.y) ?? 0;\n\n setIsExtended(currentScrollPosition <= 0);\n };\n\n const fabStyle = { [animateFrom]: 16 };\n\n return (\n \n \n {[...new Array(100).keys()].map((_, i) => (\n {i}\n ))}\n \n console.log('Pressed')}\n visible={visible}\n animateFrom={'right'}\n iconMode={'static'}\n style={[styles.fabStyle, style, fabStyle]}\n />\n \n );\n};\n\nexport default MyComponent;\n\nconst styles = StyleSheet.create({\n container: {\n flexGrow: 1,\n },\n fabStyle: {\n bottom: 16,\n right: 16,\n position: 'absolute',\n },\n});\n```",
- "displayName": "AnimatedFAB",
- "methods": [],
- "statics": [],
- "props": {
- "icon": {
- "required": true,
- "tsType": {
- "name": "IconSource"
- },
- "description": "Icon to display for the `FAB`."
- },
- "label": {
- "required": true,
- "tsType": {
- "name": "string"
- },
- "description": "Label for extended `FAB`."
- },
- "uppercase": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Make the label text uppercased."
- },
- "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 FAB. This is read by the screen reader when the user taps the FAB.\nUses `label` by default if specified.",
- "defaultValue": {
- "value": "label",
- "computed": true
- }
- },
- "accessibilityState": {
- "required": false,
- "tsType": {
- "name": "AccessibilityState"
- },
- "description": "Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB."
- },
- "color": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Custom color for the icon and label of the `FAB`."
- },
- "rippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the ripple effect."
- },
- "disabled": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch."
- },
- "visible": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Whether `FAB` is currently visible.",
- "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."
- },
- "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`."
- },
- "iconMode": {
- "required": false,
- "tsType": {
- "name": "union",
- "raw": "'static' | 'dynamic'",
- "elements": [
- {
- "name": "literal",
- "value": "'static'"
- },
- {
- "name": "literal",
- "value": "'dynamic'"
- }
- ]
- },
- "description": "Whether icon should be translated to the end of extended `FAB` or be static and stay in the same place. The default value is `dynamic`.",
- "defaultValue": {
- "value": "'dynamic'",
- "computed": false
- }
- },
- "animateFrom": {
- "required": false,
- "tsType": {
- "name": "union",
- "raw": "'left' | 'right'",
- "elements": [
- {
- "name": "literal",
- "value": "'left'"
- },
- {
- "name": "literal",
- "value": "'right'"
- }
- ]
- },
- "description": "Indicates from which direction animation should be performed. The default value is `right`.",
- "defaultValue": {
- "value": "'right'",
- "computed": false
- }
- },
- "extended": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Whether `FAB` should start animation to extend.",
- "defaultValue": {
- "value": "false",
- "computed": false
- }
- },
- "labelMaxFontSizeMultiplier": {
- "required": false,
- "tsType": {
- "name": "number"
- },
- "description": "Specifies the largest possible scale a label font can reach."
- },
- "variant": {
- "required": false,
- "tsType": {
- "name": "union",
- "raw": "'primary' | 'secondary' | 'tertiary' | 'surface'",
- "elements": [
- {
- "name": "literal",
- "value": "'primary'"
- },
- {
- "name": "literal",
- "value": "'secondary'"
- },
- {
- "name": "literal",
- "value": "'tertiary'"
- },
- {
- "name": "literal",
- "value": "'surface'"
- }
- ]
- },
- "description": "@supported Available in v5.x with theme version 3\n\nColor mappings variant for combinations of container and icon colors.",
- "defaultValue": {
- "value": "'primary'",
- "computed": false
- }
- },
- "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": "TestID used for testing purposes",
- "defaultValue": {
- "value": "'animated-fab'",
- "computed": false
- }
- }
- }
- },
- "type": "component",
- "dependencies": [
- "src/components/FAB/AnimatedFAB.tsx"
- ]
- },
- "FAB/FABGroup": {
- "filepath": "FAB/FABGroup.tsx",
- "title": "FAB.Group",
- "description": "A component to display a stack of FABs with related actions in a speed dial.\nTo render the group 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 { FAB, Portal, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [state, setState] = React.useState({ open: false });\n\n const onStateChange = ({ open }) => setState({ open });\n\n const { open } = state;\n\n return (\n \n \n console.log('Pressed add') },\n {\n icon: 'star',\n label: 'Star',\n onPress: () => console.log('Pressed star'),\n },\n {\n icon: 'email',\n label: 'Email',\n onPress: () => console.log('Pressed email'),\n },\n {\n icon: 'bell',\n label: 'Remind',\n onPress: () => console.log('Pressed notifications'),\n },\n ]}\n onStateChange={onStateChange}\n onPress={() => {\n if (open) {\n // do something if the speed dial is open\n }\n }}\n />\n \n \n );\n};\n\nexport default MyComponent;\n```",
- "link": "fab-group",
- "data": {
- "description": "A component to display a stack of FABs with related actions in a speed dial.\nTo render the group 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 { FAB, Portal, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [state, setState] = React.useState({ open: false });\n\n const onStateChange = ({ open }) => setState({ open });\n\n const { open } = state;\n\n return (\n \n \n console.log('Pressed add') },\n {\n icon: 'star',\n label: 'Star',\n onPress: () => console.log('Pressed star'),\n },\n {\n icon: 'email',\n label: 'Email',\n onPress: () => console.log('Pressed email'),\n },\n {\n icon: 'bell',\n label: 'Remind',\n onPress: () => console.log('Pressed notifications'),\n },\n ]}\n onStateChange={onStateChange}\n onPress={() => {\n if (open) {\n // do something if the speed dial is open\n }\n }}\n />\n \n \n );\n};\n\nexport default MyComponent;\n```",
- "displayName": "FAB.Group",
- "methods": [],
- "statics": [],
- "props": {
- "actions": {
- "required": true,
- "tsType": {
- "name": "Array",
- "elements": [
- {
- "name": "signature",
- "type": "object",
- "raw": "{\n icon: IconSource;\n label?: string;\n color?: string;\n labelTextColor?: string;\n accessibilityLabel?: string;\n accessibilityHint?: string;\n style?: Animated.WithAnimatedValue>;\n containerStyle?: Animated.WithAnimatedValue>;\n wrapperStyle?: StyleProp;\n labelStyle?: StyleProp;\n labelMaxFontSizeMultiplier?: number;\n onPress: (e: GestureResponderEvent) => void;\n size?: 'small' | 'medium';\n testID?: string;\n rippleColor?: ColorValue;\n}",
- "signature": {
- "properties": [
- {
- "key": "icon",
- "value": {
- "name": "IconSource",
- "required": true
- }
- },
- {
- "key": "label",
- "value": {
- "name": "string",
- "required": false
- }
- },
- {
- "key": "color",
- "value": {
- "name": "string",
- "required": false
- }
- },
- {
- "key": "labelTextColor",
- "value": {
- "name": "string",
- "required": false
- }
- },
- {
- "key": "accessibilityLabel",
- "value": {
- "name": "string",
- "required": false
- }
- },
- {
- "key": "accessibilityHint",
- "value": {
- "name": "string",
- "required": false
- }
- },
- {
- "key": "style",
- "value": {
- "name": "Animated.WithAnimatedValue",
- "elements": [
- {
- "name": "StyleProp",
- "elements": [
- {
- "name": "ViewStyle"
- }
- ],
- "raw": "StyleProp"
- }
- ],
- "raw": "Animated.WithAnimatedValue>",
- "required": false
- }
- },
- {
- "key": "containerStyle",
- "value": {
- "name": "Animated.WithAnimatedValue",
- "elements": [
- {
- "name": "StyleProp",
- "elements": [
- {
- "name": "ViewStyle"
- }
- ],
- "raw": "StyleProp"
- }
- ],
- "raw": "Animated.WithAnimatedValue>",
- "required": false
- }
- },
- {
- "key": "wrapperStyle",
- "value": {
- "name": "StyleProp",
- "elements": [
- {
- "name": "ViewStyle"
- }
- ],
- "raw": "StyleProp",
- "required": false
- }
- },
- {
- "key": "labelStyle",
- "value": {
- "name": "StyleProp",
- "elements": [
- {
- "name": "TextStyle"
- }
- ],
- "raw": "StyleProp",
- "required": false
- }
- },
- {
- "key": "labelMaxFontSizeMultiplier",
- "value": {
- "name": "number",
- "required": false
- }
- },
- {
- "key": "onPress",
- "value": {
- "name": "signature",
- "type": "function",
- "raw": "(e: GestureResponderEvent) => void",
- "signature": {
- "arguments": [
- {
- "name": "e",
- "type": {
- "name": "GestureResponderEvent"
- }
- }
- ],
- "return": {
- "name": "void"
- }
- },
- "required": true
- }
- },
- {
- "key": "size",
- "value": {
- "name": "union",
- "raw": "'small' | 'medium'",
- "elements": [
- {
- "name": "literal",
- "value": "'small'"
- },
- {
- "name": "literal",
- "value": "'medium'"
- }
- ],
- "required": false
- }
- },
- {
- "key": "testID",
- "value": {
- "name": "string",
- "required": false
- }
- },
- {
- "key": "rippleColor",
- "value": {
- "name": "ColorValue",
- "required": false
- }
- }
- ]
- }
- }
- ],
- "raw": "Array<{\n icon: IconSource;\n label?: string;\n color?: string;\n labelTextColor?: string;\n accessibilityLabel?: string;\n accessibilityHint?: string;\n style?: Animated.WithAnimatedValue>;\n containerStyle?: Animated.WithAnimatedValue>;\n wrapperStyle?: StyleProp;\n labelStyle?: StyleProp;\n labelMaxFontSizeMultiplier?: number;\n onPress: (e: GestureResponderEvent) => void;\n size?: 'small' | 'medium';\n testID?: string;\n rippleColor?: ColorValue;\n}>"
- },
- "description": "Action items to display in the form of a speed dial.\nAn action item should contain the following properties:\n- `icon`: icon to display (required)\n- `label`: optional label text\n- `color`: custom icon color of the action item\n- `labelTextColor`: custom label text color of the action item\n- `accessibilityLabel`: accessibility label for the action, uses label by default if specified\n- `accessibilityHint`: accessibility hint for the action\n- `style`: pass additional styles for the fab item, for example, `backgroundColor`\n- `containerStyle`: pass additional styles for the fab item label container, for example, `backgroundColor` @supported Available in 5.x\n- `wrapperStyle`: pass additional styles for the wrapper of the action item.\n- `labelStyle`: pass additional styles for the fab item label, for example, `fontSize`\n- `labelMaxFontSizeMultiplier`: specifies the largest possible scale a title font can reach.\n- `onPress`: callback that is called when `FAB` is pressed (required)\n- `onLongPress`: callback that is called when `FAB` is long pressed\n- `toggleStackOnLongPress`: callback that is called when `FAB` is long pressed\n- `size`: size of action item. Defaults to `small`. @supported Available in v5.x\n- `testID`: testID to be used on tests\n- `rippleColor`: color of the ripple effect."
- },
- "icon": {
- "required": true,
- "tsType": {
- "name": "IconSource"
- },
- "description": "Icon to display for the `FAB`.\nYou can toggle it based on whether the speed dial is open to display a different icon."
- },
- "accessibilityLabel": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB."
- },
- "color": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Custom color for the `FAB`."
- },
- "backdropColor": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Custom backdrop color for opened speed dial background."
- },
- "rippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the ripple effect."
- },
- "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 pressing the `FAB`."
- },
- "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 pressing the `FAB`."
- },
- "toggleStackOnLongPress": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Makes actions stack appear on long press instead of on press."
- },
- "delayLongPress": {
- "required": false,
- "tsType": {
- "name": "number"
- },
- "description": "Changes the delay for long press reaction.",
- "defaultValue": {
- "value": "200",
- "computed": false
- }
- },
- "enableLongPressWhenStackOpened": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Allows for onLongPress when stack is opened.",
- "defaultValue": {
- "value": "false",
- "computed": false
- }
- },
- "open": {
- "required": true,
- "tsType": {
- "name": "boolean"
- },
- "description": "Whether the speed dial is open."
- },
- "onStateChange": {
- "required": true,
- "tsType": {
- "name": "signature",
- "type": "function",
- "raw": "(state: { open: boolean }) => void",
- "signature": {
- "arguments": [
- {
- "name": "state",
- "type": {
- "name": "signature",
- "type": "object",
- "raw": "{ open: boolean }",
- "signature": {
- "properties": [
- {
- "key": "open",
- "value": {
- "name": "boolean",
- "required": true
- }
- }
- ]
- }
- }
- }
- ],
- "return": {
- "name": "void"
- }
- }
- },
- "description": "Callback which is called on opening and closing the speed dial.\nThe open state needs to be updated when it's called, otherwise the change is dropped."
- },
- "visible": {
- "required": true,
- "tsType": {
- "name": "boolean"
- },
- "description": "Whether `FAB` is currently visible."
- },
- "style": {
- "required": false,
- "tsType": {
- "name": "StyleProp",
- "elements": [
- {
- "name": "ViewStyle"
- }
- ],
- "raw": "StyleProp"
- },
- "description": "Style for the group. You can use it to pass additional styles if you need.\nFor example, you can set an additional padding if you have a tab bar at the bottom."
- },
- "fabStyle": {
- "required": false,
- "tsType": {
- "name": "Animated.WithAnimatedValue",
- "elements": [
- {
- "name": "StyleProp",
- "elements": [
- {
- "name": "ViewStyle"
- }
- ],
- "raw": "StyleProp"
- }
- ],
- "raw": "Animated.WithAnimatedValue>"
- },
- "description": "Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor."
- },
- "variant": {
- "required": false,
- "tsType": {
- "name": "union",
- "raw": "'primary' | 'secondary' | 'tertiary' | 'surface'",
- "elements": [
- {
- "name": "literal",
- "value": "'primary'"
- },
- {
- "name": "literal",
- "value": "'secondary'"
- },
- {
- "name": "literal",
- "value": "'tertiary'"
- },
- {
- "name": "literal",
- "value": "'surface'"
- }
- ]
- },
- "description": "@supported Available in v5.x with theme version 3\n\nColor mappings variant for combinations of container and icon colors.",
- "defaultValue": {
- "value": "'primary'",
- "computed": false
- }
- },
- "theme": {
- "required": false,
- "tsType": {
- "name": "ThemeProp"
- },
- "description": ""
- },
- "label": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Optional label for `FAB`."
- },
- "testID": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Pass down testID from Group props to FAB."
- }
- }
- },
- "type": "component",
- "dependencies": [
- "src/components/FAB/FABGroup.tsx"
- ],
- "group": "FAB"
- },
- "HelperText/HelperText": {
- "filepath": "HelperText/HelperText.tsx",
- "title": "HelperText",
- "description": "Helper text is used in conjuction with input elements to provide additional hints for the user.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { HelperText, TextInput } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [text, setText] = React.useState('');\n\n const onChangeText = text => setText(text);\n\n const hasErrors = () => {\n return !text.includes('@');\n };\n\n return (\n \n \n \n Email address is invalid!\n \n \n );\n};\n\nexport default MyComponent;\n```",
- "link": "helper-text",
- "data": {
- "description": "Helper text is used in conjuction with input elements to provide additional hints for the user.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { HelperText, TextInput } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [text, setText] = React.useState('');\n\n const onChangeText = text => setText(text);\n\n const hasErrors = () => {\n return !text.includes('@');\n };\n\n return (\n \n \n \n Email address is invalid!\n \n \n );\n};\n\nexport default MyComponent;\n```",
- "displayName": "HelperText",
- "methods": [],
- "statics": [],
- "props": {
- "type": {
- "required": false,
- "tsType": {
- "name": "union",
- "raw": "'error' | 'info'",
- "elements": [
- {
- "name": "literal",
- "value": "'error'"
- },
- {
- "name": "literal",
- "value": "'info'"
- }
- ]
- },
- "description": "Type of the helper text.",
- "defaultValue": {
- "value": "'info'",
- "computed": false
- }
- },
- "children": {
- "required": true,
- "tsType": {
- "name": "ReactReactNode",
- "raw": "React.ReactNode"
- },
- "description": "Text content of the HelperText."
- },
- "visible": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Whether to display the helper text.",
- "defaultValue": {
- "value": "true",
- "computed": false
- }
- },
- "padding": {
- "required": false,
- "tsType": {
- "name": "union",
- "raw": "'none' | 'normal'",
- "elements": [
- {
- "name": "literal",
- "value": "'none'"
- },
- {
- "name": "literal",
- "value": "'normal'"
- }
- ]
- },
- "description": "Whether to apply padding to the helper text.",
- "defaultValue": {
- "value": "'normal'",
- "computed": false
- }
- },
- "disabled": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "Whether the text input tied with helper text is disabled."
- },
- "style": {
- "required": false,
- "tsType": {
- "name": "StyleProp",
- "elements": [
- {
- "name": "TextStyle"
- }
- ],
- "raw": "StyleProp"
- },
- "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/HelperText/HelperText.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, MD3Colors } 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, MD3Colors } 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": "string"
- },
- "description": "@renamed Renamed from 'color' to 'iconColor' in v5.x\nColor of the icon."
- },
- "containerColor": {
- "required": false,
- "tsType": {
- "name": "string"
- },
- "description": "Background color of the icon container."
- },
- "rippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the ripple effect."
- },
- "selected": {
- "required": false,
- "tsType": {
- "name": "boolean"
- },
- "description": "@supported Available in v5.x with theme version 3\nWhether 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": "ReactRefObject",
- "raw": "React.RefObject",
- "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, MD3Colors } 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, MD3Colors } 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": "string"
- },
- "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: string; style: Style }) => React.ReactNode",
- "signature": {
- "arguments": [
- {
- "name": "props",
- "type": {
- "name": "signature",
- "type": "object",
- "raw": "{ color: string; style: Style }",
- "signature": {
- "properties": [
- {
- "key": "color",
- "value": {
- "name": "string",
- "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."
- },
- "rippleColor": {
- "required": false,
- "tsType": {
- "name": "ColorValue"
- },
- "description": "Color of the ripple effect."
- },
- "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
'
- )
- .replace(
- "import GetStartedButtons from '../components/GetStartedButtons';",
- "import GetStartedButtons from '@docs/components/GetStartedButtons';"
- )
- .replace("import {Button} from 'react-native-paper';\n", '')
- .replace(
- "import BannerExample from '../components/BannerExample';",
- "import BannerExample from '@docs/components/BannerExample';"
- )
- .replace(/src="\.\/*gallery\//g, 'src="/react-native-paper/gallery/');
-
-const copyFile = (
- sourcePath: string,
- targetPath: string,
- transform: (content: string) => string
-) => {
- ensureDir(path.dirname(targetPath));
- const source = readFile(sourcePath);
- fs.writeFileSync(targetPath, transform(source));
-};
-
-const getVersionDocsDir = (version: string) =>
- path.join(rootDir, version, 'docs');
-
-const createNav = (version: string) => {
- 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: string): MetaEntry[] => {
- 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: string, dirName: string) => {
- const configEntry = componentDocsConfig.pages[dirName];
-
- if (version !== '5.x' && configEntry && typeof configEntry !== 'string') {
- return Object.keys(configEntry);
- }
-
- const dirPath = path.join(getVersionDocsDir(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: string) => {
- const guidesDir = path.join(getVersionDocsDir(version), 'guides');
- const metaPath = path.join(guidesDir, '_meta.json');
- const existingOrder = fs.existsSync(metaPath)
- ? readStringArrayJson(metaPath)
- : [];
-
- const currentEntries = fs
- .readdirSync(guidesDir, { withFileTypes: true })
- .filter((entry) => entry.isFile() && /\.(md|mdx)$/.test(entry.name))
- .map((entry) => stripNumericPrefix(entry.name));
-
- const knownEntries = existingOrder.filter((entry) =>
- currentEntries.includes(entry)
- );
- const newEntries = currentEntries.filter(
- (entry) => !existingOrder.includes(entry)
- );
-
- return [...knownEntries, ...newEntries];
-};
-
-const createComponentMeta = (version: string) => {
- return getVersionComponentOrder(version);
-};
-
-const writeMetaFiles = (version: string, targetVersionDir: string) => {
- 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: string) => {
- copyFile(
- path.join(sourcePagesDir, 'index.mdx'),
- path.join(targetVersionDir, 'index.mdx'),
- transformIndexContent
- );
-};
-
-const copyBasePublicAssets = () => {
- fs.rmSync(basePublicDir, { recursive: true, force: true });
- ensureDir(basePublicDir);
-
- for (const entry of fs.readdirSync(publicDir, { withFileTypes: true })) {
- if (entry.name === 'react-native-paper') {
- continue;
- }
-
- fs.cpSync(
- path.join(publicDir, entry.name),
- path.join(basePublicDir, entry.name),
- {
- recursive: true,
- force: true,
- }
- );
- }
-};
-
-const prepareVersionDir = (version: string) => {
- const targetVersionDir = path.join(rootDir, version);
- ensureDir(targetVersionDir);
-
- writeJson(path.join(targetVersionDir, '_nav.json'), createNav(version));
- writeIndexPage(targetVersionDir);
- writeMetaFiles(version, targetVersionDir);
-};
-
-const main = () => {
- copyBasePublicAssets();
- 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/PropTable.tsx b/docs/src/components/PropTable.tsx
index 54e52d8f3b..2437f58bce 100644
--- a/docs/src/components/PropTable.tsx
+++ b/docs/src/components/PropTable.tsx
@@ -1,9 +1,6 @@
-import { useVersion } from '@rspress/core/dist/runtime/index.js';
-
import Markdown from './Markdown';
-import useDoc from '../../component-docs-plugin/useDocs';
-const typeDefinitions = {
+const typeDefinitions: Record