diff --git a/docs/6.x/docs/components/Dialog/Dialog.mdx b/docs/6.x/docs/components/Dialog/Dialog.mdx new file mode 100644 index 0000000000..9ced6eb35d --- /dev/null +++ b/docs/6.x/docs/components/Dialog/Dialog.mdx @@ -0,0 +1,200 @@ +--- +title: Dialog +--- + +import PropTable from '@docs/components/PropTable.tsx'; +import ExtendsLink from '@docs/components/ExtendsLink.tsx'; +import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx'; +import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx'; +import ExtendedExample from '@docs/components/ExtendedExample.tsx'; + +Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. +To render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../Portal/Portal) component. + + + + + + + +## Usage +```js +import * as React from 'react'; +import { View } from 'react-native'; +import { Button, Dialog, Portal, PaperProvider } from 'react-native-paper'; + +const MyComponent = () => { + const [visible, setVisible] = React.useState(false); + + const showDialog = () => setVisible(true); + + const hideDialog = () => setVisible(false); + + return ( + + + + + Done + ]} + /> + + + + ); +}; + +export default MyComponent; +``` + + + ## Props + + + + +
+ +### dismissable + +
+ + + +
+ +### dismissableBackButton + +
+ + + +
+ +### onDismiss + +
+ + + +
+ +### visible + +
+ + + +
+ +### icon + +
+ + + +
+ +### title + +
+ + + +
+ +### content + +
+ + + +
+ +### actions + +
+ + + +
+ +### scrollable + +
+ + + +
+ +### contentProps + +
+ + + +
+ +### scrollAreaProps + +
+ + + +
+ +### scrollViewProps + +
+ + + +
+ +### aria-label + +
+ + + +
+ +### style + +
+ + + +
+ +### theme + +
+ + + +
+ +### testID + +
+ + + + + + + + + ## Theme colors + + + + + diff --git a/docs/6.x/docs/components/Dialog/DialogActions.mdx b/docs/6.x/docs/components/Dialog/DialogActions.mdx new file mode 100644 index 0000000000..9f06c45722 --- /dev/null +++ b/docs/6.x/docs/components/Dialog/DialogActions.mdx @@ -0,0 +1,86 @@ +--- +title: Dialog.Actions +--- + +import PropTable from '@docs/components/PropTable.tsx'; +import ExtendsLink from '@docs/components/ExtendsLink.tsx'; +import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx'; +import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx'; +import ExtendedExample from '@docs/components/ExtendedExample.tsx'; + +A component to show a list of actions in a Dialog. + + + + + + + +## Usage +```js +import * as React from 'react'; +import { Button, Dialog, Portal } from 'react-native-paper'; + +const MyComponent = () => { + const [visible, setVisible] = React.useState(false); + + const hideDialog = () => setVisible(false); + + return ( + + + Disagree + , + , + ]} + /> + + ); +}; + +export default MyComponent; +``` + + + ## Props + + + + +
+ +### children (required) + +
+ + + +
+ +### style + +
+ + + +
+ +### theme + +
+ + + + + + + + + + diff --git a/docs/6.x/docs/components/Dialog/DialogContent.mdx b/docs/6.x/docs/components/Dialog/DialogContent.mdx new file mode 100644 index 0000000000..37b1d8dcc9 --- /dev/null +++ b/docs/6.x/docs/components/Dialog/DialogContent.mdx @@ -0,0 +1,67 @@ +--- +title: Dialog.Content +--- + +import PropTable from '@docs/components/PropTable.tsx'; +import ExtendsLink from '@docs/components/ExtendsLink.tsx'; +import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx'; +import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx'; +import ExtendedExample from '@docs/components/ExtendedExample.tsx'; + +A component to show content in a Dialog. + + + + + + + +## Usage +```js +import * as React from 'react'; +import { Dialog, Portal, Text } from 'react-native-paper'; + +const MyComponent = () => { + const [visible, setVisible] = React.useState(false); + + const hideDialog = () => setVisible(false); + + return ( + + + + ); +}; + +export default MyComponent; +``` + + + ## Props + + + + +
+ +### children (required) + +
+ + + +
+ +### style + +
+ + + + + + + + + + diff --git a/docs/6.x/docs/components/Dialog/DialogIcon.mdx b/docs/6.x/docs/components/Dialog/DialogIcon.mdx new file mode 100644 index 0000000000..226dc9aa22 --- /dev/null +++ b/docs/6.x/docs/components/Dialog/DialogIcon.mdx @@ -0,0 +1,88 @@ +--- +title: Dialog.Icon +--- + +import PropTable from '@docs/components/PropTable.tsx'; +import ExtendsLink from '@docs/components/ExtendsLink.tsx'; +import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx'; +import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx'; +import ExtendedExample from '@docs/components/ExtendedExample.tsx'; + +@supported Available in v5.x with theme version 3 +A component to show an icon in a Dialog. + + + + + + + +## Usage +```js +import * as React from 'react'; +import { Dialog, Portal, Text } from 'react-native-paper'; + +const MyComponent = () => { + const [visible, setVisible] = React.useState(false); + + const hideDialog = () => setVisible(false); + + return ( + + + + ); +}; + +export default MyComponent; +``` + + + ## Props + + + + +
+ +### color + +
+ + + +
+ +### icon (required) + +
+ + + +
+ +### size + +
+ + + +
+ +### theme + +
+ + + + + + + + + ## Theme colors + + + + + diff --git a/docs/6.x/docs/components/Dialog/DialogScrollArea.mdx b/docs/6.x/docs/components/Dialog/DialogScrollArea.mdx new file mode 100644 index 0000000000..15bc9e9afe --- /dev/null +++ b/docs/6.x/docs/components/Dialog/DialogScrollArea.mdx @@ -0,0 +1,81 @@ +--- +title: Dialog.ScrollArea +--- + +import PropTable from '@docs/components/PropTable.tsx'; +import ExtendsLink from '@docs/components/ExtendsLink.tsx'; +import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx'; +import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx'; +import ExtendedExample from '@docs/components/ExtendedExample.tsx'; + +A component to show a scrollable content in a Dialog. The component only provides appropriate styling. +For the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement. + + + + + + + +## Usage +```js +import * as React from 'react'; +import { ScrollView } from 'react-native'; +import { Dialog, Portal, Text } from 'react-native-paper'; + +const MyComponent = () => { + const [visible, setVisible] = React.useState(false); + + const hideDialog = () => setVisible(false); + + return ( + + + + ); +}; + +export default MyComponent; +``` + + + ## Props + + + + +
+ +### children (required) + +
+ + + +
+ +### style + +
+ + + +
+ +### theme + +
+ + + + + + + + + ## Theme colors + + + + + diff --git a/docs/6.x/docs/components/Dialog/DialogTitle.mdx b/docs/6.x/docs/components/Dialog/DialogTitle.mdx new file mode 100644 index 0000000000..df557bf5e6 --- /dev/null +++ b/docs/6.x/docs/components/Dialog/DialogTitle.mdx @@ -0,0 +1,75 @@ +--- +title: Dialog.Title +--- + +import PropTable from '@docs/components/PropTable.tsx'; +import ExtendsLink from '@docs/components/ExtendsLink.tsx'; +import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx'; +import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx'; +import ExtendedExample from '@docs/components/ExtendedExample.tsx'; + +A component to show a title in a Dialog. + + + + + + + +## Usage +```js +import * as React from 'react'; +import { Dialog, Portal, Text } from 'react-native-paper'; + +const MyComponent = () => { + const [visible, setVisible] = React.useState(false); + + const hideDialog = () => setVisible(false); + + return ( + + + + ); +}; + +export default MyComponent; +``` + + + ## Props + + + + +
+ +### children (required) + +
+ + + +
+ +### style + +
+ + + +
+ +### theme + +
+ + + + + + + + + + diff --git a/docs/6.x/docs/components/Modal.mdx b/docs/6.x/docs/components/Modal.mdx new file mode 100644 index 0000000000..860bc2f5b2 --- /dev/null +++ b/docs/6.x/docs/components/Modal.mdx @@ -0,0 +1,184 @@ +--- +title: Modal +--- + +import PropTable from '@docs/components/PropTable.tsx'; +import ExtendsLink from '@docs/components/ExtendsLink.tsx'; +import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx'; +import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx'; +import ExtendedExample from '@docs/components/ExtendedExample.tsx'; + +The Modal component is a simple way to present content above an enclosing view. +To render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal/Portal) component. +Note that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal. + + + + + + + +## Usage +```js +import * as React from 'react'; +import { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper'; + +const MyComponent = () => { + const [visible, setVisible] = React.useState(false); + + const showModal = () => setVisible(true); + const hideModal = () => setVisible(false); + + const containerStyle = { padding: 20 }; + + return ( + + + + Example Modal. Click outside this area to dismiss. + + + + + ); +}; + +export default MyComponent; +``` + + + ## Props + + + + +
+ +### dismissable + +
+ + + +
+ +### dismissableBackButton + +
+ + + +
+ +### onDismiss + +
+ + + +
+ +### overlayAccessibilityLabel + +
+ + + +
+ +### aria-label + +
+ + + +
+ +### visible + +
+ + + +
+ +### children (required) + +
+ + + +
+ +### contentContainerStyle + +
+ + + +
+ +### contentBackgroundColor + +
+ + + +
+ +### contentBorderRadius + +
+ + + +
+ +### contentElevation + +
+ + + +
+ +### style + +
+ + + +
+ +### theme + +
+ + + +
+ +### testID + +
+ + + + + + + + + ## Theme colors + + + + + diff --git a/docs/6.x/docs/guides/migration.md b/docs/6.x/docs/guides/migration.md index a4d7123a09..bbf4b267ed 100644 --- a/docs/6.x/docs/guides/migration.md +++ b/docs/6.x/docs/guides/migration.md @@ -154,11 +154,6 @@ e.g.: ``` -### Dialog - -- The default elevation changed from level `1` to level `3`. -- The `style` prop no longer configures the background color or border radius. You can override `theme.colors.surfaceContainerHigh` and `theme.shapes.corner.extraLarge` using the `theme` prop instead. - ### TextInput The Paper 6.x `TextInput` is a complete rewrite with a new API. Import the component the same way, but note that the props and behavior have changed significantly. @@ -279,3 +274,58 @@ const theme = { style={{ fontSize: 16, color: '#1C1B1F' }} /> ``` + +### Dialog + +- The default elevation changed from level `1` to level `3`. +- The `style` prop no longer configures the background color or border radius. You can override `theme.colors.surfaceContainerHigh` and `theme.shapes.corner.extraLarge` using the `theme` prop instead. + +The Paper 6.x `Dialog` now supports a simplified prop-based API for common dialog layouts. If your dialog previously composed `Dialog.Title`, `Dialog.Content`, and `Dialog.Actions` via `children`, migrate to the dedicated `icon`, `title`, `content`, and `actions` props. + +#### Removed props + +- **`children`** was removed from `Dialog` + +Use the dedicated props instead: + +- **`Dialog.Icon`** → **`icon`** +- **`Dialog.Title`** → **`title`** +- **`Dialog.Content`** → **`content`** +- **`Dialog.Actions`** → **`actions`** + +The new **`actions`** prop is more customizable because it accepts **`React.ReactNode[]`**. Unlike the previous `Dialog.Actions` children behavior, the dialog no longer injects **`compact`** and **`uppercase`** into action components automatically. When **`actions`** is provided, the passed components are rendered through **`Dialog.Actions`** internally. + +#### New props + +- **`scrollable`** renders the dialog content inside a scrollable area. +- **`contentProps`** passes props to the internal `Dialog.Content` when `scrollable` is not enabled. +- **`scrollAreaProps`** passes props to the internal `Dialog.ScrollArea` when `scrollable` is enabled. +- **`scrollViewProps`** passes props to the internal `ScrollView` when `scrollable` is enabled. +- **`aria-label`** overrides the title as the dialog's accessible name. + +```tsx +// Before (v5) + + + Alert + + This is a simple dialog + + + + + + + +// After (v6) + + Done]} + /> + +``` diff --git a/docs/src/data/componentDocs6x.json b/docs/src/data/componentDocs6x.json new file mode 100644 index 0000000000..522465f6ad --- /dev/null +++ b/docs/src/data/componentDocs6x.json @@ -0,0 +1,12521 @@ +{ + "docs": { + "ActivityIndicator": { + "filepath": "ActivityIndicator.tsx", + "title": "ActivityIndicator", + "description": "Activity indicator is used to present progress of some activity in the app.\nIt can be used as a drop-in replacement for the ActivityIndicator shipped with React Native.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ActivityIndicator, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```", + "link": "activity-indicator", + "data": { + "description": "Activity indicator is used to present progress of some activity in the app.\nIt can be used as a drop-in replacement for the ActivityIndicator shipped with React Native.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ActivityIndicator, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```", + "displayName": "ActivityIndicator", + "methods": [], + "statics": [], + "props": { + "animating": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to show the indicator or hide it.", + "defaultValue": { + "value": "true", + "computed": false + } + }, + "color": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "The color of the spinner." + }, + "size": { + "required": false, + "tsType": { + "name": "union", + "raw": "'small' | 'large' | number", + "elements": [ + { + "name": "literal", + "value": "'small'" + }, + { + "name": "literal", + "value": "'large'" + }, + { + "name": "number" + } + ] + }, + "description": "Size of the indicator.", + "defaultValue": { + "value": "'small'", + "computed": false + } + }, + "hidesWhenStopped": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the indicator should hide when not animating.", + "defaultValue": { + "value": "true", + "computed": false + } + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/ActivityIndicator.tsx" + ] + }, + "Appbar/Appbar": { + "filepath": "Appbar/Appbar.tsx", + "title": "Appbar", + "description": "A component to display action items in a bar. It can be placed at the top or bottom.\nThe top bar usually contains the screen title, controls such as navigation buttons, menu button etc.\nThe bottom bar usually provides access to a drawer and up to four actions.\n\nBy default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more informations\n\n## Usage\n### Top bar\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} />\n \n {}} />\n {}} />\n \n);\n\nexport default MyComponent;\n```\n\n### Bottom bar\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { Appbar, FAB, useTheme } from 'react-native-paper';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nconst BOTTOM_APPBAR_HEIGHT = 80;\nconst MEDIUM_FAB_HEIGHT = 56;\n\nconst MyComponent = () => {\n const { bottom } = useSafeAreaInsets();\n const theme = useTheme();\n\n return (\n \n {}} />\n {}} />\n {}} />\n {}} />\n {}}\n style={[\n styles.fab,\n { top: (BOTTOM_APPBAR_HEIGHT - MEDIUM_FAB_HEIGHT) / 2 },\n ]}\n />\n \n );\n};\n\nconst styles = StyleSheet.create({\n bottom: {\n backgroundColor: 'aquamarine',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n },\n fab: {\n position: 'absolute',\n right: 16,\n },\n});\n\nexport default MyComponent;\n```", + "link": "appbar", + "data": { + "description": "A component to display action items in a bar. It can be placed at the top or bottom.\nThe top bar usually contains the screen title, controls such as navigation buttons, menu button etc.\nThe bottom bar usually provides access to a drawer and up to four actions.\n\nBy default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more informations\n\n## Usage\n### Top bar\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} />\n \n {}} />\n {}} />\n \n);\n\nexport default MyComponent;\n```\n\n### Bottom bar\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { Appbar, FAB, useTheme } from 'react-native-paper';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nconst BOTTOM_APPBAR_HEIGHT = 80;\nconst MEDIUM_FAB_HEIGHT = 56;\n\nconst MyComponent = () => {\n const { bottom } = useSafeAreaInsets();\n const theme = useTheme();\n\n return (\n \n {}} />\n {}} />\n {}} />\n {}} />\n {}}\n style={[\n styles.fab,\n { top: (BOTTOM_APPBAR_HEIGHT - MEDIUM_FAB_HEIGHT) / 2 },\n ]}\n />\n \n );\n};\n\nconst styles = StyleSheet.create({\n bottom: {\n backgroundColor: 'aquamarine',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n },\n fab: {\n position: 'absolute',\n right: 16,\n },\n});\n\nexport default MyComponent;\n```", + "displayName": "Appbar", + "methods": [], + "statics": [], + "props": { + "dark": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the background color is a dark color. A dark appbar will render light text and vice-versa." + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `Appbar`." + }, + "mode": { + "required": false, + "tsType": { + "name": "union", + "raw": "'small' | 'medium' | 'large' | 'center-aligned'", + "elements": [ + { + "name": "literal", + "value": "'small'" + }, + { + "name": "literal", + "value": "'medium'" + }, + { + "name": "literal", + "value": "'large'" + }, + { + "name": "literal", + "value": "'center-aligned'" + } + ] + }, + "description": "@supported Available in v5.x with theme version 3\n\nMode of the Appbar.\n- `small` - Appbar with default height (64).\n- `medium` - Appbar with medium height (112).\n- `large` - Appbar with large height (152).\n- `center-aligned` - Appbar with default height and center-aligned title.", + "defaultValue": { + "value": "'small'", + "computed": false + } + }, + "elevated": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "@supported Available in v5.x with theme version 3\nWhether Appbar background should have the elevation along with primary color pigment.", + "defaultValue": { + "value": "false", + "computed": false + } + }, + "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": "StyleProp", + "elements": [ + { + "name": "Omit", + "elements": [ + { + "name": "ViewStyle" + }, + { + "name": "literal", + "value": "'elevation'" + } + ], + "raw": "Omit" + } + ], + "raw": "StyleProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Appbar/Appbar.tsx" + ] + }, + "Appbar/AppbarAction": { + "filepath": "Appbar/AppbarAction.tsx", + "title": "Appbar.Action", + "description": "A component used to display an action item in the appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\nimport { Platform } from 'react-native';\n\nconst MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';\n\nconst MyComponent = () => (\n \n \n {}} />\n {}} />\n \n);\n\nexport default MyComponent;\n```", + "link": "appbar-action", + "data": { + "description": "A component used to display an action item in the appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\nimport { Platform } from 'react-native';\n\nconst MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';\n\nconst MyComponent = () => (\n \n \n {}} />\n {}} />\n \n);\n\nexport default MyComponent;\n```", + "displayName": "Appbar.Action", + "methods": [], + "statics": [], + "props": { + "color": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Custom color for action icon." + }, + "icon": { + "required": true, + "tsType": { + "name": "IconSource" + }, + "description": "Name of the icon to show." + }, + "size": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Optional icon size.", + "defaultValue": { + "value": "24", + "computed": false + } + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch." + }, + "aria-label": { + "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": "StyleProp", + "elements": [ + { + "name": "AnimatedStyle", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "AnimatedStyle" + } + ], + "raw": "StyleProp>" + }, + "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." + }, + "aria-label": { + "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": "StyleProp", + "elements": [ + { + "name": "AnimatedStyle", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "AnimatedStyle" + } + ], + "raw": "StyleProp>" + }, + "description": "" + }, + "ref": { + "required": false, + "tsType": { + "name": "ReactRef", + "raw": "React.Ref", + "elements": [ + { + "name": "View" + } + ] + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Appbar/AppbarBackAction.tsx" + ], + "group": "Appbar" + }, + "Appbar/AppbarContent": { + "filepath": "Appbar/AppbarContent.tsx", + "title": "Appbar.Content", + "description": "A component used to display a title in an appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n);\n\nexport default MyComponent;\n```", + "link": "appbar-content", + "data": { + "description": "A component used to display a title in an appbar.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n);\n\nexport default MyComponent;\n```", + "displayName": "Appbar.Content", + "methods": [], + "statics": [], + "props": { + "title": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Text or component for the title." + }, + "titleStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style for the title, if `title` is a string." + }, + "titleRef": { + "required": false, + "tsType": { + "name": "ReactRefObject", + "raw": "React.RefObject", + "elements": [ + { + "name": "TextRef" + } + ] + }, + "description": "Reference for the title." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "If true, disable all interactions for this component." + }, + "color": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for the text." + }, + "titleMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a title font can reach." + }, + "mode": { + "required": false, + "tsType": { + "name": "union", + "raw": "'small' | 'medium' | 'large' | 'center-aligned'", + "elements": [ + { + "name": "literal", + "value": "'small'" + }, + { + "name": "literal", + "value": "'medium'" + }, + { + "name": "literal", + "value": "'large'" + }, + { + "name": "literal", + "value": "'center-aligned'" + } + ] + }, + "description": "@internal", + "defaultValue": { + "value": "'small'", + "computed": false + } + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "testID to be used on tests.", + "defaultValue": { + "value": "'appbar-content'", + "computed": false + } + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Appbar/AppbarContent.tsx" + ], + "group": "Appbar" + }, + "Appbar/AppbarHeader": { + "filepath": "Appbar/AppbarHeader.tsx", + "title": "Appbar.Header", + "description": "A component to use as a header at the top of the screen.\nIt can contain the screen title, controls such as navigation buttons, menu button etc.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const _goBack = () => console.log('Went back');\n\n const _handleSearch = () => console.log('Searching');\n\n const _handleMore = () => console.log('Shown more');\n\n return (\n \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "appbar-header", + "data": { + "description": "A component to use as a header at the top of the screen.\nIt can contain the screen title, controls such as navigation buttons, menu button etc.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const _goBack = () => console.log('Went back');\n\n const _handleSearch = () => console.log('Searching');\n\n const _handleMore = () => console.log('Shown more');\n\n return (\n \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Appbar.Header", + "methods": [], + "statics": [], + "props": { + "dark": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the background color is a dark color. A dark header will render light text and vice-versa." + }, + "statusBarHeight": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Extra padding to add at the top of header to account for translucent status bar.\nThis is automatically handled on iOS >= 11 including iPhone X using `SafeAreaView`.\nIf you are using Expo, we assume translucent status bar and set a height for status bar automatically.\nPass `0` or a custom value to disable the default behaviour, and customize the height." + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the header." + }, + "mode": { + "required": false, + "tsType": { + "name": "union", + "raw": "'small' | 'medium' | 'large' | 'center-aligned'", + "elements": [ + { + "name": "literal", + "value": "'small'" + }, + { + "name": "literal", + "value": "'medium'" + }, + { + "name": "literal", + "value": "'large'" + }, + { + "name": "literal", + "value": "'center-aligned'" + } + ] + }, + "description": "@supported Available in v5.x with theme version 3\n\nMode of the Appbar.\n- `small` - Appbar with default height (64).\n- `medium` - Appbar with medium height (112).\n- `large` - Appbar with large height (152).\n- `center-aligned` - Appbar with default height and center-aligned title.", + "defaultValue": { + "value": "Platform.OS === 'ios' ? 'center-aligned' : 'small'", + "computed": false + } + }, + "elevated": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "@supported Available in v5.x with theme version 3\nWhether Appbar background should have the elevation along with primary color pigment.", + "defaultValue": { + "value": "false", + "computed": false + } + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "AppbarStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "testID": { + "defaultValue": { + "value": "'appbar-header'", + "computed": false + }, + "required": false, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Appbar/AppbarHeader.tsx" + ], + "group": "Appbar" + }, + "Avatar/AvatarIcon": { + "filepath": "Avatar/AvatarIcon.tsx", + "title": "Avatar.Icon", + "description": "Avatars can be used to represent people in a graphical way.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n```", + "link": "avatar-icon", + "data": { + "description": "Avatars can be used to represent people in a graphical way.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n```", + "displayName": "Avatar.Icon", + "methods": [], + "statics": [], + "props": { + "icon": { + "required": true, + "tsType": { + "name": "IconSource" + }, + "description": "Icon to display for the `Avatar`." + }, + "size": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Size of the avatar.", + "defaultValue": { + "value": "64", + "computed": false + } + }, + "color": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for the icon." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Avatar/AvatarIcon.tsx" + ], + "group": "Avatar" + }, + "Avatar/AvatarImage": { + "filepath": "Avatar/AvatarImage.tsx", + "title": "Avatar.Image", + "description": "Avatars can be used to represent people in a graphical way.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\nexport default MyComponent\n```", + "link": "avatar-image", + "data": { + "description": "Avatars can be used to represent people in a graphical way.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\nexport default MyComponent\n```", + "displayName": "Avatar.Image", + "methods": [], + "statics": [], + "props": { + "source": { + "required": true, + "tsType": { + "name": "union", + "raw": "| ImageSourcePropType\n| ((props: { size: number }) => React.ReactNode)", + "elements": [ + { + "name": "ImageSourcePropType" + }, + { + "name": "unknown" + } + ] + }, + "description": "Image to display for the `Avatar`.\nIt accepts a standard React Native Image `source` prop\nOr a function that returns an `Image`." + }, + "size": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Size of the avatar.", + "defaultValue": { + "value": "64", + "computed": false + } + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "onError": { + "required": false, + "tsType": { + "name": "ImageProps['onError']", + "raw": "ImageProps['onError']" + }, + "description": "Invoked on load error." + }, + "onLayout": { + "required": false, + "tsType": { + "name": "ImageProps['onLayout']", + "raw": "ImageProps['onLayout']" + }, + "description": "Invoked on mount and on layout changes." + }, + "onLoad": { + "required": false, + "tsType": { + "name": "ImageProps['onLoad']", + "raw": "ImageProps['onLoad']" + }, + "description": "Invoked when load completes successfully." + }, + "onLoadEnd": { + "required": false, + "tsType": { + "name": "ImageProps['onLoadEnd']", + "raw": "ImageProps['onLoadEnd']" + }, + "description": "Invoked when load either succeeds or fails." + }, + "onLoadStart": { + "required": false, + "tsType": { + "name": "ImageProps['onLoadStart']", + "raw": "ImageProps['onLoadStart']" + }, + "description": "Invoked on load start." + }, + "onProgress": { + "required": false, + "tsType": { + "name": "ImageProps['onProgress']", + "raw": "ImageProps['onProgress']" + }, + "description": "Invoked on download progress." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Avatar/AvatarImage.tsx" + ], + "group": "Avatar" + }, + "Avatar/AvatarText": { + "filepath": "Avatar/AvatarText.tsx", + "title": "Avatar.Text", + "description": "Avatars can be used to represent people in a graphical way.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n```", + "link": "avatar-text", + "data": { + "description": "Avatars can be used to represent people in a graphical way.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n```", + "displayName": "Avatar.Text", + "methods": [], + "statics": [], + "props": { + "label": { + "required": true, + "tsType": { + "name": "string" + }, + "description": "Initials to show as the text in the `Avatar`." + }, + "size": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Size of the avatar.", + "defaultValue": { + "value": "64", + "computed": false + } + }, + "color": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for the text." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style for text container" + }, + "labelStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style for the title." + }, + "maxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a text font can reach." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Avatar/AvatarText.tsx" + ], + "group": "Avatar" + }, + "Badge": { + "filepath": "Badge.tsx", + "title": "Badge", + "description": "Badges are small status descriptors for UI elements.\nA badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.\n\nThe badge is styled differently based on whether `children` is passed:\n- Small dot when it doesn't have `children`\n- Larger pill when it has `children`\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\nThe badge is styled differently based on whether `children` is passed:\n- Small dot when it doesn't have `children`\n- Larger pill when it has `children`\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`." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "AnimatedStyle", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "AnimatedStyle" + } + ], + "raw": "StyleProp>" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Badge.tsx" + ] + }, + "Banner": { + "filepath": "Banner.tsx", + "title": "Banner", + "description": "Banner displays a prominent message and related actions.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Image } from 'react-native';\nimport { Banner } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(true);\n\n return (\n setVisible(false),\n },\n {\n label: 'Learn more',\n onPress: () => setVisible(false),\n },\n ]}\n icon={({size}) => (\n \n )}>\n There was a problem processing a transaction on your credit card.\n \n );\n};\n\nexport default MyComponent;\n```", + "link": "banner", + "data": { + "description": "Banner displays a prominent message and related actions.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Image } from 'react-native';\nimport { Banner } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(true);\n\n return (\n setVisible(false),\n },\n {\n label: 'Learn more',\n onPress: () => setVisible(false),\n },\n ]}\n icon={({size}) => (\n \n )}>\n There was a problem processing a transaction on your credit card.\n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Banner", + "methods": [], + "statics": [], + "props": { + "visible": { + "required": true, + "tsType": { + "name": "boolean" + }, + "description": "Whether banner is currently visible." + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content that will be displayed inside banner." + }, + "icon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "Icon to display for the `Banner`. Can be an image." + }, + "actions": { + "required": false, + "tsType": { + "name": "Array", + "elements": [ + { + "name": "intersection", + "raw": "{\n label: string;\n} & $RemoveChildren", + "elements": [ + { + "name": "signature", + "type": "object", + "raw": "{\n label: string;\n}", + "signature": { + "properties": [ + { + "key": "label", + "value": { + "name": "string", + "required": true + } + } + ] + } + }, + { + "name": "$RemoveChildren", + "elements": [ + { + "name": "Button" + } + ], + "raw": "$RemoveChildren" + } + ] + } + ], + "raw": "Array<\n {\n label: string;\n } & $RemoveChildren\n>" + }, + "description": "Action items to shown in the banner.\nAn action item should contain the following properties:\n\n- `label`: label of the action button (required)\n- `onPress`: callback that is called when button is pressed (required)\n\nTo customize button you can pass other props that button component takes.", + "defaultValue": { + "value": "[]", + "computed": false + } + }, + "contentStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style of banner's inner content.\nUse this prop to apply custom width for wide layouts." + }, + "elevation": { + "required": false, + "tsType": { + "name": "Elevation" + }, + "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": "StyleProp", + "elements": [ + { + "name": "SurfaceStyle" + } + ], + "raw": "StyleProp" + }, + "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": "signature", + "type": "function", + "raw": "(result: { finished: boolean }) => void", + "signature": { + "arguments": [ + { + "name": "result", + "type": { + "name": "signature", + "type": "object", + "raw": "{ finished: boolean }", + "signature": { + "properties": [ + { + "key": "finished", + "value": { + "name": "boolean", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "\nOptional callback that will be called after the opening animation finished running normally", + "defaultValue": { + "value": "() => {}", + "computed": false + } + }, + "onHideAnimationFinished": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(result: { finished: boolean }) => void", + "signature": { + "arguments": [ + { + "name": "result", + "type": { + "name": "signature", + "type": "object", + "raw": "{ finished: boolean }", + "signature": { + "properties": [ + { + "key": "finished", + "value": { + "name": "boolean", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "\nOptional callback that will be called after the closing animation finished running normally", + "defaultValue": { + "value": "() => {}", + "computed": false + } + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Banner.tsx" + ] + }, + "BottomNavigation/BottomNavigation": { + "filepath": "BottomNavigation/BottomNavigation.tsx", + "title": "BottomNavigation", + "description": "BottomNavigation provides quick navigation between top-level views of an app with a bottom navigation bar.\nIt is primarily designed for use on mobile. If you want to use the navigation bar only see [`BottomNavigation.Bar`](BottomNavigationBar).\n\nBy default BottomNavigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { BottomNavigation, Text } from 'react-native-paper';\n\nconst MusicRoute = () => Music;\n\nconst AlbumsRoute = () => Albums;\n\nconst RecentsRoute = () => Recents;\n\nconst NotificationsRoute = () => Notifications;\n\nconst MyComponent = () => {\n const [index, setIndex] = React.useState(0);\n const [routes] = React.useState([\n { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},\n { key: 'albums', title: 'Albums', focusedIcon: 'album' },\n { key: 'recents', title: 'Recents', focusedIcon: 'history' },\n { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },\n ]);\n\n const renderScene = BottomNavigation.SceneMap({\n music: MusicRoute,\n albums: AlbumsRoute,\n recents: RecentsRoute,\n notifications: NotificationsRoute,\n });\n\n return (\n \n );\n};\n\nexport default MyComponent;\n```", + "link": "bottom-navigation", + "data": { + "description": "BottomNavigation provides quick navigation between top-level views of an app with a bottom navigation bar.\nIt is primarily designed for use on mobile. If you want to use the navigation bar only see [`BottomNavigation.Bar`](BottomNavigationBar).\n\nBy default BottomNavigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { BottomNavigation, Text } from 'react-native-paper';\n\nconst MusicRoute = () => Music;\n\nconst AlbumsRoute = () => Albums;\n\nconst RecentsRoute = () => Recents;\n\nconst NotificationsRoute = () => Notifications;\n\nconst MyComponent = () => {\n const [index, setIndex] = React.useState(0);\n const [routes] = React.useState([\n { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},\n { key: 'albums', title: 'Albums', focusedIcon: 'album' },\n { key: 'recents', title: 'Recents', focusedIcon: 'history' },\n { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },\n ]);\n\n const renderScene = BottomNavigation.SceneMap({\n music: MusicRoute,\n albums: AlbumsRoute,\n recents: RecentsRoute,\n notifications: NotificationsRoute,\n });\n\n return (\n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "BottomNavigation", + "methods": [ + { + "name": "SceneMap", + "docblock": "Function which takes a map of route keys to components.\nPure components are used to minimize re-rendering of the pages.\nThis drastically improves the animation performance.", + "modifiers": [ + "static" + ], + "params": [ + { + "name": "scenes", + "optional": false, + "type": { + "name": "signature", + "type": "object", + "raw": "{\n [key: string]: React.ComponentType<{\n route: Route;\n jumpTo: (key: string) => void;\n }>;\n}", + "signature": { + "properties": [ + { + "key": { + "name": "string" + }, + "value": { + "name": "ReactComponentType", + "raw": "React.ComponentType<{\n route: Route;\n jumpTo: (key: string) => void;\n}>", + "elements": [ + { + "name": "signature", + "type": "object", + "raw": "{\n route: Route;\n jumpTo: (key: string) => void;\n}", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + }, + { + "key": "jumpTo", + "value": { + "name": "signature", + "type": "function", + "raw": "(key: string) => void", + "signature": { + "arguments": [ + { + "name": "key", + "type": { + "name": "string" + } + } + ], + "return": { + "name": "void" + } + }, + "required": true + } + } + ] + } + } + ], + "required": true + } + } + ] + } + } + } + ], + "returns": null, + "description": "Function which takes a map of route keys to components.\nPure components are used to minimize re-rendering of the pages.\nThis drastically improves the animation performance." + } + ], + "statics": [], + "props": { + "shifting": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.\n\nBy default, this is `false` with theme version 3 and `true` when you have more than 3 tabs.\nPass `shifting={false}` to explicitly disable this animation, or `shifting={true}` to always use this animation.\nNote that you need at least 2 tabs be able to run this animation." + }, + "labeled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to show labels in tabs. When `false`, only icons will be displayed.", + "defaultValue": { + "value": "true", + "computed": false + } + }, + "compact": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether tabs should be spread across the entire width." + }, + "navigationState": { + "required": true, + "tsType": { + "name": "signature", + "type": "object", + "raw": "{\n index: number;\n routes: Route[];\n}", + "signature": { + "properties": [ + { + "key": "index", + "value": { + "name": "number", + "required": true + } + }, + { + "key": "routes", + "value": { + "name": "Array", + "elements": [ + { + "name": "Route" + } + ], + "raw": "Route[]", + "required": true + } + } + ] + } + }, + "description": "State for the bottom navigation. The state should contain the following properties:\n\n- `index`: a number representing the index of the active route in the `routes` array\n- `routes`: an array containing a list of route objects used for rendering the tabs\n\nEach route object should contain the following properties:\n\n- `key`: a unique key to identify the route (required)\n- `title`: title of the route to use as the tab label\n- `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x\n- `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3\n- `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.\n- `aria-label`: accessibility label for the tab button\n- `testID`: test id for the tab button\n\nExample:\n\n```js\n{\n index: 1,\n routes: [\n { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},\n { key: 'albums', title: 'Albums', focusedIcon: 'album' },\n { key: 'recents', title: 'Recents', focusedIcon: 'history' },\n { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },\n ]\n}\n```\n\n`BottomNavigation` is a controlled component, which means the `index` needs to be updated via the `onIndexChange` callback." + }, + "onIndexChange": { + "required": true, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(index: number) => void", + "signature": { + "arguments": [ + { + "name": "index", + "type": { + "name": "number" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Callback which is called on tab change, receives the index of the new tab as argument.\nThe navigation state needs to be updated when it's called, otherwise the change is dropped." + }, + "renderScene": { + "required": true, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: {\n route: Route;\n jumpTo: (key: string) => void;\n}) => React.ReactNode | null", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{\n route: Route;\n jumpTo: (key: string) => void;\n}", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + }, + { + "key": "jumpTo", + "value": { + "name": "signature", + "type": "function", + "raw": "(key: string) => void", + "signature": { + "arguments": [ + { + "name": "key", + "type": { + "name": "string" + } + } + ], + "return": { + "name": "void" + } + }, + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "union", + "raw": "React.ReactNode | null", + "elements": [ + { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + { + "name": "null" + } + ] + } + } + }, + "description": "Callback which returns a react element to render as the page for the tab. Receives an object containing the route as the argument:\n\n```js\nrenderScene = ({ route, jumpTo }) => {\n switch (route.key) {\n case 'music':\n return ;\n case 'albums':\n return ;\n }\n}\n```\n\nPages are lazily rendered, which means that a page will be rendered the first time you navigate to it.\nAfter initial render, all the pages stay rendered to preserve their state.\n\nYou need to make sure that your individual routes implement a `shouldComponentUpdate` to improve the performance.\nTo make it easier to specify the components, you can use the `SceneMap` helper:\n\n```js\nrenderScene = BottomNavigation.SceneMap({\n music: MusicRoute,\n albums: AlbumsRoute,\n});\n```\n\nSpecifying the components this way is easier and takes care of implementing a `shouldComponentUpdate` method.\nEach component will receive the current route and a `jumpTo` method as it's props.\nThe `jumpTo` method can be used to navigate to other tabs programmatically:\n\n```js\nthis.props.jumpTo('albums')\n```" + }, + "renderIcon": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: {\n route: Route;\n focused: boolean;\n color: ColorValue;\n}) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{\n route: Route;\n focused: boolean;\n color: ColorValue;\n}", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + }, + { + "key": "focused", + "value": { + "name": "boolean", + "required": true + } + }, + { + "key": "color", + "value": { + "name": "ColorValue", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which returns a React Element to be used as tab icon." + }, + "renderLabel": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: {\n route: Route;\n focused: boolean;\n color: ColorValue;\n}) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{\n route: Route;\n focused: boolean;\n color: ColorValue;\n}", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + }, + { + "key": "focused", + "value": { + "name": "boolean", + "required": true + } + }, + { + "key": "color", + "value": { + "name": "ColorValue", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which React Element to be used as tab label." + }, + "renderTouchable": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: TouchableProps) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "intersection", + "raw": "TouchableRippleProps & {\n key: string;\n route: Route;\n children: React.ReactNode;\n borderless?: boolean;\n centered?: boolean;\n rippleColor?: ColorValue;\n}", + "elements": [ + { + "name": "TouchableRippleProps" + }, + { + "name": "signature", + "type": "object", + "raw": "{\n key: string;\n route: Route;\n children: React.ReactNode;\n borderless?: boolean;\n centered?: boolean;\n rippleColor?: ColorValue;\n}", + "signature": { + "properties": [ + { + "key": "key", + "value": { + "name": "string", + "required": true + } + }, + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + }, + { + "key": "children", + "value": { + "name": "ReactReactNode", + "raw": "React.ReactNode", + "required": true + } + }, + { + "key": "borderless", + "value": { + "name": "boolean", + "required": false + } + }, + { + "key": "centered", + "value": { + "name": "boolean", + "required": false + } + }, + { + "key": "rippleColor", + "value": { + "name": "ColorValue", + "required": false + } + } + ] + } + } + ] + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which returns a React element to be used as the touchable for the tab item.\nRenders a `TouchableRipple` on Android and `Pressable` on iOS." + }, + "getAccessibilityLabel": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route }) => string | undefined", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "union", + "raw": "string | undefined", + "elements": [ + { + "name": "string" + }, + { + "name": "undefined" + } + ] + } + } + }, + "description": "Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.\nUses `route['aria-label']` by default." + }, + "getBadge": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route }) => boolean | number | string | undefined", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "union", + "raw": "boolean | number | string | undefined", + "elements": [ + { + "name": "boolean" + }, + { + "name": "number" + }, + { + "name": "string" + }, + { + "name": "undefined" + } + ] + } + } + }, + "description": "Get badge for the tab, uses `route.badge` by default." + }, + "getLabelText": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route }) => string | undefined", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "union", + "raw": "string | undefined", + "elements": [ + { + "name": "string" + }, + { + "name": "undefined" + } + ] + } + } + }, + "description": "Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component." + }, + "getLazy": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route }) => boolean | undefined", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "union", + "raw": "boolean | undefined", + "elements": [ + { + "name": "boolean" + }, + { + "name": "undefined" + } + ] + } + } + }, + "description": "Get lazy for the current screen. Uses true by default.", + "defaultValue": { + "value": "({ route }: { route: Route }) => route.lazy", + "computed": false + } + }, + "getTestID": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route }) => string | undefined", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "union", + "raw": "string | undefined", + "elements": [ + { + "name": "string" + }, + { + "name": "undefined" + } + ] + } + } + }, + "description": "Get the id to locate this tab button in tests, uses `route.testID` by default." + }, + "onTabPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route } & TabPressEvent) => void", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "intersection", + "raw": "{ route: Route } & TabPressEvent", + "elements": [ + { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + }, + { + "name": "signature", + "type": "object", + "raw": "{\n defaultPrevented: boolean;\n preventDefault(): void;\n}", + "signature": { + "properties": [ + { + "key": "defaultPrevented", + "value": { + "name": "boolean", + "required": true + } + }, + { + "key": "preventDefault", + "value": { + "name": "void", + "required": true + } + } + ] + } + } + ] + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on tab press. It receives the route for the pressed tab, useful for things like scroll to top." + }, + "onTabLongPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route } & TabPressEvent) => void", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "intersection", + "raw": "{ route: Route } & TabPressEvent", + "elements": [ + { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + }, + { + "name": "signature", + "type": "object", + "raw": "{\n defaultPrevented: boolean;\n preventDefault(): void;\n}", + "signature": { + "properties": [ + { + "key": "defaultPrevented", + "value": { + "name": "boolean", + "required": true + } + }, + { + "key": "preventDefault", + "value": { + "name": "void", + "required": true + } + } + ] + } + } + ] + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on tab long press. It receives the route for the pressed tab, useful for things like custom action when longed pressed." + }, + "activeColor": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for icon and label in the active tab." + }, + "inactiveColor": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for icon and label in the inactive tab." + }, + "sceneAnimationEnabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether animation is enabled for scenes transitions in `shifting` mode.\nBy default, the scenes cross-fade during tab change when `shifting` is enabled.\nSpecify `sceneAnimationEnabled` as `false` to disable the animation.", + "defaultValue": { + "value": "false", + "computed": false + } + }, + "sceneAnimationType": { + "required": false, + "tsType": { + "name": "union", + "raw": "'opacity' | 'shifting'", + "elements": [ + { + "name": "literal", + "value": "'opacity'" + }, + { + "name": "literal", + "value": "'shifting'" + } + ] + }, + "description": "The scene animation effect. Specify `'shifting'` for a different effect.\nBy default, 'opacity' will be used.", + "defaultValue": { + "value": "'opacity'", + "computed": false + } + }, + "sceneAnimationEasing": { + "required": false, + "tsType": { + "name": "union", + "raw": "EasingFunction | undefined", + "elements": [ + { + "name": "EasingFunction" + }, + { + "name": "undefined" + } + ] + }, + "description": "The scene animation Easing." + }, + "keyboardHidesNavigationBar": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the bottom navigation bar is hidden when keyboard is shown.\nOn Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.", + "defaultValue": { + "value": "Platform.OS === 'android'", + "computed": false + } + }, + "safeAreaInsets": { + "required": false, + "tsType": { + "name": "signature", + "type": "object", + "raw": "{\n top?: number;\n right?: number;\n bottom?: number;\n left?: number;\n}", + "signature": { + "properties": [ + { + "key": "top", + "value": { + "name": "number", + "required": false + } + }, + { + "key": "right", + "value": { + "name": "number", + "required": false + } + }, + { + "key": "bottom", + "value": { + "name": "number", + "required": false + } + }, + { + "key": "left", + "value": { + "name": "number", + "required": false + } + } + ] + } + }, + "description": "Safe area insets for the tab bar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS.\nThe bottom insets for iOS is added by default. You can override the behavior with this option." + }, + "barStyle": { + "required": false, + "tsType": { + "name": "Animated.WithAnimatedValue", + "elements": [ + { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + } + ], + "raw": "Animated.WithAnimatedValue>" + }, + "description": "Style for the bottom navigation bar. You can pass a custom background color here:\n\n```js\nbarStyle={{ backgroundColor: '#694fad' }}\n```" + }, + "labelMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a label font can reach.", + "defaultValue": { + "value": "1", + "computed": false + } + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "activeIndicatorStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "TestID used for testing purposes", + "defaultValue": { + "value": "'bottom-navigation'", + "computed": false + } + } + } + }, + "type": "component", + "dependencies": [ + "src/components/BottomNavigation/BottomNavigation.tsx" + ] + }, + "BottomNavigation/BottomNavigationBar": { + "filepath": "BottomNavigation/BottomNavigationBar.tsx", + "title": "BottomNavigation.Bar", + "description": "A navigation bar which can easily be integrated with [React Navigation's Bottom Tabs Navigator](https://reactnavigation.org/docs/bottom-tab-navigator/).\n\n## Usage\n### without React Navigation\n```js\nimport React from 'react';\nimport { useState } from 'react';\nimport { View } from 'react-native';\nimport { BottomNavigation, Text, Provider } from 'react-native-paper';\nimport MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\nexport default function MyComponent() {\n const [index, setIndex] = useState(0);\n\n const routes = [\n { key: 'home', title: 'Home', icon: 'home' },\n { key: 'settings', title: 'Settings', icon: 'cog' },\n ];\n\n const renderScene = ({ route }) => {\n switch (route.key) {\n case 'home':\n return ;\n case 'settings':\n return ;\n default:\n return null;\n }\n };\n\n return (\n \n {renderScene({ route: routes[index] })}\n {\n const newIndex = routes.findIndex((r) => r.key === route.key);\n if (newIndex !== -1) {\n setIndex(newIndex);\n }\n }}\n renderIcon={({ route, color }) => (\n \n )}\n getLabelText={({ route }) => route.title}\n />\n \n );\n}\n```", + "link": "bottom-navigation-bar", + "data": { + "description": "A navigation bar which can easily be integrated with [React Navigation's Bottom Tabs Navigator](https://reactnavigation.org/docs/bottom-tab-navigator/).\n\n## Usage\n### without React Navigation\n```js\nimport React from 'react';\nimport { useState } from 'react';\nimport { View } from 'react-native';\nimport { BottomNavigation, Text, Provider } from 'react-native-paper';\nimport MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\nexport default function MyComponent() {\n const [index, setIndex] = useState(0);\n\n const routes = [\n { key: 'home', title: 'Home', icon: 'home' },\n { key: 'settings', title: 'Settings', icon: 'cog' },\n ];\n\n const renderScene = ({ route }) => {\n switch (route.key) {\n case 'home':\n return ;\n case 'settings':\n return ;\n default:\n return null;\n }\n };\n\n return (\n \n {renderScene({ route: routes[index] })}\n {\n const newIndex = routes.findIndex((r) => r.key === route.key);\n if (newIndex !== -1) {\n setIndex(newIndex);\n }\n }}\n renderIcon={({ route, color }) => (\n \n )}\n getLabelText={({ route }) => route.title}\n />\n \n );\n}\n```", + "displayName": "BottomNavigation.Bar", + "methods": [], + "statics": [], + "props": { + "shifting": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.\n\nBy default, this is `false` with theme version 3 and `true` when you have more than 3 tabs.\nPass `shifting={false}` to explicitly disable this animation, or `shifting={true}` to always use this animation.\nNote that you need at least 2 tabs be able to run this animation." + }, + "labeled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to show labels in tabs. When `false`, only icons will be displayed.", + "defaultValue": { + "value": "true", + "computed": false + } + }, + "compact": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether tabs should be spread across the entire width." + }, + "navigationState": { + "required": true, + "tsType": { + "name": "signature", + "type": "object", + "raw": "{\n index: number;\n routes: Route[];\n}", + "signature": { + "properties": [ + { + "key": "index", + "value": { + "name": "number", + "required": true + } + }, + { + "key": "routes", + "value": { + "name": "Array", + "elements": [ + { + "name": "Route" + } + ], + "raw": "Route[]", + "required": true + } + } + ] + } + }, + "description": "State for the bottom navigation. The state should contain the following properties:\n\n- `index`: a number representing the index of the active route in the `routes` array\n- `routes`: an array containing a list of route objects used for rendering the tabs\n\nEach route object should contain the following properties:\n\n- `key`: a unique key to identify the route (required)\n- `title`: title of the route to use as the tab label\n- `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x\n- `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3\n- `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.\n- `aria-label`: accessibility label for the tab button\n- `testID`: test id for the tab button\n\nExample:\n\n```js\n{\n index: 1,\n routes: [\n { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},\n { key: 'albums', title: 'Albums', focusedIcon: 'album' },\n { key: 'recents', title: 'Recents', focusedIcon: 'history' },\n { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },\n ]\n}\n```\n\n`BottomNavigation.Bar` is a controlled component, which means the `index` needs to be updated via the `onTabPress` callback." + }, + "renderIcon": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: {\n route: Route;\n focused: boolean;\n color: ColorValue;\n}) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{\n route: Route;\n focused: boolean;\n color: ColorValue;\n}", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + }, + { + "key": "focused", + "value": { + "name": "boolean", + "required": true + } + }, + { + "key": "color", + "value": { + "name": "ColorValue", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which returns a React Element to be used as tab icon." + }, + "renderLabel": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: {\n route: Route;\n focused: boolean;\n color: ColorValue;\n}) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{\n route: Route;\n focused: boolean;\n color: ColorValue;\n}", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + }, + { + "key": "focused", + "value": { + "name": "boolean", + "required": true + } + }, + { + "key": "color", + "value": { + "name": "ColorValue", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which React Element to be used as tab label." + }, + "renderTouchable": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: TouchableProps) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "intersection", + "raw": "TouchableRippleProps & {\n key: string;\n route: Route;\n children: React.ReactNode;\n borderless?: boolean;\n centered?: boolean;\n rippleColor?: ColorValue;\n}", + "elements": [ + { + "name": "TouchableRippleProps" + }, + { + "name": "signature", + "type": "object", + "raw": "{\n key: string;\n route: Route;\n children: React.ReactNode;\n borderless?: boolean;\n centered?: boolean;\n rippleColor?: ColorValue;\n}", + "signature": { + "properties": [ + { + "key": "key", + "value": { + "name": "string", + "required": true + } + }, + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + }, + { + "key": "children", + "value": { + "name": "ReactReactNode", + "raw": "React.ReactNode", + "required": true + } + }, + { + "key": "borderless", + "value": { + "name": "boolean", + "required": false + } + }, + { + "key": "centered", + "value": { + "name": "boolean", + "required": false + } + }, + { + "key": "rippleColor", + "value": { + "name": "ColorValue", + "required": false + } + } + ] + } + } + ] + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which returns a React element to be used as the touchable for the tab item.\nRenders a `TouchableRipple` on Android and `Pressable` on iOS.", + "defaultValue": { + "value": "({ key, ...props }: TouchableProps) => (\n \n)", + "computed": false + } + }, + "getAccessibilityLabel": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route }) => string | undefined", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "union", + "raw": "string | undefined", + "elements": [ + { + "name": "string" + }, + { + "name": "undefined" + } + ] + } + } + }, + "description": "Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.\nUses `route['aria-label']` by default.", + "defaultValue": { + "value": "({ route }: { route: Route }) => route['aria-label']", + "computed": false + } + }, + "getBadge": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route }) => boolean | number | string | undefined", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "union", + "raw": "boolean | number | string | undefined", + "elements": [ + { + "name": "boolean" + }, + { + "name": "number" + }, + { + "name": "string" + }, + { + "name": "undefined" + } + ] + } + } + }, + "description": "Get badge for the tab, uses `route.badge` by default.", + "defaultValue": { + "value": "({ route }: { route: Route }) => route.badge", + "computed": false + } + }, + "getLabelText": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route }) => string | undefined", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "union", + "raw": "string | undefined", + "elements": [ + { + "name": "string" + }, + { + "name": "undefined" + } + ] + } + } + }, + "description": "Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component.", + "defaultValue": { + "value": "({ route }: { route: Route }) => route.title", + "computed": false + } + }, + "getTestID": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route }) => string | undefined", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "union", + "raw": "string | undefined", + "elements": [ + { + "name": "string" + }, + { + "name": "undefined" + } + ] + } + } + }, + "description": "Get the id to locate this tab button in tests, uses `route.testID` by default.", + "defaultValue": { + "value": "({ route }: { route: Route }) => route.testID", + "computed": false + } + }, + "onTabPress": { + "required": true, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route } & TabPressEvent) => void", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "intersection", + "raw": "{ route: Route } & TabPressEvent", + "elements": [ + { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + }, + { + "name": "signature", + "type": "object", + "raw": "{\n defaultPrevented: boolean;\n preventDefault(): void;\n}", + "signature": { + "properties": [ + { + "key": "defaultPrevented", + "value": { + "name": "boolean", + "required": true + } + }, + { + "key": "preventDefault", + "value": { + "name": "void", + "required": true + } + } + ] + } + } + ] + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on tab press. It receives the route for the pressed tab. Use this to update the navigation state." + }, + "onTabLongPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { route: Route } & TabPressEvent) => void", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "intersection", + "raw": "{ route: Route } & TabPressEvent", + "elements": [ + { + "name": "signature", + "type": "object", + "raw": "{ route: Route }", + "signature": { + "properties": [ + { + "key": "route", + "value": { + "name": "Route", + "required": true + } + } + ] + } + }, + { + "name": "signature", + "type": "object", + "raw": "{\n defaultPrevented: boolean;\n preventDefault(): void;\n}", + "signature": { + "properties": [ + { + "key": "defaultPrevented", + "value": { + "name": "boolean", + "required": true + } + }, + { + "key": "preventDefault", + "value": { + "name": "void", + "required": true + } + } + ] + } + } + ] + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on tab long press. It receives the route for the pressed tab" + }, + "activeColor": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for icon and label in the active tab." + }, + "inactiveColor": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for icon and label in the inactive tab." + }, + "animationEasing": { + "required": false, + "tsType": { + "name": "union", + "raw": "EasingFunction | undefined", + "elements": [ + { + "name": "EasingFunction" + }, + { + "name": "undefined" + } + ] + }, + "description": "The scene animation Easing." + }, + "keyboardHidesNavigationBar": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the bottom navigation bar is hidden when keyboard is shown.\nOn Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.", + "defaultValue": { + "value": "Platform.OS === 'android'", + "computed": false + } + }, + "safeAreaInsets": { + "required": false, + "tsType": { + "name": "signature", + "type": "object", + "raw": "{\n top?: number;\n right?: number;\n bottom?: number;\n left?: number;\n}", + "signature": { + "properties": [ + { + "key": "top", + "value": { + "name": "number", + "required": false + } + }, + { + "key": "right", + "value": { + "name": "number", + "required": false + } + }, + { + "key": "bottom", + "value": { + "name": "number", + "required": false + } + }, + { + "key": "left", + "value": { + "name": "number", + "required": false + } + } + ] + } + }, + "description": "Safe area insets for the tab bar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS.\nThe bottom insets for iOS is added by default. You can override the behavior with this option." + }, + "labelMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a label font can reach.", + "defaultValue": { + "value": "1", + "computed": false + } + }, + "style": { + "required": false, + "tsType": { + "name": "Animated.WithAnimatedValue", + "elements": [ + { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + } + ], + "raw": "Animated.WithAnimatedValue>" + }, + "description": "" + }, + "activeIndicatorStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "TestID used for testing purposes", + "defaultValue": { + "value": "'bottom-navigation-bar'", + "computed": false + } + } + } + }, + "type": "component", + "dependencies": [ + "src/components/BottomNavigation/BottomNavigationBar.tsx" + ], + "group": "BottomNavigation" + }, + "Button/Button": { + "filepath": "Button/Button.tsx", + "title": "Button", + "description": "A button is component that the user can press to trigger an action.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Button } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```", + "link": "button", + "data": { + "description": "A button is component that the user can press to trigger an action.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Button } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```", + "displayName": "Button", + "methods": [], + "statics": [], + "props": { + "mode": { + "required": false, + "tsType": { + "name": "union", + "raw": "'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal'", + "elements": [ + { + "name": "literal", + "value": "'text'" + }, + { + "name": "literal", + "value": "'outlined'" + }, + { + "name": "literal", + "value": "'contained'" + }, + { + "name": "literal", + "value": "'elevated'" + }, + { + "name": "literal", + "value": "'contained-tonal'" + } + ] + }, + "description": "Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.\n- `text` - flat button without background or outline, used for the lowest priority actions, especially when presenting multiple options.\n- `outlined` - button with an outline without background, typically used for important, but not primary action – represents medium emphasis.\n- `contained` - button with a background color, used for important action, have the most visual impact and high emphasis.\n- `elevated` - button with a background color and elevation, used when absolutely necessary e.g. button requires visual separation from a patterned background. @supported Available in v5.x with theme version 3\n- `contained-tonal` - button with a secondary background color, an alternative middle ground between contained and outlined buttons. @supported Available in v5.x with theme version 3", + "defaultValue": { + "value": "'text'", + "computed": false + } + }, + "dark": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for:\n * `contained` mode for theme version 2\n * `contained`, `contained-tonal` and `elevated` modes for theme version 3." + }, + "compact": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Use a compact look, useful for `text` buttons in a row." + }, + "buttonColor": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Custom button's background color." + }, + "textColor": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Custom button's text color." + }, + "loading": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to show a loading indicator." + }, + "icon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "Icon to display for the `Button`." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch." + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Label text of the button." + }, + "uppercase": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Make the label text uppercased. Note that this won't work if you pass React elements as children." + }, + "background": { + "required": false, + "tsType": { + "name": "PressableAndroidRippleConfig" + }, + "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig" + }, + "aria-label": { + "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." + }, + "role": { + "required": false, + "tsType": { + "name": "Role" + }, + "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": "StyleProp", + "elements": [ + { + "name": "SurfaceStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "labelStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style for the button text." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "touchableRef": { + "required": false, + "tsType": { + "name": "ReactRefObject", + "raw": "React.RefObject", + "elements": [ + { + "name": "View" + } + ] + }, + "description": "Reference for the touchable" + }, + "ref": { + "required": false, + "tsType": { + "name": "ReactRef", + "raw": "React.Ref", + "elements": [ + { + "name": "View" + } + ] + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "testID to be used on tests.", + "defaultValue": { + "value": "'button'", + "computed": false + } + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Button/Button.tsx" + ] + }, + "Card/Card": { + "filepath": "Card/Card.tsx", + "title": "Card", + "description": "A card is a sheet of material that serves as an entry point to more detailed information.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar, Button, Card, Text } from 'react-native-paper';\n\nconst LeftContent = props => \n\nconst MyComponent = () => (\n \n \n \n Card title\n Card content\n \n \n \n \n \n \n \n);\n\nexport default MyComponent;\n```", + "link": "card", + "data": { + "description": "A card is a sheet of material that serves as an entry point to more detailed information.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar, Button, Card, Text } from 'react-native-paper';\n\nconst LeftContent = props => \n\nconst MyComponent = () => (\n \n \n \n Card title\n Card content\n \n \n \n \n \n \n \n);\n\nexport default MyComponent;\n```", + "displayName": "Card", + "methods": [], + "statics": [], + "props": { + "mode": { + "required": false, + "tsType": { + "name": "union", + "raw": "'elevated' | 'outlined' | 'contained'", + "elements": [ + { + "name": "literal", + "value": "'elevated'" + }, + { + "name": "literal", + "value": "'outlined'" + }, + { + "name": "literal", + "value": "'contained'" + } + ] + }, + "description": "Mode of the Card.\n- `elevated` - Card with elevation.\n- `contained` - Card without outline and elevation @supported Available in v5.x with theme version 3\n- `outlined` - Card with an outline.", + "defaultValue": { + "value": "'elevated'", + "computed": false + } + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `Card`." + }, + "onLongPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "() => void", + "signature": { + "arguments": [], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on long press." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "onPressIn": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute as soon as the touchable element is pressed and invoked even before onPress." + }, + "onPressOut": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute as soon as the touch is released even before onPress." + }, + "delayLongPress": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "The number of milliseconds a user must touch the element before executing `onLongPress`." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "If true, disable all interactions for this component." + }, + "elevation": { + "required": false, + "tsType": { + "name": "Elevation" + }, + "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": "StyleProp", + "elements": [ + { + "name": "SurfaceStyle" + } + ], + "raw": "StyleProp" + }, + "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" + }, + "ref": { + "required": false, + "tsType": { + "name": "ReactRef", + "raw": "React.Ref", + "elements": [ + { + "name": "View" + } + ] + }, + "description": "Reference to the card container." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Card/Card.tsx" + ] + }, + "Card/CardActions": { + "filepath": "Card/CardActions.tsx", + "title": "Card.Actions", + "description": "A component to show a list of actions inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card, Button } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n \n \n \n);\n\nexport default MyComponent;\n```", + "link": "card-actions", + "data": { + "description": "A component to show a list of actions inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card, Button } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n \n \n \n);\n\nexport default MyComponent;\n```", + "displayName": "Card.Actions", + "methods": [], + "statics": [], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Items inside the `CardActions`." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Card/CardActions.tsx" + ], + "group": "Card" + }, + "Card/CardContent": { + "filepath": "Card/CardContent.tsx", + "title": "Card.Content", + "description": "A component to show content inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n Card title\n Card content\n \n \n);\n\nexport default MyComponent;\n```", + "link": "card-content", + "data": { + "description": "A component to show content inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n Card title\n Card content\n \n \n);\n\nexport default MyComponent;\n```", + "displayName": "Card.Content", + "methods": [], + "statics": [], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Items inside the `Card.Content`." + }, + "index": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "@internal" + }, + "total": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "@internal" + }, + "siblings": { + "required": false, + "tsType": { + "name": "Array", + "elements": [ + { + "name": "union", + "raw": "string | null", + "elements": [ + { + "name": "string" + }, + { + "name": "null" + } + ] + } + ], + "raw": "Array" + }, + "description": "@internal" + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Card/CardContent.tsx" + ], + "group": "Card" + }, + "Card/CardCover": { + "filepath": "Card/CardCover.tsx", + "title": "Card.Cover", + "description": "A component to show a cover image inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n);\n\nexport default MyComponent;\n```\n\n@extends Image props https://reactnative.dev/docs/image#props", + "link": "card-cover", + "data": { + "description": "A component to show a cover image inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n);\n\nexport default MyComponent;\n```\n\n@extends Image props https://reactnative.dev/docs/image#props", + "displayName": "Card.Cover", + "methods": [], + "statics": [], + "props": { + "index": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "@internal" + }, + "total": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "@internal" + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Card/CardCover.tsx" + ], + "group": "Card" + }, + "Card/CardTitle": { + "filepath": "Card/CardTitle.tsx", + "title": "Card.Title", + "description": "A component to show a title, subtitle and an avatar inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar, Card, IconButton } from 'react-native-paper';\n\nconst MyComponent = () => (\n }\n right={(props) => {}} />}\n />\n);\n\nexport default MyComponent;\n```", + "link": "card-title", + "data": { + "description": "A component to show a title, subtitle and an avatar inside a Card.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar, Card, IconButton } from 'react-native-paper';\n\nconst MyComponent = () => (\n }\n right={(props) => {}} />}\n />\n);\n\nexport default MyComponent;\n```", + "displayName": "Card.Title", + "methods": [], + "statics": [], + "props": { + "title": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Text for the title. Note that this will only accept a string or ``-based node." + }, + "titleStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style for the title." + }, + "titleNumberOfLines": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Number of lines for the title.", + "defaultValue": { + "value": "1", + "computed": false + } + }, + "titleVariant": { + "required": false, + "tsType": { + "name": "TypescaleKey" + }, + "description": "@supported Available in v5.x with theme version 3\n\nTitle text variant defines appropriate text styles for type role and its size.\nAvailable variants:\n\n Display: `displayLarge`, `displayMedium`, `displaySmall`\n\n Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`\n\n Title: `titleLarge`, `titleMedium`, `titleSmall`\n\n Label: `labelLarge`, `labelMedium`, `labelSmall`\n\n Body: `bodyLarge`, `bodyMedium`, `bodySmall`", + "defaultValue": { + "value": "'bodyLarge'", + "computed": false + } + }, + "subtitle": { + "required": false, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Text for the subtitle. Note that this will only accept a string or ``-based node." + }, + "subtitleStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style for the subtitle." + }, + "subtitleNumberOfLines": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Number of lines for the subtitle.", + "defaultValue": { + "value": "1", + "computed": false + } + }, + "subtitleVariant": { + "required": false, + "tsType": { + "name": "TypescaleKey" + }, + "description": "@supported Available in v5.x with theme version 3\n\nSubtitle text variant defines appropriate text styles for type role and its size.\nAvailable variants:\n\n Display: `displayLarge`, `displayMedium`, `displaySmall`\n\n Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`\n\n Title: `titleLarge`, `titleMedium`, `titleSmall`\n\n Label: `labelLarge`, `labelMedium`, `labelSmall`\n\n Body: `bodyLarge`, `bodyMedium`, `bodySmall`", + "defaultValue": { + "value": "'bodyMedium'", + "computed": false + } + }, + "left": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { size: number }) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ size: number }", + "signature": { + "properties": [ + { + "key": "size", + "value": { + "name": "number", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which returns a React element to display on the left side." + }, + "leftStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style for the left element wrapper." + }, + "right": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { size: number }) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ size: number }", + "signature": { + "properties": [ + { + "key": "size", + "value": { + "name": "number", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which returns a React element to display on the right side." + }, + "rightStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style for the right element wrapper." + }, + "index": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "@internal" + }, + "total": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "@internal" + }, + "titleMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a title font can reach." + }, + "subtitleMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a subtitle font can reach." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Card/CardTitle.tsx" + ], + "group": "Card" + }, + "Checkbox/Checkbox": { + "filepath": "Checkbox/Checkbox.tsx", + "title": "Checkbox", + "description": "Checkboxes allow the selection of multiple options from a set.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [checked, setChecked] = React.useState(false);\n\n return (\n {\n setChecked(!checked);\n }}\n />\n );\n};\n\nexport default MyComponent;\n```", + "link": "checkbox", + "data": { + "description": "Checkboxes allow the selection of multiple options from a set.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [checked, setChecked] = React.useState(false);\n\n return (\n {\n setChecked(!checked);\n }}\n />\n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Checkbox", + "methods": [], + "statics": [], + "props": { + "status": { + "required": true, + "tsType": { + "name": "union", + "raw": "'checked' | 'unchecked' | 'indeterminate'", + "elements": [ + { + "name": "literal", + "value": "'checked'" + }, + { + "name": "literal", + "value": "'unchecked'" + }, + { + "name": "literal", + "value": "'indeterminate'" + } + ] + }, + "description": "Status of checkbox." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether checkbox is disabled." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "uncheckedColor": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Custom color for unchecked checkbox." + }, + "color": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Custom color for checkbox." + }, + "error": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the checkbox is in an error state. When true, the outline\n(unchecked) and container (selected) use `theme.colors.error`.\n`disabled` and explicit `color`/`uncheckedColor` overrides take\nprecedence." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "testID to be used on tests." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Custom style to override the default tap target. Passed through to\nthe underlying `TouchableRipple`." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Checkbox/Checkbox.tsx" + ] + }, + "Checkbox/CheckboxItem": { + "filepath": "Checkbox/CheckboxItem.tsx", + "title": "Checkbox.Item", + "description": "Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n);\n\nexport default MyComponent;\n```", + "link": "checkbox-item", + "data": { + "description": "Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n);\n\nexport default MyComponent;\n```", + "displayName": "Checkbox.Item", + "methods": [], + "statics": [], + "props": { + "status": { + "required": true, + "tsType": { + "name": "union", + "raw": "'checked' | 'unchecked' | 'indeterminate'", + "elements": [ + { + "name": "literal", + "value": "'checked'" + }, + { + "name": "literal", + "value": "'unchecked'" + }, + { + "name": "literal", + "value": "'indeterminate'" + } + ] + }, + "description": "Status of checkbox." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether checkbox is disabled." + }, + "label": { + "required": true, + "tsType": { + "name": "string" + }, + "description": "Label to be displayed on the item." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "onLongPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on long press." + }, + "background": { + "required": false, + "tsType": { + "name": "PressableAndroidRippleConfig" + }, + "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig" + }, + "aria-label": { + "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" + }, + "aria-label": { + "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": "StyleProp", + "elements": [ + { + "name": "SurfaceStyle" + } + ], + "raw": "StyleProp" + }, + "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." + }, + "ref": { + "required": false, + "tsType": { + "name": "ReactRef", + "raw": "React.Ref", + "elements": [ + { + "name": "View" + } + ] + }, + "description": "Reference to the chip container." + }, + "role": { + "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." + }, + "aria-label": { + "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 } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showDialog = () => setVisible(true);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n Done\n\t\t\t\t\t\t ]}\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 } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showDialog = () => setVisible(true);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n Done\n\t\t\t\t\t\t ]}\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 + } + }, + "icon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "Icon to display above the dialog title." + }, + "title": { + "required": false, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Title of the dialog." + }, + "content": { + "required": false, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the dialog. Non-empty strings are rendered as Material 3\nsupporting text." + }, + "actions": { + "required": false, + "tsType": { + "name": "Array", + "elements": [ + { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + ], + "raw": "React.ReactNode[]" + }, + "description": "Action buttons displayed at the bottom of the dialog.\nKeep their order stable between renders." + }, + "scrollable": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to render the content in a `ScrollView` within the dialog scroll\narea." + }, + "contentProps": { + "required": false, + "tsType": { + "name": "Omit", + "elements": [ + { + "name": "DialogContentProps" + }, + { + "name": "literal", + "value": "'children'" + } + ], + "raw": "Omit" + }, + "description": "Props passed to `Dialog.Content` when `scrollable` is not enabled." + }, + "scrollAreaProps": { + "required": false, + "tsType": { + "name": "Omit", + "elements": [ + { + "name": "DialogScrollAreaProps" + }, + { + "name": "literal", + "value": "'children'" + } + ], + "raw": "Omit" + }, + "description": "Props passed to `Dialog.ScrollArea` when `scrollable` is enabled." + }, + "scrollViewProps": { + "required": false, + "tsType": { + "name": "Omit", + "elements": [ + { + "name": "ScrollViewProps" + }, + { + "name": "literal", + "value": "'children'" + } + ], + "raw": "Omit" + }, + "description": "Props passed to the `ScrollView` when `scrollable` is enabled." + }, + "aria-label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the dialog. This is read by the screen reader when the user opens a dialog." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "SurfaceStyle" + } + ], + "raw": "StyleProp" + }, + "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\t\t\t\t\t\t\tDisagree\n\t\t\t\t\t\t,\n\t\t\t\t\t\t,\n\t\t\t\t\t]}\n\t\t />\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\t\t\t\t\t\t\tDisagree\n\t\t\t\t\t\t,\n\t\t\t\t\t\t,\n\t\t\t\t\t]}\n\t\t />\n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Dialog.Actions", + "methods": [], + "statics": [], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `DialogActions`." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Dialog/DialogActions.tsx" + ], + "group": "Dialog" + }, + "Dialog/DialogContent": { + "filepath": "Dialog/DialogContent.tsx", + "title": "Dialog.Content", + "description": "A component to show content in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "dialog-content", + "data": { + "description": "A component to show content in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Dialog.Content", + "methods": [], + "statics": [], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `DialogContent`." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Dialog/DialogContent.tsx" + ], + "group": "Dialog" + }, + "Dialog/DialogIcon": { + "filepath": "Dialog/DialogIcon.tsx", + "title": "Dialog.Icon", + "description": "@supported Available in v5.x with theme version 3\nA component to show an icon in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "dialog-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 { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Dialog.Icon", + "methods": [], + "statics": [], + "props": { + "color": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Custom color for action icon." + }, + "icon": { + "required": true, + "tsType": { + "name": "IconSource" + }, + "description": "Name of the icon to show." + }, + "size": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Optional icon size.", + "defaultValue": { + "value": "24", + "computed": false + } + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Dialog/DialogIcon.tsx" + ], + "group": "Dialog" + }, + "Dialog/DialogScrollArea": { + "filepath": "Dialog/DialogScrollArea.tsx", + "title": "Dialog.ScrollArea", + "description": "A component to show a scrollable content in a Dialog. The component only provides appropriate styling.\nFor the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "dialog-scroll-area", + "data": { + "description": "A component to show a scrollable content in a Dialog. The component only provides appropriate styling.\nFor the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Dialog.ScrollArea", + "methods": [], + "statics": [], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `DialogScrollArea`." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Dialog/DialogScrollArea.tsx" + ], + "group": "Dialog" + }, + "Dialog/DialogTitle": { + "filepath": "Dialog/DialogTitle.tsx", + "title": "Dialog.Title", + "description": "A component to show a title in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "dialog-title", + "data": { + "description": "A component to show a title in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Dialog.Title", + "methods": [], + "statics": [], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Title text for the `DialogTitle`." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Dialog/DialogTitle.tsx" + ], + "group": "Dialog" + }, + "Divider": { + "filepath": "Divider.tsx", + "title": "Divider", + "description": "A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Divider, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Lemon\n \n Mango\n \n \n);\n\nexport default MyComponent;\n```", + "link": "divider", + "data": { + "description": "A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Divider, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Lemon\n \n Mango\n \n \n);\n\nexport default MyComponent;\n```", + "displayName": "Divider", + "methods": [], + "statics": [], + "props": { + "leftInset": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "@renamed Renamed from 'inset' to 'leftInset` in v5.x\nWhether divider has a left inset." + }, + "horizontalInset": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "@supported Available in v5.x with theme version 3\n Whether divider has a horizontal inset on both sides.", + "defaultValue": { + "value": "false", + "computed": false + } + }, + "bold": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "@supported Available in v5.x with theme version 3\n Whether divider should be bolded.", + "defaultValue": { + "value": "false", + "computed": false + } + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Divider.tsx" + ] + }, + "Drawer/DrawerCollapsedItem": { + "filepath": "Drawer/DrawerCollapsedItem.tsx", + "title": "Drawer.CollapsedItem", + "description": "Note: Available in v5.x with theme version 3\n\nCollapsed component used to show an action item with an icon and optionally label in a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```", + "link": "drawer-collapsed-item", + "data": { + "description": "Note: Available in v5.x with theme version 3\n\nCollapsed component used to show an action item with an icon and optionally label in a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```", + "displayName": "Drawer.CollapsedItem", + "methods": [], + "statics": [], + "props": { + "label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "The label text of the item." + }, + "badge": { + "required": false, + "tsType": { + "name": "union", + "raw": "string | number | boolean", + "elements": [ + { + "name": "string" + }, + { + "name": "number" + }, + { + "name": "boolean" + } + ] + }, + "description": "Badge to show on the icon, can be `true` to show a dot, `string` or `number` to show text.", + "defaultValue": { + "value": "false", + "computed": false + } + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the item is disabled." + }, + "focusedIcon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "@renamed Renamed from 'icon' to 'focusedIcon' in v5.x\nIcon to use as the focused destination icon, can be a string, an image source or a react component" + }, + "unfocusedIcon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "@renamed Renamed from 'icon' to 'focusedIcon' in v5.x\nIcon to use as the unfocused destination icon, can be a string, an image source or a react component" + }, + "active": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to highlight the drawer item as active." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "labelMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a label font can reach." + }, + "aria-label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "TestID used for testing purposes", + "defaultValue": { + "value": "'drawer-collapsed-item'", + "computed": false + } + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Drawer/DrawerCollapsedItem.tsx" + ], + "group": "Drawer" + }, + "Drawer/DrawerItem": { + "filepath": "Drawer/DrawerItem.tsx", + "title": "Drawer.Item", + "description": "A component used to show an action item with an icon and a label in a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```", + "link": "drawer-item", + "data": { + "description": "A component used to show an action item with an icon and a label in a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```", + "displayName": "Drawer.Item", + "methods": [], + "statics": [], + "props": { + "label": { + "required": true, + "tsType": { + "name": "string" + }, + "description": "The label text of the item." + }, + "icon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "Icon to display for the `DrawerItem`." + }, + "active": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to highlight the drawer item as active." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the item is disabled." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "background": { + "required": false, + "tsType": { + "name": "PressableAndroidRippleConfig" + }, + "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig" + }, + "aria-label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button." + }, + "right": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { color: ColorValue }) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ color: ColorValue }", + "signature": { + "properties": [ + { + "key": "color", + "value": { + "name": "ColorValue", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which returns a React element to display on the right side. For instance a Badge." + }, + "labelMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a label font can reach." + }, + "hitSlop": { + "required": false, + "tsType": { + "name": "TouchableRippleProps['hitSlop']", + "raw": "TouchableRippleProps['hitSlop']" + }, + "description": "Sets additional distance outside of element in which a press can be detected." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Drawer/DrawerItem.tsx" + ], + "group": "Drawer" + }, + "Drawer/DrawerSection": { + "filepath": "Drawer/DrawerSection.tsx", + "title": "Drawer.Section", + "description": "A component to group content inside a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [active, setActive] = React.useState('');\n\n return (\n \n setActive('first')}\n />\n setActive('second')}\n />\n \n );\n};\n\nexport default MyComponent;\n```", + "link": "drawer-section", + "data": { + "description": "A component to group content inside a navigation drawer.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [active, setActive] = React.useState('');\n\n return (\n \n setActive('first')}\n />\n setActive('second')}\n />\n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Drawer.Section", + "methods": [], + "statics": [], + "props": { + "title": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Title to show as the header for the section." + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `Drawer.Section`." + }, + "showDivider": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to show `Divider` at the end of the section. True by default.", + "defaultValue": { + "value": "true", + "computed": false + } + }, + "titleMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a title font can reach." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Drawer/DrawerSection.tsx" + ], + "group": "Drawer" + }, + "FAB/FAB": { + "filepath": "FAB/FAB.tsx", + "title": "FAB", + "description": "A floating action button represents the primary action on a screen.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FAB } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n />\n);\n\nconst styles = StyleSheet.create({\n fab: {\n position: 'absolute',\n margin: 16,\n right: 0,\n bottom: 0,\n },\n});\n\nexport default MyComponent;\n```", + "link": "fab", + "data": { + "description": "A floating action button represents the primary action on a screen.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FAB } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n />\n);\n\nconst styles = StyleSheet.create({\n fab: {\n position: 'absolute',\n margin: 16,\n right: 0,\n bottom: 0,\n },\n});\n\nexport default MyComponent;\n```", + "displayName": "FAB", + "methods": [], + "statics": [], + "props": { + "icon": { + "required": true, + "tsType": { + "name": "IconSource" + }, + "description": "Icon to display inside the FAB." + }, + "variant": { + "required": false, + "tsType": { + "name": "Variant" + }, + "description": "Role-color preset. Defaults to `tonalPrimary`.", + "defaultValue": { + "value": "'tonalPrimary'", + "computed": false + } + }, + "containerColor": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Override the container (background) color." + }, + "contentColor": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Override the content (icon) color." + }, + "size": { + "required": false, + "tsType": { + "name": "Size" + }, + "description": "Spec size. Defaults to `default`.", + "defaultValue": { + "value": "'default'", + "computed": false + } + }, + "visible": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the FAB is currently visible. Toggling animates the spec'd enter\nand exit (scale + alpha) on the FAB itself.", + "defaultValue": { + "value": "true", + "computed": false + } + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "aria-label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label. Falls back to nothing if unset." + }, + "aria-checked": { + "required": false, + "tsType": { + "name": "union", + "raw": "boolean | 'mixed'", + "elements": [ + { + "name": "boolean" + }, + { + "name": "literal", + "value": "'mixed'" + } + ] + }, + "description": "Indicates whether the element is checked. Accepts `true`, `false`,\nor `'mixed'` for an indeterminate state." + }, + "aria-selected": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Indicates whether the element is selected." + }, + "aria-busy": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Indicates whether the element is currently busy (e.g. loading)." + }, + "aria-expanded": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Indicates whether the element's controlled content is expanded." + }, + "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": "AnimatedStyle", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "AnimatedStyle" + } + ], + "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." + }, + "aria-label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label. Falls back to `label` if unset.", + "defaultValue": { + "value": "label", + "computed": true + } + }, + "aria-checked": { + "required": false, + "tsType": { + "name": "union", + "raw": "boolean | 'mixed'", + "elements": [ + { + "name": "boolean" + }, + { + "name": "literal", + "value": "'mixed'" + } + ] + }, + "description": "Indicates whether the element is checked. Accepts `true`, `false`,\nor `'mixed'` for an indeterminate state." + }, + "aria-selected": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Indicates whether the element is selected." + }, + "aria-busy": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Indicates whether the element is currently busy (e.g. loading)." + }, + "aria-expanded": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Indicates whether the element's controlled content is expanded." + }, + "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": "AnimatedStyle", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "AnimatedStyle" + } + ], + "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 /**\n * Accessibility label for the trigger FAB.\n */\n 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 'aria-label'?: 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": "aria-label", + "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 + } + }, + "aria-label": { + "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": "StyleProp", + "elements": [ + { + "name": "AnimatedStyle", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "AnimatedStyle" + } + ], + "raw": "StyleProp>" + }, + "description": "" + }, + "ref": { + "required": false, + "tsType": { + "name": "ReactRef", + "raw": "React.Ref", + "elements": [ + { + "name": "View" + } + ] + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "TestID used for testing purposes", + "defaultValue": { + "value": "'icon-button'", + "computed": false + } + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "loading": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to show a loading indicator.", + "defaultValue": { + "value": "false", + "computed": false + } + } + } + }, + "type": "component", + "dependencies": [ + "src/components/IconButton/IconButton.tsx" + ] + }, + "Icon": { + "filepath": "Icon.tsx", + "title": "Icon", + "description": "An icon component which renders icon from vector library.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Icon, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```", + "link": "icon", + "data": { + "description": "An icon component which renders icon from vector library.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Icon, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```", + "displayName": "Icon", + "methods": [], + "statics": [], + "props": { + "size": { + "required": true, + "tsType": { + "name": "number" + }, + "description": "Size of icon." + }, + "allowFontScaling": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "" + }, + "source": { + "required": true, + "tsType": { + "name": "any" + }, + "description": "Icon to display." + }, + "color": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Color of the icon." + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "TestID used for testing purposes" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Icon.tsx" + ] + }, + "List/ListAccordion": { + "filepath": "List/ListAccordion.tsx", + "title": "List.Accordion", + "description": "A component used to display an expandable list item.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [expanded, setExpanded] = React.useState(true);\n\n const handlePress = () => setExpanded(!expanded);\n\n return (\n \n }>\n \n \n \n\n }\n expanded={expanded}\n onPress={handlePress}>\n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "list-accordion", + "data": { + "description": "A component used to display an expandable list item.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [expanded, setExpanded] = React.useState(true);\n\n const handlePress = () => setExpanded(!expanded);\n\n return (\n \n }>\n \n \n \n\n }\n expanded={expanded}\n onPress={handlePress}>\n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "List.Accordion", + "methods": [], + "statics": [], + "props": { + "title": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Title text for the list accordion." + }, + "description": { + "required": false, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Description text for the list accordion." + }, + "left": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { color: ColorValue; style: Style }) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ color: ColorValue; style: Style }", + "signature": { + "properties": [ + { + "key": "color", + "value": { + "name": "ColorValue", + "required": true + } + }, + { + "key": "style", + "value": { + "name": "Style", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which returns a React element to display on the left side." + }, + "right": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { isExpanded: boolean }) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ isExpanded: boolean }", + "signature": { + "properties": [ + { + "key": "isExpanded", + "value": { + "name": "boolean", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which returns a React element to display on the right side." + }, + "expanded": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the accordion is expanded\nIf this prop is provided, the accordion will behave as a \"controlled component\".\nYou'll need to update this prop when you want to toggle the component or on `onPress`." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "onLongPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on long press." + }, + "delayLongPress": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "The number of milliseconds a user must touch the element before executing `onLongPress`." + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the section." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "background": { + "required": false, + "tsType": { + "name": "PressableAndroidRippleConfig" + }, + "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig" + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to the root TouchableRipple container." + }, + "containerStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to the outermost container that wraps the entire content, including left and right items and both title and description." + }, + "contentStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to the content container, which wraps the title and description." + }, + "titleStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to Title element." + }, + "descriptionStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to Description element." + }, + "titleNumberOfLines": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Truncate Title text such that the total number of lines does not\nexceed this number.", + "defaultValue": { + "value": "1", + "computed": false + } + }, + "descriptionNumberOfLines": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Truncate Description text such that the total number of lines does not\nexceed this number.", + "defaultValue": { + "value": "2", + "computed": false + } + }, + "titleMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a title font can reach." + }, + "descriptionMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a description font can reach." + }, + "id": { + "required": false, + "tsType": { + "name": "union", + "raw": "string | number", + "elements": [ + { + "name": "string" + }, + { + "name": "number" + } + ] + }, + "description": "Id is used for distinguishing specific accordion when using List.AccordionGroup. Property is required when using List.AccordionGroup and has no impact on behavior when using standalone List.Accordion." + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "TestID used for testing purposes" + }, + "aria-label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the TouchableRipple. This is read by the screen reader when the user taps the touchable." + }, + "pointerEvents": { + "required": false, + "tsType": { + "name": "ViewProps['pointerEvents']", + "raw": "ViewProps['pointerEvents']" + }, + "description": "`pointerEvents` passed to the `View` container", + "defaultValue": { + "value": "'none'", + "computed": false + } + }, + "hitSlop": { + "required": false, + "tsType": { + "name": "TouchableRippleProps['hitSlop']", + "raw": "TouchableRippleProps['hitSlop']" + }, + "description": "Amount of space between the touchable area and the edge of the component.\nThis can be used to enlarge the touchable area beyond the visible component." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/List/ListAccordion.tsx" + ], + "group": "List" + }, + "List/ListAccordionGroup": { + "filepath": "List/ListAccordionGroup.tsx", + "title": "List.AccordionGroup", + "description": "List.AccordionGroup allows to control a group of List Accordions. `id` prop for List.Accordion is required in order for group to work.\nList.AccordionGroup can be a controlled or uncontrolled component. The example shows the uncontrolled version.\nAt most one Accordion can be expanded at a given time.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n \n \n \n \n \n \n List.Accordion can be wrapped because implementation uses React.Context.\n \n \n \n \n \n \n);\n\nexport default MyComponent;\n```", + "link": "list-accordion-group", + "data": { + "description": "List.AccordionGroup allows to control a group of List Accordions. `id` prop for List.Accordion is required in order for group to work.\nList.AccordionGroup can be a controlled or uncontrolled component. The example shows the uncontrolled version.\nAt most one Accordion can be expanded at a given time.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n \n \n \n \n \n \n \n \n List.Accordion can be wrapped because implementation uses React.Context.\n \n \n \n \n \n \n);\n\nexport default MyComponent;\n```", + "displayName": "List.AccordionGroup", + "methods": [], + "statics": [], + "props": { + "onAccordionPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(expandedId: string | number) => void", + "signature": { + "arguments": [ + { + "name": "expandedId", + "type": { + "name": "union", + "raw": "string | number", + "elements": [ + { + "name": "string" + }, + { + "name": "number" + } + ] + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on selection change." + }, + "expandedId": { + "required": false, + "tsType": { + "name": "union", + "raw": "string | number", + "elements": [ + { + "name": "string" + }, + { + "name": "number" + } + ] + }, + "description": "Id of the currently expanded list accordion" + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "React elements containing list accordions" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/List/ListAccordionGroup.tsx" + ], + "group": "List" + }, + "List/ListIcon": { + "filepath": "List/ListIcon.tsx", + "title": "List.Icon", + "description": "A component to show an icon in a list item.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n <>\n \n \n \n \n);\n\nexport default MyComponent;\n```", + "link": "list-icon", + "data": { + "description": "A component to show an icon in a list item.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n <>\n \n \n \n \n);\n\nexport default MyComponent;\n```", + "displayName": "List.Icon", + "methods": [], + "statics": [], + "props": { + "icon": { + "required": true, + "tsType": { + "name": "IconSource" + }, + "description": "Icon to show." + }, + "color": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Color for the icon." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/List/ListIcon.tsx" + ], + "group": "List" + }, + "List/ListItem": { + "filepath": "List/ListItem.tsx", + "title": "List.Item", + "description": "A component to show tiles inside a List.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => (\n }\n />\n);\n\nexport default MyComponent;\n```\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple", + "link": "list-item", + "data": { + "description": "A component to show tiles inside a List.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => (\n }\n />\n);\n\nexport default MyComponent;\n```\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple", + "displayName": "List.Item", + "methods": [], + "statics": [], + "props": { + "title": { + "required": true, + "tsType": { + "name": "union", + "raw": "| React.ReactNode\n| ((props: {\n selectable: boolean;\n ellipsizeMode: EllipsizeProp | undefined;\n color: ColorValue;\n fontSize: number;\n }) => React.ReactNode)", + "elements": [ + { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + { + "name": "unknown" + } + ] + }, + "description": "Title text for the list item." + }, + "description": { + "required": false, + "tsType": { + "name": "union", + "raw": "| React.ReactNode\n| ((props: {\n selectable: boolean;\n ellipsizeMode: EllipsizeProp | undefined;\n color: ColorValue;\n fontSize: number;\n }) => React.ReactNode)", + "elements": [ + { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + { + "name": "unknown" + } + ] + }, + "description": "Description text for the list item or callback which returns a React element to display the description." + }, + "left": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { color: ColorValue; style: Style }) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ color: ColorValue; style: Style }", + "signature": { + "properties": [ + { + "key": "color", + "value": { + "name": "ColorValue", + "required": true + } + }, + { + "key": "style", + "value": { + "name": "Style", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which returns a React element to display on the left side." + }, + "right": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: { color: ColorValue; style?: Style }) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{ color: ColorValue; style?: Style }", + "signature": { + "properties": [ + { + "key": "color", + "value": { + "name": "ColorValue", + "required": true + } + }, + { + "key": "style", + "value": { + "name": "Style", + "required": false + } + } + ] + } + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback which returns a React element to display on the right side." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to the root TouchableRipple container." + }, + "ref": { + "required": false, + "tsType": { + "name": "ReactRef", + "raw": "React.Ref", + "elements": [ + { + "name": "View" + } + ] + }, + "description": "" + }, + "containerStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to the outermost container that wraps the entire content, including left and right items and both title and description." + }, + "contentStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to the content container, which wraps the title and description." + }, + "titleStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to Title element." + }, + "descriptionStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to Description element." + }, + "titleNumberOfLines": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Truncate Title text such that the total number of lines does not\nexceed this number.", + "defaultValue": { + "value": "1", + "computed": false + } + }, + "descriptionNumberOfLines": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Truncate Description text such that the total number of lines does not\nexceed this number.", + "defaultValue": { + "value": "2", + "computed": false + } + }, + "titleEllipsizeMode": { + "required": false, + "tsType": { + "name": "EllipsizeProp" + }, + "description": "Ellipsize Mode for the Title. One of `'head'`, `'middle'`, `'tail'`, `'clip'`.\n\nSee [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)" + }, + "descriptionEllipsizeMode": { + "required": false, + "tsType": { + "name": "EllipsizeProp" + }, + "description": "Ellipsize Mode for the Description. One of `'head'`, `'middle'`, `'tail'`, `'clip'`.\n\nSee [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)" + }, + "titleMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a title font can reach." + }, + "descriptionMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a description font can reach." + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "TestID used for testing purposes" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/List/ListItem.tsx" + ], + "group": "List" + }, + "List/ListSection": { + "filepath": "List/ListSection.tsx", + "title": "List.Section", + "description": "A component used to group list items.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Some title\n } />\n }\n />\n \n);\n\nexport default MyComponent;\n```", + "link": "list-section", + "data": { + "description": "A component used to group list items.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Some title\n } />\n }\n />\n \n);\n\nexport default MyComponent;\n```", + "displayName": "List.Section", + "methods": [], + "statics": [], + "props": { + "title": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Title text for the section." + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the section." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "titleStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to Title element." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/List/ListSection.tsx" + ], + "group": "List" + }, + "List/ListSubheader": { + "filepath": "List/ListSubheader.tsx", + "title": "List.Subheader", + "description": "A component used to display a header in lists.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => My List Title;\n\nexport default MyComponent;\n```", + "link": "list-subheader", + "data": { + "description": "A component used to display a header in lists.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => My List Title;\n\nexport default MyComponent;\n```", + "displayName": "List.Subheader", + "methods": [], + "statics": [], + "props": { + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to Text element." + }, + "maxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a text font can reach." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/List/ListSubheader.tsx" + ], + "group": "List" + }, + "Menu/Menu": { + "filepath": "Menu/Menu.tsx", + "title": "Menu", + "description": "Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Menu, Divider, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const openMenu = () => setVisible(true);\n\n const closeMenu = () => setVisible(false);\n\n return (\n \n \n Show menu}>\n {}} title=\"Item 1\" />\n {}} title=\"Item 2\" />\n \n {}} title=\"Item 3\" />\n \n \n \n );\n};\n\nexport default MyComponent;\n```\n\n### Note\nWhen using `Menu` within a React Native's `Modal` component, you need to wrap all\n`Modal` contents within a `PaperProvider` in order for the menu to show. This\nwrapping is not necessary if you use Paper's `Modal` instead.", + "link": "menu", + "data": { + "description": "Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Menu, Divider, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const openMenu = () => setVisible(true);\n\n const closeMenu = () => setVisible(false);\n\n return (\n \n \n Show menu}>\n {}} title=\"Item 1\" />\n {}} title=\"Item 2\" />\n \n {}} title=\"Item 3\" />\n \n \n \n );\n};\n\nexport default MyComponent;\n```\n\n### Note\nWhen using `Menu` within a React Native's `Modal` component, you need to wrap all\n`Modal` contents within a `PaperProvider` in order for the menu to show. This\nwrapping is not necessary if you use Paper's `Modal` instead.", + "displayName": "Menu", + "methods": [], + "statics": [], + "props": { + "visible": { + "required": true, + "tsType": { + "name": "boolean" + }, + "description": "Whether the Menu is currently visible." + }, + "anchor": { + "required": true, + "tsType": { + "name": "union", + "raw": "React.ReactNode | { x: number; y: number }", + "elements": [ + { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + { + "name": "signature", + "type": "object", + "raw": "{ x: number; y: number }", + "signature": { + "properties": [ + { + "key": "x", + "value": { + "name": "number", + "required": true + } + }, + { + "key": "y", + "value": { + "name": "number", + "required": true + } + } + ] + } + } + ] + }, + "description": "The anchor to open the menu from. In most cases, it will be a button that opens the menu." + }, + "anchorPosition": { + "required": false, + "tsType": { + "name": "union", + "raw": "'top' | 'bottom'", + "elements": [ + { + "name": "literal", + "value": "'top'" + }, + { + "name": "literal", + "value": "'bottom'" + } + ] + }, + "description": "Whether the menu should open at the top of the anchor or at its bottom.\nApplied only when anchor is a node, not an x/y position." + }, + "statusBarHeight": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Extra margin to add at the top of the menu to account for translucent status bar on Android.\nIf you are using Expo, we assume translucent status bar and set a height for status bar automatically.\nPass `0` or a custom value to and customize it.\nThis is automatically handled on iOS." + }, + "onDismiss": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "() => void", + "signature": { + "arguments": [], + "return": { + "name": "void" + } + } + }, + "description": "Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called." + }, + "overlayAccessibilityLabel": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the overlay. This is read by the screen reader when the user taps outside the menu.", + "defaultValue": { + "value": "'Close menu'", + "computed": false + } + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `Menu`." + }, + "contentStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "SurfaceStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style of menu's inner content." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "elevation": { + "required": false, + "tsType": { + "name": "Elevation" + }, + "description": "Elevation level of the menu's content. Shadow styles are calculated based on this value. Default `backgroundColor` is taken from the corresponding `theme.colors.elevation` property. By default equals `2`.\n@supported Available in v5.x with theme version 3", + "defaultValue": { + "value": "2", + "computed": false + } + }, + "mode": { + "required": false, + "tsType": { + "name": "union", + "raw": "'flat' | 'elevated'", + "elements": [ + { + "name": "literal", + "value": "'flat'" + }, + { + "name": "literal", + "value": "'elevated'" + } + ] + }, + "description": "Mode of the menu's content.\n- `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.\n- `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.\n\n@supported Available in v5.x with theme version 3", + "defaultValue": { + "value": "'elevated'", + "computed": false + } + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "keyboardShouldPersistTaps": { + "required": false, + "tsType": { + "name": "ScrollViewProps['keyboardShouldPersistTaps']", + "raw": "ScrollViewProps['keyboardShouldPersistTaps']" + }, + "description": "Inner ScrollView prop" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "testID to be used on tests.", + "defaultValue": { + "value": "'menu'", + "computed": false + } + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Menu/Menu.tsx" + ] + }, + "Menu/MenuItem": { + "filepath": "Menu/MenuItem.tsx", + "title": "Menu.Item", + "description": "A component to show a single list item inside a Menu.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Menu } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} title=\"Redo\" />\n {}} title=\"Undo\" />\n {}} title=\"Cut\" disabled />\n {}} title=\"Copy\" disabled />\n {}} title=\"Paste\" />\n \n);\n\nexport default MyComponent;\n```", + "link": "menu-item", + "data": { + "description": "A component to show a single list item inside a Menu.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Menu } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} title=\"Redo\" />\n {}} title=\"Undo\" />\n {}} title=\"Cut\" disabled />\n {}} title=\"Copy\" disabled />\n {}} title=\"Paste\" />\n \n);\n\nexport default MyComponent;\n```", + "displayName": "Menu.Item", + "methods": [], + "statics": [], + "props": { + "title": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Title text for the `MenuItem`." + }, + "leadingIcon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "@renamed Renamed from 'icon' to 'leadingIcon' in v5.x\n\nLeading icon to display for the `MenuItem`." + }, + "trailingIcon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "@supported Available in v5.x with theme version 3\n\nTrailing icon to display for the `MenuItem`." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the 'item' is disabled. A disabled 'item' is greyed out and `onPress` is not called on touch." + }, + "dense": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "@supported Available in v5.x with theme version 3\n\nSets min height with densed layout." + }, + "background": { + "required": false, + "tsType": { + "name": "PressableAndroidRippleConfig" + }, + "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig" + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "titleMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a title font can reach.", + "defaultValue": { + "value": "1.5", + "computed": false + } + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to the root TouchableRipple container.\n" + }, + "containerStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to the outermost container that wraps the entire content, including leading and trailing icons and title text." + }, + "contentStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to the content container, which wraps the title text." + }, + "titleStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to the Title element." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "hitSlop": { + "required": false, + "tsType": { + "name": "TouchableRippleProps['hitSlop']", + "raw": "TouchableRippleProps['hitSlop']" + }, + "description": "Sets additional distance outside of element in which a press can be detected." + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "TestID used for testing purposes", + "defaultValue": { + "value": "'menu-item'", + "computed": false + } + }, + "aria-label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the Touchable. This is read by the screen reader when the user taps the component." + }, + "aria-checked": { + "required": false, + "tsType": { + "name": "union", + "raw": "boolean | 'mixed'", + "elements": [ + { + "name": "boolean" + }, + { + "name": "literal", + "value": "'mixed'" + } + ] + }, + "description": "Indicates whether the element is checked. Accepts `true`, `false`,\nor `'mixed'` for an indeterminate state." + }, + "aria-selected": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Indicates whether the element is selected." + }, + "aria-busy": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Indicates whether the element is currently busy (e.g. loading)." + }, + "aria-expanded": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Indicates whether the element's controlled content is expanded." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Menu/MenuItem.tsx" + ], + "group": "Menu" + }, + "Modal": { + "filepath": "Modal.tsx", + "title": "Modal", + "description": "The Modal component is a simple way to present content above an enclosing view.\nTo render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal) component.\nNote that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showModal = () => setVisible(true);\n const hideModal = () => setVisible(false);\n\n const containerStyle = { padding: 20 };\n\n return (\n \n \n \n Example Modal. Click outside this area to dismiss.\n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "modal", + "data": { + "description": "The Modal component is a simple way to present content above an enclosing view.\nTo render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal) component.\nNote that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showModal = () => setVisible(true);\n const hideModal = () => setVisible(false);\n\n const containerStyle = { padding: 20 };\n\n return (\n \n \n \n Example Modal. Click outside this area to dismiss.\n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Modal", + "methods": [], + "statics": [], + "props": { + "dismissable": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Determines whether clicking outside the modal dismisses it.", + "defaultValue": { + "value": "true", + "computed": false + } + }, + "dismissableBackButton": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Determines whether clicking Android hardware back button dismisses the dialog.", + "defaultValue": { + "value": "dismissable", + "computed": true + } + }, + "onDismiss": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "() => void", + "signature": { + "arguments": [], + "return": { + "name": "void" + } + } + }, + "description": "Callback that is called when the user dismisses the modal.", + "defaultValue": { + "value": "() => {}", + "computed": false + } + }, + "overlayAccessibilityLabel": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the overlay. This is read by the screen reader when the user taps outside the modal.", + "defaultValue": { + "value": "'Close modal'", + "computed": false + } + }, + "aria-label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the dialog. This is read by the screen reader when the user opens a dialog." + }, + "visible": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Determines Whether the modal is visible.", + "defaultValue": { + "value": "false", + "computed": false + } + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `Modal`." + }, + "contentContainerStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "SurfaceStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style for the content of the modal.\n\nBackground color and border radius should be specified via props instead:\n- `contentBackgroundColor`\n- `contentBorderRadius`" + }, + "contentBackgroundColor": { + "required": false, + "tsType": { + "name": "SurfaceProps['backgroundColor']", + "raw": "SurfaceProps['backgroundColor']" + }, + "description": "Background color of the modal content. Defaults to transparent.", + "defaultValue": { + "value": "'transparent'", + "computed": false + } + }, + "contentBorderRadius": { + "required": false, + "tsType": { + "name": "SurfaceProps['borderRadius']", + "raw": "SurfaceProps['borderRadius']" + }, + "description": "Border radius of the modal content." + }, + "contentElevation": { + "required": false, + "tsType": { + "name": "Elevation" + }, + "description": "Elevation level of the modal content. Defaults to level 1." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style for the wrapper of the modal.\nUse this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "testID to be used on tests.", + "defaultValue": { + "value": "'modal'", + "computed": false + } + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Modal.tsx" + ] + }, + "Portal/Portal": { + "filepath": "Portal/Portal.tsx", + "title": "Portal", + "description": "Portal allows rendering a component at a different place in the parent tree.\nYou can use it to render content which should appear above other elements, similar to `Modal`.\nIt requires a [`Portal.Host`](PortalHost) component to be rendered somewhere in the parent tree.\nNote that if you're using the `Provider` component, this already includes a `Portal.Host`.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n This is rendered at a different place\n \n);\n\nexport default MyComponent;\n```", + "link": "portal", + "data": { + "description": "Portal allows rendering a component at a different place in the parent tree.\nYou can use it to render content which should appear above other elements, similar to `Modal`.\nIt requires a [`Portal.Host`](PortalHost) component to be rendered somewhere in the parent tree.\nNote that if you're using the `Provider` component, this already includes a `Portal.Host`.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n This is rendered at a different place\n \n);\n\nexport default MyComponent;\n```", + "displayName": "Portal", + "methods": [], + "statics": [ + { + "name": "Host", + "docblock": null, + "type": { + "name": "static", + "raw": "static" + }, + "link": "portal-host.html" + } + ], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `Portal`." + }, + "theme": { + "required": true, + "tsType": { + "name": "InternalTheme" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Portal/Portal.tsx" + ] + }, + "Portal/PortalHost": { + "filepath": "Portal/PortalHost.tsx", + "title": "Portal.Host", + "description": "Portal host renders all of its children `Portal` elements.\nFor example, you can wrap a screen in `Portal.Host` to render items above the screen.\nIf you're using the `Provider` component, it already includes `Portal.Host`.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Text } from 'react-native';\nimport { Portal } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Content of the app\n \n);\n\nexport default MyComponent;\n```\n\nHere any `Portal` elements under `` are rendered alongside `` and will appear above `` like a `Modal`.", + "link": "portal-host", + "data": { + "description": "Portal host renders all of its children `Portal` elements.\nFor example, you can wrap a screen in `Portal.Host` to render items above the screen.\nIf you're using the `Provider` component, it already includes `Portal.Host`.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Text } from 'react-native';\nimport { Portal } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Content of the app\n \n);\n\nexport default MyComponent;\n```\n\nHere any `Portal` elements under `` are rendered alongside `` and will appear above `` like a `Modal`.", + "displayName": "Portal.Host", + "methods": [], + "statics": [], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Portal/PortalHost.tsx" + ], + "group": "Portal" + }, + "ProgressBar": { + "filepath": "ProgressBar.tsx", + "title": "ProgressBar", + "description": "Progress bar is an indicator used to present progress of some activity in the app.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ProgressBar, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```", + "link": "progress-bar", + "data": { + "description": "Progress bar is an indicator used to present progress of some activity in the app.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ProgressBar, Palette } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n);\n\nexport default MyComponent;\n```", + "displayName": "ProgressBar", + "methods": [], + "statics": [], + "props": { + "animatedValue": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Animated value (between 0 and 1). This tells the progress bar to rely on this value to animate it.\nNote: It should not be used in parallel with the `progress` prop." + }, + "progress": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Progress value (between 0 and 1).\nNote: It should not be used in parallel with the `animatedValue` prop.", + "defaultValue": { + "value": "0", + "computed": false + } + }, + "color": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Color of the progress bar. The background color will be calculated based on this but you can change it by passing `backgroundColor` to `style` prop." + }, + "indeterminate": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "If the progress bar will show indeterminate progress." + }, + "visible": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to show the ProgressBar (true, the default) or hide it (false).", + "defaultValue": { + "value": "true", + "computed": false + } + }, + "fillStyle": { + "required": false, + "tsType": { + "name": "Animated.WithAnimatedValue", + "elements": [ + { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + } + ], + "raw": "Animated.WithAnimatedValue>" + }, + "description": "Style of filled part of the ProgresBar." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "testID to be used on tests.", + "defaultValue": { + "value": "'progress-bar'", + "computed": false + } + } + } + }, + "type": "component", + "dependencies": [ + "src/components/ProgressBar.tsx" + ] + }, + "RadioButton/RadioButton": { + "filepath": "RadioButton/RadioButton.tsx", + "title": "RadioButton", + "description": "Radio buttons allow the selection a single option from a set.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { RadioButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [checked, setChecked] = React.useState('first');\n\n return (\n \n setChecked('first')}\n />\n setChecked('second')}\n />\n \n );\n};\n\nexport default MyComponent;\n```", + "link": "radio-button", + "data": { + "description": "Radio buttons allow the selection a single option from a set.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { RadioButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [checked, setChecked] = React.useState('first');\n\n return (\n \n setChecked('first')}\n />\n setChecked('second')}\n />\n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "RadioButton", + "methods": [], + "statics": [], + "props": { + "value": { + "required": true, + "tsType": { + "name": "string" + }, + "description": "Value of the radio button" + }, + "status": { + "required": false, + "tsType": { + "name": "union", + "raw": "'checked' | 'unchecked'", + "elements": [ + { + "name": "literal", + "value": "'checked'" + }, + { + "name": "literal", + "value": "'unchecked'" + } + ] + }, + "description": "Status of radio button." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether radio is disabled." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "uncheckedColor": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for unchecked radio." + }, + "color": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for radio." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "testID to be used on tests." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/RadioButton/RadioButton.tsx" + ] + }, + "RadioButton/RadioButtonAndroid": { + "filepath": "RadioButton/RadioButtonAndroid.tsx", + "title": "RadioButton.Android", + "description": "Radio buttons allow the selection a single option from a set.\nThis component follows platform guidelines for Android, but can be used\non any platform.\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple", + "link": "radio-button-android", + "data": { + "description": "Radio buttons allow the selection a single option from a set.\nThis component follows platform guidelines for Android, but can be used\non any platform.\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple", + "displayName": "RadioButton.Android", + "methods": [], + "statics": [], + "props": { + "value": { + "required": true, + "tsType": { + "name": "string" + }, + "description": "Value of the radio button" + }, + "status": { + "required": false, + "tsType": { + "name": "union", + "raw": "'checked' | 'unchecked'", + "elements": [ + { + "name": "literal", + "value": "'checked'" + }, + { + "name": "literal", + "value": "'unchecked'" + } + ] + }, + "description": "Status of radio button." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether radio is disabled." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(param?: any) => void", + "signature": { + "arguments": [ + { + "name": "param", + "type": { + "name": "any" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "uncheckedColor": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for unchecked radio." + }, + "color": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for radio." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "testID to be used on tests." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/RadioButton/RadioButtonAndroid.tsx" + ], + "group": "RadioButton" + }, + "RadioButton/RadioButtonGroup": { + "filepath": "RadioButton/RadioButtonGroup.tsx", + "title": "RadioButton.Group", + "description": "Radio button group allows to control a group of radio buttons.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { RadioButton, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('first');\n\n return (\n setValue(newValue)} value={value}>\n \n First\n \n \n \n Second\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "radio-button-group", + "data": { + "description": "Radio button group allows to control a group of radio buttons.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { RadioButton, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('first');\n\n return (\n setValue(newValue)} value={value}>\n \n First\n \n \n \n Second\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "RadioButton.Group", + "methods": [], + "statics": [], + "props": { + "onValueChange": { + "required": true, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(value: string) => void", + "signature": { + "arguments": [ + { + "name": "value", + "type": { + "name": "string" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on selection change." + }, + "value": { + "required": true, + "tsType": { + "name": "string" + }, + "description": "Value of the currently selected radio button." + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "React elements containing radio buttons." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/RadioButton/RadioButtonGroup.tsx" + ], + "group": "RadioButton" + }, + "RadioButton/RadioButtonIOS": { + "filepath": "RadioButton/RadioButtonIOS.tsx", + "title": "RadioButton.IOS", + "description": "Radio buttons allow the selection a single option from a set.\nThis component follows platform guidelines for iOS, but can be used\non any platform.\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple", + "link": "radio-button-ios", + "data": { + "description": "Radio buttons allow the selection a single option from a set.\nThis component follows platform guidelines for iOS, but can be used\non any platform.\n\n@extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple", + "displayName": "RadioButton.IOS", + "methods": [], + "statics": [], + "props": { + "value": { + "required": true, + "tsType": { + "name": "string" + }, + "description": "Value of the radio button" + }, + "status": { + "required": false, + "tsType": { + "name": "union", + "raw": "'checked' | 'unchecked'", + "elements": [ + { + "name": "literal", + "value": "'checked'" + }, + { + "name": "literal", + "value": "'unchecked'" + } + ] + }, + "description": "Status of radio button." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether radio is disabled." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "color": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for radio." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "testID to be used on tests." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/RadioButton/RadioButtonIOS.tsx" + ], + "group": "RadioButton" + }, + "RadioButton/RadioButtonItem": { + "filepath": "RadioButton/RadioButtonItem.tsx", + "title": "RadioButton.Item", + "description": "RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { RadioButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('first');\n\n return (\n setValue(value)} value={value}>\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "radio-button-item", + "data": { + "description": "RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { RadioButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('first');\n\n return (\n setValue(value)} value={value}>\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "RadioButton.Item", + "methods": [], + "statics": [], + "props": { + "value": { + "required": true, + "tsType": { + "name": "string" + }, + "description": "Value of the radio button." + }, + "label": { + "required": true, + "tsType": { + "name": "string" + }, + "description": "Label to be displayed on the item." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether radio is disabled." + }, + "background": { + "required": false, + "tsType": { + "name": "PressableAndroidRippleConfig" + }, + "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig" + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "onLongPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on long press." + }, + "aria-label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.", + "defaultValue": { + "value": "label", + "computed": true + } + }, + "uncheckedColor": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for unchecked radio." + }, + "color": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom color for radio." + }, + "status": { + "required": false, + "tsType": { + "name": "union", + "raw": "'checked' | 'unchecked'", + "elements": [ + { + "name": "literal", + "value": "'checked'" + }, + { + "name": "literal", + "value": "'unchecked'" + } + ] + }, + "description": "Status of radio button." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Additional styles for container View." + }, + "labelStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style that is passed to Label element." + }, + "labelVariant": { + "required": false, + "tsType": { + "name": "TypescaleKey" + }, + "description": "@supported Available in v5.x with theme version 3\n\nLabel text variant defines appropriate text styles for type role and its size.\nAvailable variants:\n\n Display: `displayLarge`, `displayMedium`, `displaySmall`\n\n Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`\n\n Title: `titleLarge`, `titleMedium`, `titleSmall`\n\n Label: `labelLarge`, `labelMedium`, `labelSmall`\n\n Body: `bodyLarge`, `bodyMedium`, `bodySmall`", + "defaultValue": { + "value": "'bodyLarge'", + "computed": false + } + }, + "labelMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a label font can reach." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "testID to be used on tests." + }, + "mode": { + "required": false, + "tsType": { + "name": "union", + "raw": "'android' | 'ios'", + "elements": [ + { + "name": "literal", + "value": "'android'" + }, + { + "name": "literal", + "value": "'ios'" + } + ] + }, + "description": "Whether `` or `` should be used.\nLeft undefined `` will be used." + }, + "position": { + "required": false, + "tsType": { + "name": "union", + "raw": "'leading' | 'trailing'", + "elements": [ + { + "name": "literal", + "value": "'leading'" + }, + { + "name": "literal", + "value": "'trailing'" + } + ] + }, + "description": "Radio button control position.", + "defaultValue": { + "value": "'trailing'", + "computed": false + } + }, + "hitSlop": { + "required": false, + "tsType": { + "name": "TouchableRippleProps['hitSlop']", + "raw": "TouchableRippleProps['hitSlop']" + }, + "description": "Sets additional distance outside of element in which a press can be detected." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/RadioButton/RadioButtonItem.tsx" + ], + "group": "RadioButton" + }, + "Searchbar": { + "filepath": "Searchbar.tsx", + "title": "Searchbar", + "description": "Searchbar is a simple input box where users can type search queries.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Searchbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [searchQuery, setSearchQuery] = React.useState('');\n\n return (\n \n );\n};\n\nexport default MyComponent;\n\n```", + "link": "searchbar", + "data": { + "description": "Searchbar is a simple input box where users can type search queries.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Searchbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [searchQuery, setSearchQuery] = React.useState('');\n\n return (\n \n );\n};\n\nexport default MyComponent;\n\n```", + "displayName": "Searchbar", + "methods": [], + "statics": [], + "props": { + "placeholder": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Hint text shown when the input is empty." + }, + "value": { + "required": true, + "tsType": { + "name": "string" + }, + "description": "The value of the text input." + }, + "onChangeText": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(query: string) => void", + "signature": { + "arguments": [ + { + "name": "query", + "type": { + "name": "string" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Callback that is called when the text input's text changes." + }, + "mode": { + "required": false, + "tsType": { + "name": "union", + "raw": "'bar' | 'view'", + "elements": [ + { + "name": "literal", + "value": "'bar'" + }, + { + "name": "literal", + "value": "'view'" + } + ] + }, + "description": "@supported Available in v5.x with theme version 3\nSearch layout mode, the default value is \"bar\".", + "defaultValue": { + "value": "'bar'", + "computed": false + } + }, + "icon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "Icon name for the left icon button (see `onIconPress`)." + }, + "iconColor": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Custom color for icon, default will be derived from theme" + }, + "onIconPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Callback to execute if we want the left icon to act as button." + }, + "onClearIconPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Callback to execute if we want to add custom behaviour to close icon button." + }, + "searchAccessibilityLabel": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button.", + "defaultValue": { + "value": "'search'", + "computed": false + } + }, + "clearIcon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "Custom icon for clear button, default will be icon close. It's visible when `loading` is set to `false`.\nIn v5.x with theme version 3, `clearIcon` is visible only if `right` prop is not defined." + }, + "clearAccessibilityLabel": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the button. This is read by the screen reader when the user taps the button.", + "defaultValue": { + "value": "'clear'", + "computed": false + } + }, + "traileringIcon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "@supported Available in v5.x with theme version 3\nIcon name for the right trailering icon button.\nWorks only when `mode` is set to \"bar\". It won't be displayed if `loading` is set to `true`." + }, + "traileringIconColor": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "@supported Available in v5.x with theme version 3\nCustom color for the right trailering icon, default will be derived from theme" + }, + "onTraileringIconPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Callback to execute on the right trailering icon button press." + }, + "traileringIconAccessibilityLabel": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the right trailering icon button. This is read by the screen reader when the user taps the button." + }, + "right": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: {\n color: ColorValue;\n style: Style;\n testID: string;\n}) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "signature", + "type": "object", + "raw": "{\n color: ColorValue;\n style: Style;\n testID: string;\n}", + "signature": { + "properties": [ + { + "key": "color", + "value": { + "name": "ColorValue", + "required": true + } + }, + { + "key": "style", + "value": { + "name": "Style", + "required": true + } + }, + { + "key": "testID", + "value": { + "name": "string", + "required": true + } + } + ] + } + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "@supported Available in v5.x with theme version 3\nCallback which returns a React element to display on the right side.\nWorks only when `mode` is set to \"bar\"." + }, + "showDivider": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "@supported Available in v5.x with theme version 3\nWhether to show `Divider` at the bottom of the search.\nWorks only when `mode` is set to \"view\". True by default.", + "defaultValue": { + "value": "true", + "computed": false + } + }, + "elevation": { + "required": false, + "tsType": { + "name": "Elevation" + }, + "description": "@supported Available in v5.x with theme version 3\nChanges Searchbar shadow and background on iOS and Android.", + "defaultValue": { + "value": "0", + "computed": false + } + }, + "inputStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Set style of the TextInput component inside the searchbar" + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "SurfaceStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "loading": { + "required": false, + "tsType": { + "name": "Boolean" + }, + "description": "Custom flag for replacing clear button with activity indicator.", + "defaultValue": { + "value": "false", + "computed": false + } + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "TestID used for testing purposes", + "defaultValue": { + "value": "'search-bar'", + "computed": false + } + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "ref": { + "required": false, + "tsType": { + "name": "ReactRef", + "raw": "React.Ref", + "elements": [ + { + "name": "Pick", + "elements": [ + { + "name": "TextInput" + }, + { + "name": "union", + "raw": "'setNativeProps' | 'isFocused' | 'clear' | 'blur' | 'focus' | 'setSelection'", + "elements": [ + { + "name": "literal", + "value": "'setNativeProps'" + }, + { + "name": "literal", + "value": "'isFocused'" + }, + { + "name": "literal", + "value": "'clear'" + }, + { + "name": "literal", + "value": "'blur'" + }, + { + "name": "literal", + "value": "'focus'" + }, + { + "name": "literal", + "value": "'setSelection'" + } + ] + } + ], + "raw": "Pick<\n TextInput,\n 'setNativeProps' | 'isFocused' | 'clear' | 'blur' | 'focus' | 'setSelection'\n>" + } + ] + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Searchbar.tsx" + ] + }, + "SegmentedButtons/SegmentedButtons": { + "filepath": "SegmentedButtons/SegmentedButtons.tsx", + "title": "SegmentedButtons", + "description": "Segmented buttons can be used to select options, switch views or sort elements.
\n\n## Usage\n```js\nimport * as React from 'react';\nimport { SafeAreaView, StyleSheet } from 'react-native';\nimport { SegmentedButtons } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('');\n\n return (\n \n \n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n },\n});\n\nexport default MyComponent;\n```", + "link": "segmented-buttons", + "data": { + "description": "Segmented buttons can be used to select options, switch views or sort elements.
\n\n## Usage\n```js\nimport * as React from 'react';\nimport { SafeAreaView, StyleSheet } from 'react-native';\nimport { SegmentedButtons } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('');\n\n return (\n \n \n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n },\n});\n\nexport default MyComponent;\n```", + "displayName": "SegmentedButtons", + "methods": [], + "statics": [], + "props": { + "buttons": { + "required": true, + "tsType": { + "name": "Array", + "elements": [ + { + "name": "signature", + "type": "object", + "raw": "{\n value: T;\n icon?: IconSource;\n disabled?: boolean;\n 'aria-label'?: string;\n checkedColor?: string;\n uncheckedColor?: string;\n onPress?: (event: GestureResponderEvent) => void;\n label?: string;\n showSelectedCheck?: boolean;\n style?: StyleProp;\n labelStyle?: StyleProp;\n testID?: string;\n}", + "signature": { + "properties": [ + { + "key": "value", + "value": { + "name": "T", + "required": true + } + }, + { + "key": "icon", + "value": { + "name": "IconSource", + "required": false + } + }, + { + "key": "disabled", + "value": { + "name": "boolean", + "required": false + } + }, + { + "key": "aria-label", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "checkedColor", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "uncheckedColor", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "onPress", + "value": { + "name": "signature", + "type": "function", + "raw": "(event: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "event", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + }, + "required": false + } + }, + { + "key": "label", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "showSelectedCheck", + "value": { + "name": "boolean", + "required": false + } + }, + { + "key": "style", + "value": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp", + "required": false + } + }, + { + "key": "labelStyle", + "value": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp", + "required": false + } + }, + { + "key": "testID", + "value": { + "name": "string", + "required": false + } + } + ] + } + } + ], + "raw": "{\n value: T;\n icon?: IconSource;\n disabled?: boolean;\n 'aria-label'?: string;\n checkedColor?: string;\n uncheckedColor?: string;\n onPress?: (event: GestureResponderEvent) => void;\n label?: string;\n showSelectedCheck?: boolean;\n style?: StyleProp;\n labelStyle?: StyleProp;\n testID?: string;\n}[]" + }, + "description": "Buttons to display as options in toggle button.\nButton should contain the following properties:\n- `value`: value of button (required)\n- `icon`: icon to display for the item\n- `disabled`: whether the button is disabled\n- `aria-label`: accessibility label for the button. This is read by the screen reader when the user taps the button.\n- `checkedColor`: custom color for checked Text and Icon\n- `uncheckedColor`: custom color for unchecked Text and Icon\n- `onPress`: callback that is called when button is pressed\n- `label`: label text of the button\n- `showSelectedCheck`: show optional check icon to indicate selected state\n- `style`: pass additional styles for the button\n- `testID`: testID to be used on tests" + }, + "density": { + "required": false, + "tsType": { + "name": "union", + "raw": "'regular' | 'small' | 'medium' | 'high'", + "elements": [ + { + "name": "literal", + "value": "'regular'" + }, + { + "name": "literal", + "value": "'small'" + }, + { + "name": "literal", + "value": "'medium'" + }, + { + "name": "literal", + "value": "'high'" + } + ] + }, + "description": "Density is applied to the height, to allow usage in denser UIs" + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/SegmentedButtons/SegmentedButtons.tsx" + ] + }, + "Snackbar": { + "filepath": "Snackbar.tsx", + "title": "Snackbar", + "description": "Snackbars provide brief feedback about an operation through a message rendered at the bottom of the container in which it's wrapped.\n\nNote: To display it as a popup, regardless of the parent's position, wrap it with a `Portal` component – refer to the example in the \"More Examples` section.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { Button, Snackbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const onToggleSnackBar = () => setVisible(!visible);\n\n const onDismissSnackBar = () => setVisible(false);\n\n return (\n \n \n {\n // Do something\n },\n }}>\n Hey there! I'm a Snackbar.\n \n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'space-between',\n },\n});\n\nexport default MyComponent;\n```", + "link": "snackbar", + "data": { + "description": "Snackbars provide brief feedback about an operation through a message rendered at the bottom of the container in which it's wrapped.\n\nNote: To display it as a popup, regardless of the parent's position, wrap it with a `Portal` component – refer to the example in the \"More Examples` section.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { Button, Snackbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const onToggleSnackBar = () => setVisible(!visible);\n\n const onDismissSnackBar = () => setVisible(false);\n\n return (\n \n \n {\n // Do something\n },\n }}>\n Hey there! I'm a Snackbar.\n \n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'space-between',\n },\n});\n\nexport default MyComponent;\n```", + "displayName": "Snackbar", + "methods": [], + "statics": [], + "props": { + "visible": { + "required": true, + "tsType": { + "name": "boolean" + }, + "description": "Whether the Snackbar is currently visible." + }, + "action": { + "required": false, + "tsType": { + "name": "intersection", + "raw": "$RemoveChildren & {\n label: string;\n}", + "elements": [ + { + "name": "$RemoveChildren", + "elements": [ + { + "name": "Button" + } + ], + "raw": "$RemoveChildren" + }, + { + "name": "signature", + "type": "object", + "raw": "{\n label: string;\n}", + "signature": { + "properties": [ + { + "key": "label", + "value": { + "name": "string", + "required": true + } + } + ] + } + } + ] + }, + "description": "Label and press callback for the action button. It should contain the following properties:\n- `label` - Label of the action button\n- `onPress` - Callback that is called when action button is pressed." + }, + "icon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "@supported Available in v5.x with theme version 3\nIcon to display when `onIconPress` is defined. Default will be `close` icon." + }, + "onIconPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "() => void", + "signature": { + "arguments": [], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on icon button press. The icon button appears only when this prop is specified." + }, + "iconAccessibilityLabel": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "@supported Available in v5.x with theme version 3\nAccessibility label for the icon button. This is read by the screen reader when the user taps the button.", + "defaultValue": { + "value": "'Close icon'", + "computed": false + } + }, + "duration": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "The duration for which the Snackbar is shown.", + "defaultValue": { + "value": "7000", + "computed": false + } + }, + "onDismiss": { + "required": true, + "tsType": { + "name": "signature", + "type": "function", + "raw": "() => void", + "signature": { + "arguments": [], + "return": { + "name": "void" + } + } + }, + "description": "Callback called when Snackbar is dismissed. The `visible` prop needs to be updated when this is called." + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Text content of the Snackbar." + }, + "elevation": { + "required": false, + "tsType": { + "name": "Elevation" + }, + "description": "@supported Available in v5.x with theme version 3\nChanges Snackbar shadow and background on iOS and Android.", + "defaultValue": { + "value": "2", + "computed": false + } + }, + "maxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a text font can reach." + }, + "wrapperStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style for the wrapper of the snackbar" + }, + "contentStyle": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "Style for the content of the snackbar" + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "SurfaceStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "ref": { + "required": false, + "tsType": { + "name": "ReactRefObject", + "raw": "React.RefObject", + "elements": [ + { + "name": "View" + } + ] + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "TestID used for testing purposes" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Snackbar.tsx" + ] + }, + "Surface": { + "filepath": "Surface.tsx", + "title": "Surface", + "description": "Surface is a basic container that can give depth to an element with elevation shadow.\n\nOn Android, Surface uses the native `elevation` style,\nand falls back to shadows that approximate the elevation on other platforms.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Surface, Text } from 'react-native-paper';\nimport { StyleSheet } from 'react-native';\n\nconst MyComponent = () => (\n \n Surface\n \n);\n\nexport default MyComponent;\n\nconst styles = StyleSheet.create({\n surface: {\n height: 80,\n width: 80,\n padding: 8,\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n```", + "link": "surface", + "data": { + "description": "Surface is a basic container that can give depth to an element with elevation shadow.\n\nOn Android, Surface uses the native `elevation` style,\nand falls back to shadows that approximate the elevation on other platforms.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Surface, Text } from 'react-native-paper';\nimport { StyleSheet } from 'react-native';\n\nconst MyComponent = () => (\n \n Surface\n \n);\n\nexport default MyComponent;\n\nconst styles = StyleSheet.create({\n surface: {\n height: 80,\n width: 80,\n padding: 8,\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n```", + "displayName": "Surface", + "methods": [], + "statics": [], + "props": { + "backgroundColor": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Background color of the Surface. Overrides the color derived from\n`elevation`." + }, + "borderRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of every corner of the Surface." + }, + "borderBottomEndRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of the bottom-end corner of the Surface." + }, + "borderBottomLeftRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of the bottom-left corner of the Surface." + }, + "borderBottomRightRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of the bottom-right corner of the Surface." + }, + "borderBottomStartRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of the bottom-start corner of the Surface." + }, + "borderEndEndRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of the end-end corner of the Surface." + }, + "borderEndStartRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of the end-start corner of the Surface." + }, + "borderStartEndRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of the start-end corner of the Surface." + }, + "borderStartStartRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of the start-start corner of the Surface." + }, + "borderTopEndRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of the top-end corner of the Surface." + }, + "borderTopLeftRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of the top-left corner of the Surface." + }, + "borderTopRightRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of the top-right corner of the Surface." + }, + "borderTopStartRadius": { + "required": false, + "tsType": { + "name": "Extract['borderRadius']", + "raw": "Extract<\n AnimatedStyle>>,\n Record\n>[Key]" + }, + "description": "Radius of the top-start corner of the Surface." + }, + "borderCurve": { + "required": false, + "tsType": { + "name": "ViewStyle['borderCurve']", + "raw": "ViewStyle['borderCurve']" + }, + "description": "Corner curve of the Surface on iOS.", + "defaultValue": { + "value": "'continuous'", + "computed": false + } + }, + "transitionDuration": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Duration of the background, elevation, and shadow transitions in\nmilliseconds." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "AnimatedStyle", + "elements": [ + { + "name": "Omit", + "elements": [ + { + "name": "ViewStyle" + }, + { + "name": "union", + "raw": "keyof SurfaceVisualProps | 'elevation'", + "elements": [ + { + "name": "unknown" + }, + { + "name": "literal", + "value": "'elevation'" + } + ] + } + ], + "raw": "Omit" + } + ], + "raw": "AnimatedStyle<\n Omit\n>" + } + ], + "raw": "StyleProp" + }, + "description": "Style of the Surface.\n\nThis doesn't support all View style properties:\n- Background color and border radius should be specified via props instead.\n- `overflow: 'hidden'` is not supported with `elevation` as it can clip the shadow.\n To achieve the same effect, wrap the content in a child View with the overflow style." + }, + "elevation": { + "required": false, + "tsType": { + "name": "Elevation" + }, + "description": "@supported Available in v5.x with theme version 3\nChanges shadows and background on iOS and Android.\nUsed to create UI hierarchy between components.\n\nNote: If `mode` is set to `flat`, Surface doesn't have a shadow.\n\nNote: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.\nIt's no longer supported with theme version 3 and you should use `elevation` property instead.", + "defaultValue": { + "value": "1", + "computed": false + } + }, + "mode": { + "required": false, + "tsType": { + "name": "union", + "raw": "'flat' | 'elevated'", + "elements": [ + { + "name": "literal", + "value": "'flat'" + }, + { + "name": "literal", + "value": "'elevated'" + } + ] + }, + "description": "@supported Available in v5.x with theme version 3\nMode of the Surface.\n- `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.\n- `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.", + "defaultValue": { + "value": "'elevated'", + "computed": false + } + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `Surface`." + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "TestID used for testing purposes" + }, + "ref": { + "required": false, + "tsType": { + "name": "ReactRef", + "raw": "React.Ref", + "elements": [ + { + "name": "View" + } + ] + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Surface.tsx" + ] + }, + "Switch/Switch": { + "filepath": "Switch/Switch.tsx", + "title": "Switch", + "description": "Material 3 toggle between two mutually exclusive states (on / off).\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Switch } from 'react-native-paper';\n\nconst Example = () => {\n const [on, setOn] = React.useState(false);\n return ;\n};\n```\n\n## Theming\nCustomize by overriding these `theme.colors` roles:\n- `primary` / `onPrimary`: selected track + icon / selected handle\n- `primaryContainer`: selected handle on hover, press\n- `surfaceContainerHighest`: unselected track + icon\n- `outline`: unselected resting handle, unselected track outline\n- `onSurfaceVariant`: unselected handle on hover, press\n- `onSurface`: disabled track, handle, and icon fills\n- `surface`: disabled selected handle\n- `secondary`: focus indicator", + "link": "switch", + "data": { + "description": "Material 3 toggle between two mutually exclusive states (on / off).\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Switch } from 'react-native-paper';\n\nconst Example = () => {\n const [on, setOn] = React.useState(false);\n return ;\n};\n```\n\n## Theming\nCustomize by overriding these `theme.colors` roles:\n- `primary` / `onPrimary`: selected track + icon / selected handle\n- `primaryContainer`: selected handle on hover, press\n- `surfaceContainerHighest`: unselected track + icon\n- `outline`: unselected resting handle, unselected track outline\n- `onSurfaceVariant`: unselected handle on hover, press\n- `onSurface`: disabled track, handle, and icon fills\n- `surface`: disabled selected handle\n- `secondary`: focus indicator", + "displayName": "Switch", + "methods": [], + "statics": [], + "props": { + "value": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the switch is on." + }, + "onValueChange": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(value: boolean) => void", + "signature": { + "arguments": [ + { + "name": "value", + "type": { + "name": "boolean" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Called with the new value when the user toggles the switch." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Disables interaction and renders the disabled visual state." + }, + "checkedIcon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "Icon shown inside the handle when checked" + }, + "uncheckedIcon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "Icon shown inside the handle when unchecked." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "aria-label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the switch. This is read by the screen reader when the user focuses the switch." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Switch/Switch.tsx" + ] + }, + "TextInput/TextInput": { + "filepath": "TextInput/TextInput.tsx", + "title": "TextInput", + "description": "A text input lets users enter and edit text. It shows an optional floating label,\nsupports `filled` and `outlined` variants, optional supporting text (including\nerror state), and start/end accessories.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { TextInput } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [text, setText] = React.useState('');\n\n const searchAccessory = (accessoryProps) => (\n \n );\n\n const clearAccessory = ({ style, disabled }) => (\n setText('')}\n role=\"button\"\n aria-label=\"Clear text\"\n >\n \n \n );\n\n return (\n \n );\n};\n\nexport default MyComponent;\n```\n\n@extends TextInput props https://reactnative.dev/docs/textinput#props", + "link": "text-input", + "data": { + "description": "A text input lets users enter and edit text. It shows an optional floating label,\nsupports `filled` and `outlined` variants, optional supporting text (including\nerror state), and start/end accessories.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { TextInput } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [text, setText] = React.useState('');\n\n const searchAccessory = (accessoryProps) => (\n \n );\n\n const clearAccessory = ({ style, disabled }) => (\n setText('')}\n role=\"button\"\n aria-label=\"Clear text\"\n >\n \n \n );\n\n return (\n \n );\n};\n\nexport default MyComponent;\n```\n\n@extends TextInput props https://reactnative.dev/docs/textinput#props", + "displayName": "TextInput", + "methods": [], + "statics": [], + "props": { + "ref": { + "required": false, + "tsType": { + "name": "ReactRef", + "raw": "React.Ref", + "elements": [ + { + "name": "Pick", + "elements": [ + { + "name": "NativeTextInput" + }, + { + "name": "union", + "raw": "'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps' | 'setSelection'", + "elements": [ + { + "name": "literal", + "value": "'focus'" + }, + { + "name": "literal", + "value": "'clear'" + }, + { + "name": "literal", + "value": "'blur'" + }, + { + "name": "literal", + "value": "'isFocused'" + }, + { + "name": "literal", + "value": "'setNativeProps'" + }, + { + "name": "literal", + "value": "'setSelection'" + } + ] + } + ], + "raw": "Pick<\n NativeTextInput,\n 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps' | 'setSelection'\n>" + } + ] + }, + "description": "Imperative handle exposing a subset of native `TextInput` methods\nwith side-effect handling (e.g. `clear()` syncs internal state and animations)." + }, + "variant": { + "required": false, + "tsType": { + "name": "union", + "raw": "'filled' | 'outlined'", + "elements": [ + { + "name": "literal", + "value": "'filled'" + }, + { + "name": "literal", + "value": "'outlined'" + } + ] + }, + "description": "Determines the visual style of the text input.\n\n- `filled` — filled background with an animated underline; higher visual emphasis.\n- `outlined` — stroke outline only; lower visual emphasis." + }, + "error": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "When `true`, the field uses error styling and replaces the trailing accessory\nwith an error indicator when no `endAccessory` is provided." + }, + "label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "The label text to display above the input." + }, + "supportingText": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Supporting text to display below the input (Material Design 3)." + }, + "counter": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "When `true`, displays a character counter below the input on the trailing\nside, showing `currentLength/maxLength`. Requires `maxLength` to be set." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "This is separate from `editable={false}`, which makes the text read-only while the\ninput can still be focused and text selected." + }, + "prefix": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "A short text string displayed at the start of the input (e.g. `\"$\"`)." + }, + "suffix": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "A short text string displayed at the end of the input (e.g. `\"/100\"`)." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "startAccessory": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: TextInputAccessoryProps) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "TextInputAccessoryProps" + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "An optional component to render on the start side of the input (leading in LTR).\nCan be a custom component or `TextInput.Icon`." + }, + "endAccessory": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: TextInputAccessoryProps) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "TextInputAccessoryProps" + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "An optional component to render on the end side of the input (trailing in LTR).\nCan be a custom component or `TextInput.Icon`." + }, + "render": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(props: TextInputRenderProps) => React.ReactNode", + "signature": { + "arguments": [ + { + "name": "props", + "type": { + "name": "intersection", + "raw": "React.ComponentPropsWithoutRef<\n typeof NativeTextInput\n> & {\n ref?: React.RefObject;\n}", + "elements": [ + { + "name": "ReactComponentPropsWithoutRef", + "raw": "React.ComponentPropsWithoutRef<\n typeof NativeTextInput\n>", + "elements": [ + { + "name": "NativeTextInput" + } + ] + }, + { + "name": "signature", + "type": "object", + "raw": "{\n ref?: React.RefObject;\n}", + "signature": { + "properties": [ + { + "key": "ref", + "value": { + "name": "ReactRefObject", + "raw": "React.RefObject", + "elements": [ + { + "name": "union", + "raw": "NativeTextInput | null", + "elements": [ + { + "name": "NativeTextInput" + }, + { + "name": "null" + } + ] + } + ], + "required": false + } + } + ] + } + } + ] + } + } + ], + "return": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + } + }, + "description": "Callback to render a custom input component in place of the native `TextInput`.\nReceives all props that would be passed to `TextInput`, allowing integration\nwith third-party inputs such as masked inputs." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/TextInput/TextInput.tsx" + ] + }, + "TextInput/TextInputIcon": { + "filepath": "TextInput/TextInputIcon.tsx", + "title": "TextInput.Icon", + "description": "A component to render a leading / trailing icon in the TextInput\n(return it from `startAccessory` or `endAccessory`). Accepts icon-specific props as well as\n`TextInputAccessoryProps`, which TextInput passes into those render props.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { TextInput } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [text, setText] = React.useState('');\n\n const searchAccessory = (props) => (\n \n );\n\n const clearAccessory = (props) => (\n setText('')} />\n );\n\n return (\n \n );\n};\n\nexport default MyComponent;\n```\n\n@extends IconButton props https://callstack.github.io/react-native-paper/docs/components/IconButton", + "link": "text-input-icon", + "data": { + "description": "A component to render a leading / trailing icon in the TextInput\n(return it from `startAccessory` or `endAccessory`). Accepts icon-specific props as well as\n`TextInputAccessoryProps`, which TextInput passes into those render props.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { TextInput } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [text, setText] = React.useState('');\n\n const searchAccessory = (props) => (\n \n );\n\n const clearAccessory = (props) => (\n setText('')} />\n );\n\n return (\n \n );\n};\n\nexport default MyComponent;\n```\n\n@extends IconButton props https://callstack.github.io/react-native-paper/docs/components/IconButton", + "displayName": "TextInput.Icon", + "methods": [], + "statics": [], + "props": { + "style": { + "required": true, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "multiline": { + "required": true, + "tsType": { + "name": "boolean" + }, + "description": "" + }, + "disabled": { + "required": true, + "tsType": { + "name": "boolean" + }, + "description": "" + }, + "error": { + "required": true, + "tsType": { + "name": "boolean" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/TextInput/TextInputIcon.tsx" + ], + "group": "TextInput" + }, + "ToggleButton/ToggleButton": { + "filepath": "ToggleButton/ToggleButton.tsx", + "title": "ToggleButton", + "description": "Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons,\na group should share a common container.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst ToggleButtonExample = () => {\n const [status, setStatus] = React.useState('checked');\n\n const onButtonToggle = value => {\n setStatus(status === 'checked' ? 'unchecked' : 'checked');\n };\n\n return (\n \n );\n};\n\nexport default ToggleButtonExample;\n\n```", + "link": "toggle-button", + "data": { + "description": "Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons,\na group should share a common container.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst ToggleButtonExample = () => {\n const [status, setStatus] = React.useState('checked');\n\n const onButtonToggle = value => {\n setStatus(status === 'checked' ? 'unchecked' : 'checked');\n };\n\n return (\n \n );\n};\n\nexport default ToggleButtonExample;\n\n```", + "displayName": "ToggleButton", + "methods": [], + "statics": [], + "props": { + "icon": { + "required": true, + "tsType": { + "name": "IconSource" + }, + "description": "Icon to display for the `ToggleButton`." + }, + "size": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Size of the icon." + }, + "iconColor": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Custom text color for button." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the button is disabled." + }, + "aria-label": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the `ToggleButton`. This is read by the screen reader when the user taps the button." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(value?: GestureResponderEvent | string) => void", + "signature": { + "arguments": [ + { + "name": "value", + "type": { + "name": "union", + "raw": "GestureResponderEvent | string", + "elements": [ + { + "name": "GestureResponderEvent" + }, + { + "name": "string" + } + ] + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press." + }, + "value": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Value of button." + }, + "status": { + "required": false, + "tsType": { + "name": "union", + "raw": "'checked' | 'unchecked'", + "elements": [ + { + "name": "literal", + "value": "'checked'" + }, + { + "name": "literal", + "value": "'unchecked'" + } + ] + }, + "description": "Status of button." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "AnimatedStyle", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "AnimatedStyle" + } + ], + "raw": "StyleProp>" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "ref": { + "required": false, + "tsType": { + "name": "ReactRef", + "raw": "React.Ref", + "elements": [ + { + "name": "View" + } + ] + }, + "description": "" + }, + "testID": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "testID to be used on tests." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/ToggleButton/ToggleButton.tsx" + ] + }, + "ToggleButton/ToggleButtonGroup": { + "filepath": "ToggleButton/ToggleButtonGroup.tsx", + "title": "ToggleButton.Group", + "description": "Toggle group allows to control a group of toggle buttons.
\nIt doesn't change the appearance of the toggle buttons. If you want to group them in a row, check out [ToggleButton.Row](ToggleButtonRow).\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('left');\n\n return (\n setValue(value)}\n value={value}\n >\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "toggle-button-group", + "data": { + "description": "Toggle group allows to control a group of toggle buttons.
\nIt doesn't change the appearance of the toggle buttons. If you want to group them in a row, check out [ToggleButton.Row](ToggleButtonRow).\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('left');\n\n return (\n setValue(value)}\n value={value}\n >\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "ToggleButton.Group", + "methods": [], + "statics": [], + "props": { + "onValueChange": { + "required": true, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(value: Value) => void", + "signature": { + "arguments": [ + { + "name": "value", + "type": { + "name": "Value" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on selection change." + }, + "value": { + "required": true, + "tsType": { + "name": "union", + "raw": "Value | null", + "elements": [ + { + "name": "Value" + }, + { + "name": "null" + } + ] + }, + "description": "Value of the currently selected toggle button." + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "React elements containing toggle buttons." + } + } + }, + "type": "component", + "dependencies": [ + "src/components/ToggleButton/ToggleButtonGroup.tsx" + ], + "group": "ToggleButton" + }, + "ToggleButton/ToggleButtonRow": { + "filepath": "ToggleButton/ToggleButtonRow.tsx", + "title": "ToggleButton.Row", + "description": "Toggle button row renders a group of toggle buttons in a row.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('left');\n\n return (\n setValue(value)} value={value}>\n \n \n \n );\n};\n\nexport default MyComponent;\n\n```", + "link": "toggle-button-row", + "data": { + "description": "Toggle button row renders a group of toggle buttons in a row.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [value, setValue] = React.useState('left');\n\n return (\n setValue(value)} value={value}>\n \n \n \n );\n};\n\nexport default MyComponent;\n\n```", + "displayName": "ToggleButton.Row", + "methods": [], + "statics": [], + "props": { + "onValueChange": { + "required": true, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(value: string) => void", + "signature": { + "arguments": [ + { + "name": "value", + "type": { + "name": "string" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on selection change." + }, + "value": { + "required": true, + "tsType": { + "name": "string" + }, + "description": "Value of the currently selected toggle button." + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "React elements containing toggle buttons." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/ToggleButton/ToggleButtonRow.tsx" + ], + "group": "ToggleButton" + }, + "Tooltip/Tooltip": { + "filepath": "Tooltip/Tooltip.tsx", + "title": "Tooltip", + "description": "Tooltips display informative text when users hover over, focus on, or tap an element.\n\nPlain tooltips, when activated, display a text label identifying an element, such as a description of its function. Tooltips should include only short, descriptive text and avoid restating visible UI text.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { IconButton, Tooltip } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} />\n \n);\n\nexport default MyComponent;\n```", + "link": "tooltip", + "data": { + "description": "Tooltips display informative text when users hover over, focus on, or tap an element.\n\nPlain tooltips, when activated, display a text label identifying an element, such as a description of its function. Tooltips should include only short, descriptive text and avoid restating visible UI text.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { IconButton, Tooltip } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n {}} />\n \n);\n\nexport default MyComponent;\n```", + "displayName": "Tooltip", + "methods": [], + "statics": [], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactElement", + "raw": "React.ReactElement" + }, + "description": "Tooltip reference element. Needs to be able to hold a ref." + }, + "enterTouchDelay": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "The number of milliseconds a user must touch the element before showing the tooltip.", + "defaultValue": { + "value": "500", + "computed": false + } + }, + "leaveTouchDelay": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "The number of milliseconds after the user stops touching an element before hiding the tooltip.", + "defaultValue": { + "value": "1500", + "computed": false + } + }, + "title": { + "required": true, + "tsType": { + "name": "string" + }, + "description": "Tooltip title" + }, + "titleMaxFontSizeMultiplier": { + "required": false, + "tsType": { + "name": "number" + }, + "description": "Specifies the largest possible scale a title font can reach." + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Tooltip/Tooltip.tsx" + ] + }, + "TouchableRipple/TouchableRipple": { + "filepath": "TouchableRipple/TouchableRipple.tsx", + "title": "TouchableRipple", + "description": "A wrapper for views that should respond to touches.\nProvides a material \"ink ripple\" interaction effect for supported platforms (>= Android Lollipop).\nOn unsupported platforms, it falls back to a highlight effect.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Text, TouchableRipple } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n rippleColor=\"rgba(0, 0, 0, .32)\"\n >\n Press anywhere\n \n);\n\nexport default MyComponent;\n```\n\n@extends Pressable props https://reactnative.dev/docs/Pressable#props", + "link": "touchable-ripple", + "data": { + "description": "A wrapper for views that should respond to touches.\nProvides a material \"ink ripple\" interaction effect for supported platforms (>= Android Lollipop).\nOn unsupported platforms, it falls back to a highlight effect.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Text, TouchableRipple } from 'react-native-paper';\n\nconst MyComponent = () => (\n console.log('Pressed')}\n rippleColor=\"rgba(0, 0, 0, .32)\"\n >\n Press anywhere\n \n);\n\nexport default MyComponent;\n```\n\n@extends Pressable props https://reactnative.dev/docs/Pressable#props", + "displayName": "TouchableRipple", + "methods": [], + "statics": [], + "props": { + "borderless": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to render the ripple outside the view bounds.", + "defaultValue": { + "value": "false", + "computed": false + } + }, + "background": { + "required": false, + "tsType": { + "name": "Object" + }, + "description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig" + }, + "centered": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to start the ripple at the center (Web)." + }, + "disabled": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether to prevent interaction with the touchable." + }, + "onPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on press. If not set, will cause the touchable to be disabled." + }, + "onLongPress": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute on long press." + }, + "onPressIn": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute immediately when a touch is engaged, before `onPressOut` and `onPress`." + }, + "onPressOut": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "(e: GestureResponderEvent) => void", + "signature": { + "arguments": [ + { + "name": "e", + "type": { + "name": "GestureResponderEvent" + } + } + ], + "return": { + "name": "void" + } + } + }, + "description": "Function to execute when a touch is released." + }, + "rippleColor": { + "required": false, + "tsType": { + "name": "ColorValue" + }, + "description": "Color of the ripple effect (Android >= 5.0 and Web)." + }, + "underlayColor": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Color of the underlay for the highlight effect (Android < 5.0 and iOS)." + }, + "children": { + "required": true, + "tsType": { + "name": "union", + "raw": "| ((state: PressableStateCallbackType) => React.ReactNode)\n| React.ReactNode", + "elements": [ + { + "name": "unknown" + }, + { + "name": "ReactReactNode", + "raw": "React.ReactNode" + } + ] + }, + "description": "Content of the `TouchableRipple`." + }, + "style": { + "required": false, + "tsType": { + "name": "union", + "raw": "| StyleProp\n| ((state: PressableStateCallbackType) => StyleProp)\n| undefined", + "elements": [ + { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + { + "name": "unknown" + }, + { + "name": "undefined" + } + ] + }, + "description": "" + }, + "ref": { + "required": false, + "tsType": { + "name": "ReactRef", + "raw": "React.Ref", + "elements": [ + { + "name": "View" + } + ] + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/TouchableRipple/TouchableRipple.tsx" + ] + }, + "Typography/Text": { + "filepath": "Typography/Text.tsx", + "title": "Text", + "description": "Typography component showing styles complied with passed `variant` prop and supported by the type system.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n <>\n Display Large\n Display Medium\n Display small\n\n Headline Large\n Headline Medium\n Headline Small\n\n Title Large\n Title Medium\n Title Small\n\n Body Large\n Body Medium\n Body Small\n\n Label Large\n Label Medium\n Label Small\n \n);\n\nexport default MyComponent;\n```\n\n@extends Text props https://reactnative.dev/docs/text#props", + "link": "text", + "data": { + "description": "Typography component showing styles complied with passed `variant` prop and supported by the type system.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n <>\n Display Large\n Display Medium\n Display small\n\n Headline Large\n Headline Medium\n Headline Small\n\n Title Large\n Title Medium\n Title Small\n\n Body Large\n Body Medium\n Body Small\n\n Label Large\n Label Medium\n Label Small\n \n);\n\nexport default MyComponent;\n```\n\n@extends Text props https://reactnative.dev/docs/text#props", + "displayName": "Text", + "methods": [], + "statics": [], + "props": { + "variant": { + "required": false, + "tsType": { + "name": "VariantProp", + "elements": [ + { + "name": "T" + } + ], + "raw": "VariantProp" + }, + "description": "@supported Available in v5.x with theme version 3\n\nVariant defines appropriate text styles for type role and its size.\nAvailable variants:\n\n Display: `displayLarge`, `displayMedium`, `displaySmall`\n\n Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`\n\n Title: `titleLarge`, `titleMedium`, `titleSmall`\n\n Label: `labelLarge`, `labelMedium`, `labelSmall`\n\n Body: `bodyLarge`, `bodyMedium`, `bodySmall`" + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "ref": { + "required": false, + "tsType": { + "name": "ReactRef", + "raw": "React.Ref", + "elements": [ + { + "name": "signature", + "type": "object", + "raw": "{\n setNativeProps(args: Object): void;\n}", + "signature": { + "properties": [ + { + "key": "setNativeProps", + "value": { + "name": "void", + "required": true + } + } + ] + } + } + ] + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Typography/Text.tsx" + ] + } + } +} diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 49bdd5f99d..f72cf51b6a 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -241,9 +241,11 @@ function DrawerItems() { )} - - Changing to RTL - + Due to Expo Go limitations it is impossible to change RTL dynamically. To do so, you need to create a development build of @@ -252,11 +254,13 @@ function DrawerItems() { app.json within{' '} example directory. - - - - - + } + actions={[ + , + ]} + /> ); diff --git a/example/src/Examples/DialogExample.tsx b/example/src/Examples/DialogExample.tsx index d926ae6616..4628d5944d 100644 --- a/example/src/Examples/DialogExample.tsx +++ b/example/src/Examples/DialogExample.tsx @@ -103,10 +103,12 @@ const DialogExample = () => { visible={_getVisible('dialog6')} close={_toggleDialog('dialog6')} /> - + {Platform.OS === 'android' && ( + + )} ); }; diff --git a/example/src/Examples/Dialogs/DialogTextComponent.tsx b/example/src/Examples/Dialogs/DialogTextComponent.tsx deleted file mode 100644 index 9ad958f12e..0000000000 --- a/example/src/Examples/Dialogs/DialogTextComponent.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; - -import { Text, Text as NativeText, useTheme } from 'react-native-paper'; -type Props = React.ComponentProps & { - isSubheading?: boolean; -}; - -export const TextComponent = ({ isSubheading = false, ...props }: Props) => { - const theme = useTheme(); - - return ( - - ); -}; diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx index 75b5ee6b6e..c47f54b4d3 100644 --- a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx +++ b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx @@ -1,6 +1,6 @@ -import { Button, Portal, Dialog, Palette } from 'react-native-paper'; +import { StyleSheet } from 'react-native'; -import { TextComponent } from './DialogTextComponent'; +import { Button, Dialog, Palette, Portal, Text } from 'react-native-paper'; const DialogWithCustomColors = ({ visible, @@ -13,27 +13,36 @@ const DialogWithCustomColors = ({ - Alert - - + title={ + + Alert + + } + content={ + This is a dialog with custom colors - - - - - - + , + ]} + /> ); }; +const styles = StyleSheet.create({ + text: { + color: Palette.primary95, + }, +}); + export default DialogWithCustomColors; diff --git a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx index e9a7189068..fd7663dc79 100644 --- a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx +++ b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx @@ -1,6 +1,4 @@ -import { Button, Portal, Dialog, Palette } from 'react-native-paper'; - -import { TextComponent } from './DialogTextComponent'; +import { Button, Dialog, Palette, Portal } from 'react-native-paper'; const DialogWithDismissableBackButton = ({ visible, @@ -15,21 +13,21 @@ const DialogWithDismissableBackButton = ({ visible={visible} dismissable={false} dismissableBackButton - > - Alert - - - This is an undismissable dialog, however you can use hardware back - button to close it! - - - - - - - + , + , + ]} + /> ); diff --git a/example/src/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx index 6281e9bf6c..c176946aa4 100644 --- a/example/src/Examples/Dialogs/DialogWithIcon.tsx +++ b/example/src/Examples/Dialogs/DialogWithIcon.tsx @@ -1,8 +1,4 @@ -import { StyleSheet } from 'react-native'; - -import { Button, Portal, Dialog, Palette } from 'react-native-paper'; - -import { TextComponent } from './DialogTextComponent'; +import { Button, Dialog, Palette, Portal } from 'react-native-paper'; const DialogWithIcon = ({ visible, @@ -10,32 +6,24 @@ const DialogWithIcon = ({ }: { visible: boolean; close: () => void; -}) => { - return ( - - - - Dialog with Icon - - - This is a dialog with new component called DialogIcon. When icon is - displayed you should center the header. - - - - - - - - - ); -}; +}) => ( + + + Disagree + , + , + ]} + /> + +); -const styles = StyleSheet.create({ - title: { - textAlign: 'center', - }, -}); export default DialogWithIcon; diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx index d854dcb587..1a35abc67f 100644 --- a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx +++ b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx @@ -1,8 +1,6 @@ import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'; -import { Dialog, Palette, Portal } from 'react-native-paper'; - -import { TextComponent } from './DialogTextComponent'; +import { Dialog, Palette, Portal, Text, useTheme } from 'react-native-paper'; const DialogWithLoadingIndicator = ({ visible, @@ -11,27 +9,34 @@ const DialogWithLoadingIndicator = ({ visible: boolean; close: () => void; }) => { + const theme = useTheme(); + const textColor = { color: theme.colors.onSurfaceVariant }; + return ( - - Progress Dialog - - + - Loading..... + + Loading..... + - - + } + /> ); }; const styles = StyleSheet.create({ - flexing: { + content: { flexDirection: 'row', alignItems: 'center', }, diff --git a/example/src/Examples/Dialogs/DialogWithLongText.tsx b/example/src/Examples/Dialogs/DialogWithLongText.tsx index eeac1c7d3c..33a6c965d3 100644 --- a/example/src/Examples/Dialogs/DialogWithLongText.tsx +++ b/example/src/Examples/Dialogs/DialogWithLongText.tsx @@ -1,8 +1,6 @@ -import { Dimensions, ScrollView, StyleSheet } from 'react-native'; +import { Dimensions, StyleSheet } from 'react-native'; -import { Button, Portal, Dialog } from 'react-native-paper'; - -import { TextComponent } from './DialogTextComponent'; +import { Portal, Dialog, Button } from 'react-native-paper'; const DialogWithLongText = ({ visible, @@ -16,63 +14,27 @@ const DialogWithLongText = ({ onDismiss={close} visible={visible} style={{ maxHeight: 0.6 * Dimensions.get('window').height }} - > - Alert - - - - Material is the metaphor - {'\n'} - {'\n'}A material metaphor is the unifying theory of a rationalized - space and a system of motion. The material is grounded in tactile - reality, inspired by the study of paper and ink, yet technologically - advanced and open to imagination and magic. - {'\n'} - {'\n'} - Surfaces and edges of the material provide visual cues that are - grounded in reality. The use of familiar tactile attributes helps - users quickly understand affordances. Yet the flexibility of the - material creates new affordances that supersede those in the - physical world, without breaking the rules of physics. - {'\n'} - {'\n'} - The fundamentals of light, surface, and movement are key to - conveying how objects move, interact, and exist in space and in - relation to each other. Realistic lighting shows seams, divides - space, and indicates moving parts. - {'\n'} - {'\n'}A material metaphor is the unifying theory of a rationalized - space and a system of motion. The material is grounded in tactile - reality, inspired by the study of paper and ink, yet technologically - advanced and open to imagination and magic. - {'\n'} - {'\n'} - Surfaces and edges of the material provide visual cues that are - grounded in reality. The use of familiar tactile attributes helps - users quickly understand affordances. Yet the flexibility of the - material creates new affordances that supersede those in the - physical world, without breaking the rules of physics. - {'\n'} - {'\n'} - The fundamentals of light, surface, and movement are key to - conveying how objects move, interact, and exist in space and in - relation to each other. Realistic lighting shows seams, divides - space, and indicates moving parts. - - - - - - - + title="Alert" + scrollable + scrollAreaProps={{ style: styles.scrollArea }} + scrollViewProps={{ contentContainerStyle: styles.scrollViewContent }} + content={ + 'Material is the metaphor\n\nA material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.\n\nSurfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supersede those in the physical world, without breaking the rules of physics.\n\nThe fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.\n\nA material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.\n\nSurfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supersede those in the physical world, without breaking the rules of physics.\n\nThe fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.' + } + actions={[ + , + ]} + /> ); const styles = StyleSheet.create({ - smallPadding: { + scrollArea: { paddingHorizontal: 0, }, - biggerPadding: { + scrollViewContent: { paddingHorizontal: 24, }, }); diff --git a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx index 966422369e..eac4636b5f 100644 --- a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx +++ b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import { ScrollView, View, StyleSheet } from 'react-native'; +import { View, StyleSheet } from 'react-native'; import { - Button, Portal, Dialog, RadioButton, + Text, TouchableRipple, + useTheme, + Button, } from 'react-native-paper'; -import { TextComponent } from './DialogTextComponent'; - type Props = { visible: boolean; close: () => void; @@ -20,74 +20,94 @@ type CheckedState = 'normal' | 'first' | 'second' | 'third' | 'fourth'; const DialogWithRadioBtns = ({ visible, close }: Props) => { const [checked, setChecked] = React.useState('normal'); + const theme = useTheme(); + const optionTextColor = { color: theme.colors.onSurfaceVariant }; return ( - - Choose an option - - - - setChecked('normal')}> - - - - - - Option 1 - + + setChecked('normal')}> + + + - - setChecked('second')}> - - - - - - Option 2 - + + Option 1 + + + + setChecked('second')}> + + + - - setChecked('third')}> - - - - - - Option 3 - + + Option 2 + + + + setChecked('third')}> + + + - - setChecked('fourth')}> - - - - - - Option 4 - + + Option 3 + + + + setChecked('fourth')}> + + + - - - - - - - - - + + Option 4 + + + + + } + actions={[ + , + , + ]} + /> ); }; diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx index 208c809967..1dad790030 100644 --- a/example/src/Examples/Dialogs/UndismissableDialog.tsx +++ b/example/src/Examples/Dialogs/UndismissableDialog.tsx @@ -1,6 +1,4 @@ -import { Button, Portal, Dialog, Palette } from 'react-native-paper'; - -import { TextComponent } from './DialogTextComponent'; +import { Button, Dialog, Palette, Portal } from 'react-native-paper'; const UndismissableDialog = ({ visible, @@ -10,18 +8,26 @@ const UndismissableDialog = ({ close: () => void; }) => ( - - Alert - - This is an undismissable dialog!! - - - - - - + , + , + ]} + /> ); diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 1fe6f13700..bbedab1a20 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; -import { Platform, StyleSheet } from 'react-native'; -import type { StyleProp } from 'react-native'; +import { Platform, ScrollView, StyleSheet } from 'react-native'; +import type { ScrollViewProps, StyleProp } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import Modal from '../Modal'; import DialogActions from './DialogActions'; import DialogContent from './DialogContent'; import DialogIcon from './DialogIcon'; @@ -11,9 +12,11 @@ import DialogScrollArea from './DialogScrollArea'; import DialogTitle from './DialogTitle'; import { useInternalTheme } from '../../core/theming'; import type { Elevation, ThemeProp } from '../../theme/types'; -import Modal from '../Modal'; +import type { IconSource } from '../Icon'; import type { SurfaceStyle } from '../Surface'; -import type { DialogChildProps } from './utils'; +import type { Props as DialogContentProps } from './DialogContent'; +import type { Props as DialogScrollAreaProps } from './DialogScrollArea'; +import Text from '../Typography/Text'; export type Props = { /** @@ -33,9 +36,44 @@ export type Props = { */ visible: boolean; /** - * Content of the `Dialog`. + * Icon to display above the dialog title. + */ + icon?: IconSource; + /** + * Title of the dialog. + */ + title?: React.ReactNode; + /** + * Content of the dialog. Non-empty strings are rendered as Material 3 + * supporting text. + */ + content?: React.ReactNode; + /** + * Action buttons displayed at the bottom of the dialog. + * Keep their order stable between renders. + */ + actions?: React.ReactNode[]; + /** + * Whether to render the content in a `ScrollView` within the dialog scroll + * area. + */ + scrollable?: boolean; + /** + * Props passed to `Dialog.Content` when `scrollable` is not enabled. */ - children: React.ReactNode; + contentProps?: Omit; + /** + * Props passed to `Dialog.ScrollArea` when `scrollable` is enabled. + */ + scrollAreaProps?: Omit; + /** + * Props passed to the `ScrollView` when `scrollable` is enabled. + */ + scrollViewProps?: Omit; + /** + * Accessibility label for the dialog. This is read by the screen reader when the user opens a dialog. + */ + 'aria-label'?: string; style?: StyleProp; /** * @optional @@ -57,7 +95,7 @@ const DIALOG_ELEVATION: Elevation = 3; * ```js * import * as React from 'react'; * import { View } from 'react-native'; - * import { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper'; + * import { Button, Dialog, Portal, PaperProvider } from 'react-native-paper'; * * const MyComponent = () => { * const [visible, setVisible] = React.useState(false); @@ -71,15 +109,15 @@ const DIALOG_ELEVATION: Elevation = 3; * * * - * - * Alert - * - * This is simple dialog - * - * - * - * - * + * Done + * ]} + * /> * * * @@ -90,7 +128,6 @@ const DIALOG_ELEVATION: Elevation = 3; * ``` */ const Dialog = ({ - children, dismissable = true, dismissableBackButton = dismissable, onDismiss, @@ -98,6 +135,15 @@ const Dialog = ({ style, theme: themeOverrides, testID, + actions, + content, + icon, + scrollable, + contentProps, + scrollAreaProps, + scrollViewProps, + title, + 'aria-label': ariaLabel, }: Props) => { const { right, left } = useSafeAreaInsets(); @@ -106,6 +152,18 @@ const Dialog = ({ const backgroundColor = theme.colors.surfaceContainerHigh; + const contentNode = + typeof content === 'string' ? ( + + {content} + + ) : ( + content + ); + return ( - {React.Children.toArray(children) - .filter((child) => child != null && typeof child !== 'boolean') - .map((child, i) => { - if (i === 0 && React.isValidElement(child)) { - return React.cloneElement(child, { - style: [{ marginTop: 24 }, child.props.style], - }); - } + {icon ? : null} + + {title ? ( + + {title} + + ) : null} + + {scrollable ? ( + + {contentNode} + + ) : ( + + {contentNode} + + )} - return child; - })} + {actions?.length ? {actions} : null} ); }; @@ -162,6 +239,14 @@ const styles = StyleSheet.create({ */ marginVertical: Platform.OS === 'android' ? 44 : 0, justifyContent: 'flex-start', + minWidth: 280, + maxWidth: 560, + }, + titleWithIcon: { + textAlign: 'center', + }, + firstChild: { + marginTop: 24, }, }); diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx index 0a11970077..9726ee0924 100644 --- a/src/components/Dialog/DialogActions.tsx +++ b/src/components/Dialog/DialogActions.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; import type { StyleProp, ViewProps, ViewStyle } from 'react-native'; -import type { DialogActionChildProps } from './utils'; import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../theme/types'; @@ -33,12 +32,18 @@ export type Props = ViewProps & { * * return ( * - * - * - * - * - * - * + * + * Disagree + * , + * , + * ]} + * /> * * ); * }; @@ -46,26 +51,25 @@ export type Props = ViewProps & { * export default MyComponent; * ``` */ -const DialogActions = (props: Props) => { - useInternalTheme(props.theme); - const actionsLength = React.Children.toArray(props.children).length; +const DialogActions = ({ children, style, theme, ...rest }: Props) => { + useInternalTheme(theme); + + const actions = React.Children.toArray(children).filter((child) => + React.isValidElement<{ style?: StyleProp }>(child) + ); return ( - - {React.Children.map(props.children, (child, i) => - React.isValidElement(child) - ? React.cloneElement(child, { - compact: true, - uppercase: false, - style: [ - { - marginRight: i + 1 === actionsLength ? 0 : 8, - }, - child.props.style, - ], - }) - : child - )} + + {actions.map((child, index) => ( + + {index > 0 && } + {child} + + ))} ); }; @@ -81,6 +85,9 @@ const styles = StyleSheet.create({ paddingBottom: 24, paddingHorizontal: 24, }, + spacer: { + width: 8, + }, }); export default DialogActions; diff --git a/src/components/Dialog/DialogContent.tsx b/src/components/Dialog/DialogContent.tsx index a084188b32..374a790185 100644 --- a/src/components/Dialog/DialogContent.tsx +++ b/src/components/Dialog/DialogContent.tsx @@ -25,11 +25,7 @@ export type Props = ViewProps & { * * return ( * - * - * - * This is simple dialog - * - * + * * * ); * }; diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx index 791544aefe..1bc3030a58 100644 --- a/src/components/Dialog/DialogIcon.tsx +++ b/src/components/Dialog/DialogIcon.tsx @@ -32,7 +32,6 @@ export type Props = { * ## Usage * ```js * import * as React from 'react'; - * import { StyleSheet } from 'react-native'; * import { Dialog, Portal, Text } from 'react-native-paper'; * * const MyComponent = () => { @@ -42,23 +41,11 @@ export type Props = { * * return ( * - * - * - * This is a title - * - * This is simple dialog - * - * + * * * ); * }; * - * const styles = StyleSheet.create({ - * title: { - * textAlign: 'center', - * }, - * }) - * * export default MyComponent; * ``` */ @@ -71,7 +58,7 @@ const DialogIcon = ({ const theme = useInternalTheme(themeOverrides); const { colors } = theme; - //@ts-ignore + // @ts-ignore const iconColor = color || colors.secondary; return ( diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx index c2446f6149..7d22a5f62e 100644 --- a/src/components/Dialog/DialogScrollArea.tsx +++ b/src/components/Dialog/DialogScrollArea.tsx @@ -34,13 +34,7 @@ export type Props = ViewProps & { * * return ( * - * - * - * - * This is a scrollable area - * - * - * + * * * ); * }; @@ -52,7 +46,7 @@ const DialogScrollArea = (props: Props) => { const theme = useInternalTheme(props.theme); const { colors } = theme; const borderStyles = { - borderColor: colors.surfaceVariant, + borderColor: colors.outlineVariant, borderTopWidth: 1, borderBottomWidth: 1, }; diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx index beff3be7d9..c3e86ba200 100644 --- a/src/components/Dialog/DialogTitle.tsx +++ b/src/components/Dialog/DialogTitle.tsx @@ -33,12 +33,7 @@ export type Props = React.ComponentPropsWithRef & { * * return ( * - * - * This is a title - * - * This is simple dialog - * - * + * * * ); * }; diff --git a/src/components/Dialog/utils.ts b/src/components/Dialog/utils.ts deleted file mode 100644 index 64ccec77cc..0000000000 --- a/src/components/Dialog/utils.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { StyleProp, ViewStyle } from 'react-native'; - -export type DialogChildProps = { - style?: StyleProp; -}; - -export type DialogActionChildProps = DialogChildProps & { - compact?: boolean; - uppercase?: boolean; -}; diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 0a34198d2e..705774cc36 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -36,6 +36,10 @@ export type Props = { * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the modal. */ overlayAccessibilityLabel?: string; + /** + * Accessibility label for the dialog. This is read by the screen reader when the user opens a dialog. + */ + 'aria-label'?: string; /** * Determines Whether the modal is visible. */ @@ -127,6 +131,7 @@ function Modal({ dismissableBackButton = dismissable, visible = false, overlayAccessibilityLabel = 'Close modal', + 'aria-label': ariaLabel, onDismiss = () => {}, children, contentContainerStyle, @@ -222,7 +227,6 @@ function Modal({ return ( {children} diff --git a/src/components/__tests__/Dialog.test.tsx b/src/components/__tests__/Dialog.test.tsx index 32477e5fe1..d1f3e8d793 100644 --- a/src/components/__tests__/Dialog.test.tsx +++ b/src/components/__tests__/Dialog.test.tsx @@ -21,11 +21,9 @@ interface BackHandlerStatic extends RNBackHandlerStatic { const BackHandler = RNBackHandler as BackHandlerStatic; describe('Dialog', () => { - it('should render passed children', async () => { + it('should render passed content', async () => { await render( - - This is simple dialog - + ); expect(screen.getByTestId('dialog')).toHaveTextContent( @@ -36,9 +34,13 @@ describe('Dialog', () => { it('should call onDismiss when dismissable', async () => { const onDismiss = jest.fn(); await render( - - This is simple dialog - + ); await userEvent.press(screen.getByTestId('dialog-backdrop')); @@ -52,9 +54,13 @@ describe('Dialog', () => { it('should not call onDismiss when dismissable is false', async () => { const onDismiss = jest.fn(); await render( - - This is simple dialog - + ); await userEvent.press(screen.getByTestId('dialog-backdrop')); @@ -75,9 +81,8 @@ describe('Dialog', () => { dismissable={false} dismissableBackButton testID="dialog" - > - This is simple dialog - + content="This is simple dialog" + /> ); await userEvent.press(screen.getByTestId('dialog-backdrop')); @@ -96,26 +101,109 @@ describe('Dialog', () => { it('should apply top margin to the first child if the dialog is V3', async () => { await render( - - - Test Dialog Content - - + This is simple dialog} + content="This is simple dialog" + /> ); - expect(screen.getByTestId('dialog-content')).toHaveStyle({ + const element = screen.getByTestId('dialog-title').parent; + + expect(element).toHaveStyle({ marginTop: 24, }); }); + + it('should render content in a scroll area', async () => { + await render( + + ); + + expect(screen.getByTestId('dialog-scroll-area')).toBeOnTheScreen(); + expect(screen.getByTestId('dialog-scroll-view')).toBeOnTheScreen(); + expect(screen.getByText('Scrollable content')).toBeOnTheScreen(); + }); + + it('should render passed action', async () => { + await render( + jest.fn()} testID="cancel-btn"> + Cancel + , + ]} + /> + ); + + expect(screen.getByTestId('cancel-btn')).toBeOnTheScreen(); + }); + + it('should render passed content if no title or accessibilityLabel were passed', async () => { + await render( + + ); + + expect(screen.getByTestId('dialog-surface')).toHaveAccessibleName( + 'This is simple dialog' + ); + }); + + it('should render passed title as a default accessibility label', async () => { + await render( + + ); + + expect(screen.getByTestId('dialog-surface')).toHaveAccessibleName( + 'dialog-title' + ); + }); + + it('should render passed accessibility label', async () => { + await render( + + ); + + expect(screen.getByTestId('dialog-surface')).toHaveAccessibleName( + 'dialog-label' + ); + }); }); describe('DialogActions', () => { - it('should render passed children', async () => { + it('should render passed actions', async () => { await render( - - - - + + Cancel + , + , + ]} + /> ); expect(screen.getByTestId('button-cancel')).toBeOnTheScreen(); @@ -131,29 +219,36 @@ describe('DialogActions', () => { ); const dialogActionsContainer = screen.getByTestId('dialog-actions'); - const dialogActionButtons = dialogActionsContainer.children; + const dialogActionChildren = dialogActionsContainer.children; expect(dialogActionsContainer).toHaveStyle({ paddingBottom: 24, paddingHorizontal: 24, }); - expect(dialogActionButtons[0]).toHaveStyle({ marginRight: 8 }); - expect(dialogActionButtons[1]).toHaveStyle({ marginRight: 0 }); + + // We expect 3 children because Dialog.Actions puts in between actions to add a proper styling + expect(dialogActionChildren).toHaveLength(3); + expect(dialogActionChildren[1]).toHaveStyle({ width: 8 }); }); it('should apply custom styles', async () => { await render( - - + + ); - const dialogActionsContainer = screen.getByTestId('dialog-actions'); - const dialogActionButtons = dialogActionsContainer.children; - - expect(dialogActionButtons[0]).toHaveStyle({ margin: 10 }); - expect(dialogActionButtons[1]).toHaveStyle({ margin: 0 }); + expect(screen.getByTestId('button-cancel-container')).toHaveStyle({ + margin: 10, + }); + expect(screen.getByTestId('button-ok-container')).toHaveStyle({ + margin: 0, + }); }); });