From db1c82e9c89f2218b9eafdc18cf3cfc1ed8b2eae Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Thu, 20 Aug 2026 09:26:48 +0200 Subject: [PATCH 01/18] refactor: updated Dialog to comply with Material3 guidelines --- .../6.x/docs/components/Dialog/DialogIcon.mdx | 94 + docs/src/data/componentDocs6x.json | 12420 ++++++++++++++++ .../src/Examples/Dialogs/DialogWithIcon.tsx | 13 +- src/components/Dialog/Dialog.tsx | 34 +- src/components/Dialog/DialogIcon.tsx | 9 +- src/components/Dialog/DialogScrollArea.tsx | 2 +- src/components/Dialog/utils.ts | 4 +- 7 files changed, 12549 insertions(+), 27 deletions(-) create mode 100644 docs/6.x/docs/components/Dialog/DialogIcon.mdx create mode 100644 docs/src/data/componentDocs6x.json 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..a736d9d384 --- /dev/null +++ b/docs/6.x/docs/components/Dialog/DialogIcon.mdx @@ -0,0 +1,94 @@ +--- +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 ( + + + + This is a title + + This is simple dialog + + + + ); +}; + +export default MyComponent; +``` + + + ## Props + + + + +
+ +### color + +
+ + + +
+ +### icon (required) + +
+ + + +
+ +### size + +
+ + + +
+ +### theme + +
+ + + + + + + + + ## Theme colors + + + + + diff --git a/docs/src/data/componentDocs6x.json b/docs/src/data/componentDocs6x.json new file mode 100644 index 0000000000..92c459b85e --- /dev/null +++ b/docs/src/data/componentDocs6x.json @@ -0,0 +1,12420 @@ +{ + "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, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showDialog = () => setVisible(true);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n \n Alert\n \n This is simple dialog\n \n \n \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "dialog", + "data": { + "description": "Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\nTo render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../Portal) component.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showDialog = () => setVisible(true);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n \n Alert\n \n This is simple dialog\n \n \n \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Dialog", + "methods": [], + "statics": [], + "props": { + "dismissable": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Determines whether clicking outside the dialog dismiss it.", + "defaultValue": { + "value": "true", + "computed": false + } + }, + "dismissableBackButton": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Determines whether clicking Android hardware back button dismiss dialog.", + "defaultValue": { + "value": "dismissable", + "computed": true + } + }, + "onDismiss": { + "required": false, + "tsType": { + "name": "signature", + "type": "function", + "raw": "() => void", + "signature": { + "arguments": [], + "return": { + "name": "void" + } + } + }, + "description": "Callback that is called when the user dismisses the dialog." + }, + "visible": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Determines Whether the dialog is visible.", + "defaultValue": { + "value": "false", + "computed": false + } + }, + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `Dialog`." + }, + "style": { + "required": false, + "tsType": { + "name": "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 \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "dialog-actions", + "data": { + "description": "A component to show a list of actions in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Button, Dialog, Portal } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Dialog.Actions", + "methods": [], + "statics": [], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `DialogActions`." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Dialog/DialogActions.tsx" + ], + "group": "Dialog" + }, + "Dialog/DialogContent": { + "filepath": "Dialog/DialogContent.tsx", + "title": "Dialog.Content", + "description": "A component to show content in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n This is simple dialog\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "dialog-content", + "data": { + "description": "A component to show content in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n This is simple dialog\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Dialog.Content", + "methods": [], + "statics": [], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `DialogContent`." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Dialog/DialogContent.tsx" + ], + "group": "Dialog" + }, + "Dialog/DialogIcon": { + "filepath": "Dialog/DialogIcon.tsx", + "title": "Dialog.Icon", + "description": "@supported Available in v5.x with theme version 3\nA component to show an icon in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n This is a title\n \n This is simple dialog\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 This is a title\n \n This is simple dialog\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 This is a scrollable area\n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "dialog-scroll-area", + "data": { + "description": "A component to show a scrollable content in a Dialog. The component only provides appropriate styling.\nFor the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n This is a scrollable area\n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Dialog.ScrollArea", + "methods": [], + "statics": [], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Content of the `DialogScrollArea`." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "ViewStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Dialog/DialogScrollArea.tsx" + ], + "group": "Dialog" + }, + "Dialog/DialogTitle": { + "filepath": "Dialog/DialogTitle.tsx", + "title": "Dialog.Title", + "description": "A component to show a title in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n This is a title\n \n This is simple dialog\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "link": "dialog-title", + "data": { + "description": "A component to show a title in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n This is a title\n \n This is simple dialog\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "displayName": "Dialog.Title", + "methods": [], + "statics": [], + "props": { + "children": { + "required": true, + "tsType": { + "name": "ReactReactNode", + "raw": "React.ReactNode" + }, + "description": "Title text for the `DialogTitle`." + }, + "style": { + "required": false, + "tsType": { + "name": "StyleProp", + "elements": [ + { + "name": "TextStyle" + } + ], + "raw": "StyleProp" + }, + "description": "" + }, + "theme": { + "required": false, + "tsType": { + "name": "ThemeProp" + }, + "description": "" + } + } + }, + "type": "component", + "dependencies": [ + "src/components/Dialog/DialogTitle.tsx" + ], + "group": "Dialog" + }, + "Divider": { + "filepath": "Divider.tsx", + "title": "Divider", + "description": "A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Divider, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n \n Lemon\n \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 + } + }, + "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/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx index 6281e9bf6c..9a5b6477c1 100644 --- a/example/src/Examples/Dialogs/DialogWithIcon.tsx +++ b/example/src/Examples/Dialogs/DialogWithIcon.tsx @@ -1,5 +1,3 @@ -import { StyleSheet } from 'react-native'; - import { Button, Portal, Dialog, Palette } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -15,11 +13,11 @@ const DialogWithIcon = ({ - Dialog with Icon + Dialog with Icon - This is a dialog with new component called DialogIcon. When icon is - displayed you should center the header. + This is a dialog with a component called DialogIcon. When the icon + is displayed, the title is centered automatically. @@ -33,9 +31,4 @@ const DialogWithIcon = ({ ); }; -const styles = StyleSheet.create({ - title: { - textAlign: 'center', - }, -}); export default DialogWithIcon; diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 1fe6f13700..df5c741d54 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -105,6 +105,12 @@ const Dialog = ({ const borderRadius = theme.shapes.corner.extraLarge; const backgroundColor = theme.colors.surfaceContainerHigh; + const dialogChildren = React.Children.toArray(children).filter( + (child) => child != null && typeof child !== 'boolean' + ); + const hasIcon = dialogChildren.some( + (child) => React.isValidElement(child) && child.type === DialogIcon + ); return ( - {React.Children.toArray(children) - .filter((child) => child != null && typeof child !== 'boolean') - .map((child, i) => { - if (i === 0 && React.isValidElement(child)) { + {dialogChildren.map((child, i) => { + if (React.isValidElement(child)) { + const topMarginStyle = + i === 0 && child.type !== DialogIcon + ? { marginTop: 24 } + : undefined; + const titleAlignmentStyle = + hasIcon && child.type === DialogTitle + ? styles.titleWithIcon + : undefined; + + if (topMarginStyle || titleAlignmentStyle) { return React.cloneElement(child, { - style: [{ marginTop: 24 }, child.props.style], + style: [topMarginStyle, child.props.style, titleAlignmentStyle], }); } return child; - })} + } + + return child; + })} ); }; @@ -162,6 +179,11 @@ const styles = StyleSheet.create({ */ marginVertical: Platform.OS === 'android' ? 44 : 0, justifyContent: 'flex-start', + minWidth: 280, + maxWidth: 560, + }, + titleWithIcon: { + textAlign: 'center', }, }); diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx index 791544aefe..1527451fa8 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 = () => { @@ -44,7 +43,7 @@ export type Props = { * * * - * This is a title + * This is a title * * This is simple dialog * @@ -53,12 +52,6 @@ export type Props = { * ); * }; * - * const styles = StyleSheet.create({ - * title: { - * textAlign: 'center', - * }, - * }) - * * export default MyComponent; * ``` */ diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx index c2446f6149..0d54f6d415 100644 --- a/src/components/Dialog/DialogScrollArea.tsx +++ b/src/components/Dialog/DialogScrollArea.tsx @@ -52,7 +52,7 @@ const DialogScrollArea = (props: Props) => { const theme = useInternalTheme(props.theme); const { colors } = theme; const borderStyles = { - borderColor: colors.surfaceVariant, + borderColor: colors.outline, borderTopWidth: 1, borderBottomWidth: 1, }; diff --git a/src/components/Dialog/utils.ts b/src/components/Dialog/utils.ts index 64ccec77cc..5413d4c612 100644 --- a/src/components/Dialog/utils.ts +++ b/src/components/Dialog/utils.ts @@ -1,7 +1,7 @@ -import type { StyleProp, ViewStyle } from 'react-native'; +import type { StyleProp, TextStyle, ViewStyle } from 'react-native'; export type DialogChildProps = { - style?: StyleProp; + style?: StyleProp; }; export type DialogActionChildProps = DialogChildProps & { From c3c2bf6191621e139bc6233b3e2e3220053aa8fa Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Tue, 25 Aug 2026 09:54:22 +0200 Subject: [PATCH 02/18] refactor: introduced new Dialog API, updated docs --- docs/6.x/docs/components/Dialog/Dialog.mdx | 173 +++++++++++++++++++ docs/src/data/componentDocs6x.json | 4 +- src/components/Dialog/Dialog.tsx | 189 ++++++++++++++++----- 3 files changed, 325 insertions(+), 41 deletions(-) create mode 100644 docs/6.x/docs/components/Dialog/Dialog.mdx 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..8a9f1381c8 --- /dev/null +++ b/docs/6.x/docs/components/Dialog/Dialog.mdx @@ -0,0 +1,173 @@ +--- +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. + +## Recommended props + +| Prop | Type | Description | +| --- | --- | --- | +| `icon` | `IconSource` | Icon rendered through `Dialog.Icon`. | +| `title` | `ReactNode` | Dialog title rendered through `Dialog.Title`. | +| `content` | `ReactNode` | Required dialog content. Non-empty strings use Material 3 supporting-text styles. | +| `actions` | `DialogActionsProps[]` | Action labels, press handlers, and Button props. | +| `scrollable` | `boolean` | Renders content through `Dialog.ScrollArea` and a `ScrollView`. | +| `contentProps` | `DialogContentProps` | Props forwarded to `Dialog.Content`. | +| `scrollAreaProps` | `DialogScrollAreaProps` | Props forwarded to `Dialog.ScrollArea`. | +| `scrollViewProps` | `ScrollViewProps` | Props forwarded to `ScrollView`. | + + + + + + + +## 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 ( + + + + + + + + + ); +}; + +export default MyComponent; +``` + +## Compound composition + +`Dialog.Icon`, `Dialog.Title`, `Dialog.Content`, `Dialog.ScrollArea`, and +`Dialog.Actions` remain available for custom composition within `Dialog`. +Passing them through `children` is deprecated; prefer the props above. + +## Migrating from children + +```js +// Before + + Alert + Something happened. + + + +// After + +``` + + + ## Props + + + + +
+ +### dismissable + +
+ + + +
+ +### dismissableBackButton + +
+ + + +
+ +### onDismiss + +
+ + + +
+ +### visible + +
+ + + +
+ +### children (depracated, use props instead) + +
+ + + +
+ +### style + +
+ + + +
+ +### theme + +
+ + + +
+ +### testID + +
+ + + + + + + + + ## Theme colors + + + + + diff --git a/docs/src/data/componentDocs6x.json b/docs/src/data/componentDocs6x.json index 92c459b85e..b6ce0ee29d 100644 --- a/docs/src/data/componentDocs6x.json +++ b/docs/src/data/componentDocs6x.json @@ -5212,10 +5212,10 @@ "Dialog/Dialog": { "filepath": "Dialog/Dialog.tsx", "title": "Dialog", - "description": "Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\nTo render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../Portal) component.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showDialog = () => setVisible(true);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n \n Alert\n \n This is simple dialog\n \n \n \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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## Recommended props\n\n| Prop | Type | Description |\n| --- | --- | --- |\n| `icon` | `IconSource` | Icon rendered through `Dialog.Icon`. |\n| `title` | `ReactNode` | Dialog title rendered through `Dialog.Title`. |\n| `content` | `ReactNode` | Required dialog content. Non-empty strings use Material 3 supporting-text styles. |\n| `actions` | `DialogActionsProps[]` | Action labels, press handlers, and optional Button props. |\n| `scrollable` | `boolean` | Renders content through `Dialog.ScrollArea` and a `ScrollView`. |\n| `contentProps` | `DialogContentProps` | Props forwarded to `Dialog.Content`. |\n| `scrollAreaProps` | `DialogScrollAreaProps` | Props forwarded to `Dialog.ScrollArea`. |\n| `scrollViewProps` | `ScrollViewProps` | Props forwarded to `ScrollView`. |\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 \n \n \n \n );\n};\n\nexport default MyComponent;\n```\n\n## Compound composition\n\n`Dialog.Icon`, `Dialog.Title`, `Dialog.Content`, `Dialog.ScrollArea`, and\n`Dialog.Actions` remain available for custom composition within `Dialog`.\nPassing them through `children` is deprecated; prefer the props above.\n\n## Migrating from children\n\n```js\n// Before\n\n Alert\n Something happened.\n \n\n\n// After\n\n```", "link": "dialog", "data": { - "description": "Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\nTo render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../Portal) component.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const showDialog = () => setVisible(true);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n \n Alert\n \n This is simple dialog\n \n \n \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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## Recommended props\n\n| Prop | Type | Description |\n| --- | --- | --- |\n| `icon` | `IconSource` | Icon rendered through `Dialog.Icon`. |\n| `title` | `ReactNode` | Dialog title rendered through `Dialog.Title`. |\n| `content` | `ReactNode` | Required dialog content. Non-empty strings use Material 3 supporting-text styles. |\n| `actions` | `DialogActionsProps[]` | Action labels, press handlers, and optional Button props. |\n| `scrollable` | `boolean` | Renders content through `Dialog.ScrollArea` and a `ScrollView`. |\n| `contentProps` | `DialogContentProps` | Props forwarded to `Dialog.Content`. |\n| `scrollAreaProps` | `DialogScrollAreaProps` | Props forwarded to `Dialog.ScrollArea`. |\n| `scrollViewProps` | `ScrollViewProps` | Props forwarded to `ScrollView`. |\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 \n \n \n \n );\n};\n\nexport default MyComponent;\n```\n\n## Compound composition\n\n`Dialog.Icon`, `Dialog.Title`, `Dialog.Content`, `Dialog.ScrollArea`, and\n`Dialog.Actions` remain available for custom composition within `Dialog`.\nPassing them through `children` is deprecated; prefer the props above.\n\n## Migrating from children\n\n```js\n// Before\n\n Alert\n Something happened.\n \n\n\n// After\n\n```", "displayName": "Dialog", "methods": [], "statics": [], diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index df5c741d54..db75f757fc 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -15,7 +15,7 @@ import Modal from '../Modal'; import type { SurfaceStyle } from '../Surface'; import type { DialogChildProps } from './utils'; -export type Props = { +type CommonProps = { /** * Determines whether clicking outside the dialog dismiss it. */ @@ -49,15 +49,56 @@ export type Props = { const DIALOG_ELEVATION: Elevation = 3; +const renderChildren = (children: React.ReactNode) => { + const dialogChildren = React.Children.toArray(children).filter( + (child) => child != null && typeof child !== 'boolean' + ); + const hasIcon = dialogChildren.some( + (child) => React.isValidElement(child) && child.type === DialogIcon + ); + + return dialogChildren.map((child, i) => { + if (React.isValidElement(child)) { + const topMarginStyle = + i === 0 && child.type !== DialogIcon ? styles.firstChild : undefined; + const titleAlignmentStyle = + hasIcon && child.type === DialogTitle + ? styles.titleWithIcon + : undefined; + + if (topMarginStyle || titleAlignmentStyle) { + return React.cloneElement(child, { + style: [topMarginStyle, child.props.style, titleAlignmentStyle], + }); + } + } + + return child; + }); +}; + /** * 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) component. * + * ## Recommended props + * + * | Prop | Type | Description | + * | --- | --- | --- | + * | `icon` | `IconSource` | Icon rendered through `Dialog.Icon`. | + * | `title` | `ReactNode` | Dialog title rendered through `Dialog.Title`. | + * | `content` | `string | ReactNode` | Required dialog content. Non-empty strings use Material 3 supporting-text styles. | + * | `actions` | `DialogActionsProps[]` | Action labels, press handlers, and optional Button props. | + * | `scrollable` | `boolean` | Renders content through `Dialog.ScrollArea` and a `ScrollView`. | + * | `contentProps` | `DialogContentProps` | Props forwarded to `Dialog.Content`. | + * | `scrollAreaProps` | `DialogScrollAreaProps` | Props forwarded to `Dialog.ScrollArea`. | + * | `scrollViewProps` | `ScrollViewProps` | Props forwarded to the generated `ScrollView`. | + * * ## Usage * ```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 +112,13 @@ const DIALOG_ELEVATION: Elevation = 3; * * * - * - * Alert - * - * This is simple dialog - * - * - * - * - * + * * * * @@ -88,6 +127,32 @@ const DIALOG_ELEVATION: Elevation = 3; * * export default MyComponent; * ``` + * + * ## Compound composition + * + * `Dialog.Icon`, `Dialog.Title`, `Dialog.Content`, `Dialog.ScrollArea`, and + * `Dialog.Actions` remain available for custom composition within `Dialog`. + * Passing them through `children` is deprecated; prefer the props above. + * + * ## Migrating from children + * + * ```js + * // Before + * + * Alert + * Something happened. + * + * + * + * // After + * + * ``` */ const Dialog = ({ children, @@ -98,6 +163,7 @@ const Dialog = ({ style, theme: themeOverrides, testID, + ...props }: Props) => { const { right, left } = useSafeAreaInsets(); @@ -105,12 +171,75 @@ const Dialog = ({ const borderRadius = theme.shapes.corner.extraLarge; const backgroundColor = theme.colors.surfaceContainerHigh; - const dialogChildren = React.Children.toArray(children).filter( - (child) => child != null && typeof child !== 'boolean' - ); - const hasIcon = dialogChildren.some( - (child) => React.isValidElement(child) && child.type === DialogIcon - ); + + const _children = React.useMemo(() => { + if (children) return children; + + const { + actions, + content, + icon, + scrollable, + contentProps, + scrollAreaProps, + scrollViewProps, + title, + } = props; + + const dialogIcon = icon ? ( + + ) : null; + const dialogTitle = title ? {title} : null; + + const contentNode = + typeof content === 'string' ? ( + + {content} + + ) : ( + content + ); + + const dialogContent = scrollable ? ( + + {contentNode} + + ) : ( + + {contentNode} + + ); + + const dialogActions = actions?.length ? ( + + {actions.map( + ({ label, onPress: onActionPress, ...buttonProps }, index) => ( + + ) + )} + + ) : null; + + return [dialogIcon, dialogTitle, dialogContent, dialogActions]; + }, [children, props, theme.colors.onSurfaceVariant]); return ( - {dialogChildren.map((child, i) => { - if (React.isValidElement(child)) { - const topMarginStyle = - i === 0 && child.type !== DialogIcon - ? { marginTop: 24 } - : undefined; - const titleAlignmentStyle = - hasIcon && child.type === DialogTitle - ? styles.titleWithIcon - : undefined; - - if (topMarginStyle || titleAlignmentStyle) { - return React.cloneElement(child, { - style: [topMarginStyle, child.props.style, titleAlignmentStyle], - }); - } - - return child; - } - - return child; - })} + {renderChildren(_children)} ); }; @@ -185,6 +293,9 @@ const styles = StyleSheet.create({ titleWithIcon: { textAlign: 'center', }, + firstChild: { + marginTop: 24, + }, }); export default Dialog; From 4f30aca28e52d12200661e83c48005d747daec0d Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Tue, 25 Aug 2026 09:55:03 +0200 Subject: [PATCH 03/18] refactor: added new test cases for new Dialog API --- src/components/Dialog/DialogIcon.tsx | 2 +- src/components/__tests__/Dialog.test.tsx | 47 ++++++++++++++++++++++++ 2 files changed, 48 insertions(+), 1 deletion(-) diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx index 1527451fa8..210270a427 100644 --- a/src/components/Dialog/DialogIcon.tsx +++ b/src/components/Dialog/DialogIcon.tsx @@ -64,7 +64,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/__tests__/Dialog.test.tsx b/src/components/__tests__/Dialog.test.tsx index 32477e5fe1..7cfe7af6f6 100644 --- a/src/components/__tests__/Dialog.test.tsx +++ b/src/components/__tests__/Dialog.test.tsx @@ -107,6 +107,53 @@ describe('Dialog', () => { marginTop: 24, }); }); + + it('should render a content', async () => { + await render( + + ); + + expect(screen.getByText('Content')).toBeOnTheScreen(); + }); + + it('should render string 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( + + ); + + expect(screen.getByTestId('cancel-btn')).toBeOnTheScreen(); + }); }); describe('DialogActions', () => { From 6e0b8fe24ba1fd6909585f0edd06bd1a18dc2ea4 Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Tue, 25 Aug 2026 09:56:44 +0200 Subject: [PATCH 04/18] refactor: updated Examples, duplicated dialogs using new Dialog API --- example/src/Examples/DialogExample.tsx | 96 ++++++++++++- .../Dialogs/NewDialogWithCustomColors.tsx | 47 +++++++ .../NewDialogWithDismissableBackButton.tsx | 31 +++++ .../Examples/Dialogs/NewDialogWithIcon.tsx | 29 ++++ .../Dialogs/NewDialogWithLoadingIndicator.tsx | 51 +++++++ .../Dialogs/NewDialogWithLongText.tsx | 38 ++++++ .../Dialogs/NewDialogWithRadioBtns.tsx | 126 ++++++++++++++++++ .../Dialogs/NewUndismissableDialog.tsx | 30 +++++ example/src/Examples/Dialogs/index.tsx | 7 + 9 files changed, 452 insertions(+), 3 deletions(-) create mode 100644 example/src/Examples/Dialogs/NewDialogWithCustomColors.tsx create mode 100644 example/src/Examples/Dialogs/NewDialogWithDismissableBackButton.tsx create mode 100644 example/src/Examples/Dialogs/NewDialogWithIcon.tsx create mode 100644 example/src/Examples/Dialogs/NewDialogWithLoadingIndicator.tsx create mode 100644 example/src/Examples/Dialogs/NewDialogWithLongText.tsx create mode 100644 example/src/Examples/Dialogs/NewDialogWithRadioBtns.tsx create mode 100644 example/src/Examples/Dialogs/NewUndismissableDialog.tsx diff --git a/example/src/Examples/DialogExample.tsx b/example/src/Examples/DialogExample.tsx index d926ae6616..1c7e1b6686 100644 --- a/example/src/Examples/DialogExample.tsx +++ b/example/src/Examples/DialogExample.tsx @@ -10,6 +10,13 @@ import { DialogWithLoadingIndicator, DialogWithLongText, DialogWithRadioBtns, + NewDialogWithCustomColors, + NewDialogWithDismissableBackButton, + NewDialogWithIcon, + NewDialogWithLoadingIndicator, + NewDialogWithLongText, + NewDialogWithRadioBtns, + NewUndismissableDialog, UndismissableDialog, } from './Dialogs'; import ScreenWrapper from '../ScreenWrapper'; @@ -79,6 +86,57 @@ const DialogExample = () => { Dismissable back button )} + + + + + + + {Platform.OS === 'android' && ( + + )} { visible={_getVisible('dialog6')} close={_toggleDialog('dialog6')} /> - + )} + + + + + + + {Platform.OS === 'android' && ( + + )} ); }; diff --git a/example/src/Examples/Dialogs/NewDialogWithCustomColors.tsx b/example/src/Examples/Dialogs/NewDialogWithCustomColors.tsx new file mode 100644 index 0000000000..f7b700e43c --- /dev/null +++ b/example/src/Examples/Dialogs/NewDialogWithCustomColors.tsx @@ -0,0 +1,47 @@ +import { StyleSheet } from 'react-native'; + +import { Dialog, Palette, Portal, Text } from 'react-native-paper'; + +const NewDialogWithCustomColors = ({ + visible, + close, +}: { + visible: boolean; + close: () => void; +}) => ( + + + Alert + + } + content={ + + This is a dialog with custom colors + + } + actions={[ + { + label: 'Ok', + onPress: close, + textColor: Palette.primary95, + }, + ]} + /> + +); + +const styles = StyleSheet.create({ + dialog: { + backgroundColor: Palette.primary10, + }, + text: { + color: Palette.primary95, + }, +}); + +export default NewDialogWithCustomColors; diff --git a/example/src/Examples/Dialogs/NewDialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/NewDialogWithDismissableBackButton.tsx new file mode 100644 index 0000000000..c53c10c0c2 --- /dev/null +++ b/example/src/Examples/Dialogs/NewDialogWithDismissableBackButton.tsx @@ -0,0 +1,31 @@ +import { Dialog, Palette, Portal } from 'react-native-paper'; + +const NewDialogWithDismissableBackButton = ({ + visible, + close, +}: { + visible: boolean; + close: () => void; +}) => ( + + + +); + +export default NewDialogWithDismissableBackButton; diff --git a/example/src/Examples/Dialogs/NewDialogWithIcon.tsx b/example/src/Examples/Dialogs/NewDialogWithIcon.tsx new file mode 100644 index 0000000000..640fe244e1 --- /dev/null +++ b/example/src/Examples/Dialogs/NewDialogWithIcon.tsx @@ -0,0 +1,29 @@ +import { Dialog, Palette, Portal } from 'react-native-paper'; + +const NewDialogWithIcon = ({ + visible, + close, +}: { + visible: boolean; + close: () => void; +}) => ( + + + +); + +export default NewDialogWithIcon; diff --git a/example/src/Examples/Dialogs/NewDialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/NewDialogWithLoadingIndicator.tsx new file mode 100644 index 0000000000..ea7aaa9279 --- /dev/null +++ b/example/src/Examples/Dialogs/NewDialogWithLoadingIndicator.tsx @@ -0,0 +1,51 @@ +import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'; + +import { Dialog, Palette, Portal, Text, useTheme } from 'react-native-paper'; + +const isIOS = Platform.OS === 'ios'; + +const NewDialogWithLoadingIndicator = ({ + visible, + close, +}: { + visible: boolean; + close: () => void; +}) => { + const theme = useTheme(); + const textColor = { color: theme.colors.onSurfaceVariant }; + + return ( + + + + + Loading..... + + + } + actions={[]} + /> + + ); +}; + +const styles = StyleSheet.create({ + content: { + flexDirection: 'row', + alignItems: 'center', + }, + indicator: { + marginRight: 16, + }, +}); + +export default NewDialogWithLoadingIndicator; diff --git a/example/src/Examples/Dialogs/NewDialogWithLongText.tsx b/example/src/Examples/Dialogs/NewDialogWithLongText.tsx new file mode 100644 index 0000000000..6a5a76f5f8 --- /dev/null +++ b/example/src/Examples/Dialogs/NewDialogWithLongText.tsx @@ -0,0 +1,38 @@ +import { Dimensions, StyleSheet } from 'react-native'; + +import { Portal, Dialog } from 'react-native-paper'; + +const NewDialogWithLongText = ({ + visible, + close, +}: { + visible: boolean; + close: () => void; +}) => ( + + + +); + +const styles = StyleSheet.create({ + scrollArea: { + paddingHorizontal: 0, + }, + scrollViewContent: { + paddingHorizontal: 24, + }, +}); + +export default NewDialogWithLongText; diff --git a/example/src/Examples/Dialogs/NewDialogWithRadioBtns.tsx b/example/src/Examples/Dialogs/NewDialogWithRadioBtns.tsx new file mode 100644 index 0000000000..01e8a35f26 --- /dev/null +++ b/example/src/Examples/Dialogs/NewDialogWithRadioBtns.tsx @@ -0,0 +1,126 @@ +import * as React from 'react'; +import { View, StyleSheet } from 'react-native'; + +import { + Portal, + Dialog, + RadioButton, + Text, + TouchableRipple, + useTheme, +} from 'react-native-paper'; + +type Props = { + visible: boolean; + close: () => void; +}; + +type CheckedState = 'normal' | 'first' | 'second' | 'third' | 'fourth'; + +const NewDialogWithRadioBtns = ({ visible, close }: Props) => { + const [checked, setChecked] = React.useState('normal'); + const theme = useTheme(); + const optionTextColor = { color: theme.colors.onSurfaceVariant }; + + return ( + + + setChecked('normal')}> + + + + + + Option 1 + + + + setChecked('second')}> + + + + + + Option 2 + + + + setChecked('third')}> + + + + + + Option 3 + + + + setChecked('fourth')}> + + + + + + Option 4 + + + + + } + actions={[ + { label: 'Cancel', onPress: close }, + { label: 'Ok', onPress: close }, + ]} + /> + + ); +}; + +export default NewDialogWithRadioBtns; + +const styles = StyleSheet.create({ + container: { + maxHeight: 170, + paddingHorizontal: 0, + }, + row: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 16, + paddingVertical: 8, + }, + text: { + paddingLeft: 8, + }, +}); diff --git a/example/src/Examples/Dialogs/NewUndismissableDialog.tsx b/example/src/Examples/Dialogs/NewUndismissableDialog.tsx new file mode 100644 index 0000000000..ff0e984cab --- /dev/null +++ b/example/src/Examples/Dialogs/NewUndismissableDialog.tsx @@ -0,0 +1,30 @@ +import { Dialog, Palette, Portal } from 'react-native-paper'; + +const NewUndismissableDialog = ({ + visible, + close, +}: { + visible: boolean; + close: () => void; +}) => ( + + + +); + +export default NewUndismissableDialog; diff --git a/example/src/Examples/Dialogs/index.tsx b/example/src/Examples/Dialogs/index.tsx index 7af735d036..9b320a67fc 100644 --- a/example/src/Examples/Dialogs/index.tsx +++ b/example/src/Examples/Dialogs/index.tsx @@ -5,3 +5,10 @@ export { default as DialogWithRadioBtns } from './DialogWithRadioBtns'; export { default as UndismissableDialog } from './UndismissableDialog'; export { default as DialogWithIcon } from './DialogWithIcon'; export { default as DialogWithDismissableBackButton } from './DialogWithDismissableBackButton'; +export { default as NewDialogWithCustomColors } from './NewDialogWithCustomColors'; +export { default as NewDialogWithDismissableBackButton } from './NewDialogWithDismissableBackButton'; +export { default as NewDialogWithIcon } from './NewDialogWithIcon'; +export { default as NewDialogWithLoadingIndicator } from './NewDialogWithLoadingIndicator'; +export { default as NewDialogWithLongText } from './NewDialogWithLongText'; +export { default as NewDialogWithRadioBtns } from './NewDialogWithRadioBtns'; +export { default as NewUndismissableDialog } from './NewUndismissableDialog'; From e7ec0ae473a5cee162ecc252305a4f7f241f5549 Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Tue, 25 Aug 2026 12:01:09 +0200 Subject: [PATCH 05/18] docs: updated docs for Dialog compound components --- src/components/Dialog/Dialog.tsx | 4 ++-- src/components/Dialog/DialogActions.tsx | 15 +++++++++++++++ src/components/Dialog/DialogContent.tsx | 8 ++++++++ src/components/Dialog/DialogIcon.tsx | 8 ++++++++ src/components/Dialog/DialogScrollArea.tsx | 8 ++++++++ src/components/Dialog/DialogTitle.tsx | 8 ++++++++ 6 files changed, 49 insertions(+), 2 deletions(-) diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index db75f757fc..259f15aa31 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -87,12 +87,12 @@ const renderChildren = (children: React.ReactNode) => { * | --- | --- | --- | * | `icon` | `IconSource` | Icon rendered through `Dialog.Icon`. | * | `title` | `ReactNode` | Dialog title rendered through `Dialog.Title`. | - * | `content` | `string | ReactNode` | Required dialog content. Non-empty strings use Material 3 supporting-text styles. | + * | `content` | `ReactNode` | Required dialog content. Non-empty strings use Material 3 supporting-text styles. | * | `actions` | `DialogActionsProps[]` | Action labels, press handlers, and optional Button props. | * | `scrollable` | `boolean` | Renders content through `Dialog.ScrollArea` and a `ScrollView`. | * | `contentProps` | `DialogContentProps` | Props forwarded to `Dialog.Content`. | * | `scrollAreaProps` | `DialogScrollAreaProps` | Props forwarded to `Dialog.ScrollArea`. | - * | `scrollViewProps` | `ScrollViewProps` | Props forwarded to the generated `ScrollView`. | + * | `scrollViewProps` | `ScrollViewProps` | Props forwarded to the `ScrollView`. | * * ## Usage * ```js diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx index 0a11970077..21dad8bca3 100644 --- a/src/components/Dialog/DialogActions.tsx +++ b/src/components/Dialog/DialogActions.tsx @@ -31,6 +31,7 @@ export type Props = ViewProps & { * * const hideDialog = () => setVisible(false); * + * // Before * return ( * * @@ -41,6 +42,20 @@ export type Props = ViewProps & { * * * ); + * + * // V6 and later + * return ( + * + * console.log('Cancel'), label: 'Cancel' }, + * { onPress: () => console.log('Ok'), label: 'Ok' }, + * ]} + * /> + * + * ); * }; * * export default MyComponent; diff --git a/src/components/Dialog/DialogContent.tsx b/src/components/Dialog/DialogContent.tsx index a084188b32..fe953396a7 100644 --- a/src/components/Dialog/DialogContent.tsx +++ b/src/components/Dialog/DialogContent.tsx @@ -23,6 +23,7 @@ export type Props = ViewProps & { * * const hideDialog = () => setVisible(false); * + * // Before * return ( * * @@ -32,6 +33,13 @@ export type Props = ViewProps & { * * * ); + * + * // V6 and later + * return ( + * + * + * + * ); * }; * * export default MyComponent; diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx index 210270a427..69fd66505a 100644 --- a/src/components/Dialog/DialogIcon.tsx +++ b/src/components/Dialog/DialogIcon.tsx @@ -39,6 +39,7 @@ export type Props = { * * const hideDialog = () => setVisible(false); * + * // Before * return ( * * @@ -50,6 +51,13 @@ export type Props = { * * * ); + * + * // V6 and later + * return ( + * + * + * + * ); * }; * * export default MyComponent; diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx index 0d54f6d415..ce49568b76 100644 --- a/src/components/Dialog/DialogScrollArea.tsx +++ b/src/components/Dialog/DialogScrollArea.tsx @@ -32,6 +32,7 @@ export type Props = ViewProps & { * * const hideDialog = () => setVisible(false); * + * // Before * return ( * * @@ -43,6 +44,13 @@ export type Props = ViewProps & { * * * ); + * + * // V6 and later + * return ( + * + * + * + * ); * }; * * export default MyComponent; diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx index beff3be7d9..1e08d80bd9 100644 --- a/src/components/Dialog/DialogTitle.tsx +++ b/src/components/Dialog/DialogTitle.tsx @@ -31,6 +31,7 @@ export type Props = React.ComponentPropsWithRef & { * * const hideDialog = () => setVisible(false); * + * // Before * return ( * * @@ -41,6 +42,13 @@ export type Props = React.ComponentPropsWithRef & { * * * ); + * + * // V6 and later + * return ( + * + * + * + * ); * }; * * export default MyComponent; From dca98a7e1a35844d6eadae5547f32612f23ae1b2 Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Thu, 27 Aug 2026 13:11:05 +0200 Subject: [PATCH 06/18] refactor: removed children from Dialog, updated Example, updated tests --- example/src/DrawerItems.tsx | 17 +- example/src/Examples/DialogExample.tsx | 88 ----------- .../Examples/Dialogs/DialogTextComponent.tsx | 18 --- .../Dialogs/DialogWithCustomColors.tsx | 4 +- .../DialogWithDismissableBackButton.tsx | 31 ++-- .../src/Examples/Dialogs/DialogWithIcon.tsx | 45 +++--- .../Dialogs/DialogWithLoadingIndicator.tsx | 27 ++-- .../Examples/Dialogs/DialogWithLongText.tsx | 68 ++------ .../Examples/Dialogs/DialogWithRadioBtns.tsx | 145 ++++++++++-------- .../Dialogs/NewDialogWithCustomColors.tsx | 47 ------ .../NewDialogWithDismissableBackButton.tsx | 31 ---- .../Examples/Dialogs/NewDialogWithIcon.tsx | 29 ---- .../Dialogs/NewDialogWithLoadingIndicator.tsx | 51 ------ .../Dialogs/NewDialogWithLongText.tsx | 38 ----- .../Dialogs/NewDialogWithRadioBtns.tsx | 126 --------------- .../Dialogs/NewUndismissableDialog.tsx | 30 ---- .../Examples/Dialogs/UndismissableDialog.tsx | 32 ++-- example/src/Examples/Dialogs/index.tsx | 7 - src/components/Dialog/Dialog.tsx | 76 +++------ src/components/Dialog/DialogActions.tsx | 13 -- src/components/Dialog/DialogContent.tsx | 12 -- src/components/Dialog/DialogIcon.tsx | 14 -- src/components/Dialog/DialogScrollArea.tsx | 14 -- src/components/__tests__/Dialog.test.tsx | 121 ++++++++------- 24 files changed, 251 insertions(+), 833 deletions(-) delete mode 100644 example/src/Examples/Dialogs/DialogTextComponent.tsx delete mode 100644 example/src/Examples/Dialogs/NewDialogWithCustomColors.tsx delete mode 100644 example/src/Examples/Dialogs/NewDialogWithDismissableBackButton.tsx delete mode 100644 example/src/Examples/Dialogs/NewDialogWithIcon.tsx delete mode 100644 example/src/Examples/Dialogs/NewDialogWithLoadingIndicator.tsx delete mode 100644 example/src/Examples/Dialogs/NewDialogWithLongText.tsx delete mode 100644 example/src/Examples/Dialogs/NewDialogWithRadioBtns.tsx delete mode 100644 example/src/Examples/Dialogs/NewUndismissableDialog.tsx diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 49bdd5f99d..662b417c48 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -6,7 +6,6 @@ import { DrawerContentScrollView } from '@react-navigation/drawer'; import Constants, { ExecutionEnvironment } from 'expo-constants'; import { Badge, - Button, Dialog, Drawer, Palette, @@ -241,9 +240,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 +253,9 @@ function DrawerItems() { app.json within{' '} example directory. - - - - - + } + actions={[{ onPress: _handleDismissRTLDialog, label: 'Ok' }]} + /> ); diff --git a/example/src/Examples/DialogExample.tsx b/example/src/Examples/DialogExample.tsx index 1c7e1b6686..4628d5944d 100644 --- a/example/src/Examples/DialogExample.tsx +++ b/example/src/Examples/DialogExample.tsx @@ -10,13 +10,6 @@ import { DialogWithLoadingIndicator, DialogWithLongText, DialogWithRadioBtns, - NewDialogWithCustomColors, - NewDialogWithDismissableBackButton, - NewDialogWithIcon, - NewDialogWithLoadingIndicator, - NewDialogWithLongText, - NewDialogWithRadioBtns, - NewUndismissableDialog, UndismissableDialog, } from './Dialogs'; import ScreenWrapper from '../ScreenWrapper'; @@ -86,57 +79,6 @@ const DialogExample = () => { Dismissable back button )} - - - - - - - {Platform.OS === 'android' && ( - - )} { close={_toggleDialog('dialog7')} /> )} - - - - - - - {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..c66309a565 100644 --- a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx +++ b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx @@ -1,6 +1,4 @@ -import { Button, Portal, Dialog, Palette } from 'react-native-paper'; - -import { TextComponent } from './DialogTextComponent'; +import { Dialog, Palette, Portal } from 'react-native-paper'; const DialogWithCustomColors = ({ visible, diff --git a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx index e9a7189068..825ac73684 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 { Dialog, Palette, Portal } from 'react-native-paper'; const DialogWithDismissableBackButton = ({ visible, @@ -15,21 +13,18 @@ const DialogWithDismissableBackButton = ({ visible={visible} dismissable={false} dismissableBackButton - > - Alert - - - This is an undismissable dialog, however you can use hardware back - button to close it! - - - - - - - + title="Alert" + content="This is an undismissable dialog, however you can use hardware back button to close it!" + actions={[ + { + label: 'Disagree', + onPress: close, + disabled: true, + textColor: Palette.tertiary50, + }, + { label: 'Agree', onPress: close }, + ]} + /> ); diff --git a/example/src/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx index 9a5b6477c1..3ab41285e1 100644 --- a/example/src/Examples/Dialogs/DialogWithIcon.tsx +++ b/example/src/Examples/Dialogs/DialogWithIcon.tsx @@ -1,6 +1,4 @@ -import { Button, Portal, Dialog, Palette } from 'react-native-paper'; - -import { TextComponent } from './DialogTextComponent'; +import { Dialog, Palette, Portal } from 'react-native-paper'; const DialogWithIcon = ({ visible, @@ -8,27 +6,24 @@ const DialogWithIcon = ({ }: { visible: boolean; close: () => void; -}) => { - return ( - - - - Dialog with Icon - - - This is a dialog with a component called DialogIcon. When the icon - is displayed, the title is centered automatically. - - - - - - - - - ); -}; +}) => ( + + + +); 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..8001ee1dcc 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 } from 'react-native-paper'; const DialogWithLongText = ({ visible, @@ -16,63 +14,23 @@ 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={[{ onPress: close, label: 'Ok' }]} + /> ); 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..3e9402656c 100644 --- a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx +++ b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx @@ -1,16 +1,15 @@ 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, } from 'react-native-paper'; -import { TextComponent } from './DialogTextComponent'; - type Props = { visible: boolean; close: () => void; @@ -20,74 +19,90 @@ 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={[ + { label: 'Cancel', onPress: close }, + { label: 'Ok', onPress: close }, + ]} + /> ); }; diff --git a/example/src/Examples/Dialogs/NewDialogWithCustomColors.tsx b/example/src/Examples/Dialogs/NewDialogWithCustomColors.tsx deleted file mode 100644 index f7b700e43c..0000000000 --- a/example/src/Examples/Dialogs/NewDialogWithCustomColors.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { StyleSheet } from 'react-native'; - -import { Dialog, Palette, Portal, Text } from 'react-native-paper'; - -const NewDialogWithCustomColors = ({ - visible, - close, -}: { - visible: boolean; - close: () => void; -}) => ( - - - Alert - - } - content={ - - This is a dialog with custom colors - - } - actions={[ - { - label: 'Ok', - onPress: close, - textColor: Palette.primary95, - }, - ]} - /> - -); - -const styles = StyleSheet.create({ - dialog: { - backgroundColor: Palette.primary10, - }, - text: { - color: Palette.primary95, - }, -}); - -export default NewDialogWithCustomColors; diff --git a/example/src/Examples/Dialogs/NewDialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/NewDialogWithDismissableBackButton.tsx deleted file mode 100644 index c53c10c0c2..0000000000 --- a/example/src/Examples/Dialogs/NewDialogWithDismissableBackButton.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Dialog, Palette, Portal } from 'react-native-paper'; - -const NewDialogWithDismissableBackButton = ({ - visible, - close, -}: { - visible: boolean; - close: () => void; -}) => ( - - - -); - -export default NewDialogWithDismissableBackButton; diff --git a/example/src/Examples/Dialogs/NewDialogWithIcon.tsx b/example/src/Examples/Dialogs/NewDialogWithIcon.tsx deleted file mode 100644 index 640fe244e1..0000000000 --- a/example/src/Examples/Dialogs/NewDialogWithIcon.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Dialog, Palette, Portal } from 'react-native-paper'; - -const NewDialogWithIcon = ({ - visible, - close, -}: { - visible: boolean; - close: () => void; -}) => ( - - - -); - -export default NewDialogWithIcon; diff --git a/example/src/Examples/Dialogs/NewDialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/NewDialogWithLoadingIndicator.tsx deleted file mode 100644 index ea7aaa9279..0000000000 --- a/example/src/Examples/Dialogs/NewDialogWithLoadingIndicator.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'; - -import { Dialog, Palette, Portal, Text, useTheme } from 'react-native-paper'; - -const isIOS = Platform.OS === 'ios'; - -const NewDialogWithLoadingIndicator = ({ - visible, - close, -}: { - visible: boolean; - close: () => void; -}) => { - const theme = useTheme(); - const textColor = { color: theme.colors.onSurfaceVariant }; - - return ( - - - - - Loading..... - - - } - actions={[]} - /> - - ); -}; - -const styles = StyleSheet.create({ - content: { - flexDirection: 'row', - alignItems: 'center', - }, - indicator: { - marginRight: 16, - }, -}); - -export default NewDialogWithLoadingIndicator; diff --git a/example/src/Examples/Dialogs/NewDialogWithLongText.tsx b/example/src/Examples/Dialogs/NewDialogWithLongText.tsx deleted file mode 100644 index 6a5a76f5f8..0000000000 --- a/example/src/Examples/Dialogs/NewDialogWithLongText.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Dimensions, StyleSheet } from 'react-native'; - -import { Portal, Dialog } from 'react-native-paper'; - -const NewDialogWithLongText = ({ - visible, - close, -}: { - visible: boolean; - close: () => void; -}) => ( - - - -); - -const styles = StyleSheet.create({ - scrollArea: { - paddingHorizontal: 0, - }, - scrollViewContent: { - paddingHorizontal: 24, - }, -}); - -export default NewDialogWithLongText; diff --git a/example/src/Examples/Dialogs/NewDialogWithRadioBtns.tsx b/example/src/Examples/Dialogs/NewDialogWithRadioBtns.tsx deleted file mode 100644 index 01e8a35f26..0000000000 --- a/example/src/Examples/Dialogs/NewDialogWithRadioBtns.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import * as React from 'react'; -import { View, StyleSheet } from 'react-native'; - -import { - Portal, - Dialog, - RadioButton, - Text, - TouchableRipple, - useTheme, -} from 'react-native-paper'; - -type Props = { - visible: boolean; - close: () => void; -}; - -type CheckedState = 'normal' | 'first' | 'second' | 'third' | 'fourth'; - -const NewDialogWithRadioBtns = ({ visible, close }: Props) => { - const [checked, setChecked] = React.useState('normal'); - const theme = useTheme(); - const optionTextColor = { color: theme.colors.onSurfaceVariant }; - - return ( - - - setChecked('normal')}> - - - - - - Option 1 - - - - setChecked('second')}> - - - - - - Option 2 - - - - setChecked('third')}> - - - - - - Option 3 - - - - setChecked('fourth')}> - - - - - - Option 4 - - - - - } - actions={[ - { label: 'Cancel', onPress: close }, - { label: 'Ok', onPress: close }, - ]} - /> - - ); -}; - -export default NewDialogWithRadioBtns; - -const styles = StyleSheet.create({ - container: { - maxHeight: 170, - paddingHorizontal: 0, - }, - row: { - flexDirection: 'row', - alignItems: 'center', - paddingHorizontal: 16, - paddingVertical: 8, - }, - text: { - paddingLeft: 8, - }, -}); diff --git a/example/src/Examples/Dialogs/NewUndismissableDialog.tsx b/example/src/Examples/Dialogs/NewUndismissableDialog.tsx deleted file mode 100644 index ff0e984cab..0000000000 --- a/example/src/Examples/Dialogs/NewUndismissableDialog.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Dialog, Palette, Portal } from 'react-native-paper'; - -const NewUndismissableDialog = ({ - visible, - close, -}: { - visible: boolean; - close: () => void; -}) => ( - - - -); - -export default NewUndismissableDialog; diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx index 208c809967..6d5fbd0d6a 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 { Dialog, Palette, Portal } from 'react-native-paper'; const UndismissableDialog = ({ visible, @@ -10,18 +8,22 @@ const UndismissableDialog = ({ close: () => void; }) => ( - - Alert - - This is an undismissable dialog!! - - - - - - + ); diff --git a/example/src/Examples/Dialogs/index.tsx b/example/src/Examples/Dialogs/index.tsx index 9b320a67fc..7af735d036 100644 --- a/example/src/Examples/Dialogs/index.tsx +++ b/example/src/Examples/Dialogs/index.tsx @@ -5,10 +5,3 @@ export { default as DialogWithRadioBtns } from './DialogWithRadioBtns'; export { default as UndismissableDialog } from './UndismissableDialog'; export { default as DialogWithIcon } from './DialogWithIcon'; export { default as DialogWithDismissableBackButton } from './DialogWithDismissableBackButton'; -export { default as NewDialogWithCustomColors } from './NewDialogWithCustomColors'; -export { default as NewDialogWithDismissableBackButton } from './NewDialogWithDismissableBackButton'; -export { default as NewDialogWithIcon } from './NewDialogWithIcon'; -export { default as NewDialogWithLoadingIndicator } from './NewDialogWithLoadingIndicator'; -export { default as NewDialogWithLongText } from './NewDialogWithLongText'; -export { default as NewDialogWithRadioBtns } from './NewDialogWithRadioBtns'; -export { default as NewUndismissableDialog } from './NewUndismissableDialog'; diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 259f15aa31..3d0c1047ec 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -15,7 +15,7 @@ import Modal from '../Modal'; import type { SurfaceStyle } from '../Surface'; import type { DialogChildProps } from './utils'; -type CommonProps = { +export type Props = { /** * Determines whether clicking outside the dialog dismiss it. */ @@ -81,19 +81,6 @@ const renderChildren = (children: React.ReactNode) => { * 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) component. * - * ## Recommended props - * - * | Prop | Type | Description | - * | --- | --- | --- | - * | `icon` | `IconSource` | Icon rendered through `Dialog.Icon`. | - * | `title` | `ReactNode` | Dialog title rendered through `Dialog.Title`. | - * | `content` | `ReactNode` | Required dialog content. Non-empty strings use Material 3 supporting-text styles. | - * | `actions` | `DialogActionsProps[]` | Action labels, press handlers, and optional Button props. | - * | `scrollable` | `boolean` | Renders content through `Dialog.ScrollArea` and a `ScrollView`. | - * | `contentProps` | `DialogContentProps` | Props forwarded to `Dialog.Content`. | - * | `scrollAreaProps` | `DialogScrollAreaProps` | Props forwarded to `Dialog.ScrollArea`. | - * | `scrollViewProps` | `ScrollViewProps` | Props forwarded to the `ScrollView`. | - * * ## Usage * ```js * import * as React from 'react'; @@ -127,35 +114,8 @@ const renderChildren = (children: React.ReactNode) => { * * export default MyComponent; * ``` - * - * ## Compound composition - * - * `Dialog.Icon`, `Dialog.Title`, `Dialog.Content`, `Dialog.ScrollArea`, and - * `Dialog.Actions` remain available for custom composition within `Dialog`. - * Passing them through `children` is deprecated; prefer the props above. - * - * ## Migrating from children - * - * ```js - * // Before - * - * Alert - * Something happened. - * - * - * - * // After - * - * ``` */ const Dialog = ({ - children, dismissable = true, dismissableBackButton = dismissable, onDismiss, @@ -163,7 +123,14 @@ const Dialog = ({ style, theme: themeOverrides, testID, - ...props + actions, + content, + icon, + scrollable, + contentProps, + scrollAreaProps, + scrollViewProps, + title, }: Props) => { const { right, left } = useSafeAreaInsets(); @@ -173,19 +140,6 @@ const Dialog = ({ const backgroundColor = theme.colors.surfaceContainerHigh; const _children = React.useMemo(() => { - if (children) return children; - - const { - actions, - content, - icon, - scrollable, - contentProps, - scrollAreaProps, - scrollViewProps, - title, - } = props; - const dialogIcon = icon ? ( ) : null; @@ -239,7 +193,17 @@ const Dialog = ({ ) : null; return [dialogIcon, dialogTitle, dialogContent, dialogActions]; - }, [children, props, theme.colors.onSurfaceVariant]); + }, [ + actions, + content, + contentProps, + icon, + scrollAreaProps, + scrollViewProps, + scrollable, + theme.colors.onSurfaceVariant, + title, + ]); return ( setVisible(false); * - * // Before - * return ( - * - * - * - * - * - * - * - * - * ); - * - * // V6 and later * return ( * * setVisible(false); * - * // Before - * return ( - * - * - * - * This is simple dialog - * - * - * - * ); - * - * // V6 and later * return ( * * diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx index 69fd66505a..1bc3030a58 100644 --- a/src/components/Dialog/DialogIcon.tsx +++ b/src/components/Dialog/DialogIcon.tsx @@ -39,20 +39,6 @@ export type Props = { * * const hideDialog = () => setVisible(false); * - * // Before - * return ( - * - * - * - * This is a title - * - * This is simple dialog - * - * - * - * ); - * - * // V6 and later * return ( * * diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx index ce49568b76..751afef924 100644 --- a/src/components/Dialog/DialogScrollArea.tsx +++ b/src/components/Dialog/DialogScrollArea.tsx @@ -32,20 +32,6 @@ export type Props = ViewProps & { * * const hideDialog = () => setVisible(false); * - * // Before - * return ( - * - * - * - * - * This is a scrollable area - * - * - * - * - * ); - * - * // V6 and later * return ( * * diff --git a/src/components/__tests__/Dialog.test.tsx b/src/components/__tests__/Dialog.test.tsx index 7cfe7af6f6..0f654800ff 100644 --- a/src/components/__tests__/Dialog.test.tsx +++ b/src/components/__tests__/Dialog.test.tsx @@ -11,7 +11,6 @@ import { act, userEvent } from '@testing-library/react-native'; import Dialog from '../../components/Dialog/Dialog'; import { render, screen } from '../../test-utils'; -import Button from '../Button/Button'; interface BackHandlerStatic extends RNBackHandlerStatic { mockPressBack(): void; @@ -21,11 +20,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 +33,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 +53,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 +80,8 @@ describe('Dialog', () => { dismissable={false} dismissableBackButton testID="dialog" - > - This is simple dialog - + content="This is simple dialog" + /> ); await userEvent.press(screen.getByTestId('dialog-backdrop')); @@ -95,32 +99,22 @@ describe('Dialog', () => { }); it('should apply top margin to the first child if the dialog is V3', async () => { - await render( - - - Test Dialog Content - - - ); - - expect(screen.getByTestId('dialog-content')).toHaveStyle({ - marginTop: 24, - }); - }); - - it('should render a content', async () => { await render( This is simple dialog} + content="This is simple dialog" /> ); - expect(screen.getByText('Content')).toBeOnTheScreen(); + const element = screen.getByTestId('dialog-title').parent; + + expect(element).toHaveStyle({ + marginTop: 24, + }); }); - it('should render string content in a scroll area', async () => { + it('should render content in a scroll area', async () => { await render( { await render( { }); describe('DialogActions', () => { - it('should render passed children', async () => { + it('should render passed actions', async () => { await render( - - - - + ); expect(screen.getByTestId('button-cancel')).toBeOnTheScreen(); @@ -171,36 +170,42 @@ describe('DialogActions', () => { it('should apply default styles', async () => { await render( - - - - + ); - const dialogActionsContainer = screen.getByTestId('dialog-actions'); - const dialogActionButtons = dialogActionsContainer.children; + const buttonCancelParent = screen.getByTestId('button-cancel').parent; + const buttonOkParent = screen.getByTestId('button-ok').parent; - expect(dialogActionsContainer).toHaveStyle({ - paddingBottom: 24, - paddingHorizontal: 24, - }); - expect(dialogActionButtons[0]).toHaveStyle({ marginRight: 8 }); - expect(dialogActionButtons[1]).toHaveStyle({ marginRight: 0 }); + expect(buttonCancelParent).toHaveStyle({ marginRight: 8 }); + expect(buttonOkParent).toHaveStyle({ marginRight: 0 }); }); it('should apply custom styles', async () => { await render( - - - - + ); - const dialogActionsContainer = screen.getByTestId('dialog-actions'); - const dialogActionButtons = dialogActionsContainer.children; + const buttonCancel = screen.getByTestId('button-cancel').parent; + const buttonOk = screen.getByTestId('button-ok').parent; - expect(dialogActionButtons[0]).toHaveStyle({ margin: 10 }); - expect(dialogActionButtons[1]).toHaveStyle({ margin: 0 }); + expect(buttonCancel).toHaveStyle({ marginRight: 8 }); + expect(buttonOk).toHaveStyle({ marginRight: 0 }); }); }); From 0e5ef94b51b5906315d16b2d9d21a8ec17ebc8a9 Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Thu, 27 Aug 2026 15:52:04 +0200 Subject: [PATCH 07/18] refactor: removed cloneElement from DialogActions, changed actions type --- example/src/DrawerItems.tsx | 7 +- .../DialogWithDismissableBackButton.tsx | 19 +++--- .../src/Examples/Dialogs/DialogWithIcon.tsx | 14 ++-- .../Examples/Dialogs/DialogWithLongText.tsx | 8 ++- .../Examples/Dialogs/DialogWithRadioBtns.tsx | 9 ++- .../Examples/Dialogs/UndismissableDialog.tsx | 20 +++--- src/components/Dialog/Dialog.tsx | 15 +---- src/components/Dialog/DialogActions.tsx | 43 +++++++------ src/components/Dialog/DialogScrollArea.tsx | 2 +- src/components/Dialog/utils.ts | 5 -- src/components/__tests__/Dialog.test.tsx | 64 +++++++++---------- 11 files changed, 105 insertions(+), 101 deletions(-) diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 662b417c48..f72cf51b6a 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -6,6 +6,7 @@ import { DrawerContentScrollView } from '@react-navigation/drawer'; import Constants, { ExecutionEnvironment } from 'expo-constants'; import { Badge, + Button, Dialog, Drawer, Palette, @@ -254,7 +255,11 @@ function DrawerItems() { example directory. } - actions={[{ onPress: _handleDismissRTLDialog, label: 'Ok' }]} + actions={[ + , + ]} /> diff --git a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx index 825ac73684..fd7663dc79 100644 --- a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx +++ b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx @@ -1,4 +1,4 @@ -import { Dialog, Palette, Portal } from 'react-native-paper'; +import { Button, Dialog, Palette, Portal } from 'react-native-paper'; const DialogWithDismissableBackButton = ({ visible, @@ -16,13 +16,16 @@ const DialogWithDismissableBackButton = ({ title="Alert" content="This is an undismissable dialog, however you can use hardware back button to close it!" actions={[ - { - label: 'Disagree', - onPress: close, - disabled: true, - textColor: Palette.tertiary50, - }, - { label: 'Agree', onPress: close }, + , + , ]} /> diff --git a/example/src/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx index 3ab41285e1..c176946aa4 100644 --- a/example/src/Examples/Dialogs/DialogWithIcon.tsx +++ b/example/src/Examples/Dialogs/DialogWithIcon.tsx @@ -1,4 +1,4 @@ -import { Dialog, Palette, Portal } from 'react-native-paper'; +import { Button, Dialog, Palette, Portal } from 'react-native-paper'; const DialogWithIcon = ({ visible, @@ -15,12 +15,12 @@ const DialogWithIcon = ({ title="Dialog with Icon" content="This is a dialog with a component called DialogIcon. When the icon is displayed, the title is centered automatically." actions={[ - { - label: 'Disagree', - onPress: close, - textColor: Palette.error50, - }, - { label: 'Agree', onPress: close }, + , + , ]} /> diff --git a/example/src/Examples/Dialogs/DialogWithLongText.tsx b/example/src/Examples/Dialogs/DialogWithLongText.tsx index 8001ee1dcc..33a6c965d3 100644 --- a/example/src/Examples/Dialogs/DialogWithLongText.tsx +++ b/example/src/Examples/Dialogs/DialogWithLongText.tsx @@ -1,6 +1,6 @@ import { Dimensions, StyleSheet } from 'react-native'; -import { Portal, Dialog } from 'react-native-paper'; +import { Portal, Dialog, Button } from 'react-native-paper'; const DialogWithLongText = ({ visible, @@ -21,7 +21,11 @@ const DialogWithLongText = ({ 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={[{ onPress: close, label: 'Ok' }]} + actions={[ + , + ]} /> ); diff --git a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx index 3e9402656c..eac4636b5f 100644 --- a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx +++ b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx @@ -8,6 +8,7 @@ import { Text, TouchableRipple, useTheme, + Button, } from 'react-native-paper'; type Props = { @@ -99,8 +100,12 @@ const DialogWithRadioBtns = ({ visible, close }: Props) => { } actions={[ - { label: 'Cancel', onPress: close }, - { label: 'Ok', onPress: close }, + , + , ]} /> diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx index 6d5fbd0d6a..1dad790030 100644 --- a/example/src/Examples/Dialogs/UndismissableDialog.tsx +++ b/example/src/Examples/Dialogs/UndismissableDialog.tsx @@ -1,4 +1,4 @@ -import { Dialog, Palette, Portal } from 'react-native-paper'; +import { Button, Dialog, Palette, Portal } from 'react-native-paper'; const UndismissableDialog = ({ visible, @@ -15,13 +15,17 @@ const UndismissableDialog = ({ title="Alert" content="This is an undismissable dialog!!" actions={[ - { - label: 'Disagree', - onPress: close, - disabled: true, - textColor: Palette.tertiary50, - }, - { label: 'Agree', onPress: close }, + , + , ]} /> diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 3d0c1047ec..d452575907 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -176,20 +176,7 @@ const Dialog = ({ ); const dialogActions = actions?.length ? ( - - {actions.map( - ({ label, onPress: onActionPress, ...buttonProps }, index) => ( - - ) - )} - + {actions} ) : null; return [dialogIcon, dialogTitle, dialogContent, dialogActions]; diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx index 179c3ecabe..a7bf9f404d 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'; @@ -48,26 +47,26 @@ 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) => ( + + {child} + + ))} ); }; @@ -83,6 +82,12 @@ const styles = StyleSheet.create({ paddingBottom: 24, paddingHorizontal: 24, }, + item: { + marginRight: 8, + }, + itemLast: { + marginRight: 0, + }, }); export default DialogActions; diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx index 751afef924..7d22a5f62e 100644 --- a/src/components/Dialog/DialogScrollArea.tsx +++ b/src/components/Dialog/DialogScrollArea.tsx @@ -46,7 +46,7 @@ const DialogScrollArea = (props: Props) => { const theme = useInternalTheme(props.theme); const { colors } = theme; const borderStyles = { - borderColor: colors.outline, + borderColor: colors.outlineVariant, borderTopWidth: 1, borderBottomWidth: 1, }; diff --git a/src/components/Dialog/utils.ts b/src/components/Dialog/utils.ts index 5413d4c612..1602491265 100644 --- a/src/components/Dialog/utils.ts +++ b/src/components/Dialog/utils.ts @@ -3,8 +3,3 @@ import type { StyleProp, TextStyle, ViewStyle } from 'react-native'; export type DialogChildProps = { style?: StyleProp; }; - -export type DialogActionChildProps = DialogChildProps & { - compact?: boolean; - uppercase?: boolean; -}; diff --git a/src/components/__tests__/Dialog.test.tsx b/src/components/__tests__/Dialog.test.tsx index 0f654800ff..4407d9b451 100644 --- a/src/components/__tests__/Dialog.test.tsx +++ b/src/components/__tests__/Dialog.test.tsx @@ -11,6 +11,7 @@ import { act, userEvent } from '@testing-library/react-native'; import Dialog from '../../components/Dialog/Dialog'; import { render, screen } from '../../test-utils'; +import Button from '../Button/Button'; interface BackHandlerStatic extends RNBackHandlerStatic { mockPressBack(): void; @@ -122,7 +123,6 @@ describe('Dialog', () => { scrollable scrollAreaProps={{ testID: 'dialog-scroll-area' }} scrollViewProps={{ testID: 'dialog-scroll-view' }} - actions={[{ onPress: jest.fn(), label: 'Ok' }]} /> ); @@ -137,11 +137,9 @@ describe('Dialog', () => { visible content="This is simple dialog" actions={[ - { - onPress: jest.fn(), - label: 'Cancel', - testID: 'cancel-btn', - }, + , ]} /> ); @@ -158,8 +156,12 @@ describe('DialogActions', () => { testID="dialog" content="This is simple dialog" actions={[ - { testID: 'button-cancel', label: 'Cancel' }, - { testID: 'button-ok', label: 'Ok' }, + , + , ]} /> ); @@ -170,42 +172,36 @@ describe('DialogActions', () => { it('should apply default styles', async () => { await render( - + + + + ); - const buttonCancelParent = screen.getByTestId('button-cancel').parent; - const buttonOkParent = screen.getByTestId('button-ok').parent; + const dialogActionsContainer = screen.getByTestId('dialog-actions'); + const dialogActionButtons = dialogActionsContainer.children; - expect(buttonCancelParent).toHaveStyle({ marginRight: 8 }); - expect(buttonOkParent).toHaveStyle({ marginRight: 0 }); + expect(dialogActionsContainer).toHaveStyle({ + paddingBottom: 24, + paddingHorizontal: 24, + }); + expect(dialogActionButtons[0]).toHaveStyle({ marginRight: 8 }); + expect(dialogActionButtons[1]).toHaveStyle({ marginRight: 0 }); }); it('should apply custom styles', async () => { await render( - + + + + ); - const buttonCancel = screen.getByTestId('button-cancel').parent; - const buttonOk = screen.getByTestId('button-ok').parent; + const dialogActionsContainer = screen.getByTestId('dialog-actions'); + const dialogActionButtons = dialogActionsContainer.children; - expect(buttonCancel).toHaveStyle({ marginRight: 8 }); - expect(buttonOk).toHaveStyle({ marginRight: 0 }); + expect(dialogActionButtons[0]).toHaveStyle({ margin: 10 }); + expect(dialogActionButtons[1]).toHaveStyle({ margin: 0 }); }); }); From 51195d6d5eda4dbc6f22bc9fd0107fe3eaf75408 Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Fri, 28 Aug 2026 10:25:43 +0200 Subject: [PATCH 08/18] refactor: dropped cloneElement and updated arialabel for Dialog --- src/components/Dialog/Dialog.tsx | 169 ++++++++++++----------- src/components/Dialog/utils.ts | 5 - src/components/Modal.tsx | 6 + src/components/__tests__/Dialog.test.tsx | 40 ++++++ 4 files changed, 133 insertions(+), 87 deletions(-) delete mode 100644 src/components/Dialog/utils.ts diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index d452575907..df5e28efe0 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -11,9 +11,8 @@ import DialogScrollArea from './DialogScrollArea'; import DialogTitle from './DialogTitle'; import { useInternalTheme } from '../../core/theming'; import type { Elevation, ThemeProp } from '../../theme/types'; +import type { IconSource } from '../Icon'; import Modal from '../Modal'; -import type { SurfaceStyle } from '../Surface'; -import type { DialogChildProps } from './utils'; export type Props = { /** @@ -35,8 +34,45 @@ export type Props = { /** * Content of the `Dialog`. */ - children: React.ReactNode; - style?: StyleProp; + 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. + */ + 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. You can use it to override the defaults. + * By default if a `title` is a string then it's passed as an accessibility label. + */ + accessibilityLabel?: string; + + style?: Animated.WithAnimatedValue>; /** * @optional */ @@ -49,34 +85,6 @@ export type Props = { const DIALOG_ELEVATION: Elevation = 3; -const renderChildren = (children: React.ReactNode) => { - const dialogChildren = React.Children.toArray(children).filter( - (child) => child != null && typeof child !== 'boolean' - ); - const hasIcon = dialogChildren.some( - (child) => React.isValidElement(child) && child.type === DialogIcon - ); - - return dialogChildren.map((child, i) => { - if (React.isValidElement(child)) { - const topMarginStyle = - i === 0 && child.type !== DialogIcon ? styles.firstChild : undefined; - const titleAlignmentStyle = - hasIcon && child.type === DialogTitle - ? styles.titleWithIcon - : undefined; - - if (topMarginStyle || titleAlignmentStyle) { - return React.cloneElement(child, { - style: [topMarginStyle, child.props.style, titleAlignmentStyle], - }); - } - } - - return child; - }); -}; - /** * 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) component. @@ -131,6 +139,7 @@ const Dialog = ({ scrollAreaProps, scrollViewProps, title, + accessibilityLabel, }: Props) => { const { right, left } = useSafeAreaInsets(); @@ -139,59 +148,18 @@ const Dialog = ({ const backgroundColor = theme.colors.surfaceContainerHigh; - const _children = React.useMemo(() => { - const dialogIcon = icon ? ( - - ) : null; - const dialogTitle = title ? {title} : null; - - const contentNode = - typeof content === 'string' ? ( - - {content} - - ) : ( - content - ); - - const dialogContent = scrollable ? ( - - {contentNode} - + {content} + ) : ( - - {contentNode} - + content ); - const dialogActions = actions?.length ? ( - {actions} - ) : null; - - return [dialogIcon, dialogTitle, dialogContent, dialogActions]; - }, [ - actions, - content, - contentProps, - icon, - scrollAreaProps, - scrollViewProps, - scrollable, - theme.colors.onSurfaceVariant, - title, - ]); - return ( - {renderChildren(_children)} + {icon ? : null} + + {title ? ( + + {title} + + ) : null} + + {scrollable ? ( + + {contentNode} + + ) : ( + + {contentNode} + + )} + + {actions?.length ? {actions} : null} ); }; diff --git a/src/components/Dialog/utils.ts b/src/components/Dialog/utils.ts deleted file mode 100644 index 1602491265..0000000000 --- a/src/components/Dialog/utils.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { StyleProp, TextStyle, ViewStyle } from 'react-native'; - -export type DialogChildProps = { - style?: StyleProp; -}; diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 0a34198d2e..3a04f82460 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. + */ + dialogAccessibilityLabel?: string; /** * Determines Whether the modal is visible. */ @@ -127,6 +131,7 @@ function Modal({ dismissableBackButton = dismissable, visible = false, overlayAccessibilityLabel = 'Close modal', + dialogAccessibilityLabel, onDismiss = () => {}, children, contentContainerStyle, @@ -259,6 +264,7 @@ function Modal({ ]} elevation={contentElevation} transitionDuration={scale * DEFAULT_DURATION} + aria-label={dialogAccessibilityLabel} > {children} diff --git a/src/components/__tests__/Dialog.test.tsx b/src/components/__tests__/Dialog.test.tsx index 4407d9b451..20e1dc6496 100644 --- a/src/components/__tests__/Dialog.test.tsx +++ b/src/components/__tests__/Dialog.test.tsx @@ -146,6 +146,46 @@ describe('Dialog', () => { 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', () => { From 5b8088645bca2dbd37fb8f6504e4735a84993731 Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Fri, 28 Aug 2026 10:32:35 +0200 Subject: [PATCH 09/18] docs: updated docs --- docs/6.x/docs/components/Dialog/Dialog.mdx | 107 ++++++---- .../docs/components/Dialog/DialogActions.mdx | 86 ++++++++ .../docs/components/Dialog/DialogContent.mdx | 67 +++++++ .../6.x/docs/components/Dialog/DialogIcon.mdx | 8 +- .../components/Dialog/DialogScrollArea.mdx | 81 ++++++++ .../docs/components/Dialog/DialogTitle.mdx | 75 +++++++ docs/6.x/docs/components/Modal.mdx | 184 ++++++++++++++++++ docs/src/data/componentDocs6x.json | 131 +++++++++++-- src/components/Dialog/DialogActions.tsx | 8 +- src/components/Dialog/DialogTitle.tsx | 13 -- 10 files changed, 682 insertions(+), 78 deletions(-) create mode 100644 docs/6.x/docs/components/Dialog/DialogActions.mdx create mode 100644 docs/6.x/docs/components/Dialog/DialogContent.mdx create mode 100644 docs/6.x/docs/components/Dialog/DialogScrollArea.mdx create mode 100644 docs/6.x/docs/components/Dialog/DialogTitle.mdx create mode 100644 docs/6.x/docs/components/Modal.mdx diff --git a/docs/6.x/docs/components/Dialog/Dialog.mdx b/docs/6.x/docs/components/Dialog/Dialog.mdx index 8a9f1381c8..6c8b4873d3 100644 --- a/docs/6.x/docs/components/Dialog/Dialog.mdx +++ b/docs/6.x/docs/components/Dialog/Dialog.mdx @@ -11,19 +11,6 @@ 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. -## Recommended props - -| Prop | Type | Description | -| --- | --- | --- | -| `icon` | `IconSource` | Icon rendered through `Dialog.Icon`. | -| `title` | `ReactNode` | Dialog title rendered through `Dialog.Title`. | -| `content` | `ReactNode` | Required dialog content. Non-empty strings use Material 3 supporting-text styles. | -| `actions` | `DialogActionsProps[]` | Action labels, press handlers, and Button props. | -| `scrollable` | `boolean` | Renders content through `Dialog.ScrollArea` and a `ScrollView`. | -| `contentProps` | `DialogContentProps` | Props forwarded to `Dialog.Content`. | -| `scrollAreaProps` | `DialogScrollAreaProps` | Props forwarded to `Dialog.ScrollArea`. | -| `scrollViewProps` | `ScrollViewProps` | Props forwarded to `ScrollView`. | - @@ -64,32 +51,6 @@ const MyComponent = () => { export default MyComponent; ``` -## Compound composition - -`Dialog.Icon`, `Dialog.Title`, `Dialog.Content`, `Dialog.ScrollArea`, and -`Dialog.Actions` remain available for custom composition within `Dialog`. -Passing them through `children` is deprecated; prefer the props above. - -## Migrating from children - -```js -// Before - - Alert - Something happened. - - - -// After - -``` - ## Props @@ -130,11 +91,75 @@ Passing them through `children` is deprecated; prefer the props above.
-### children (depracated, use props instead) +### icon + +
+ + + +
+ +### title + +
+ + + +
+ +### content + +
+ + + +
+ +### actions + +
+ + + +
+ +### scrollable + +
+ + + +
+ +### contentProps + +
+ + + +
+ +### scrollAreaProps + +
+ + + +
+ +### scrollViewProps + +
+ + + +
+ +### accessibilityLabel
- +
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 index a736d9d384..226dc9aa22 100644 --- a/docs/6.x/docs/components/Dialog/DialogIcon.mdx +++ b/docs/6.x/docs/components/Dialog/DialogIcon.mdx @@ -29,13 +29,7 @@ const MyComponent = () => { return ( - - - This is a title - - This is simple dialog - - + ); }; 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..0babcca4c7 --- /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 + +
+ + + +
+ +### dialogAccessibilityLabel + +
+ + + +
+ +### visible + +
+ + + +
+ +### children (required) + +
+ + + +
+ +### contentContainerStyle + +
+ + + +
+ +### contentBackgroundColor + +
+ + + +
+ +### contentBorderRadius + +
+ + + +
+ +### contentElevation + +
+ + + +
+ +### style + +
+ + + +
+ +### theme + +
+ + + +
+ +### testID + +
+ + + + + + + + + ## Theme colors + + + + + diff --git a/docs/src/data/componentDocs6x.json b/docs/src/data/componentDocs6x.json index b6ce0ee29d..646335640a 100644 --- a/docs/src/data/componentDocs6x.json +++ b/docs/src/data/componentDocs6x.json @@ -5212,10 +5212,10 @@ "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## Recommended props\n\n| Prop | Type | Description |\n| --- | --- | --- |\n| `icon` | `IconSource` | Icon rendered through `Dialog.Icon`. |\n| `title` | `ReactNode` | Dialog title rendered through `Dialog.Title`. |\n| `content` | `ReactNode` | Required dialog content. Non-empty strings use Material 3 supporting-text styles. |\n| `actions` | `DialogActionsProps[]` | Action labels, press handlers, and optional Button props. |\n| `scrollable` | `boolean` | Renders content through `Dialog.ScrollArea` and a `ScrollView`. |\n| `contentProps` | `DialogContentProps` | Props forwarded to `Dialog.Content`. |\n| `scrollAreaProps` | `DialogScrollAreaProps` | Props forwarded to `Dialog.ScrollArea`. |\n| `scrollViewProps` | `ScrollViewProps` | Props forwarded to `ScrollView`. |\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 \n \n \n \n );\n};\n\nexport default MyComponent;\n```\n\n## Compound composition\n\n`Dialog.Icon`, `Dialog.Title`, `Dialog.Content`, `Dialog.ScrollArea`, and\n`Dialog.Actions` remain available for custom composition within `Dialog`.\nPassing them through `children` is deprecated; prefer the props above.\n\n## Migrating from children\n\n```js\n// Before\n\n Alert\n Something happened.\n \n\n\n// After\n\n```", + "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 \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## Recommended props\n\n| Prop | Type | Description |\n| --- | --- | --- |\n| `icon` | `IconSource` | Icon rendered through `Dialog.Icon`. |\n| `title` | `ReactNode` | Dialog title rendered through `Dialog.Title`. |\n| `content` | `ReactNode` | Required dialog content. Non-empty strings use Material 3 supporting-text styles. |\n| `actions` | `DialogActionsProps[]` | Action labels, press handlers, and optional Button props. |\n| `scrollable` | `boolean` | Renders content through `Dialog.ScrollArea` and a `ScrollView`. |\n| `contentProps` | `DialogContentProps` | Props forwarded to `Dialog.Content`. |\n| `scrollAreaProps` | `DialogScrollAreaProps` | Props forwarded to `Dialog.ScrollArea`. |\n| `scrollViewProps` | `ScrollViewProps` | Props forwarded to `ScrollView`. |\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 \n \n \n \n );\n};\n\nexport default MyComponent;\n```\n\n## Compound composition\n\n`Dialog.Icon`, `Dialog.Title`, `Dialog.Content`, `Dialog.ScrollArea`, and\n`Dialog.Actions` remain available for custom composition within `Dialog`.\nPassing them through `children` is deprecated; prefer the props above.\n\n## Migrating from children\n\n```js\n// Before\n\n Alert\n Something happened.\n \n\n\n// After\n\n```", + "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 \n \n \n \n );\n};\n\nexport default MyComponent;\n```", "displayName": "Dialog", "methods": [], "statics": [], @@ -5268,13 +5268,107 @@ "computed": false } }, - "children": { - "required": true, + "icon": { + "required": false, + "tsType": { + "name": "IconSource" + }, + "description": "Icon to display above the dialog title." + }, + "title": { + "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, - "description": "Content of the `Dialog`." + "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." + }, + "accessibilityLabel": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the dialog. You can use it to override the defaults.\nBy default if a `title` is a string then it's passed as an accessibility label." }, "style": { "required": false, @@ -5313,10 +5407,10 @@ "Dialog/DialogActions": { "filepath": "Dialog/DialogActions.tsx", "title": "Dialog.Actions", - "description": "A component to show a list of actions in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Button, Dialog, Portal } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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 \n \n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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": [], @@ -5360,10 +5454,10 @@ "Dialog/DialogContent": { "filepath": "Dialog/DialogContent.tsx", "title": "Dialog.Content", - "description": "A component to show content in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n This is simple dialog\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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 This is simple dialog\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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": [], @@ -5400,10 +5494,10 @@ "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 This is a title\n \n This is simple dialog\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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 This is a title\n \n This is simple dialog\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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": [], @@ -5451,10 +5545,10 @@ "Dialog/DialogScrollArea": { "filepath": "Dialog/DialogScrollArea.tsx", "title": "Dialog.ScrollArea", - "description": "A component to show a scrollable content in a Dialog. The component only provides appropriate styling.\nFor the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n \n \n This is a scrollable area\n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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 This is a scrollable area\n \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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": [], @@ -5498,10 +5592,10 @@ "Dialog/DialogTitle": { "filepath": "Dialog/DialogTitle.tsx", "title": "Dialog.Title", - "description": "A component to show a title in a Dialog.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n const [visible, setVisible] = React.useState(false);\n\n const hideDialog = () => setVisible(false);\n\n return (\n \n \n This is a title\n \n This is simple dialog\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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 This is a title\n \n This is simple dialog\n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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": [], @@ -9441,6 +9535,13 @@ "computed": false } }, + "dialogAccessibilityLabel": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "Accessibility label for the dialog." + }, "visible": { "required": false, "tsType": { diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx index a7bf9f404d..b0c1bb9d8a 100644 --- a/src/components/Dialog/DialogActions.tsx +++ b/src/components/Dialog/DialogActions.tsx @@ -36,8 +36,12 @@ export type Props = ViewProps & { * visible={visible} * onDismiss={hideDialog} * actions={[ - * { onPress: () => console.log('Cancel'), label: 'Cancel' }, - * { onPress: () => console.log('Ok'), label: 'Ok' }, + * , + * , * ]} * /> * diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx index 1e08d80bd9..c3e86ba200 100644 --- a/src/components/Dialog/DialogTitle.tsx +++ b/src/components/Dialog/DialogTitle.tsx @@ -31,19 +31,6 @@ export type Props = React.ComponentPropsWithRef & { * * const hideDialog = () => setVisible(false); * - * // Before - * return ( - * - * - * This is a title - * - * This is simple dialog - * - * - * - * ); - * - * // V6 and later * return ( * * From 119adac83014139e87d101c19dc8d0cad3fe5d3a Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Fri, 28 Aug 2026 15:36:44 +0200 Subject: [PATCH 10/18] refactor: changed accessibilityLabel into aria-label --- docs/6.x/docs/components/Dialog/Dialog.mdx | 4 ++-- docs/6.x/docs/components/Modal.mdx | 4 ++-- docs/src/data/componentDocs6x.json | 8 ++++---- src/components/Dialog/Dialog.tsx | 12 ++++-------- src/components/Modal.tsx | 8 ++++---- src/components/__tests__/Dialog.test.tsx | 2 +- 6 files changed, 17 insertions(+), 21 deletions(-) diff --git a/docs/6.x/docs/components/Dialog/Dialog.mdx b/docs/6.x/docs/components/Dialog/Dialog.mdx index 6c8b4873d3..2a6a33f54d 100644 --- a/docs/6.x/docs/components/Dialog/Dialog.mdx +++ b/docs/6.x/docs/components/Dialog/Dialog.mdx @@ -155,11 +155,11 @@ export default MyComponent;
-### accessibilityLabel +### aria-label
- +
diff --git a/docs/6.x/docs/components/Modal.mdx b/docs/6.x/docs/components/Modal.mdx index 0babcca4c7..860bc2f5b2 100644 --- a/docs/6.x/docs/components/Modal.mdx +++ b/docs/6.x/docs/components/Modal.mdx @@ -93,11 +93,11 @@ export default MyComponent;
-### dialogAccessibilityLabel +### aria-label
- +
diff --git a/docs/src/data/componentDocs6x.json b/docs/src/data/componentDocs6x.json index 646335640a..486ff2a76b 100644 --- a/docs/src/data/componentDocs6x.json +++ b/docs/src/data/componentDocs6x.json @@ -5363,12 +5363,12 @@ }, "description": "Props passed to the `ScrollView` when `scrollable` is enabled." }, - "accessibilityLabel": { + "aria-label": { "required": false, "tsType": { "name": "string" }, - "description": "Accessibility label for the dialog. You can use it to override the defaults.\nBy default if a `title` is a string then it's passed as an accessibility label." + "description": "Accessibility label for the dialog. This is read by the screen reader when the user opens a dialog." }, "style": { "required": false, @@ -9535,12 +9535,12 @@ "computed": false } }, - "dialogAccessibilityLabel": { + "aria-label": { "required": false, "tsType": { "name": "string" }, - "description": "Accessibility label for the dialog." + "description": "Accessibility label for the dialog. This is read by the screen reader when the user opens a dialog." }, "visible": { "required": false, diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index df5e28efe0..6179d3a4ef 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -67,11 +67,9 @@ export type Props = { */ scrollViewProps?: Omit; /** - * Accessibility label for the dialog. You can use it to override the defaults. - * By default if a `title` is a string then it's passed as an accessibility label. + * Accessibility label for the dialog. This is read by the screen reader when the user opens a dialog. */ - accessibilityLabel?: string; - + 'aria-label'?: string; style?: Animated.WithAnimatedValue>; /** * @optional @@ -139,7 +137,7 @@ const Dialog = ({ scrollAreaProps, scrollViewProps, title, - accessibilityLabel, + 'aria-label': ariaLabel, }: Props) => { const { right, left } = useSafeAreaInsets(); @@ -178,9 +176,7 @@ const Dialog = ({ ]} theme={theme} testID={testID} - dialogAccessibilityLabel={ - typeof title === 'string' ? title : accessibilityLabel - } + aria-label={typeof title === 'string' ? title : ariaLabel} > {icon ? : null} diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 3a04f82460..2e1d0daba8 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -37,9 +37,9 @@ export type Props = { */ overlayAccessibilityLabel?: string; /** - * Accessibility label for the dialog. + * Accessibility label for the dialog. This is read by the screen reader when the user opens a dialog. */ - dialogAccessibilityLabel?: string; + 'aria-label'?: string; /** * Determines Whether the modal is visible. */ @@ -131,7 +131,7 @@ function Modal({ dismissableBackButton = dismissable, visible = false, overlayAccessibilityLabel = 'Close modal', - dialogAccessibilityLabel, + 'aria-label': ariaLabel, onDismiss = () => {}, children, contentContainerStyle, @@ -264,7 +264,7 @@ function Modal({ ]} elevation={contentElevation} transitionDuration={scale * DEFAULT_DURATION} - aria-label={dialogAccessibilityLabel} + aria-label={ariaLabel} > {children} diff --git a/src/components/__tests__/Dialog.test.tsx b/src/components/__tests__/Dialog.test.tsx index 20e1dc6496..6c8bd4e5b9 100644 --- a/src/components/__tests__/Dialog.test.tsx +++ b/src/components/__tests__/Dialog.test.tsx @@ -178,7 +178,7 @@ describe('Dialog', () => { testID="dialog" visible content="This is simple dialog" - accessibilityLabel="dialog-label" + aria-label="dialog-label" /> ); From 37475114f2a21581f6599a822968a725d716bad3 Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Fri, 28 Aug 2026 15:42:11 +0200 Subject: [PATCH 11/18] refactor: updated styles for contents in Dialog --- src/components/Dialog/Dialog.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 6179d3a4ef..8ab1b35a04 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -193,20 +193,14 @@ const Dialog = ({ {scrollable ? ( {contentNode} ) : ( {contentNode} From 4fe6aedd0614246e4474d8621c3640edce95228c Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Fri, 28 Aug 2026 15:56:31 +0200 Subject: [PATCH 12/18] docs: updated migration.md --- docs/6.x/docs/guides/migration.md | 50 +++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/docs/6.x/docs/guides/migration.md b/docs/6.x/docs/guides/migration.md index a4d7123a09..92506c2f22 100644 --- a/docs/6.x/docs/guides/migration.md +++ b/docs/6.x/docs/guides/migration.md @@ -279,3 +279,53 @@ const theme = { style={{ fontSize: 16, color: '#1C1B1F' }} /> ``` + +### Dialog + +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`** + +#### 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`** provides an accessibility label when the dialog title is not a string. + +```tsx +// Before (v5) + + + Alert + + This is a simple dialog + + + + + + + +// After (v6) + + Done]} + /> + +``` From 39d7a122c3f8b33ac9dce01a946a8466aa499050 Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Fri, 28 Aug 2026 16:05:47 +0200 Subject: [PATCH 13/18] refactor: updated migration.md --- docs/6.x/docs/guides/migration.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/6.x/docs/guides/migration.md b/docs/6.x/docs/guides/migration.md index 92506c2f22..0f1eeb75c2 100644 --- a/docs/6.x/docs/guides/migration.md +++ b/docs/6.x/docs/guides/migration.md @@ -295,6 +295,8 @@ Use the dedicated props instead: - **`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. From 7082e70f3b8a7c3651c7abed3a75270ffcf06529 Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Mon, 31 Aug 2026 10:53:31 +0200 Subject: [PATCH 14/18] refactor: updated DialogActions.tsx and tests --- src/components/Dialog/DialogActions.tsx | 20 +++++++----------- src/components/__tests__/Dialog.test.tsx | 27 +++++++++++++++--------- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx index b0c1bb9d8a..9726ee0924 100644 --- a/src/components/Dialog/DialogActions.tsx +++ b/src/components/Dialog/DialogActions.tsx @@ -61,15 +61,14 @@ const DialogActions = ({ children, style, theme, ...rest }: Props) => { return ( {actions.map((child, index) => ( - + {index > 0 && } {child} - + ))} ); @@ -86,11 +85,8 @@ const styles = StyleSheet.create({ paddingBottom: 24, paddingHorizontal: 24, }, - item: { - marginRight: 8, - }, - itemLast: { - marginRight: 0, + spacer: { + width: 8, }, }); diff --git a/src/components/__tests__/Dialog.test.tsx b/src/components/__tests__/Dialog.test.tsx index 6c8bd4e5b9..d1f3e8d793 100644 --- a/src/components/__tests__/Dialog.test.tsx +++ b/src/components/__tests__/Dialog.test.tsx @@ -219,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, + }); }); }); From 735cbc7abd1d1ddac0eee7b8b8584daa599bff3e Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Tue, 1 Sep 2026 10:37:55 +0200 Subject: [PATCH 15/18] refactor: addressed comments, updated docs --- docs/6.x/docs/components/Dialog/Dialog.mdx | 4 +++- docs/src/data/componentDocs6x.json | 4 ++-- src/components/Dialog/Dialog.tsx | 6 ++++-- src/components/Modal.tsx | 1 + 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/docs/6.x/docs/components/Dialog/Dialog.mdx b/docs/6.x/docs/components/Dialog/Dialog.mdx index 2a6a33f54d..9ced6eb35d 100644 --- a/docs/6.x/docs/components/Dialog/Dialog.mdx +++ b/docs/6.x/docs/components/Dialog/Dialog.mdx @@ -40,7 +40,9 @@ const MyComponent = () => { onDismiss={hideDialog} title="Alert" content="This is simple dialog" - actions={[{ label: 'Done', onPress: hideDialog }]} + actions={[ + + ]} /> diff --git a/docs/src/data/componentDocs6x.json b/docs/src/data/componentDocs6x.json index 486ff2a76b..522465f6ad 100644 --- a/docs/src/data/componentDocs6x.json +++ b/docs/src/data/componentDocs6x.json @@ -5212,10 +5212,10 @@ "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 \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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 \n \n \n \n );\n};\n\nexport default MyComponent;\n```", + "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": [], diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 8ab1b35a04..e4090104b5 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -110,7 +110,9 @@ const DIALOG_ELEVATION: Elevation = 3; * onDismiss={hideDialog} * title="Alert" * content="This is simple dialog" - * actions={[{ label: 'Done', onPress: hideDialog }]} + * actions={[ + * + * ]} * /> * * @@ -176,7 +178,7 @@ const Dialog = ({ ]} theme={theme} testID={testID} - aria-label={typeof title === 'string' ? title : ariaLabel} + aria-label={ariaLabel ?? (typeof title === 'string' ? title : undefined)} > {icon ? : null} diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 2e1d0daba8..09ad25f301 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -265,6 +265,7 @@ function Modal({ elevation={contentElevation} transitionDuration={scale * DEFAULT_DURATION} aria-label={ariaLabel} + role="dialog" > {children} From e7050092bcd7a777469bcd0171272af9cb694038 Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Wed, 2 Sep 2026 10:36:03 +0200 Subject: [PATCH 16/18] refactor: conflicts fix --- .../Dialogs/DialogWithCustomColors.tsx | 37 ++++++++++++------- src/components/Dialog/Dialog.tsx | 14 +++++-- 2 files changed, 34 insertions(+), 17 deletions(-) diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx index c66309a565..c47f54b4d3 100644 --- a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx +++ b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx @@ -1,4 +1,6 @@ -import { Dialog, Palette, Portal } from 'react-native-paper'; +import { StyleSheet } from 'react-native'; + +import { Button, Dialog, Palette, Portal, Text } from 'react-native-paper'; const DialogWithCustomColors = ({ visible, @@ -11,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/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index e4090104b5..c4cd14f1a1 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -1,9 +1,14 @@ 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 type { + DialogContentProps, + DialogScrollAreaProps, +} from 'react-native-paper'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import Modal from '../Modal'; import DialogActions from './DialogActions'; import DialogContent from './DialogContent'; import DialogIcon from './DialogIcon'; @@ -12,7 +17,8 @@ import DialogTitle from './DialogTitle'; import { useInternalTheme } from '../../core/theming'; import type { Elevation, ThemeProp } from '../../theme/types'; import type { IconSource } from '../Icon'; -import Modal from '../Modal'; +import type { SurfaceStyle } from '../Surface'; +import Text from '../Typography/Text'; export type Props = { /** @@ -70,7 +76,7 @@ export type Props = { * Accessibility label for the dialog. This is read by the screen reader when the user opens a dialog. */ 'aria-label'?: string; - style?: Animated.WithAnimatedValue>; + style?: StyleProp; /** * @optional */ From eefda581bccf744a38b7be39bac9c97deb3eddae Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Wed, 2 Sep 2026 10:38:53 +0200 Subject: [PATCH 17/18] docs: fixed description for icon prop in Dialog --- src/components/Dialog/Dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index c4cd14f1a1..dcec750f2c 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -38,7 +38,7 @@ export type Props = { */ visible: boolean; /** - * Content of the `Dialog`. + * Icon to display above the dialog title. */ icon?: IconSource; /** From a0fc3b76b9cd58b0841532b20b028e53307dbd36 Mon Sep 17 00:00:00 2001 From: Oskar Kaczmarzyk Date: Wed, 2 Sep 2026 16:34:51 +0200 Subject: [PATCH 18/18] refactor: addressed comments --- docs/6.x/docs/guides/migration.md | 10 ++++------ src/components/Dialog/Dialog.tsx | 6 ++---- src/components/Modal.tsx | 2 +- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/docs/6.x/docs/guides/migration.md b/docs/6.x/docs/guides/migration.md index 0f1eeb75c2..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. @@ -282,6 +277,9 @@ const theme = { ### 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 @@ -303,7 +301,7 @@ The new **`actions`** prop is more customizable because it accepts **`React.Reac - **`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`** provides an accessibility label when the dialog title is not a string. +- **`aria-label`** overrides the title as the dialog's accessible name. ```tsx // Before (v5) diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index dcec750f2c..bbedab1a20 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -2,10 +2,6 @@ import * as React from 'react'; import { Platform, ScrollView, StyleSheet } from 'react-native'; import type { ScrollViewProps, StyleProp } from 'react-native'; -import type { - DialogContentProps, - DialogScrollAreaProps, -} from 'react-native-paper'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import Modal from '../Modal'; @@ -18,6 +14,8 @@ import { useInternalTheme } from '../../core/theming'; import type { Elevation, ThemeProp } from '../../theme/types'; import type { IconSource } from '../Icon'; import type { SurfaceStyle } from '../Surface'; +import type { Props as DialogContentProps } from './DialogContent'; +import type { Props as DialogScrollAreaProps } from './DialogScrollArea'; import Text from '../Typography/Text'; export type Props = { diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 09ad25f301..705774cc36 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -227,7 +227,6 @@ function Modal({ return ( {children}