{children};
+}
diff --git a/docs/src/components/Tabs.tsx b/docs/src/components/Tabs.tsx
new file mode 100644
index 0000000000..e8b4d3f023
--- /dev/null
+++ b/docs/src/components/Tabs.tsx
@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+
+import { Tabs as RspressTabs } from '@rspress/core/dist/theme/index.js';
+
+type TabsProps = {
+ children: ReactNode;
+};
+
+export default function Tabs({ children }: TabsProps) {
+ return
{children} ;
+}
diff --git a/docs/src/components/ThemeColorsTable.tsx b/docs/src/components/ThemeColorsTable.tsx
index cf98c3e2df..d9c5cec724 100644
--- a/docs/src/components/ThemeColorsTable.tsx
+++ b/docs/src/components/ThemeColorsTable.tsx
@@ -1,12 +1,8 @@
import type { ReactNode } from 'react';
-//@ts-ignore
-import Admonition from '@theme/Admonition';
-//@ts-ignore
-import TabItem from '@theme/TabItem';
-//@ts-ignore
-import Tabs from '@theme/Tabs';
-
+import Admonition from './Admonition';
+import TabItem from './TabItem';
+import Tabs from './Tabs';
import { getMaxNestedLevel, getUniqueNestedKeys } from '../utils/themeColors';
import type { DataObject } from '../utils/themeColors';
@@ -24,6 +20,9 @@ const getTableCell = (keys: string[], modes: DataObject): ReactNode[] => {
});
};
+const isDataObject = (value: DataObject[string]): value is DataObject =>
+ typeof value === 'object';
+
const FlatTable = ({
themeColorsData,
uniqueKeys,
@@ -32,10 +31,12 @@ const FlatTable = ({
uniqueKeys: string[];
}): ReactNode => {
const rows = Object.keys(themeColorsData).map((mode) => {
+ const value = themeColorsData[mode];
+
return (
{mode}
- {getTableCell(uniqueKeys, themeColorsData[mode] as DataObject)}
+ {isDataObject(value) ? getTableCell(uniqueKeys, value) : null}
);
});
@@ -66,30 +67,37 @@ const TabbedTable = ({
themeColorsData: DataObject;
uniqueKeys: string[];
}): ReactNode => {
- const tabTableContent = Object.keys(themeColorsData).map((key) => {
- const modes = themeColorsData[key] as DataObject;
- const rows = Object.keys(modes).map((mode) => {
+ const tabTableContent = Object.entries(themeColorsData).map(
+ ([key, modes]) => {
+ if (!isDataObject(modes)) {
+ return null;
+ }
+
+ const rows = Object.keys(modes).map((mode) => {
+ const value = modes[mode];
+
+ return (
+
+ {mode}
+ {isDataObject(value) ? getTableCell(uniqueKeys, value) : null}
+
+ );
+ });
return (
-
- {mode}
- {getTableCell(uniqueKeys, modes[mode] as DataObject)}
-
+
+
+
+
+ mode
+ {getTableHeader(uniqueKeys)}
+
+
+ {rows}
+
+
);
- });
- return (
-
-
-
-
- mode
- {getTableHeader(uniqueKeys)}
-
-
- {rows}
-
-
- );
- });
+ }
+ );
return (
<>
diff --git a/docs/src/components/VersionedPrereleaseNotice.tsx b/docs/src/components/VersionedPrereleaseNotice.tsx
new file mode 100644
index 0000000000..9c36931191
--- /dev/null
+++ b/docs/src/components/VersionedPrereleaseNotice.tsx
@@ -0,0 +1,30 @@
+import { usePage, useVersion } from '@rspress/core/dist/runtime/index.js';
+
+import PrereleaseNotice from './PrereleaseNotice';
+import { getStableRoute, hasSameStableRoute } from '../utils/versionRoutes';
+
+const DOCS_PREFIX = '/6.x/docs/';
+
+export default function VersionedPrereleaseNotice() {
+ const version = useVersion() || '5.x';
+ const { page } = usePage();
+ const routePath = page.routePath ?? '/';
+
+ if (version !== '6.x' || !routePath.startsWith(DOCS_PREFIX)) {
+ return null;
+ }
+
+ const stableHref = getStableRoute(routePath);
+ const stableLabel =
+ hasSameStableRoute(routePath) && page.title
+ ? `${page.title} (5.x)`
+ : 'Latest stable docs (5.x)';
+
+ return (
+
+ );
+}
diff --git a/docs/src/components/theme-common.ts b/docs/src/components/theme-common.ts
new file mode 100644
index 0000000000..335ce8eaa1
--- /dev/null
+++ b/docs/src/components/theme-common.ts
@@ -0,0 +1,9 @@
+import { useDark } from '@rspress/core/dist/runtime/index.js';
+
+export const useColorMode = () => {
+ const isDark = useDark();
+
+ return {
+ colorMode: isDark ? 'dark' : 'light',
+ };
+};
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index a382d6268e..03288b6bcd 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -1,32 +1,11 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
-/* You can override the default Infima variables here. */
:root {
- --ifm-color-primary: #21005d;
- --ifm-color-primary-dark: #1e0054;
- --ifm-color-primary-darker: #1c004f;
- --ifm-color-primary-darkest: #170041;
- --ifm-color-primary-light: #240066;
- --ifm-color-primary-lighter: #26006b;
- --ifm-color-primary-lightest: #2b0079;
- --ifm-code-font-size: 95%;
- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-}
-
-/* For readability concerns, you should choose a lighter palette in dark mode. */
+ --paper-nav-link-hover: var(--rp-c-bg-soft, rgba(148, 163, 184, 0.16));
+ --paper-nav-link-active: var(--rp-c-bg-mute, rgba(148, 163, 184, 0.24));
+}
+
[data-theme='dark'] {
- --ifm-color-primary: #cfbcff;
- --ifm-color-primary-dark: #af90ff;
- --ifm-color-primary-darker: #9f7aff;
- --ifm-color-primary-darkest: #7037ff;
- --ifm-color-primary-light: #efe8ff;
- --ifm-color-primary-lighter: #fffeff;
- --ifm-color-primary-lightest: #ffffff;
- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+ --paper-nav-link-hover: var(--rp-c-bg-soft, rgba(255, 255, 255, 0.12));
+ --paper-nav-link-active: var(--rp-c-bg-mute, rgba(255, 255, 255, 0.18));
}
.nav-link {
@@ -43,15 +22,15 @@
border-radius: 50%;
background-color: transparent;
z-index: -1;
- transition: background-color var(--ifm-transition-fast);
+ transition: background-color 150ms ease;
}
.nav-link:hover::before,
.nav-link:active::before,
.nav-link:focus::before {
- background-color: var(--ifm-color-emphasis-200);
+ background-color: var(--paper-nav-link-hover);
}
.nav-link:active::before {
- background-color: var(--ifm-menu-color-background-active);
+ background-color: var(--paper-nav-link-active);
}
.nav-link::after {
@@ -79,7 +58,6 @@ html[data-theme='dark'] .nav-link::after {
}
.screenshots img,
-
.tabScreenshot {
max-width: 45%;
}
@@ -88,7 +66,7 @@ html[data-theme='dark'] .nav-link::after {
max-width: 40%;
}
-.screenshots figure>img {
+.screenshots figure > img {
max-width: 100%;
}
@@ -102,7 +80,6 @@ html[data-theme='dark'] .nav-link::after {
width: 33%;
}
-
html[data-theme='dark'] .gallery-dark,
html[data-theme='light'] .gallery-light {
display: block;
@@ -186,7 +163,8 @@ html[data-theme='light'] .gallery-dark {
@font-face {
font-family: 'MaterialDesignIcons';
- src: url('../../node_modules/@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf') format('truetype');
+ src: url('@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf')
+ format('truetype');
}
.badge:is(a .badge) {
@@ -215,7 +193,7 @@ a .badge .badge-text {
}
[data-theme='dark'] .badge {
- color: white
+ color: white;
}
.badge-supported {
@@ -247,7 +225,10 @@ a .badge .badge-text {
display: flex;
flex-direction: row;
flex-wrap: wrap;
+ gap: 32px;
min-width: 0;
+ align-items: flex-start;
+ overflow: visible;
}
.color-picker {
@@ -263,7 +244,7 @@ a .badge .badge-text {
left: 0;
right: 0;
bottom: 0;
- background: rgba(0,0,0,.2);
+ background: rgba(0, 0, 0, 0.2);
z-index: 1;
}
@@ -364,7 +345,6 @@ a .badge .badge-text {
flex-direction: row;
gap: 20px;
margin-top: 20px;
-
}
.color-picker-themes > div {
flex: 1 0 300px;
@@ -390,66 +370,76 @@ a .badge .badge-text {
.color-picker-preview-box {
padding: 6px 6px 18px 6px;
font-size: 12px;
- display:block;
+ display: block;
}
-.color-picker-button:hover, .color-picker-button:focus,
-.color-picker-button-additional:hover, .color-picker-button-additional:focus,
-.color-picker-button-cancel:hover, .color-picker-button-cancel:focus{
+.color-picker-button:hover,
+.color-picker-button:focus,
+.color-picker-button-additional:hover,
+.color-picker-button-additional:focus,
+.color-picker-button-cancel:hover,
+.color-picker-button-cancel:focus {
opacity: 0.8;
}
-
@media (max-width: 680px) {
.showcase-gallery {
justify-content: center;
}
}
+.showcase-card {
+ flex: 0 0 auto;
+ overflow: visible;
+}
+
.showcase-image-container {
+ position: relative;
overflow: hidden;
- margin: 16px;
+ width: 270px;
+ height: 480px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+ background: #ffffff;
+ isolation: isolate;
}
-@media (min-width: 420px) {
- .showcase-image-container {
- height: 528px;
- }
-
- .showcase-image-container:hover .showcase-info,
- .showcase-image-container:focus .showcase-info {
- transform: translateY(-48px);
- }
+.showcase-image-container:hover,
+.showcase-image-container:focus-within {
+ z-index: 2;
+ box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}
+.showcase-image-container:hover .showcase-info,
+.showcase-image-container:focus-within .showcase-info {
+ transform: translateY(0);
+}
.showcase-image {
display: block;
- max-height: 480px;
- width: auto;
-}
-
-@media (min-width: 420px) {
- .showcase-image {
- height: 480px;
- width: 270px;
- }
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
}
.showcase-info {
- height: 96px;
- padding: 12px;
- transform: translateY(0);
- transition: 150ms;
-}
-
-.showcase-app-name {
- font-size: 16px;
- margin-top: 0;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ min-height: 136px;
+ padding: 18px 24px 20px;
+ transform: translateY(calc(100% - 68px));
+ transition: transform 180ms ease;
+ box-shadow: 0 -16px 32px rgba(15, 23, 42, 0.18);
+}
+
+.showcase-info .showcase-app-name {
+ font-size: 17px;
+ line-height: 1.2;
+ margin-block-start: 0;
+ margin-block-end: 12px;
margin-bottom: 12px;
-
- width: 246px;
+ width: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@@ -458,14 +448,36 @@ a .badge .badge-text {
.showcase-badge-container {
display: flex;
flex-direction: row;
+ align-items: center;
margin-top: 16px;
- padding-left: 3px;
+ padding-left: 1px;
}
.showcase-separation {
margin: 0 10px;
}
+@media (max-width: 420px) {
+ .showcase-gallery {
+ gap: 24px;
+ }
+
+ .showcase-image-container {
+ width: min(270px, 100%);
+ height: auto;
+ }
+
+ .showcase-image {
+ height: auto;
+ aspect-ratio: 9 / 16;
+ }
+
+ .showcase-info {
+ min-height: 124px;
+ transform: translateY(calc(100% - 60px));
+ }
+}
+
/* Switch.tsx */
.react-switch-checkbox {
@@ -484,7 +496,7 @@ a .badge .badge-text {
background: grey;
border-radius: 100px;
position: relative;
- transition: background-color .2s;
+ transition: background-color 0.2s;
}
.react-switch-label .react-switch-button {
@@ -500,7 +512,7 @@ a .badge .badge-text {
box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
}
-.react-switch-checkbox:checked+.react-switch-label .react-switch-button {
+.react-switch-checkbox:checked + .react-switch-label .react-switch-button {
left: calc(100% - 2px);
transform: translateX(-100%);
}
@@ -534,4 +546,743 @@ a .badge .badge-text {
.extends {
margin-bottom: 20px;
-}
\ No newline at end of file
+}
+
+.paper-version-selector {
+ position: relative;
+ z-index: 10;
+ min-width: 88px;
+ border: 1px solid var(--rp-c-divider, rgba(148, 163, 184, 0.24));
+ border-radius: 999px;
+ background: var(--rp-c-bg-soft, rgba(18, 18, 20, 0.96));
+ color: var(--rp-c-text-1, #fff);
+ backdrop-filter: blur(12px);
+}
+
+.paper-version-selector summary {
+ list-style: none;
+ cursor: pointer;
+ padding: 8px 14px;
+ font-size: 13px;
+ font-weight: 600;
+ text-align: center;
+ white-space: nowrap;
+}
+
+.paper-version-selector summary::-webkit-details-marker {
+ display: none;
+}
+
+.paper-version-selector[open] {
+ border-radius: 18px;
+}
+
+.paper-version-selector-menu {
+ position: absolute;
+ top: calc(100% + 8px);
+ right: 0;
+ display: grid;
+ min-width: 88px;
+ padding: 8px;
+ gap: 4px;
+ border: 1px solid var(--rp-c-divider, rgba(148, 163, 184, 0.24));
+ border-radius: 18px;
+ background: inherit;
+ box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
+}
+
+.paper-version-selector-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 12px;
+ padding: 8px 10px;
+ color: inherit;
+ text-decoration: none;
+ gap: 6px;
+}
+
+.paper-version-selector-link:hover,
+.paper-version-selector-link.active {
+ background: rgba(104, 88, 196, 0.22);
+}
+
+html:not(.dark) .paper-version-selector {
+ background: rgba(255, 255, 255, 0.92);
+ color: #1c1b1f;
+}
+
+html:not(.dark) .paper-version-selector-menu {
+ box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+}
+
+@media (max-width: 960px) {
+ .paper-version-selector {
+ min-width: 76px;
+ }
+
+ .paper-version-selector summary {
+ padding-inline: 12px;
+ }
+}
+
+.rp-nav__others > .rp-nav-menu__item,
+.rp-nav-hamburger__md__hover-group > .rp-nav-menu__item {
+ display: none;
+}
+
+.rp-doc-layout__outline:empty,
+.rp-doc-layout__outline:not(:has(.rp-toc-item)) {
+ display: none;
+}
+
+.rp-outline__action-row:has(.rp-llms-copy-button),
+.rp-outline__action-row:has(.rp-llms-view-options__trigger) {
+ display: none;
+}
+
+.rp-outline__bottom:not(:has(.rp-edit-link, .rp-scroll-to-top)) {
+ display: none;
+}
+
+.rp-outline__bottom:not(:has(.rp-edit-link, .rp-scroll-to-top))
+ + .rp-outline__divider,
+.rp-outline__divider:has(
+ + .rp-outline__bottom:not(:has(.rp-edit-link, .rp-scroll-to-top))
+) {
+ display: none;
+}
+
+.rp-llms-container {
+ display: none !important;
+}
+
+.paper-home-showcase {
+ margin: 56px auto 0;
+ box-sizing: border-box;
+ width: min(72rem, calc(100% - 16px));
+ padding: 0 40px 56px;
+}
+
+.paper-home-showcase__intro {
+ display: grid;
+ gap: 16px;
+ margin-bottom: 18px;
+}
+
+.paper-home-showcase__eyebrow {
+ margin: 0 0 12px;
+ color: #7c4dff;
+ font-size: 14px;
+ font-weight: 600;
+ letter-spacing: 0;
+ text-transform: uppercase;
+}
+
+.paper-home-showcase__title {
+ margin: 0;
+ font-size: clamp(32px, 4vw, 54px);
+ line-height: 1.04;
+}
+
+.paper-home-showcase__copy,
+.paper-home-showcase__links {
+ color: var(--rp-c-text-2);
+ font-size: 18px;
+ line-height: 1.55;
+}
+
+.paper-home-showcase__copy {
+ margin: 0;
+ max-width: 760px;
+}
+
+.paper-home-showcase__links {
+ margin: 0 0 24px;
+}
+
+.paper-home-showcase__links a {
+ color: inherit;
+}
+
+.paper-get-started-buttons {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: center;
+ padding-bottom: 1rem;
+}
+
+.paper-get-started-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 2.75rem;
+ padding: 0 1.25rem;
+ border: 1px solid;
+ border-radius: 999px;
+ font-size: 0.95rem;
+ font-weight: 600;
+ text-decoration: none;
+ transition:
+ transform 120ms ease,
+ background-color 120ms ease;
+}
+
+.paper-get-started-button:hover {
+ transform: translateY(-1px);
+ text-decoration: none;
+}
+
+.paper-get-started-button--primary {
+ border-color: #6750a4;
+ background-color: #6750a4;
+ color: #ffffff;
+}
+
+.paper-get-started-button--secondary {
+ border-color: #79747e;
+ background-color: transparent;
+ color: #49454f;
+}
+
+[data-theme='dark'] .paper-get-started-button--primary {
+ border-color: #d0bcff;
+ background-color: #d0bcff;
+ color: #1d192b;
+}
+
+[data-theme='dark'] .paper-get-started-button--secondary {
+ border-color: #938f99;
+ color: #e6e1e5;
+}
+
+.paper-home-showcase__gallery {
+ display: grid;
+ gap: 16px;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ margin-top: 24px;
+}
+
+.paper-home-showcase__gallery-image {
+ width: min(100%, 348px);
+ margin: 0 auto;
+ border-radius: 20px;
+ border: 1px solid rgba(124, 77, 255, 0.12);
+ background: rgba(124, 77, 255, 0.03);
+}
+
+.paper-prerelease-notice {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 20px;
+ margin: 0 0 32px;
+ padding: 20px 24px;
+ border: 1px solid rgba(245, 158, 11, 0.28);
+ border-left: 4px solid #f59e0b;
+ border-radius: 20px;
+ background: rgba(255, 251, 235, 0.82);
+ box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
+}
+
+.paper-prerelease-notice__icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ border: 2px solid #f59e0b;
+ border-radius: 12px;
+ color: #f59e0b;
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1;
+}
+
+.paper-prerelease-notice__content {
+ min-width: 0;
+}
+
+.paper-prerelease-notice__title,
+.paper-prerelease-notice__body {
+ margin: 0;
+}
+
+.paper-prerelease-notice__title {
+ color: #1f2937;
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.paper-prerelease-notice__body {
+ margin-top: 10px;
+ color: #374151;
+ font-size: 16px;
+ line-height: 1.6;
+}
+
+.paper-prerelease-notice__body a {
+ color: #7c4dff;
+ font-weight: 600;
+}
+
+.paper-banner-example {
+ margin: 0;
+ padding: 28px;
+ border-radius: 32px;
+ border: 1px solid var(--paper-example-border);
+ background: linear-gradient(
+ 180deg,
+ var(--paper-example-panel-alt) 0%,
+ var(--paper-example-panel) 100%
+ );
+ color: var(--paper-example-text);
+ box-shadow: var(--paper-example-shadow);
+}
+
+.paper-banner-example__toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ align-items: center;
+ margin-bottom: 18px;
+}
+
+.paper-banner-example__button,
+.paper-banner-example__avatar,
+.paper-banner-example__fab,
+.paper-banner-example__folder-button {
+ border: 1px solid transparent;
+ font: inherit;
+ letter-spacing: 0;
+ transition:
+ transform 120ms ease,
+ box-shadow 120ms ease,
+ background-color 120ms ease,
+ border-color 120ms ease;
+}
+
+.paper-banner-example__button:hover,
+.paper-banner-example__avatar:hover,
+.paper-banner-example__fab:hover,
+.paper-banner-example__folder-button:hover {
+ transform: translateY(-1px);
+}
+
+.paper-banner-example__button {
+ display: inline-flex;
+ align-items: center;
+ gap: 12px;
+ min-height: 48px;
+ padding: 0 24px;
+ border-radius: 999px;
+ font-size: 16px;
+ font-weight: 600;
+}
+
+.paper-banner-example__button-status {
+ width: 10px;
+ height: 10px;
+ border-radius: 999px;
+ background: color-mix(
+ in srgb,
+ var(--paper-example-accent) 36%,
+ var(--paper-example-panel-soft)
+ );
+}
+
+.paper-banner-example__button-status--busy {
+ background: var(--paper-example-accent);
+ box-shadow: 0 0 0 6px rgba(103, 80, 164, 0.12);
+}
+
+.paper-banner-example__button--outlined,
+.paper-banner-example__button--tonal,
+.paper-banner-example__avatar,
+.paper-banner-example__folder-button {
+ border-color: var(--paper-example-border);
+ background: var(--paper-example-panel-soft);
+ color: var(--paper-example-text);
+}
+
+.paper-banner-example__button--tonal {
+ box-shadow: 0 12px 24px rgba(103, 80, 164, 0.08);
+}
+
+.paper-banner-example__button--selected {
+ border-color: color-mix(
+ in srgb,
+ var(--paper-example-accent) 40%,
+ var(--paper-example-border)
+ );
+}
+
+.paper-banner-example__camera-icon {
+ position: relative;
+ width: 18px;
+ height: 12px;
+ border: 2px solid currentColor;
+ border-radius: 4px;
+}
+
+.paper-banner-example__camera-icon::before {
+ content: '';
+ position: absolute;
+ top: -5px;
+ left: 3px;
+ width: 8px;
+ height: 4px;
+ border-radius: 2px 2px 0 0;
+ background: currentColor;
+}
+
+.paper-banner-example__button--contained,
+.paper-banner-example__fab,
+.paper-banner-example__avatar {
+ background: var(--paper-example-accent);
+ color: var(--paper-example-accent-text);
+ box-shadow: 0 10px 18px rgba(103, 80, 164, 0.22);
+}
+
+.paper-banner-example__fab-group {
+ display: flex;
+ gap: 14px;
+ align-items: center;
+}
+
+.paper-banner-example__fab,
+.paper-banner-example__avatar,
+.paper-banner-example__folder-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ font-weight: 600;
+}
+
+.paper-banner-example__fab {
+ width: 64px;
+ height: 64px;
+ border-radius: 24px;
+}
+
+.paper-banner-example__fab--small {
+ width: 54px;
+ height: 54px;
+ border-radius: 20px;
+}
+
+.paper-banner-example__fab--medium {
+ width: 78px;
+ height: 78px;
+ border-radius: 28px;
+}
+
+.paper-banner-example__fab--large {
+ width: 108px;
+ height: 108px;
+ border-radius: 34px;
+ font-size: 34px;
+}
+
+.paper-banner-example__avatar {
+ width: 84px;
+ height: 84px;
+ border-radius: 999px;
+ font-size: 40px;
+ margin-left: auto;
+}
+
+.paper-banner-example__hero-row {
+ display: flex;
+ margin-bottom: 16px;
+}
+
+.paper-banner-example__folder-button {
+ width: 84px;
+ height: 84px;
+ border-radius: 999px;
+ box-shadow: 0 14px 26px rgba(103, 80, 164, 0.12);
+}
+
+.paper-banner-example__folder-button--raised {
+ box-shadow: 0 18px 32px rgba(103, 80, 164, 0.2);
+}
+
+.paper-banner-example__folder-icon {
+ position: relative;
+ width: 34px;
+ height: 24px;
+ border-radius: 6px;
+ background: currentColor;
+}
+
+.paper-banner-example__folder-icon::before {
+ content: '';
+ position: absolute;
+ top: -5px;
+ left: 3px;
+ width: 14px;
+ height: 8px;
+ border-radius: 4px 4px 0 0;
+ background: currentColor;
+}
+
+.paper-banner-example__progress {
+ height: 8px;
+ border-radius: 999px;
+ overflow: hidden;
+ background: var(--paper-example-panel-soft);
+ margin-bottom: 28px;
+}
+
+.paper-banner-example__progress-bar {
+ width: 64%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ var(--paper-example-accent) 0%,
+ var(--paper-example-accent-strong) 100%
+ );
+}
+
+.paper-banner-example__headline-group {
+ margin-bottom: 24px;
+}
+
+.paper-banner-example__display-large,
+.paper-banner-example__display-medium {
+ margin: 0;
+ letter-spacing: 0;
+}
+
+.paper-banner-example__display-large {
+ font-size: clamp(44px, 6vw, 72px);
+ line-height: 0.98;
+}
+
+.paper-banner-example__display-medium {
+ margin-top: 14px;
+ font-size: clamp(28px, 4vw, 44px);
+ line-height: 1.08;
+}
+
+.paper-banner-example__body {
+ margin: 20px 0 0;
+ max-width: 780px;
+ color: var(--paper-example-muted);
+ font-size: 18px;
+ line-height: 1.65;
+}
+
+.paper-banner-example__switches,
+.paper-banner-example__radios {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+}
+
+.paper-banner-example__switches {
+ margin-bottom: 24px;
+}
+
+.paper-banner-example__switch,
+.paper-banner-example__radio {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 18px;
+}
+
+.paper-banner-example__switch input,
+.paper-banner-example__radio input {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+
+.paper-banner-example__switch-control {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ width: 54px;
+ height: 32px;
+}
+
+.paper-banner-example__switch-track {
+ width: 54px;
+ height: 32px;
+ border-radius: 999px;
+ border: 2px solid var(--paper-example-muted);
+ background: transparent;
+ transition:
+ background-color 120ms ease,
+ border-color 120ms ease;
+}
+
+.paper-banner-example__switch-thumb {
+ position: absolute;
+ top: 7px;
+ left: 7px;
+ width: 14px;
+ height: 14px;
+ border-radius: 999px;
+ background: var(--paper-example-muted);
+ transition:
+ transform 120ms ease,
+ background-color 120ms ease;
+}
+
+.paper-banner-example__switch
+ input:checked
+ + .paper-banner-example__switch-control
+ .paper-banner-example__switch-track {
+ border-color: var(--paper-example-accent);
+ background: color-mix(in srgb, var(--paper-example-accent) 28%, transparent);
+}
+
+.paper-banner-example__switch
+ input:checked
+ + .paper-banner-example__switch-control
+ .paper-banner-example__switch-thumb {
+ transform: translateX(22px);
+ background: var(--paper-example-accent);
+}
+
+.paper-banner-example__fields {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 24px;
+ margin-bottom: 24px;
+}
+
+.paper-banner-example__field {
+ display: grid;
+ gap: 10px;
+ color: var(--paper-example-muted);
+ font-size: 15px;
+}
+
+.paper-banner-example__field input {
+ min-height: 64px;
+ padding: 0 18px;
+ border: 1px solid var(--paper-example-border);
+ border-radius: 20px;
+ background: var(--paper-example-panel-soft);
+ color: var(--paper-example-text);
+ font: inherit;
+}
+
+.paper-banner-example__field input::placeholder {
+ color: var(--paper-example-muted);
+}
+
+.paper-banner-example__field-input--outlined {
+ background: transparent !important;
+ border-color: var(--paper-example-accent) !important;
+}
+
+.paper-banner-example__radio-control {
+ width: 28px;
+ height: 28px;
+ border: 2px solid var(--paper-example-muted);
+ border-radius: 999px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.paper-banner-example__radio-dot {
+ width: 12px;
+ height: 12px;
+ border-radius: 999px;
+ background: transparent;
+}
+
+.paper-banner-example__radio
+ input:checked
+ + .paper-banner-example__radio-control {
+ border-color: var(--paper-example-accent);
+}
+
+.paper-banner-example__radio
+ input:checked
+ + .paper-banner-example__radio-control
+ .paper-banner-example__radio-dot {
+ background: var(--paper-example-accent);
+}
+
+@media (min-width: 997px) {
+ .paper-home-showcase__intro {
+ grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.8fr);
+ align-items: end;
+ }
+}
+
+@media (max-width: 996px) {
+ .paper-home-showcase {
+ width: min(100%, calc(100% - 16px));
+ padding: 0 16px 40px;
+ margin-top: 44px;
+ }
+
+ .paper-home-showcase__gallery {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .paper-banner-example {
+ padding: 22px;
+ border-radius: 28px;
+ }
+
+ .paper-banner-example__avatar {
+ margin-left: 0;
+ }
+
+ .paper-banner-example__fields {
+ grid-template-columns: 1fr;
+ gap: 18px;
+ }
+
+ .paper-prerelease-notice {
+ padding: 20px 22px;
+ }
+}
+
+@media (max-width: 640px) {
+ .paper-home-showcase__gallery {
+ grid-template-columns: 1fr;
+ }
+
+ .paper-home-showcase__gallery-image {
+ width: 100%;
+ }
+
+ .paper-banner-example__switch,
+ .paper-banner-example__radio {
+ font-size: 16px;
+ }
+
+ .paper-banner-example__fab-group {
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .paper-banner-example__fab--large {
+ width: 88px;
+ height: 88px;
+ }
+
+ .paper-banner-example__avatar {
+ width: 72px;
+ height: 72px;
+ font-size: 30px;
+ }
+
+ .paper-prerelease-notice {
+ grid-template-columns: 1fr;
+ gap: 16px;
+ margin-bottom: 24px;
+ padding: 18px;
+ }
+}
diff --git a/docs/src/data/componentDocs5x.json b/docs/src/data/componentDocs5x.json
index 5aa299568c..0984e441a0 100644
--- a/docs/src/data/componentDocs5x.json
+++ b/docs/src/data/componentDocs5x.json
@@ -88,9 +88,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/ActivityIndicator.tsx"
- ]
+ "dependencies": ["src/components/ActivityIndicator.tsx"]
},
"Appbar/Appbar": {
"filepath": "Appbar/Appbar.tsx",
@@ -225,9 +223,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Appbar/Appbar.tsx"
- ]
+ "dependencies": ["src/components/Appbar/Appbar.tsx"]
},
"Appbar/AppbarAction": {
"filepath": "Appbar/AppbarAction.tsx",
@@ -350,9 +346,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Appbar/AppbarAction.tsx"
- ],
+ "dependencies": ["src/components/Appbar/AppbarAction.tsx"],
"group": "Appbar"
},
"Appbar/AppbarBackAction": {
@@ -455,9 +449,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Appbar/AppbarBackAction.tsx"
- ],
+ "dependencies": ["src/components/Appbar/AppbarBackAction.tsx"],
"group": "Appbar"
},
"Appbar/AppbarContent": {
@@ -633,9 +625,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Appbar/AppbarContent.tsx"
- ],
+ "dependencies": ["src/components/Appbar/AppbarContent.tsx"],
"group": "Appbar"
},
"Appbar/AppbarHeader": {
@@ -749,9 +739,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Appbar/AppbarHeader.tsx"
- ],
+ "dependencies": ["src/components/Appbar/AppbarHeader.tsx"],
"group": "Appbar"
},
"Avatar/AvatarIcon": {
@@ -813,9 +801,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Avatar/AvatarIcon.tsx"
- ],
+ "dependencies": ["src/components/Avatar/AvatarIcon.tsx"],
"group": "Avatar"
},
"Avatar/AvatarImage": {
@@ -927,9 +913,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Avatar/AvatarImage.tsx"
- ],
+ "dependencies": ["src/components/Avatar/AvatarImage.tsx"],
"group": "Avatar"
},
"Avatar/AvatarText": {
@@ -1011,9 +995,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Avatar/AvatarText.tsx"
- ],
+ "dependencies": ["src/components/Avatar/AvatarText.tsx"],
"group": "Avatar"
},
"Badge": {
@@ -1083,9 +1065,7 @@
"tsType": {
"name": "ReactRefObject",
"raw": "React.RefObject
",
- "elements": [
- {}
- ]
+ "elements": [{}]
},
"description": ""
},
@@ -1099,9 +1079,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Badge.tsx"
- ]
+ "dependencies": ["src/components/Badge.tsx"]
},
"Banner": {
"filepath": "Banner.tsx",
@@ -1306,9 +1284,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Banner.tsx"
- ]
+ "dependencies": ["src/components/Banner.tsx"]
},
"BottomNavigation/BottomNavigation": {
"filepath": "BottomNavigation/BottomNavigation.tsx",
@@ -1322,9 +1298,7 @@
{
"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"
- ],
+ "modifiers": ["static"],
"params": [
{
"name": "scenes",
@@ -2318,9 +2292,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/BottomNavigation/BottomNavigation.tsx"
- ]
+ "dependencies": ["src/components/BottomNavigation/BottomNavigation.tsx"]
},
"BottomNavigation/BottomNavigationBar": {
"filepath": "BottomNavigation/BottomNavigationBar.tsx",
@@ -3445,9 +3417,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Button/Button.tsx"
- ]
+ "dependencies": ["src/components/Button/Button.tsx"]
},
"Card/Card": {
"filepath": "Card/Card.tsx",
@@ -3690,9 +3660,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Card/Card.tsx"
- ]
+ "dependencies": ["src/components/Card/Card.tsx"]
},
"Card/CardActions": {
"filepath": "Card/CardActions.tsx",
@@ -3736,9 +3704,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Card/CardActions.tsx"
- ],
+ "dependencies": ["src/components/Card/CardActions.tsx"],
"group": "Card"
},
"Card/CardContent": {
@@ -3803,9 +3769,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Card/CardContent.tsx"
- ],
+ "dependencies": ["src/components/Card/CardContent.tsx"],
"group": "Card"
},
"Card/CardCover": {
@@ -3856,9 +3820,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Card/CardCover.tsx"
- ],
+ "dependencies": ["src/components/Card/CardCover.tsx"],
"group": "Card"
},
"Card/CardTitle": {
@@ -4107,9 +4069,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Card/CardTitle.tsx"
- ],
+ "dependencies": ["src/components/Card/CardTitle.tsx"],
"group": "Card"
},
"Checkbox/Checkbox": {
@@ -4205,9 +4165,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Checkbox/Checkbox.tsx"
- ]
+ "dependencies": ["src/components/Checkbox/Checkbox.tsx"]
},
"Checkbox/CheckboxAndroid": {
"filepath": "Checkbox/CheckboxAndroid.tsx",
@@ -4302,9 +4260,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Checkbox/CheckboxAndroid.tsx"
- ],
+ "dependencies": ["src/components/Checkbox/CheckboxAndroid.tsx"],
"group": "Checkbox"
},
"Checkbox/CheckboxIOS": {
@@ -4393,9 +4349,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Checkbox/CheckboxIOS.tsx"
- ],
+ "dependencies": ["src/components/Checkbox/CheckboxIOS.tsx"],
"group": "Checkbox"
},
"Checkbox/CheckboxItem": {
@@ -4641,9 +4595,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Checkbox/CheckboxItem.tsx"
- ],
+ "dependencies": ["src/components/Checkbox/CheckboxItem.tsx"],
"group": "Checkbox"
},
"Chip/Chip": {
@@ -4996,9 +4948,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Chip/Chip.tsx"
- ]
+ "dependencies": ["src/components/Chip/Chip.tsx"]
},
"DataTable/DataTable": {
"filepath": "DataTable/DataTable.tsx",
@@ -5035,9 +4985,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/DataTable/DataTable.tsx"
- ]
+ "dependencies": ["src/components/DataTable/DataTable.tsx"]
},
"DataTable/DataTableCell": {
"filepath": "DataTable/DataTableCell.tsx",
@@ -5130,9 +5078,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/DataTable/DataTableCell.tsx"
- ],
+ "dependencies": ["src/components/DataTable/DataTableCell.tsx"],
"group": "DataTable"
},
"DataTable/DataTableHeader": {
@@ -5177,9 +5123,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/DataTable/DataTableHeader.tsx"
- ],
+ "dependencies": ["src/components/DataTable/DataTableHeader.tsx"],
"group": "DataTable"
},
"DataTable/DataTablePagination": {
@@ -5356,9 +5300,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/DataTable/DataTablePagination.tsx"
- ],
+ "dependencies": ["src/components/DataTable/DataTablePagination.tsx"],
"group": "DataTable"
},
"DataTable/DataTableRow": {
@@ -5433,9 +5375,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/DataTable/DataTableRow.tsx"
- ],
+ "dependencies": ["src/components/DataTable/DataTableRow.tsx"],
"group": "DataTable"
},
"DataTable/DataTableTitle": {
@@ -5558,9 +5498,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/DataTable/DataTableTitle.tsx"
- ],
+ "dependencies": ["src/components/DataTable/DataTableTitle.tsx"],
"group": "DataTable"
},
"Dialog/Dialog": {
@@ -5666,9 +5604,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Dialog/Dialog.tsx"
- ]
+ "dependencies": ["src/components/Dialog/Dialog.tsx"]
},
"Dialog/DialogActions": {
"filepath": "Dialog/DialogActions.tsx",
@@ -5712,9 +5648,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Dialog/DialogActions.tsx"
- ],
+ "dependencies": ["src/components/Dialog/DialogActions.tsx"],
"group": "Dialog"
},
"Dialog/DialogContent": {
@@ -5752,9 +5686,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Dialog/DialogContent.tsx"
- ],
+ "dependencies": ["src/components/Dialog/DialogContent.tsx"],
"group": "Dialog"
},
"Dialog/DialogIcon": {
@@ -5803,9 +5735,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Dialog/DialogIcon.tsx"
- ],
+ "dependencies": ["src/components/Dialog/DialogIcon.tsx"],
"group": "Dialog"
},
"Dialog/DialogScrollArea": {
@@ -5850,9 +5780,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Dialog/DialogScrollArea.tsx"
- ],
+ "dependencies": ["src/components/Dialog/DialogScrollArea.tsx"],
"group": "Dialog"
},
"Dialog/DialogTitle": {
@@ -5897,9 +5825,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Dialog/DialogTitle.tsx"
- ],
+ "dependencies": ["src/components/Dialog/DialogTitle.tsx"],
"group": "Dialog"
},
"Divider": {
@@ -5965,9 +5891,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Divider.tsx"
- ]
+ "dependencies": ["src/components/Divider.tsx"]
},
"Drawer/DrawerCollapsedItem": {
"filepath": "Drawer/DrawerCollapsedItem.tsx",
@@ -6108,9 +6032,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Drawer/DrawerCollapsedItem.tsx"
- ],
+ "dependencies": ["src/components/Drawer/DrawerCollapsedItem.tsx"],
"group": "Drawer"
},
"Drawer/DrawerItem": {
@@ -6269,9 +6191,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Drawer/DrawerItem.tsx"
- ],
+ "dependencies": ["src/components/Drawer/DrawerItem.tsx"],
"group": "Drawer"
},
"Drawer/DrawerSection": {
@@ -6341,9 +6261,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Drawer/DrawerSection.tsx"
- ],
+ "dependencies": ["src/components/Drawer/DrawerSection.tsx"],
"group": "Drawer"
},
"FAB/FAB": {
@@ -6656,9 +6574,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/FAB/FAB.tsx"
- ]
+ "dependencies": ["src/components/FAB/FAB.tsx"]
},
"FAB/AnimatedFAB": {
"filepath": "FAB/AnimatedFAB.tsx",
@@ -6940,9 +6856,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/FAB/AnimatedFAB.tsx"
- ]
+ "dependencies": ["src/components/FAB/AnimatedFAB.tsx"]
},
"FAB/FABGroup": {
"filepath": "FAB/FABGroup.tsx",
@@ -7384,9 +7298,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/FAB/FABGroup.tsx"
- ],
+ "dependencies": ["src/components/FAB/FABGroup.tsx"],
"group": "FAB"
},
"HelperText/HelperText": {
@@ -7500,9 +7412,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/HelperText/HelperText.tsx"
- ]
+ "dependencies": ["src/components/HelperText/HelperText.tsx"]
},
"IconButton/IconButton": {
"filepath": "IconButton/IconButton.tsx",
@@ -7711,9 +7621,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/IconButton/IconButton.tsx"
- ]
+ "dependencies": ["src/components/IconButton/IconButton.tsx"]
},
"Icon": {
"filepath": "Icon.tsx",
@@ -7771,9 +7679,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Icon.tsx"
- ]
+ "dependencies": ["src/components/Icon.tsx"]
},
"List/ListAccordion": {
"filepath": "List/ListAccordion.tsx",
@@ -8122,9 +8028,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/List/ListAccordion.tsx"
- ],
+ "dependencies": ["src/components/List/ListAccordion.tsx"],
"group": "List"
},
"List/ListAccordionGroup": {
@@ -8196,9 +8100,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/List/ListAccordionGroup.tsx"
- ],
+ "dependencies": ["src/components/List/ListAccordionGroup.tsx"],
"group": "List"
},
"List/ListIcon": {
@@ -8249,9 +8151,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/List/ListIcon.tsx"
- ],
+ "dependencies": ["src/components/List/ListIcon.tsx"],
"group": "List"
},
"List/ListItem": {
@@ -8539,9 +8439,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/List/ListItem.tsx"
- ],
+ "dependencies": ["src/components/List/ListItem.tsx"],
"group": "List"
},
"List/ListSection": {
@@ -8606,9 +8504,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/List/ListSection.tsx"
- ],
+ "dependencies": ["src/components/List/ListSection.tsx"],
"group": "List"
},
"List/ListSubheader": {
@@ -8652,9 +8548,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/List/ListSubheader.tsx"
- ],
+ "dependencies": ["src/components/List/ListSubheader.tsx"],
"group": "List"
},
"Menu/Menu": {
@@ -8865,9 +8759,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Menu/Menu.tsx"
- ]
+ "dependencies": ["src/components/Menu/Menu.tsx"]
},
"Menu/MenuItem": {
"filepath": "Menu/MenuItem.tsx",
@@ -9058,9 +8950,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Menu/MenuItem.tsx"
- ],
+ "dependencies": ["src/components/Menu/MenuItem.tsx"],
"group": "Menu"
},
"Modal": {
@@ -9198,9 +9088,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Modal.tsx"
- ]
+ "dependencies": ["src/components/Modal.tsx"]
},
"Portal/Portal": {
"filepath": "Portal/Portal.tsx",
@@ -9241,9 +9129,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Portal/Portal.tsx"
- ]
+ "dependencies": ["src/components/Portal/Portal.tsx"]
},
"Portal/PortalHost": {
"filepath": "Portal/PortalHost.tsx",
@@ -9267,9 +9153,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Portal/PortalHost.tsx"
- ],
+ "dependencies": ["src/components/Portal/PortalHost.tsx"],
"group": "Portal"
},
"ProgressBar": {
@@ -9379,9 +9263,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/ProgressBar.tsx"
- ]
+ "dependencies": ["src/components/ProgressBar.tsx"]
},
"RadioButton/RadioButton": {
"filepath": "RadioButton/RadioButton.tsx",
@@ -9479,9 +9361,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/RadioButton/RadioButton.tsx"
- ]
+ "dependencies": ["src/components/RadioButton/RadioButton.tsx"]
},
"RadioButton/RadioButtonAndroid": {
"filepath": "RadioButton/RadioButtonAndroid.tsx",
@@ -9579,9 +9459,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/RadioButton/RadioButtonAndroid.tsx"
- ],
+ "dependencies": ["src/components/RadioButton/RadioButtonAndroid.tsx"],
"group": "RadioButton"
},
"RadioButton/RadioButtonGroup": {
@@ -9635,9 +9513,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/RadioButton/RadioButtonGroup.tsx"
- ],
+ "dependencies": ["src/components/RadioButton/RadioButtonGroup.tsx"],
"group": "RadioButton"
},
"RadioButton/RadioButtonIOS": {
@@ -9729,9 +9605,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/RadioButton/RadioButtonIOS.tsx"
- ],
+ "dependencies": ["src/components/RadioButton/RadioButtonIOS.tsx"],
"group": "RadioButton"
},
"RadioButton/RadioButtonItem": {
@@ -9976,9 +9850,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/RadioButton/RadioButtonItem.tsx"
- ],
+ "dependencies": ["src/components/RadioButton/RadioButtonItem.tsx"],
"group": "RadioButton"
},
"Searchbar": {
@@ -10360,9 +10232,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Searchbar.tsx"
- ]
+ "dependencies": ["src/components/Searchbar.tsx"]
},
"SegmentedButtons/SegmentedButtons": {
"filepath": "SegmentedButtons/SegmentedButtons.tsx",
@@ -10554,9 +10424,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/SegmentedButtons/SegmentedButtons.tsx"
- ]
+ "dependencies": ["src/components/SegmentedButtons/SegmentedButtons.tsx"]
},
"Snackbar": {
"filepath": "Snackbar.tsx",
@@ -10808,9 +10676,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Snackbar.tsx"
- ]
+ "dependencies": ["src/components/Snackbar.tsx"]
},
"Surface": {
"filepath": "Surface.tsx",
@@ -10954,9 +10820,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Surface.tsx"
- ]
+ "dependencies": ["src/components/Surface.tsx"]
},
"Switch/Switch": {
"filepath": "Switch/Switch.tsx",
@@ -11020,9 +10884,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Switch/Switch.tsx"
- ]
+ "dependencies": ["src/components/Switch/Switch.tsx"]
},
"TextInput/TextInput": {
"filepath": "TextInput/TextInput.tsx",
@@ -11349,9 +11211,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/TextInput/TextInput.tsx"
- ]
+ "dependencies": ["src/components/TextInput/TextInput.tsx"]
},
"TextInput/Adornment/TextInputAffix": {
"filepath": "TextInput/Adornment/TextInputAffix.tsx",
@@ -11449,9 +11309,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/TextInput/Adornment/TextInputAffix.tsx"
- ],
+ "dependencies": ["src/components/TextInput/Adornment/TextInputAffix.tsx"],
"group": "TextInput"
},
"TextInput/Adornment/TextInputIcon": {
@@ -11551,9 +11409,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/TextInput/Adornment/TextInputIcon.tsx"
- ],
+ "dependencies": ["src/components/TextInput/Adornment/TextInputIcon.tsx"],
"group": "TextInput"
},
"ToggleButton/ToggleButton": {
@@ -11714,9 +11570,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/ToggleButton/ToggleButton.tsx"
- ]
+ "dependencies": ["src/components/ToggleButton/ToggleButton.tsx"]
},
"ToggleButton/ToggleButtonGroup": {
"filepath": "ToggleButton/ToggleButtonGroup.tsx",
@@ -11778,9 +11632,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/ToggleButton/ToggleButtonGroup.tsx"
- ],
+ "dependencies": ["src/components/ToggleButton/ToggleButtonGroup.tsx"],
"group": "ToggleButton"
},
"ToggleButton/ToggleButtonRow": {
@@ -11847,9 +11699,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/ToggleButton/ToggleButtonRow.tsx"
- ],
+ "dependencies": ["src/components/ToggleButton/ToggleButtonRow.tsx"],
"group": "ToggleButton"
},
"Tooltip/Tooltip": {
@@ -11917,9 +11767,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Tooltip/Tooltip.tsx"
- ]
+ "dependencies": ["src/components/Tooltip/Tooltip.tsx"]
},
"TouchableRipple/TouchableRipple": {
"filepath": "TouchableRipple/TouchableRipple.tsx",
@@ -12118,9 +11966,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/TouchableRipple/TouchableRipple.tsx"
- ]
+ "dependencies": ["src/components/TouchableRipple/TouchableRipple.tsx"]
},
"Typography/Text": {
"filepath": "Typography/Text.tsx",
@@ -12177,9 +12023,7 @@
}
},
"type": "component",
- "dependencies": [
- "src/components/Typography/Text.tsx"
- ]
+ "dependencies": ["src/components/Typography/Text.tsx"]
}
}
}
diff --git a/docs/src/data/componentDocs6x.json b/docs/src/data/componentDocs6x.json
new file mode 100644
index 0000000000..dcacb1f99f
--- /dev/null
+++ b/docs/src/data/componentDocs6x.json
@@ -0,0 +1,12256 @@
+{
+ "docs": {
+ "ActivityIndicator": {
+ "filepath": "ActivityIndicator.tsx",
+ "title": "ActivityIndicator",
+ "description": "Activity indicator is used to present progress of some activity in the app.\nIt can be used as a drop-in replacement for the ActivityIndicator shipped with React Native.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ActivityIndicator, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n "
+ },
+ "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\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\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\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\nexport default MyComponent;\n```",
+ "displayName": "Appbar.Action",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom color for action icon."
+ },
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Name of the icon to show."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Optional icon size.",
+ "defaultValue": {
+ "value": "24",
+ "computed": false
+ }
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "isLeading": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nWhether it's the leading button. Note: If `Appbar.BackAction` is present, it will be rendered before any `isLeading` icons."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Appbar/AppbarAction.tsx"
+ ],
+ "group": "Appbar"
+ },
+ "Appbar/AppbarBackAction": {
+ "filepath": "Appbar/AppbarBackAction.tsx",
+ "title": "Appbar.BackAction",
+ "description": "A component used to display a back button in the appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} />\n \n);\n\nexport default MyComponent;\n```",
+ "link": "appbar-back-action",
+ "data": {
+ "description": "A component used to display a back button in the appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} />\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Appbar.BackAction",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom color for back icon."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Optional icon size."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button.",
+ "defaultValue": {
+ "value": "'Back'",
+ "computed": false
+ }
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Appbar/AppbarBackAction.tsx"
+ ],
+ "group": "Appbar"
+ },
+ "Appbar/AppbarContent": {
+ "filepath": "Appbar/AppbarContent.tsx",
+ "title": "Appbar.Content",
+ "description": "A component used to display a title in an appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n);\n\nexport default MyComponent;\n```",
+ "link": "appbar-content",
+ "data": {
+ "description": "A component used to display a title in an appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Appbar.Content",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "title": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Text or component for the title."
+ },
+ "titleStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the title, if `title` is a string."
+ },
+ "titleRef": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRefObject",
+ "raw": "React.RefObject",
+ "elements": [
+ {
+ "name": "TextRef"
+ }
+ ]
+ },
+ "description": "Reference for the title."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "If true, disable all interactions for this component."
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for the text."
+ },
+ "titleMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a title font can reach."
+ },
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'small' | 'medium' | 'large' | 'center-aligned'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'small'"
+ },
+ {
+ "name": "literal",
+ "value": "'medium'"
+ },
+ {
+ "name": "literal",
+ "value": "'large'"
+ },
+ {
+ "name": "literal",
+ "value": "'center-aligned'"
+ }
+ ]
+ },
+ "description": "@internal",
+ "defaultValue": {
+ "value": "'small'",
+ "computed": false
+ }
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests.",
+ "defaultValue": {
+ "value": "'appbar-content'",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Appbar/AppbarContent.tsx"
+ ],
+ "group": "Appbar"
+ },
+ "Appbar/AppbarHeader": {
+ "filepath": "Appbar/AppbarHeader.tsx",
+ "title": "Appbar.Header",
+ "description": "A component to use as a header at the top of the screen.\nIt can contain the screen title, controls such as navigation buttons, menu button etc.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const _goBack = () => console.log('Went back');\n\n const _handleSearch = () => console.log('Searching');\n\n const _handleMore = () => console.log('Shown more');\n\n return (\n \n \n );\n};\n\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\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 "
+ },
+ "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 "
+ },
+ "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 "
+ },
+ "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 setVisible(false),\n },\n {\n label: 'Learn more',\n onPress: () => setVisible(false),\n },\n ]}\n icon={({size}) => (\n ",
+ "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 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 ) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "intersection",
+ "raw": "TouchableRippleProps & {\n key: string;\n route: Route;\n children: React.ReactNode;\n borderless?: boolean;\n centered?: boolean;\n rippleColor?: ColorValue;\n}",
+ "elements": [
+ {
+ "name": "TouchableRippleProps"
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n key: string;\n route: Route;\n children: React.ReactNode;\n borderless?: boolean;\n centered?: boolean;\n rippleColor?: ColorValue;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "key",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ },
+ {
+ "key": "children",
+ "value": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode",
+ "required": true
+ }
+ },
+ {
+ "key": "borderless",
+ "value": {
+ "name": "boolean",
+ "required": false
+ }
+ },
+ {
+ "key": "centered",
+ "value": {
+ "name": "boolean",
+ "required": false
+ }
+ },
+ {
+ "key": "rippleColor",
+ "value": {
+ "name": "ColorValue",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to be used as the touchable for the tab item.\nRenders a `TouchableRipple` on Android and `Pressable` on iOS."
+ },
+ "getAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => string | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "string | undefined",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.\nUses `route.accessibilityLabel` by default."
+ },
+ "getBadge": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => boolean | number | string | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "boolean | number | string | undefined",
+ "elements": [
+ {
+ "name": "boolean"
+ },
+ {
+ "name": "number"
+ },
+ {
+ "name": "string"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get badge for the tab, uses `route.badge` by default."
+ },
+ "getLabelText": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => string | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "string | undefined",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component."
+ },
+ "getLazy": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => boolean | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "boolean | undefined",
+ "elements": [
+ {
+ "name": "boolean"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get lazy for the current screen. Uses true by default.",
+ "defaultValue": {
+ "value": "({ route }: { route: Route }) => route.lazy",
+ "computed": false
+ }
+ },
+ "getTestID": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route }) => string | undefined",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "union",
+ "raw": "string | undefined",
+ "elements": [
+ {
+ "name": "string"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ }
+ }
+ },
+ "description": "Get the id to locate this tab button in tests, uses `route.testID` by default."
+ },
+ "onTabPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route } & TabPressEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "intersection",
+ "raw": "{ route: Route } & TabPressEvent",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n defaultPrevented: boolean;\n preventDefault(): void;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "defaultPrevented",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ },
+ {
+ "key": "preventDefault",
+ "value": {
+ "name": "void",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on tab press. It receives the route for the pressed tab, useful for things like scroll to top."
+ },
+ "onTabLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { route: Route } & TabPressEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "intersection",
+ "raw": "{ route: Route } & TabPressEvent",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ route: Route }",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n defaultPrevented: boolean;\n preventDefault(): void;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "defaultPrevented",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ },
+ {
+ "key": "preventDefault",
+ "value": {
+ "name": "void",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on tab long press. It receives the route for the pressed tab, useful for things like custom action when longed pressed."
+ },
+ "activeColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for icon and label in the active tab."
+ },
+ "inactiveColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for icon and label in the inactive tab."
+ },
+ "sceneAnimationEnabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether animation is enabled for scenes transitions in `shifting` mode.\nBy default, the scenes cross-fade during tab change when `shifting` is enabled.\nSpecify `sceneAnimationEnabled` as `false` to disable the animation.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "sceneAnimationType": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'opacity' | 'shifting'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'opacity'"
+ },
+ {
+ "name": "literal",
+ "value": "'shifting'"
+ }
+ ]
+ },
+ "description": "The scene animation effect. Specify `'shifting'` for a different effect.\nBy default, 'opacity' will be used.",
+ "defaultValue": {
+ "value": "'opacity'",
+ "computed": false
+ }
+ },
+ "sceneAnimationEasing": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "EasingFunction | undefined",
+ "elements": [
+ {
+ "name": "EasingFunction"
+ },
+ {
+ "name": "undefined"
+ }
+ ]
+ },
+ "description": "The scene animation Easing."
+ },
+ "keyboardHidesNavigationBar": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the bottom navigation bar is hidden when keyboard is shown.\nOn Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.",
+ "defaultValue": {
+ "value": "Platform.OS === 'android'",
+ "computed": false
+ }
+ },
+ "safeAreaInsets": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n top?: number;\n right?: number;\n bottom?: number;\n left?: number;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "top",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ },
+ {
+ "key": "right",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ },
+ {
+ "key": "bottom",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ },
+ {
+ "key": "left",
+ "value": {
+ "name": "number",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ "description": "Safe area insets for the tab bar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS.\nThe bottom insets for iOS is added by default. You can override the behavior with this option."
+ },
+ "barStyle": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": "Style for the bottom navigation bar. You can pass a custom background color here:\n\n```js\nbarStyle={{ backgroundColor: '#694fad' }}\n```"
+ },
+ "labelMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a label font can reach.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "activeIndicatorStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes",
+ "defaultValue": {
+ "value": "'bottom-navigation'",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/BottomNavigation/BottomNavigation.tsx"
+ ]
+ },
+ "BottomNavigation/BottomNavigationBar": {
+ "filepath": "BottomNavigation/BottomNavigationBar.tsx",
+ "title": "BottomNavigation.Bar",
+ "description": "A navigation bar which can easily be integrated with [React Navigation's Bottom Tabs Navigator](https://reactnavigation.org/docs/bottom-tab-navigator/).\n\n## Usage\n### without React Navigation\n```js\nimport React from 'react';\nimport { useState } from 'react';\nimport { View } from 'react-native';\nimport { BottomNavigation, Text, Provider } from 'react-native-paper';\nimport MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';\n\nfunction HomeScreen() {\n return (\n \n Home! \n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings! \n \n );\n}\n\nexport default function MyComponent() {\n const [index, setIndex] = useState(0);\n\n const routes = [\n { key: 'home', title: 'Home', icon: 'home' },\n { key: 'settings', title: 'Settings', icon: 'cog' },\n ];\n\n const renderScene = ({ route }) => {\n switch (route.key) {\n case 'home':\n return \n {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}\n```",
+ "link": "bottom-navigation-bar",
+ "data": {
+ "description": "A navigation bar which can easily be integrated with [React Navigation's Bottom Tabs Navigator](https://reactnavigation.org/docs/bottom-tab-navigator/).\n\n## Usage\n### without React Navigation\n```js\nimport React from 'react';\nimport { useState } from 'react';\nimport { View } from 'react-native';\nimport { BottomNavigation, Text, Provider } from 'react-native-paper';\nimport MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';\n\nfunction HomeScreen() {\n return (\n \n Home! \n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings! \n \n );\n}\n\nexport default function MyComponent() {\n const [index, setIndex] = useState(0);\n\n const routes = [\n { key: 'home', title: 'Home', icon: 'home' },\n { key: 'settings', title: 'Settings', icon: 'cog' },\n ];\n\n const renderScene = ({ route }) => {\n switch (route.key) {\n case 'home':\n return \n {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}\n```",
+ "displayName": "BottomNavigation.Bar",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "shifting": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.\n\nBy default, this is `false` with theme version 3 and `true` when you have more than 3 tabs.\nPass `shifting={false}` to explicitly disable this animation, or `shifting={true}` to always use this animation.\nNote that you need at least 2 tabs be able to run this animation."
+ },
+ "labeled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show labels in tabs. When `false`, only icons will be displayed.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "compact": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether tabs should be spread across the entire width."
+ },
+ "navigationState": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n index: number;\n routes: Route[];\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "index",
+ "value": {
+ "name": "number",
+ "required": true
+ }
+ },
+ {
+ "key": "routes",
+ "value": {
+ "name": "Array",
+ "elements": [
+ {
+ "name": "Route"
+ }
+ ],
+ "raw": "Route[]",
+ "required": true
+ }
+ }
+ ]
+ }
+ },
+ "description": "State for the bottom navigation. The state should contain the following properties:\n\n- `index`: a number representing the index of the active route in the `routes` array\n- `routes`: an array containing a list of route objects used for rendering the tabs\n\nEach route object should contain the following properties:\n\n- `key`: a unique key to identify the route (required)\n- `title`: title of the route to use as the tab label\n- `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x\n- `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3\n- `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.\n- `accessibilityLabel`: accessibility label for the tab button\n- `testID`: test id for the tab button\n\nExample:\n\n```js\n{\n index: 1,\n routes: [\n { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},\n { key: 'albums', title: 'Albums', focusedIcon: 'album' },\n { key: 'recents', title: 'Recents', focusedIcon: 'history' },\n { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },\n ]\n}\n```\n\n`BottomNavigation.Bar` is a controlled component, which means the `index` needs to be updated via the `onTabPress` callback."
+ },
+ "renderIcon": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: {\n route: Route;\n focused: boolean;\n color: ColorValue;\n}) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n route: Route;\n focused: boolean;\n color: ColorValue;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ },
+ {
+ "key": "focused",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ },
+ {
+ "key": "color",
+ "value": {
+ "name": "ColorValue",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React Element to be used as tab icon."
+ },
+ "renderLabel": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: {\n route: Route;\n focused: boolean;\n color: ColorValue;\n}) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n route: Route;\n focused: boolean;\n color: ColorValue;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ },
+ {
+ "key": "focused",
+ "value": {
+ "name": "boolean",
+ "required": true
+ }
+ },
+ {
+ "key": "color",
+ "value": {
+ "name": "ColorValue",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which React Element to be used as tab label."
+ },
+ "renderTouchable": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: TouchableProps) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "intersection",
+ "raw": "TouchableRippleProps & {\n key: string;\n route: Route;\n children: React.ReactNode;\n borderless?: boolean;\n centered?: boolean;\n rippleColor?: ColorValue;\n}",
+ "elements": [
+ {
+ "name": "TouchableRippleProps"
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n key: string;\n route: Route;\n children: React.ReactNode;\n borderless?: boolean;\n centered?: boolean;\n rippleColor?: ColorValue;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "key",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "route",
+ "value": {
+ "name": "Route",
+ "required": true
+ }
+ },
+ {
+ "key": "children",
+ "value": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode",
+ "required": true
+ }
+ },
+ {
+ "key": "borderless",
+ "value": {
+ "name": "boolean",
+ "required": false
+ }
+ },
+ {
+ "key": "centered",
+ "value": {
+ "name": "boolean",
+ "required": false
+ }
+ },
+ {
+ "key": "rippleColor",
+ "value": {
+ "name": "ColorValue",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to be used as the touchable for the tab item.\nRenders a `TouchableRipple` on Android and `Pressable` on iOS.",
+ "defaultValue": {
+ "value": "({ key, ...props }: TouchableProps) => (\n "
+ }
+ ],
+ "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 console.log('Pressed')}>\n Press me\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 console.log('Pressed')}>\n Press me\n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Button",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'text'"
+ },
+ {
+ "name": "literal",
+ "value": "'outlined'"
+ },
+ {
+ "name": "literal",
+ "value": "'contained'"
+ },
+ {
+ "name": "literal",
+ "value": "'elevated'"
+ },
+ {
+ "name": "literal",
+ "value": "'contained-tonal'"
+ }
+ ]
+ },
+ "description": "Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.\n- `text` - flat button without background or outline, used for the lowest priority actions, especially when presenting multiple options.\n- `outlined` - button with an outline without background, typically used for important, but not primary action – represents medium emphasis.\n- `contained` - button with a background color, used for important action, have the most visual impact and high emphasis.\n- `elevated` - button with a background color and elevation, used when absolutely necessary e.g. button requires visual separation from a patterned background. @supported Available in v5.x with theme version 3\n- `contained-tonal` - button with a secondary background color, an alternative middle ground between contained and outlined buttons. @supported Available in v5.x with theme version 3",
+ "defaultValue": {
+ "value": "'text'",
+ "computed": false
+ }
+ },
+ "dark": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for:\n * `contained` mode for theme version 2\n * `contained`, `contained-tonal` and `elevated` modes for theme version 3."
+ },
+ "compact": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Use a compact look, useful for `text` buttons in a row."
+ },
+ "buttonColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom button's background color."
+ },
+ "textColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom button's text color."
+ },
+ "loading": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show a loading indicator."
+ },
+ "icon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display for the `Button`."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Label text of the button."
+ },
+ "uppercase": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Make the label text uppercased. Note that this won't work if you pass React elements as children."
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button."
+ },
+ "accessibilityHint": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility hint for the button. This is read by the screen reader when the user taps the button."
+ },
+ "accessibilityRole": {
+ "required": false,
+ "tsType": {
+ "name": "AccessibilityRole"
+ },
+ "description": "Accessibility role for the button. The \"button\" role is set by default.",
+ "defaultValue": {
+ "value": "'button'",
+ "computed": false
+ }
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "onPressIn": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute as soon as the touchable element is pressed and invoked even before onPress."
+ },
+ "onPressOut": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute as soon as the touch is released even before onPress."
+ },
+ "onLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on long press."
+ },
+ "delayLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The number of milliseconds a user must touch the element before executing `onLongPress`."
+ },
+ "contentStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style of button's inner content.\nUse this prop to apply custom height and width, to set a custom padding or to set the icon on the right with `flexDirection: 'row-reverse'`."
+ },
+ "maxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a text font can reach."
+ },
+ "hitSlop": {
+ "required": false,
+ "tsType": {
+ "name": "TouchableRippleProps['hitSlop']",
+ "raw": "TouchableRippleProps['hitSlop']"
+ },
+ "description": "Sets additional distance outside of element in which a press can be detected."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "labelStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the button text."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "touchableRef": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRefObject",
+ "raw": "React.RefObject",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": "Reference for the touchable"
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests.",
+ "defaultValue": {
+ "value": "'button'",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Button/Button.tsx"
+ ]
+ },
+ "Card/Card": {
+ "filepath": "Card/Card.tsx",
+ "title": "Card",
+ "description": "A card is a sheet of material that serves as an entry point to more detailed information.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar, Button, Card, Text } from 'react-native-paper';\n\nconst LeftContent = props => \n \n Card title \n Card content \n \n \n Cancel \n Ok \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 \n Card title \n Card content \n \n \n Cancel \n Ok \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 Cancel \n Ok \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 Cancel \n Ok \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\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\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 />\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 />\n);\n\nexport default MyComponent;\n```",
+ "displayName": "Card.Title",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "title": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Text for the title. Note that this will only accept a string or ``-based node."
+ },
+ "titleStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the title."
+ },
+ "titleNumberOfLines": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Number of lines for the title.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "titleVariant": {
+ "required": false,
+ "tsType": {
+ "name": "TypescaleKey"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nTitle text variant defines appropriate text styles for type role and its size.\nAvailable variants:\n\n Display: `displayLarge`, `displayMedium`, `displaySmall`\n\n Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`\n\n Title: `titleLarge`, `titleMedium`, `titleSmall`\n\n Label: `labelLarge`, `labelMedium`, `labelSmall`\n\n Body: `bodyLarge`, `bodyMedium`, `bodySmall`",
+ "defaultValue": {
+ "value": "'bodyLarge'",
+ "computed": false
+ }
+ },
+ "subtitle": {
+ "required": false,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Text for the subtitle. Note that this will only accept a string or ``-based node."
+ },
+ "subtitleStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the subtitle."
+ },
+ "subtitleNumberOfLines": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Number of lines for the subtitle.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "subtitleVariant": {
+ "required": false,
+ "tsType": {
+ "name": "TypescaleKey"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nSubtitle text variant defines appropriate text styles for type role and its size.\nAvailable variants:\n\n Display: `displayLarge`, `displayMedium`, `displaySmall`\n\n Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`\n\n Title: `titleLarge`, `titleMedium`, `titleSmall`\n\n Label: `labelLarge`, `labelMedium`, `labelSmall`\n\n Body: `bodyLarge`, `bodyMedium`, `bodySmall`",
+ "defaultValue": {
+ "value": "'bodyMedium'",
+ "computed": false
+ }
+ },
+ "left": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { size: number }) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ size: number }",
+ "signature": {
+ "properties": [
+ {
+ "key": "size",
+ "value": {
+ "name": "number",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to display on the left side."
+ },
+ "leftStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the left element wrapper."
+ },
+ "right": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(props: { size: number }) => React.ReactNode",
+ "signature": {
+ "arguments": [
+ {
+ "name": "props",
+ "type": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{ size: number }",
+ "signature": {
+ "properties": [
+ {
+ "key": "size",
+ "value": {
+ "name": "number",
+ "required": true
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "return": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ }
+ }
+ },
+ "description": "Callback which returns a React element to display on the right side."
+ },
+ "rightStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for the right element wrapper."
+ },
+ "index": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "@internal"
+ },
+ "total": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "@internal"
+ },
+ "titleMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a title font can reach."
+ },
+ "subtitleMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a subtitle font can reach."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Card/CardTitle.tsx"
+ ],
+ "group": "Card"
+ },
+ "Checkbox/Checkbox": {
+ "filepath": "Checkbox/Checkbox.tsx",
+ "title": "Checkbox",
+ "description": "Checkboxes allow the selection of multiple options from a set.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [checked, setChecked] = React.useState(false);\n\n return (\n {\n setChecked(!checked);\n }}\n />\n );\n};\n\nexport default MyComponent;\n```",
+ "link": "checkbox",
+ "data": {
+ "description": "Checkboxes allow the selection of multiple options from a set.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [checked, setChecked] = React.useState(false);\n\n return (\n {\n setChecked(!checked);\n }}\n />\n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "Checkbox",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "status": {
+ "required": true,
+ "tsType": {
+ "name": "union",
+ "raw": "'checked' | 'unchecked' | 'indeterminate'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'checked'"
+ },
+ {
+ "name": "literal",
+ "value": "'unchecked'"
+ },
+ {
+ "name": "literal",
+ "value": "'indeterminate'"
+ }
+ ]
+ },
+ "description": "Status of checkbox."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether checkbox is disabled."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "uncheckedColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom color for unchecked checkbox."
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom color for checkbox."
+ },
+ "error": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the checkbox is in an error state. When true, the outline\n(unchecked) and container (selected) use `theme.colors.error`.\n`disabled` and explicit `color`/`uncheckedColor` overrides take\nprecedence."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Custom style to override the default tap target. Passed through to\nthe underlying `TouchableRipple`."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Checkbox/Checkbox.tsx"
+ ]
+ },
+ "Checkbox/CheckboxItem": {
+ "filepath": "Checkbox/CheckboxItem.tsx",
+ "title": "Checkbox.Item",
+ "description": "Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n);\n\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\nexport default MyComponent;\n```",
+ "displayName": "Checkbox.Item",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "status": {
+ "required": true,
+ "tsType": {
+ "name": "union",
+ "raw": "'checked' | 'unchecked' | 'indeterminate'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'checked'"
+ },
+ {
+ "name": "literal",
+ "value": "'unchecked'"
+ },
+ {
+ "name": "literal",
+ "value": "'indeterminate'"
+ }
+ ]
+ },
+ "description": "Status of checkbox."
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether checkbox is disabled."
+ },
+ "label": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Label to be displayed on the item."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "onLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on long press."
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.",
+ "defaultValue": {
+ "value": "label",
+ "computed": true
+ }
+ },
+ "uncheckedColor": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for unchecked checkbox."
+ },
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Custom color for checkbox."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Additional styles for container View."
+ },
+ "labelMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a label font can reach.",
+ "defaultValue": {
+ "value": "1.5",
+ "computed": false
+ }
+ },
+ "labelStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style that is passed to Label element."
+ },
+ "labelVariant": {
+ "required": false,
+ "tsType": {
+ "name": "TypescaleKey"
+ },
+ "description": "@supported Available in v5.x with theme version 3\n\nLabel text variant defines appropriate text styles for type role and its size.\nAvailable variants:\n\n Display: `displayLarge`, `displayMedium`, `displaySmall`\n\n Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`\n\n Title: `titleLarge`, `titleMedium`, `titleSmall`\n\n Label: `labelLarge`, `labelMedium`, `labelSmall`\n\n Body: `bodyLarge`, `bodyMedium`, `bodySmall`",
+ "defaultValue": {
+ "value": "'bodyLarge'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests."
+ },
+ "position": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'leading' | 'trailing'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'leading'"
+ },
+ {
+ "name": "literal",
+ "value": "'trailing'"
+ }
+ ]
+ },
+ "description": "Checkbox control position.",
+ "defaultValue": {
+ "value": "'trailing'",
+ "computed": false
+ }
+ },
+ "hitSlop": {
+ "required": false,
+ "tsType": {
+ "name": "TouchableRippleProps['hitSlop']",
+ "raw": "TouchableRippleProps['hitSlop']"
+ },
+ "description": "Sets additional distance outside of element in which a press can be detected."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Checkbox/CheckboxItem.tsx"
+ ],
+ "group": "Checkbox"
+ },
+ "Chip/Chip": {
+ "filepath": "Chip/Chip.tsx",
+ "title": "Chip",
+ "description": "Chips are compact elements that can represent inputs, attributes, or actions.\nThey can have an icon or avatar on the left, and a close button icon on the right.\nThey are typically used to:\n\n Present multiple options \n Represent attributes active or chosen \n Present filter options \n Trigger actions related to primary content \n \n\n## Usage\n```js\nimport * as React from 'react';\nimport { Chip } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}>Example Chip \n);\n\nexport default MyComponent;\n```",
+ "link": "chip",
+ "data": {
+ "description": "Chips are compact elements that can represent inputs, attributes, or actions.\nThey can have an icon or avatar on the left, and a close button icon on the right.\nThey are typically used to:\n\n Present multiple options \n Represent attributes active or chosen \n Present filter options \n Trigger actions related to primary content \n \n\n## Usage\n```js\nimport * as React from 'react';\nimport { Chip } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}>Example Chip \n);\n\nexport default MyComponent;\n```",
+ "displayName": "Chip",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'flat' | 'outlined'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'flat'"
+ },
+ {
+ "name": "literal",
+ "value": "'outlined'"
+ }
+ ]
+ },
+ "description": "Mode of the chip.\n- `flat` - flat chip without outline.\n- `outlined` - chip with an outline.",
+ "defaultValue": {
+ "value": "'flat'",
+ "computed": false
+ }
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Text content of the `Chip`."
+ },
+ "icon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display for the `Chip`. Both icon and avatar cannot be specified."
+ },
+ "avatar": {
+ "required": false,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Avatar to display for the `Chip`. Both icon and avatar cannot be specified."
+ },
+ "closeIcon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display as the close button for the `Chip`. The icon appears only when the onClose prop is specified."
+ },
+ "selected": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether chip is selected.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "selectedColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Whether to style the chip color as selected.\nNote: With theme version 3 `selectedColor` doesn't apply to the `icon`.\n If you want specify custom color for the `icon`, render your own `Icon` component."
+ },
+ "showSelectedOverlay": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nWhether to display overlay on selected chip"
+ },
+ "showSelectedCheck": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to display default check icon on selected chip.\nNote: Check will not be shown if `icon` is specified. If specified, `icon` will be shown regardless of `selected`.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the chip. This is read by the screen reader when the user taps the chip."
+ },
+ "closeIconAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the close icon. This is read by the screen reader when the user taps the close icon.",
+ "defaultValue": {
+ "value": "'Close'",
+ "computed": false
+ }
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "onLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on long press."
+ },
+ "onPressIn": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute as soon as the touchable element is pressed and invoked even before onPress."
+ },
+ "onPressOut": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute as soon as the touch is released even before onPress."
+ },
+ "onClose": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on close button press. The close button appears only when this prop is specified."
+ },
+ "delayLongPress": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The number of milliseconds a user must touch the element before executing `onLongPress`."
+ },
+ "compact": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nSets smaller horizontal paddings `12dp` around label, when there is only label."
+ },
+ "elevated": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "@supported Available in v5.x with theme version 3\nWhether chip should have the elevation.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "textStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style of chip's text"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "hitSlop": {
+ "required": false,
+ "tsType": {
+ "name": "TouchableRippleProps['hitSlop']",
+ "raw": "TouchableRippleProps['hitSlop']"
+ },
+ "description": "Sets additional distance outside of element in which a press can be detected."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Pass down testID from chip props to touchable for Detox tests.",
+ "defaultValue": {
+ "value": "'chip'",
+ "computed": false
+ }
+ },
+ "ellipsizeMode": {
+ "required": false,
+ "tsType": {
+ "name": "EllipsizeProp"
+ },
+ "description": "Ellipsize Mode for the children text"
+ },
+ "maxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a text font can reach."
+ },
+ "accessibilityRole": {
+ "defaultValue": {
+ "value": "'button'",
+ "computed": false
+ },
+ "required": false,
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Chip/Chip.tsx"
+ ]
+ },
+ "DataTable/DataTable": {
+ "filepath": "DataTable/DataTable.tsx",
+ "title": "DataTable",
+ "description": "Data tables allow displaying sets of data.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [page, setPage] = React.useState(0);\n const [numberOfItemsPerPageList] = React.useState([2, 3, 4]);\n const [itemsPerPage, onItemsPerPageChange] = React.useState(\n numberOfItemsPerPageList[0]\n );\n\n const [items] = React.useState([\n {\n key: 1,\n name: 'Cupcake',\n calories: 356,\n fat: 16,\n },\n {\n key: 2,\n name: 'Eclair',\n calories: 262,\n fat: 16,\n },\n {\n key: 3,\n name: 'Frozen yogurt',\n calories: 159,\n fat: 6,\n },\n {\n key: 4,\n name: 'Gingerbread',\n calories: 305,\n fat: 3.7,\n },\n ]);\n\n const from = page * itemsPerPage;\n const to = Math.min((page + 1) * itemsPerPage, items.length);\n\n React.useEffect(() => {\n setPage(0);\n }, [itemsPerPage]);\n\n return (\n \n \n Dessert \n Calories \n Fat \n \n\n {items.slice(from, to).map((item) => (\n \n {item.name} \n {item.calories} \n {item.fat} \n \n ))}\n\n setPage(page)}\n label={`${from + 1}-${to} of ${items.length}`}\n numberOfItemsPerPageList={numberOfItemsPerPageList}\n numberOfItemsPerPage={itemsPerPage}\n onItemsPerPageChange={onItemsPerPageChange}\n showFastPaginationControls\n selectPageDropdownLabel={'Rows per page'}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "data-table",
+ "data": {
+ "description": "Data tables allow displaying sets of data.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [page, setPage] = React.useState(0);\n const [numberOfItemsPerPageList] = React.useState([2, 3, 4]);\n const [itemsPerPage, onItemsPerPageChange] = React.useState(\n numberOfItemsPerPageList[0]\n );\n\n const [items] = React.useState([\n {\n key: 1,\n name: 'Cupcake',\n calories: 356,\n fat: 16,\n },\n {\n key: 2,\n name: 'Eclair',\n calories: 262,\n fat: 16,\n },\n {\n key: 3,\n name: 'Frozen yogurt',\n calories: 159,\n fat: 6,\n },\n {\n key: 4,\n name: 'Gingerbread',\n calories: 305,\n fat: 3.7,\n },\n ]);\n\n const from = page * itemsPerPage;\n const to = Math.min((page + 1) * itemsPerPage, items.length);\n\n React.useEffect(() => {\n setPage(0);\n }, [itemsPerPage]);\n\n return (\n \n \n Dessert \n Calories \n Fat \n \n\n {items.slice(from, to).map((item) => (\n \n {item.name} \n {item.calories} \n {item.fat} \n \n ))}\n\n setPage(page)}\n label={`${from + 1}-${to} of ${items.length}`}\n numberOfItemsPerPageList={numberOfItemsPerPageList}\n numberOfItemsPerPage={itemsPerPage}\n onItemsPerPageChange={onItemsPerPageChange}\n showFastPaginationControls\n selectPageDropdownLabel={'Rows per page'}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "DataTable",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `DataTable`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/DataTable/DataTable.tsx"
+ ]
+ },
+ "DataTable/DataTableCell": {
+ "filepath": "DataTable/DataTableCell.tsx",
+ "title": "DataTable.Cell",
+ "description": "A component to show a single cell inside of a table.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n 1 \n 2 \n 3 \n 4 \n \n);\n\nexport default MyComponent;\n```\n\nIf you want to support multiline text, please use View instead, as multiline text doesn't comply with\nMD Guidelines (https://github.com/callstack/react-native-paper/issues/2381).\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "link": "data-table-cell",
+ "data": {
+ "description": "A component to show a single cell inside of a table.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n 1 \n 2 \n 3 \n 4 \n \n);\n\nexport default MyComponent;\n```\n\nIf you want to support multiline text, please use View instead, as multiline text doesn't comply with\nMD Guidelines (https://github.com/callstack/react-native-paper/issues/2381).\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "displayName": "DataTable.Cell",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `DataTableCell`."
+ },
+ "numeric": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Align the text to the right. Generally monetary or number fields are aligned to right."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "textStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Text content style of the `DataTableCell`."
+ },
+ "maxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a text font can reach."
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "testID to be used on tests."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/DataTable/DataTableCell.tsx"
+ ],
+ "group": "DataTable"
+ },
+ "DataTable/DataTableHeader": {
+ "filepath": "DataTable/DataTableHeader.tsx",
+ "title": "DataTable.Header",
+ "description": "A component to display title in table header.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n Dessert\n \n Calories \n Fat (g) \n \n \n);\n\nexport default MyComponent;\n```",
+ "link": "data-table-header",
+ "data": {
+ "description": "A component to display title in table header.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n Dessert\n \n Calories \n Fat (g) \n \n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "DataTable.Header",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `DataTableHeader`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/DataTable/DataTableHeader.tsx"
+ ],
+ "group": "DataTable"
+ },
+ "DataTable/DataTablePagination": {
+ "filepath": "DataTable/DataTablePagination.tsx",
+ "title": "DataTable.Pagination",
+ "description": "A component to show pagination for data table.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst numberOfItemsPerPageList = [2, 3, 4];\n\nconst items = [\n {\n key: 1,\n name: 'Page 1',\n },\n {\n key: 2,\n name: 'Page 2',\n },\n {\n key: 3,\n name: 'Page 3',\n },\n];\n\nconst MyComponent = () => {\n const [page, setPage] = React.useState(0);\n const [numberOfItemsPerPage, onItemsPerPageChange] = React.useState(numberOfItemsPerPageList[0]);\n const from = page * numberOfItemsPerPage;\n const to = Math.min((page + 1) * numberOfItemsPerPage, items.length);\n\n React.useEffect(() => {\n setPage(0);\n }, [numberOfItemsPerPage]);\n\n return (\n \n setPage(page)}\n label={`${from + 1}-${to} of ${items.length}`}\n showFastPaginationControls\n numberOfItemsPerPageList={numberOfItemsPerPageList}\n numberOfItemsPerPage={numberOfItemsPerPage}\n onItemsPerPageChange={onItemsPerPageChange}\n selectPageDropdownLabel={'Rows per page'}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "data-table-pagination",
+ "data": {
+ "description": "A component to show pagination for data table.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst numberOfItemsPerPageList = [2, 3, 4];\n\nconst items = [\n {\n key: 1,\n name: 'Page 1',\n },\n {\n key: 2,\n name: 'Page 2',\n },\n {\n key: 3,\n name: 'Page 3',\n },\n];\n\nconst MyComponent = () => {\n const [page, setPage] = React.useState(0);\n const [numberOfItemsPerPage, onItemsPerPageChange] = React.useState(numberOfItemsPerPageList[0]);\n const from = page * numberOfItemsPerPage;\n const to = Math.min((page + 1) * numberOfItemsPerPage, items.length);\n\n React.useEffect(() => {\n setPage(0);\n }, [numberOfItemsPerPage]);\n\n return (\n \n setPage(page)}\n label={`${from + 1}-${to} of ${items.length}`}\n showFastPaginationControls\n numberOfItemsPerPageList={numberOfItemsPerPageList}\n numberOfItemsPerPage={numberOfItemsPerPage}\n onItemsPerPageChange={onItemsPerPageChange}\n selectPageDropdownLabel={'Rows per page'}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "DataTable.Pagination",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "page": {
+ "required": true,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The currently visible page (starting with 0)."
+ },
+ "numberOfPages": {
+ "required": true,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The total number of pages."
+ },
+ "onPageChange": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(page: number) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "page",
+ "type": {
+ "name": "number"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on page change."
+ },
+ "showFastPaginationControls": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show fast forward and fast rewind buttons in pagination. False by default.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "numberOfItemsPerPage": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The current number of rows per page."
+ },
+ "numberOfItemsPerPageList": {
+ "required": false,
+ "tsType": {
+ "name": "Array",
+ "elements": [
+ {
+ "name": "number"
+ }
+ ],
+ "raw": "Array"
+ },
+ "description": "Options for a number of rows per page to choose from."
+ },
+ "onItemsPerPageChange": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(numberOfItemsPerPage: number) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "numberOfItemsPerPage",
+ "type": {
+ "name": "number"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "The function to set the number of rows per page."
+ },
+ "selectPageDropdownLabel": {
+ "required": false,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Label text for select page dropdown to display."
+ },
+ "selectPageDropdownAccessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "AccessibilityLabel for `selectPageDropdownLabel`."
+ },
+ "label": {
+ "required": false,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Label text to display which indicates current pagination."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "AccessibilityLabel for `label`."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/DataTable/DataTablePagination.tsx"
+ ],
+ "group": "DataTable"
+ },
+ "DataTable/DataTableRow": {
+ "filepath": "DataTable/DataTableRow.tsx",
+ "title": "DataTable.Row",
+ "description": "A component to show a single row inside of a table.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n 1 \n 2 \n 3 \n 4 \n \n);\n\nexport default MyComponent;\n```\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "link": "data-table-row",
+ "data": {
+ "description": "A component to show a single row inside of a table.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n 1 \n 2 \n 3 \n 4 \n \n);\n\nexport default MyComponent;\n```\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "displayName": "DataTable.Row",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `DataTableRow`."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "pointerEvents": {
+ "required": false,
+ "tsType": {
+ "name": "ViewProps['pointerEvents']",
+ "raw": "ViewProps['pointerEvents']"
+ },
+ "description": "`pointerEvents` passed to the `View` container, which is wrapping children within `TouchableRipple`."
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/DataTable/DataTableRow.tsx"
+ ],
+ "group": "DataTable"
+ },
+ "DataTable/DataTableTitle": {
+ "filepath": "DataTable/DataTableTitle.tsx",
+ "title": "DataTable.Title",
+ "description": "A component to display title in table header.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n Dessert\n \n Calories \n Fat (g) \n \n \n);\n\nexport default MyComponent;\n```",
+ "link": "data-table-title",
+ "data": {
+ "description": "A component to display title in table header.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n Dessert\n \n Calories \n Fat (g) \n \n \n);\n\nexport default MyComponent;\n```",
+ "displayName": "DataTable.Title",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Text content of the `DataTableTitle`."
+ },
+ "numeric": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Align the text to the right. Generally monetary or number fields are aligned to right."
+ },
+ "sortDirection": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'ascending' | 'descending'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'ascending'"
+ },
+ {
+ "name": "literal",
+ "value": "'descending'"
+ }
+ ]
+ },
+ "description": "Direction of sorting. An arrow indicating the direction is displayed when this is given."
+ },
+ "numberOfLines": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "The number of lines to show.",
+ "defaultValue": {
+ "value": "1",
+ "computed": false
+ }
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "textStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "TextStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Text content style of the `DataTableTitle`."
+ },
+ "maxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a text font can reach."
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/DataTable/DataTableTitle.tsx"
+ ],
+ "group": "DataTable"
+ },
+ "Dialog/Dialog": {
+ "filepath": "Dialog/Dialog.tsx",
+ "title": "Dialog",
+ "description": "Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\nTo render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../Portal) component.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showDialog = () => setVisible(true);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n Show Dialog \n \n \n Alert \n \n This is simple dialog \n \n \n Done \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 Show Dialog \n \n \n Alert \n \n This is simple dialog \n \n \n Done \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 console.log('Cancel')}>Cancel \n console.log('Ok')}>Ok \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 console.log('Cancel')}>Cancel \n console.log('Ok')}>Ok \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 This is simple dialog \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 This is simple dialog \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 This is a title \n \n This is simple dialog \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 This is a title \n \n This is simple dialog \n \n \n \n );\n};\n\nconst styles = StyleSheet.create({\n title: {\n textAlign: 'center',\n },\n})\n\nexport default MyComponent;\n```",
+ "displayName": "Dialog.Icon",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "color": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Custom color for action icon."
+ },
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Name of the icon to show."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Optional icon size.",
+ "defaultValue": {
+ "value": "24",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Dialog/DialogIcon.tsx"
+ ],
+ "group": "Dialog"
+ },
+ "Dialog/DialogScrollArea": {
+ "filepath": "Dialog/DialogScrollArea.tsx",
+ "title": "Dialog.ScrollArea",
+ "description": "A component to show a scrollable content in a Dialog. The component only provides appropriate styling.\nFor the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n This is a scrollable area \n \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 This is a scrollable area \n \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 This is a title \n \n This is simple dialog \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 This is a title \n \n This is simple dialog \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 Mango \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 Mango \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 "
+ },
+ "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 "
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Drawer/DrawerItem.tsx"
+ ],
+ "group": "Drawer"
+ },
+ "Drawer/DrawerSection": {
+ "filepath": "Drawer/DrawerSection.tsx",
+ "title": "Drawer.Section",
+ "description": "A component to group content inside a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [active, setActive] = React.useState('');\n\n return (\n \n setActive('first')}\n />\n setActive('second')}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "link": "drawer-section",
+ "data": {
+ "description": "A component to group content inside a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [active, setActive] = React.useState('');\n\n return (\n \n setActive('first')}\n />\n setActive('second')}\n />\n \n );\n};\n\nexport default MyComponent;\n```",
+ "displayName": "Drawer.Section",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "title": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Title to show as the header for the section."
+ },
+ "children": {
+ "required": true,
+ "tsType": {
+ "name": "ReactReactNode",
+ "raw": "React.ReactNode"
+ },
+ "description": "Content of the `Drawer.Section`."
+ },
+ "showDivider": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show `Divider` at the end of the section. True by default.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "titleMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a title font can reach."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": ""
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/Drawer/DrawerSection.tsx"
+ ],
+ "group": "Drawer"
+ },
+ "FAB/FAB": {
+ "filepath": "FAB/FAB.tsx",
+ "title": "FAB",
+ "description": "A floating action button represents the primary action on a screen.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FAB } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n />\n);\n\nconst styles = StyleSheet.create({\n fab: {\n position: 'absolute',\n margin: 16,\n right: 0,\n bottom: 0,\n },\n});\n\nexport default MyComponent;\n```",
+ "link": "fab",
+ "data": {
+ "description": "A floating action button represents the primary action on a screen.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FAB } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n />\n);\n\nconst styles = StyleSheet.create({\n fab: {\n position: 'absolute',\n margin: 16,\n right: 0,\n bottom: 0,\n },\n});\n\nexport default MyComponent;\n```",
+ "displayName": "FAB",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display inside the FAB."
+ },
+ "variant": {
+ "required": false,
+ "tsType": {
+ "name": "Variant"
+ },
+ "description": "Role-color preset. Defaults to `tonalPrimary`.",
+ "defaultValue": {
+ "value": "'tonalPrimary'",
+ "computed": false
+ }
+ },
+ "containerColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Override the container (background) color."
+ },
+ "contentColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Override the content (icon) color."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "Size"
+ },
+ "description": "Spec size. Defaults to `default`.",
+ "defaultValue": {
+ "value": "'default'",
+ "computed": false
+ }
+ },
+ "visible": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the FAB is currently visible. Toggling animates the spec'd enter\nand exit (scale + alpha) on the FAB itself.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label. Falls back to nothing if unset."
+ },
+ "accessibilityState": {
+ "required": false,
+ "tsType": {
+ "name": "AccessibilityState"
+ },
+ "description": "Accessibility state forwarded to the underlying button."
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawable to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for positioning the FAB. The visual treatment (size, shape, color)\nis driven by `variant` and `size`."
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes.",
+ "defaultValue": {
+ "value": "'floating-action-button'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/FAB/FAB.tsx"
+ ]
+ },
+ "FAB/Extended": {
+ "filepath": "FAB/Extended.tsx",
+ "title": "Extended",
+ "description": "An extended floating action button represents the primary action on a screen\nand shows a label next to the icon. Animates between expanded (icon + label)\nand collapsed (icon only) states.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FAB } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [expanded, setExpanded] = React.useState(true);\n\n return (\n setExpanded((v) => !v)}\n style={styles.fab}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n fab: {\n position: 'absolute',\n margin: 16,\n left: 0,\n bottom: 0,\n },\n});\n\nexport default MyComponent;\n```",
+ "link": "extended",
+ "data": {
+ "description": "An extended floating action button represents the primary action on a screen\nand shows a label next to the icon. Animates between expanded (icon + label)\nand collapsed (icon only) states.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FAB } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [expanded, setExpanded] = React.useState(true);\n\n return (\n setExpanded((v) => !v)}\n style={styles.fab}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n fab: {\n position: 'absolute',\n margin: 16,\n left: 0,\n bottom: 0,\n },\n});\n\nexport default MyComponent;\n```",
+ "displayName": "Extended",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display inside the FAB."
+ },
+ "label": {
+ "required": true,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Label rendered next to the icon when expanded."
+ },
+ "variant": {
+ "required": false,
+ "tsType": {
+ "name": "Variant"
+ },
+ "description": "Role-color preset. Defaults to `tonalPrimary`.",
+ "defaultValue": {
+ "value": "'tonalPrimary'",
+ "computed": false
+ }
+ },
+ "containerColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Override the container (background) color. When set without `contentColor`,\nthe icon and label colors are derived automatically via `contentColorFor`."
+ },
+ "contentColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Override the content (icon + label) color."
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "Size"
+ },
+ "description": "Spec size. Defaults to `default`.",
+ "defaultValue": {
+ "value": "'default'",
+ "computed": false
+ }
+ },
+ "expanded": {
+ "required": true,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the FAB is expanded (icon + label) or collapsed (icon only). The\nwidth and label opacity animate per the MD3 Expressive spec on change."
+ },
+ "visible": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the FAB is currently visible. Toggling animates the spec'd enter\nand exit (scale + alpha) on the FAB itself.",
+ "defaultValue": {
+ "value": "true",
+ "computed": false
+ }
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label. Falls back to `label` if unset.",
+ "defaultValue": {
+ "value": "label",
+ "computed": true
+ }
+ },
+ "accessibilityState": {
+ "required": false,
+ "tsType": {
+ "name": "AccessibilityState"
+ },
+ "description": "Accessibility state forwarded to the underlying button."
+ },
+ "labelMaxFontSizeMultiplier": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Specifies the largest possible scale a label font can reach."
+ },
+ "background": {
+ "required": false,
+ "tsType": {
+ "name": "PressableAndroidRippleConfig"
+ },
+ "description": "Type of background drawable to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style for positioning the FAB. The visual treatment (size, shape, color)\nis driven by `variant` and `size`."
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes.",
+ "defaultValue": {
+ "value": "'extended-floating-action-button'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/FAB/Extended.tsx"
+ ]
+ },
+ "FAB/Menu": {
+ "filepath": "FAB/Menu.tsx",
+ "title": "Menu",
+ "description": "Floating action button menu. Wraps a trigger FAB; when `expanded` is true,\nitems appear stacked above and the trigger morphs into the spec'd close\nbutton (`shape: 'full'`, 56 dp, saturated role color).\n\nNo visual backdrop and no outside-tap dismiss — that matches the MD3 spec\nand lets the user keep interacting with the content underneath. Dismiss\nvia the close button or by tapping an item.\n\n## Usage\n```tsx\nconst [open, setOpen] = React.useState(false);\n\n\n setOpen(false)}\n trigger={{ icon: 'plus', variant: 'primary', onPress: () => setOpen(true) }}\n items={[\n { icon: 'email', label: 'Send', onPress: () => {} },\n { icon: 'bell', label: 'Remind', onPress: () => {} },\n ]}\n />\n \n```",
+ "link": "menu",
+ "data": {
+ "description": "Floating action button menu. Wraps a trigger FAB; when `expanded` is true,\nitems appear stacked above and the trigger morphs into the spec'd close\nbutton (`shape: 'full'`, 56 dp, saturated role color).\n\nNo visual backdrop and no outside-tap dismiss — that matches the MD3 spec\nand lets the user keep interacting with the content underneath. Dismiss\nvia the close button or by tapping an item.\n\n## Usage\n```tsx\nconst [open, setOpen] = React.useState(false);\n\n\n setOpen(false)}\n trigger={{ icon: 'plus', variant: 'primary', onPress: () => setOpen(true) }}\n items={[\n { icon: 'email', label: 'Send', onPress: () => {} },\n { icon: 'bell', label: 'Remind', onPress: () => {} },\n ]}\n />\n \n```",
+ "displayName": "Menu",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "expanded": {
+ "required": true,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the menu is open."
+ },
+ "onDismiss": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "() => void",
+ "signature": {
+ "arguments": [],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Called when the user taps the close button or taps an item."
+ },
+ "trigger": {
+ "required": true,
+ "tsType": {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Icon displayed in the trigger FAB (and cross-faded to `closeIcon` when\n * the menu is open).\n */\n icon: IconSource;\n variant?: Variant;\n size?: Size;\n containerColor?: ColorValue;\n contentColor?: ColorValue;\n visible?: boolean;\n onPress?: (e: GestureResponderEvent) => void;\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": true
+ }
+ },
+ {
+ "key": "variant",
+ "value": {
+ "name": "Variant",
+ "required": false
+ }
+ },
+ {
+ "key": "size",
+ "value": {
+ "name": "Size",
+ "required": false
+ }
+ },
+ {
+ "key": "containerColor",
+ "value": {
+ "name": "ColorValue",
+ "required": false
+ }
+ },
+ {
+ "key": "contentColor",
+ "value": {
+ "name": "ColorValue",
+ "required": false
+ }
+ },
+ {
+ "key": "visible",
+ "value": {
+ "name": "boolean",
+ "required": false
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": false
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ "description": "Trigger FAB configuration. The menu renders a morphing FAB that\nanimates between the trigger appearance and the spec'd close button."
+ },
+ "alignment": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'start' | 'center' | 'end'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'start'"
+ },
+ {
+ "name": "literal",
+ "value": "'center'"
+ },
+ {
+ "name": "literal",
+ "value": "'end'"
+ }
+ ]
+ },
+ "description": "Horizontal side the menu sits on. Default `'end'`.",
+ "defaultValue": {
+ "value": "'end'",
+ "computed": false
+ }
+ },
+ "closeIcon": {
+ "required": false,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon used by the close button when the menu is expanded. Default\n`'close'`.",
+ "defaultValue": {
+ "value": "'close'",
+ "computed": false
+ }
+ },
+ "items": {
+ "required": true,
+ "tsType": {
+ "name": "union",
+ "raw": "| [T, T]\n| [T, T, T]\n| [T, T, T, T]\n| [T, T, T, T, T]\n| [T, T, T, T, T, T]",
+ "elements": [
+ {
+ "name": "tuple",
+ "raw": "[T, T]",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "name": "tuple",
+ "raw": "[T, T, T]",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "name": "tuple",
+ "raw": "[T, T, T, T]",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "name": "tuple",
+ "raw": "[T, T, T, T, T]",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "name": "tuple",
+ "raw": "[T, T, T, T, T, T]",
+ "elements": [
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ },
+ {
+ "name": "signature",
+ "type": "object",
+ "raw": "{\n /**\n * Optional icon for the item.\n */\n icon?: IconSource;\n /**\n * Mandatory label.\n */\n label: string;\n /**\n * Called when the item is pressed. The menu is dismissed automatically\n * after `onPress` runs.\n */\n onPress: (e: GestureResponderEvent) => void;\n /**\n * Accessibility label. Falls back to `label`.\n */\n accessibilityLabel?: string;\n testID?: string;\n}",
+ "signature": {
+ "properties": [
+ {
+ "key": "icon",
+ "value": {
+ "name": "IconSource",
+ "required": false
+ }
+ },
+ {
+ "key": "label",
+ "value": {
+ "name": "string",
+ "required": true
+ }
+ },
+ {
+ "key": "onPress",
+ "value": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ },
+ "required": true
+ }
+ },
+ {
+ "key": "accessibilityLabel",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ },
+ {
+ "key": "testID",
+ "value": {
+ "name": "string",
+ "required": false
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ ]
+ },
+ "description": "Menu items. Spec calls for 2 to 6 items."
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "",
+ "defaultValue": {
+ "value": "'floating-action-button-menu'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/FAB/Menu.tsx"
+ ]
+ },
+ "IconButton/IconButton": {
+ "filepath": "IconButton/IconButton.tsx",
+ "title": "IconButton",
+ "description": "An icon button is a button which displays only an icon without a label.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { IconButton, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n />\n);\n\nexport default MyComponent;\n```\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "link": "icon-button",
+ "data": {
+ "description": "An icon button is a button which displays only an icon without a label.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { IconButton, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n />\n);\n\nexport default MyComponent;\n```\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple",
+ "displayName": "IconButton",
+ "methods": [],
+ "statics": [],
+ "props": {
+ "icon": {
+ "required": true,
+ "tsType": {
+ "name": "IconSource"
+ },
+ "description": "Icon to display."
+ },
+ "mode": {
+ "required": false,
+ "tsType": {
+ "name": "union",
+ "raw": "'outlined' | 'contained' | 'contained-tonal'",
+ "elements": [
+ {
+ "name": "literal",
+ "value": "'outlined'"
+ },
+ {
+ "name": "literal",
+ "value": "'contained'"
+ },
+ {
+ "name": "literal",
+ "value": "'contained-tonal'"
+ }
+ ]
+ },
+ "description": "@supported Available in v5.x with theme version 3\nMode of the icon button. By default there is no specified mode - only pressable icon will be rendered."
+ },
+ "iconColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "@renamed Renamed from 'color' to 'iconColor' in v5.x\nColor of the icon."
+ },
+ "containerColor": {
+ "required": false,
+ "tsType": {
+ "name": "ColorValue"
+ },
+ "description": "Background color of the icon container."
+ },
+ "selected": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether icon button is selected. A selected button receives alternative combination of icon and container colors.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "size": {
+ "required": false,
+ "tsType": {
+ "name": "number"
+ },
+ "description": "Size of the icon.",
+ "defaultValue": {
+ "value": "24",
+ "computed": false
+ }
+ },
+ "disabled": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."
+ },
+ "animated": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether an icon change is animated.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ },
+ "accessibilityLabel": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button."
+ },
+ "contentStyle": {
+ "required": false,
+ "tsType": {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ },
+ "description": "Style of button's inner content.\nUse this prop to apply custom height and width or to set a custom padding`."
+ },
+ "onPress": {
+ "required": false,
+ "tsType": {
+ "name": "signature",
+ "type": "function",
+ "raw": "(e: GestureResponderEvent) => void",
+ "signature": {
+ "arguments": [
+ {
+ "name": "e",
+ "type": {
+ "name": "GestureResponderEvent"
+ }
+ }
+ ],
+ "return": {
+ "name": "void"
+ }
+ }
+ },
+ "description": "Function to execute on press."
+ },
+ "style": {
+ "required": false,
+ "tsType": {
+ "name": "Animated.WithAnimatedValue",
+ "elements": [
+ {
+ "name": "StyleProp",
+ "elements": [
+ {
+ "name": "ViewStyle"
+ }
+ ],
+ "raw": "StyleProp"
+ }
+ ],
+ "raw": "Animated.WithAnimatedValue>"
+ },
+ "description": ""
+ },
+ "ref": {
+ "required": false,
+ "tsType": {
+ "name": "ReactRef",
+ "raw": "React.Ref",
+ "elements": [
+ {
+ "name": "View"
+ }
+ ]
+ },
+ "description": ""
+ },
+ "testID": {
+ "required": false,
+ "tsType": {
+ "name": "string"
+ },
+ "description": "TestID used for testing purposes",
+ "defaultValue": {
+ "value": "'icon-button'",
+ "computed": false
+ }
+ },
+ "theme": {
+ "required": false,
+ "tsType": {
+ "name": "ThemeProp"
+ },
+ "description": ""
+ },
+ "loading": {
+ "required": false,
+ "tsType": {
+ "name": "boolean"
+ },
+ "description": "Whether to show a loading indicator.",
+ "defaultValue": {
+ "value": "false",
+ "computed": false
+ }
+ }
+ }
+ },
+ "type": "component",
+ "dependencies": [
+ "src/components/IconButton/IconButton.tsx"
+ ]
+ },
+ "Icon": {
+ "filepath": "Icon.tsx",
+ "title": "Icon",
+ "description": "An icon component which renders icon from vector library.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Icon, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n