\n );\n};\n\nAvatar.displayName = 'Avatar.Icon';\n\nconst styles = StyleSheet.create({\n container: {\n justifyContent: 'center',\n alignItems: 'center',\n },\n});\n\nexport default withInternalTheme(Avatar);\n","import * as React from 'react';\nimport {\n Image,\n ImageProps,\n ImageSourcePropType,\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { InternalTheme } from '../../types';\n\nconst defaultSize = 64;\n\nexport type AvatarImageSource =\n | ImageSourcePropType\n | ((props: { size: number }) => React.ReactNode);\n\nexport type Props = React.ComponentPropsWithRef & {\n /**\n * Image to display for the `Avatar`.\n * It accepts a standard React Native Image `source` prop\n * Or a function that returns an `Image`.\n */\n source: AvatarImageSource;\n /**\n * Size of the avatar.\n */\n size?: number;\n style?: StyleProp;\n /**\n * Invoked on load error.\n */\n onError?: ImageProps['onError'];\n /**\n * Invoked on mount and on layout changes.\n */\n onLayout?: ImageProps['onLayout'];\n /**\n * Invoked when load completes successfully.\n */\n onLoad?: ImageProps['onLoad'];\n /**\n * Invoked when load either succeeds or fails.\n */\n onLoadEnd?: ImageProps['onLoadEnd'];\n /**\n * Invoked on load start.\n */\n onLoadStart?: ImageProps['onLoadStart'];\n /**\n * Invoked on download progress.\n */\n onProgress?: ImageProps['onProgress'];\n /**\n * @optional\n */\n theme: InternalTheme;\n};\n\n/**\n * Avatars can be used to represent people in a graphical way.\n *\n *
\n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Avatar } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * \n * );\n * export default MyComponent\n * ```\n */\nconst AvatarImage = ({\n size = defaultSize,\n source,\n style,\n onError,\n onLayout,\n onLoad,\n onLoadEnd,\n onLoadStart,\n onProgress,\n theme,\n ...rest\n}: Props) => {\n const { colors } = theme;\n\n const { backgroundColor = colors?.primary } = StyleSheet.flatten(style) || {};\n\n return (\n \n {typeof source === 'function' && source({ size })}\n {typeof source !== 'function' && (\n \n )}\n \n );\n};\n\nAvatarImage.displayName = 'Avatar.Image';\n\nexport default withInternalTheme(AvatarImage);\n","import * as React from 'react';\nimport {\n StyleProp,\n StyleSheet,\n TextStyle,\n useWindowDimensions,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport { withInternalTheme } from '../../core/theming';\nimport { white } from '../../styles/themes/v2/colors';\nimport type { InternalTheme } from '../../types';\nimport getContrastingColor from '../../utils/getContrastingColor';\nimport Text from '../Typography/Text';\n\nconst defaultSize = 64;\n\nexport type Props = React.ComponentPropsWithRef & {\n /**\n * Initials to show as the text in the `Avatar`.\n */\n label: string;\n /**\n * Size of the avatar.\n */\n size?: number;\n /**\n * Custom color for the text.\n */\n color?: string;\n /**\n * Style for text container\n */\n style?: StyleProp;\n /**\n * Style for the title.\n */\n labelStyle?: StyleProp;\n /**\n * @optional\n */\n theme: InternalTheme;\n};\n\n/**\n * Avatars can be used to represent people in a graphical way.\n *\n *
\n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Avatar } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * \n * );\n * ```\n */\nconst AvatarText = ({\n label,\n size = defaultSize,\n style,\n theme,\n labelStyle,\n color: customColor,\n ...rest\n}: Props) => {\n const { backgroundColor = theme.colors?.primary, ...restStyle } =\n StyleSheet.flatten(style) || {};\n const textColor =\n customColor ??\n getContrastingColor(backgroundColor, white, 'rgba(0, 0, 0, .54)');\n const { fontScale } = useWindowDimensions();\n\n return (\n \n \n {label}\n \n \n );\n};\n\nAvatarText.displayName = 'Avatar.Text';\n\nconst styles = StyleSheet.create({\n container: {\n justifyContent: 'center',\n alignItems: 'center',\n },\n text: {\n textAlign: 'center',\n textAlignVertical: 'center',\n },\n});\n\nexport default withInternalTheme(AvatarText);\n","import * as React from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport color from 'color';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { InternalTheme } from '../../types';\nimport Icon, { IconSource } from '../Icon';\nimport TouchableRipple from '../TouchableRipple/TouchableRipple';\nimport Text from '../Typography/Text';\n\nexport type Props = React.ComponentPropsWithRef & {\n /**\n * The label text of the item.\n */\n label: string;\n /**\n * Icon to display for the `DrawerItem`.\n */\n icon?: IconSource;\n /**\n * Whether to highlight the drawer item as active.\n */\n active?: boolean;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * Accessibility label for the button. This is read by the screen reader when the user taps the button.\n */\n accessibilityLabel?: string;\n /**\n * Callback which returns a React element to display on the right side. For instance a Badge.\n */\n right?: (props: { color: string }) => React.ReactNode;\n style?: StyleProp;\n /**\n * @optional\n */\n theme: InternalTheme;\n};\n\n/**\n * A component used to show an action item with an icon and a label in a navigation drawer.\n *\n *
\n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Drawer } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * \n * );\n *\n * export default MyComponent;\n * ```\n */\nconst DrawerItem = ({\n icon,\n label,\n active,\n theme,\n style,\n onPress,\n accessibilityLabel,\n right,\n ...rest\n}: Props) => {\n const { roundness, isV3 } = theme;\n\n const backgroundColor = active\n ? isV3\n ? theme.colors.secondaryContainer\n : color(theme.colors.primary).alpha(0.12).rgb().string()\n : 'transparent';\n const contentColor = active\n ? isV3\n ? theme.colors.onSecondaryContainer\n : theme.colors.primary\n : isV3\n ? theme.colors.onSurfaceVariant\n : color(theme.colors.text).alpha(0.68).rgb().string();\n\n const labelMargin = icon ? (isV3 ? 12 : 32) : 0;\n const borderRadius = (isV3 ? 7 : 1) * roundness;\n const underlayColor = isV3\n ? color(backgroundColor)\n .mix(color(theme.colors.onSecondaryContainer), 0.16)\n .rgb()\n .toString()\n : undefined;\n const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;\n\n return (\n \n \n \n \n {icon ? (\n \n ) : null}\n \n {label}\n \n \n\n {right?.({ color: contentColor })}\n \n \n \n );\n};\n\nDrawerItem.displayName = 'Drawer.Item';\n\nconst styles = StyleSheet.create({\n container: {\n marginHorizontal: 10,\n marginVertical: 4,\n },\n v3Container: {\n justifyContent: 'center',\n height: 56,\n marginLeft: 12,\n marginRight: 12,\n marginVertical: 0,\n },\n wrapper: {\n flexDirection: 'row',\n alignItems: 'center',\n padding: 8,\n },\n v3Wrapper: {\n marginLeft: 16,\n marginRight: 24,\n padding: 0,\n },\n content: {\n flex: 1,\n flexDirection: 'row',\n alignItems: 'center',\n },\n label: {\n marginRight: 32,\n },\n});\n\nexport default withInternalTheme(DrawerItem);\n","import * as React from 'react';\nimport {\n Animated,\n NativeSyntheticEvent,\n Platform,\n StyleProp,\n StyleSheet,\n TextLayoutEventData,\n TouchableWithoutFeedback,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { InternalTheme } from '../../types';\nimport Badge from '../Badge';\nimport Icon, { IconSource } from '../Icon';\nimport Text from '../Typography/Text';\n\nexport type Props = React.ComponentPropsWithRef & {\n /**\n * The label text of the item.\n */\n label?: string;\n /**\n * Icon to display for the `DrawerCollapsedItem`.\n */\n icon?: IconSource;\n /**\n * Whether to highlight the drawer item as active.\n */\n active?: boolean;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * Accessibility label for the button. This is read by the screen reader when the user taps the button.\n */\n accessibilityLabel?: string;\n style?: StyleProp;\n /**\n * @optional\n */\n theme: InternalTheme;\n /**\n * Badge to show on the icon, can be `true` to show a dot, `string` or `number` to show text.\n */\n badge?: string | number | boolean;\n};\n\nconst badgeSize = 8;\nconst iconSize = 24;\nconst itemSize = 56;\nconst outlineHeight = 32;\n\n/**\n * @supported Available in v5.x with theme version 3\n * Collapsed component used to show an action item with an icon and optionally label in a navigation drawer.\n *\n *
\n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Drawer } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * \n * );\n *\n * export default MyComponent;\n * ```\n */\nconst DrawerCollapsedItem = ({\n icon,\n label,\n active,\n theme,\n style,\n onPress,\n accessibilityLabel,\n badge = false,\n ...rest\n}: Props) => {\n const { isV3 } = theme;\n const { scale } = theme.animation;\n\n const [numOfLines, setNumOfLines] = React.useState(1);\n\n const { current: animScale } = React.useRef(\n new Animated.Value(active ? 1 : 0.5)\n );\n\n React.useEffect(() => {\n if (!active) {\n animScale.setValue(0.5);\n }\n }, [animScale, active]);\n\n if (!isV3) {\n return null;\n }\n\n const handlePressOut = () => {\n Animated.timing(animScale, {\n toValue: 1,\n duration: 150 * scale,\n useNativeDriver: true,\n }).start();\n };\n\n const iconPadding = ((!label ? itemSize : outlineHeight) - iconSize) / 2;\n\n const backgroundColor = active\n ? theme.colors.secondaryContainer\n : 'transparent';\n const labelColor = active\n ? theme.colors.onSurface\n : theme.colors.onSurfaceVariant;\n const iconColor = active\n ? theme.colors.onSecondaryContainer\n : theme.colors.onSurfaceVariant;\n\n const onTextLayout = ({\n nativeEvent,\n }: NativeSyntheticEvent) => {\n setNumOfLines(nativeEvent.lines.length);\n };\n\n // Label is cut off on Android, when centered \"labelMedium\" text\n // has more than 4 lines, so there is a need to decrease the letter spacing.\n const androidLetterSpacingStyle =\n Platform.OS === 'android' && numOfLines > 4 && styles.letterSpacing;\n\n const labelTextStyle = {\n color: labelColor,\n ...(isV3 ? theme.fonts.labelMedium : {}),\n };\n\n return (\n \n {/* eslint-disable-next-line react-native-a11y/has-accessibility-props */}\n \n \n \n\n \n {badge && (\n \n {typeof badge === 'boolean' ? (\n \n ) : (\n \n {badge}\n \n )}\n \n )}\n \n \n\n {label ? (\n \n {label}\n \n ) : null}\n \n \n \n );\n};\n\nDrawerCollapsedItem.displayName = 'Drawer.CollapsedItem';\n\nconst styles = StyleSheet.create({\n wrapper: {\n width: 80,\n marginBottom: 12,\n minHeight: itemSize,\n alignItems: 'center',\n },\n outline: {\n width: itemSize,\n height: outlineHeight,\n borderRadius: itemSize / 2,\n alignItems: 'center',\n justifyContent: 'center',\n },\n roundedOutline: {\n height: itemSize,\n },\n icon: {\n position: 'absolute',\n },\n letterSpacing: {\n letterSpacing: 0.3,\n alignSelf: 'stretch',\n },\n label: {\n marginHorizontal: 12,\n marginTop: 4,\n textAlign: 'center',\n },\n badgeContainer: {\n position: 'absolute',\n left: 20,\n bottom: 20,\n zIndex: 2,\n },\n});\n\nexport default withInternalTheme(DrawerCollapsedItem);\n","import * as React from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport color from 'color';\n\nimport { withInternalTheme } from '../core/theming';\nimport { black, white } from '../styles/themes/v2/colors';\nimport type { $RemoveChildren, InternalTheme } from '../types';\n\nexport type Props = $RemoveChildren & {\n /**\n * @renamed Renamed from 'inset' to 'leftInset` in v5.x\n * Whether divider has a left inset.\n */\n leftInset?: boolean;\n /**\n * @supported Available in v5.x with theme version 3\n * Whether divider has a horizontal inset on both sides.\n */\n horizontalInset?: boolean;\n /**\n * @supported Available in v5.x with theme version 3\n * Whether divider should be bolded.\n */\n bold?: boolean;\n style?: StyleProp;\n /**\n * @optional\n */\n theme: InternalTheme;\n};\n\n/**\n * A divider is a thin, lightweight separator that groups content in lists and page layouts.\n *\n *
\n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { View } from 'react-native';\n * import { Divider, Text } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * \n * Lemon\n * \n * Mango\n * \n * \n * );\n *\n * export default MyComponent;\n * ```\n */\nconst Divider = ({\n leftInset,\n horizontalInset = false,\n style,\n theme,\n bold = false,\n ...rest\n}: Props) => {\n const { dark: isDarkTheme, isV3 } = theme;\n\n const dividerColor = isV3\n ? theme.colors.outlineVariant\n : color(isDarkTheme ? white : black)\n .alpha(0.12)\n .rgb()\n .string();\n\n return (\n \n );\n};\n\nconst styles = StyleSheet.create({\n leftInset: {\n marginLeft: 72,\n },\n v3LeftInset: {\n marginLeft: 16,\n },\n horizontalInset: {\n marginLeft: 16,\n marginRight: 16,\n },\n bold: {\n height: 1,\n },\n});\n\nexport default withInternalTheme(Divider);\n","import * as React from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport color from 'color';\n\nimport { withInternalTheme } from '../../core/theming';\nimport { MD3Colors } from '../../styles/themes/v3/tokens';\nimport type { InternalTheme } from '../../types';\nimport Divider from '../Divider';\nimport Text from '../Typography/Text';\n\nexport type Props = React.ComponentPropsWithRef & {\n /**\n * Title to show as the header for the section.\n */\n title?: string;\n /**\n * Content of the `Drawer.Section`.\n */\n children: React.ReactNode;\n style?: StyleProp;\n /**\n * @optional\n */\n theme: InternalTheme;\n};\n\n/**\n * A component to group content inside a navigation drawer.\n *\n *
\n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Drawer } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [active, setActive] = React.useState('');\n *\n * return (\n * \n * setActive('first')}\n * />\n * setActive('second')}\n * />\n * \n * );\n * };\n *\n * export default MyComponent;\n * ```\n */\nconst DrawerSection = ({ children, title, theme, style, ...rest }: Props) => {\n const { isV3 } = theme;\n const titleColor = isV3\n ? theme.colors.onSurfaceVariant\n : color(theme.colors.text).alpha(0.54).rgb().string();\n const titleMargin = isV3 ? 28 : 16;\n const font = isV3 ? theme.fonts.titleSmall : theme.fonts.medium;\n\n return (\n \n {title && (\n \n {title && (\n \n {title}\n \n )}\n \n )}\n {children}\n \n \n );\n};\n\nDrawerSection.displayName = 'Drawer.Section';\n\nconst styles = StyleSheet.create({\n container: {\n marginBottom: 4,\n },\n titleContainer: {\n height: 40,\n justifyContent: 'center',\n },\n v3TitleContainer: {\n height: 56,\n },\n divider: {\n marginTop: 4,\n },\n v3Divider: {\n backgroundColor: MD3Colors.neutralVariant50,\n },\n});\n\nexport default withInternalTheme(DrawerSection);\n","import * as React from 'react';\n\nexport type Props = {\n /**\n * Function to execute on selection change.\n */\n onAccordionPress?: (expandedId: string | number) => void;\n /**\n * Id of the currently expanded list accordion\n */\n expandedId?: string | number;\n /**\n * React elements containing list accordions\n */\n children: React.ReactNode;\n};\n\nexport type ListAccordionGroupContextType = {\n expandedId: string | number | undefined;\n onAccordionPress: (expandedId: string | number) => void;\n} | null;\n\nexport const ListAccordionGroupContext =\n React.createContext(null);\n\n/**\n * List.AccordionGroup allows to control a group of List Accordions. `id` prop for List.Accordion is required in order for group to work.\n * List.AccordionGroup can be a controlled or uncontrolled component. The example shows the uncontrolled version.\n * At most one Accordion can be expanded at a given time.\n *\n *
\n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { View, Text } from 'react-native';\n * import { List } from 'react-native-paper';\n *\n * const 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 *\n * export default MyComponent;\n *```\n */\nconst ListAccordionGroup = ({\n expandedId: expandedIdProp,\n onAccordionPress,\n children,\n}: Props) => {\n const [expandedId, setExpandedId] = React.useState<\n string | number | undefined\n >(undefined);\n\n const onAccordionPressDefault = (newExpandedId: string | number) => {\n setExpandedId((currentExpandedId) =>\n currentExpandedId === newExpandedId ? undefined : newExpandedId\n );\n };\n\n return (\n \n {children}\n \n );\n};\n\nListAccordionGroup.displayName = 'List.AccordionGroup';\n\nexport default ListAccordionGroup;\n","import color from 'color';\n\nimport { black, white } from '../../styles/themes/v2/colors';\nimport type { InternalTheme } from '../../types';\nimport type { IconSource } from '../Icon';\n\nexport const MIN_WIDTH = 112;\nexport const MAX_WIDTH = 280;\n\ntype ContentProps = {\n isV3: boolean;\n iconWidth: number;\n leadingIcon?: IconSource;\n trailingIcon?: IconSource;\n};\n\ntype ColorProps = {\n theme: InternalTheme;\n disabled?: boolean;\n};\n\nconst getDisabledColor = (theme: InternalTheme) => {\n if (theme.isV3) {\n return theme.colors.onSurfaceDisabled;\n }\n\n return color(theme.dark ? white : black)\n .alpha(0.32)\n .rgb()\n .string();\n};\n\nconst getTitleColor = ({ theme, disabled }: ColorProps) => {\n if (disabled) {\n return getDisabledColor(theme);\n }\n\n if (theme.isV3) {\n return theme.colors.onSurface;\n }\n\n return color(theme.colors.text).alpha(0.87).rgb().string();\n};\n\nconst getIconColor = ({ theme, disabled }: ColorProps) => {\n if (disabled) {\n return getDisabledColor(theme);\n }\n\n if (theme.isV3) {\n return theme.colors.onSurfaceVariant;\n }\n\n return color(theme.colors.text).alpha(0.54).rgb().string();\n};\n\nexport const getMenuItemColor = ({ theme, disabled }: ColorProps) => {\n return {\n titleColor: getTitleColor({ theme, disabled }),\n iconColor: getIconColor({ theme, disabled }),\n underlayColor: theme.isV3\n ? color(theme.colors.primary).alpha(0.12).rgb().string()\n : undefined,\n };\n};\n\nexport const getContentMaxWidth = ({\n isV3,\n iconWidth,\n leadingIcon,\n trailingIcon,\n}: ContentProps) => {\n if (isV3) {\n if (leadingIcon && trailingIcon) {\n return MAX_WIDTH - (2 * iconWidth + 24);\n }\n\n if (leadingIcon || trailingIcon) {\n return MAX_WIDTH - (iconWidth + 24);\n }\n\n return MAX_WIDTH - 12;\n }\n\n if (leadingIcon) {\n return MAX_WIDTH - (iconWidth + 48);\n }\n\n return MAX_WIDTH - 16;\n};\n","import * as React from 'react';\nimport {\n GestureResponderEvent,\n I18nManager,\n StyleProp,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { InternalTheme } from '../../types';\nimport MaterialCommunityIcon from '../MaterialCommunityIcon';\nimport TouchableRipple from '../TouchableRipple/TouchableRipple';\nimport Text from '../Typography/Text';\nimport { ListAccordionGroupContext } from './ListAccordionGroup';\nimport { getAccordionColors } from './utils';\n\nexport type Props = {\n /**\n * Title text for the list accordion.\n */\n title: React.ReactNode;\n /**\n * Description text for the list accordion.\n */\n description?: React.ReactNode;\n /**\n * Callback which returns a React element to display on the left side.\n */\n left?: (props: { color: string }) => React.ReactNode;\n /**\n * Callback which returns a React element to display on the right side.\n */\n right?: (props: { isExpanded: boolean }) => React.ReactNode;\n /**\n * Whether the accordion is expanded\n * If this prop is provided, the accordion will behave as a \"controlled component\".\n * You'll need to update this prop when you want to toggle the component or on `onPress`.\n */\n expanded?: boolean;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * Function to execute on long press.\n */\n onLongPress?: (e: GestureResponderEvent) => void;\n /**\n * Content of the section.\n */\n children: React.ReactNode;\n /**\n * @optional\n */\n theme: InternalTheme;\n /**\n * Style that is passed to the wrapping TouchableRipple element.\n */\n style?: StyleProp;\n /**\n * Style that is passed to Title element.\n */\n titleStyle?: StyleProp;\n /**\n * Style that is passed to Description element.\n */\n descriptionStyle?: StyleProp;\n /**\n * Truncate Title text such that the total number of lines does not\n * exceed this number.\n */\n titleNumberOfLines?: number;\n /**\n * Truncate Description text such that the total number of lines does not\n * exceed this number.\n */\n descriptionNumberOfLines?: number;\n /**\n * 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.\n */\n id?: string | number;\n /**\n * TestID used for testing purposes\n */\n testID?: string;\n /**\n * Accessibility label for the TouchableRipple. This is read by the screen reader when the user taps the touchable.\n */\n accessibilityLabel?: string;\n};\n\n/**\n * A component used to display an expandable list item.\n *\n *
\n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { List } from 'react-native-paper';\n *\n * const 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 *\n * export default MyComponent;\n * ```\n */\nconst ListAccordion = ({\n left,\n right,\n title,\n description,\n children,\n theme,\n titleStyle,\n descriptionStyle,\n titleNumberOfLines = 1,\n descriptionNumberOfLines = 2,\n style,\n id,\n testID,\n onPress,\n onLongPress,\n expanded: expandedProp,\n accessibilityLabel,\n}: Props) => {\n const [expanded, setExpanded] = React.useState(\n expandedProp || false\n );\n\n const handlePressAction = () => {\n onPress?.();\n\n if (expandedProp === undefined) {\n // Only update state of the `expanded` prop was not passed\n // If it was passed, the component will act as a controlled component\n setExpanded((expanded) => !expanded);\n }\n };\n\n const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;\n\n const groupContext = React.useContext(ListAccordionGroupContext);\n if (groupContext !== null && !id) {\n throw new Error(\n 'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.'\n );\n }\n const isExpanded = groupContext\n ? groupContext.expandedId === id\n : expandedInternal;\n\n const { titleColor, descriptionColor, titleTextColor, rippleColor } =\n getAccordionColors({\n theme,\n isExpanded,\n });\n\n const handlePress =\n groupContext && id !== undefined\n ? () => groupContext.onAccordionPress(id)\n : handlePressAction;\n return (\n \n \n \n \n {left\n ? left({\n color: isExpanded ? theme.colors?.primary : descriptionColor,\n })\n : null}\n \n \n {title}\n \n {description ? (\n \n {description}\n \n ) : null}\n \n \n {right ? (\n right({\n isExpanded: isExpanded,\n })\n ) : (\n \n )}\n \n \n \n \n\n {isExpanded\n ? React.Children.map(children, (child) => {\n if (\n left &&\n React.isValidElement(child) &&\n !child.props.left &&\n !child.props.right\n ) {\n return React.cloneElement(child as React.ReactElement, {\n style: [styles.child, child.props.style],\n });\n }\n\n return child;\n })\n : null}\n \n );\n};\n\nListAccordion.displayName = 'List.Accordion';\n\nconst styles = StyleSheet.create({\n container: {\n padding: 8,\n },\n row: {\n flexDirection: 'row',\n alignItems: 'center',\n },\n multiline: {\n height: 40,\n alignItems: 'center',\n justifyContent: 'center',\n },\n title: {\n fontSize: 16,\n },\n description: {\n fontSize: 14,\n },\n item: {\n margin: 8,\n },\n child: {\n paddingLeft: 64,\n },\n content: {\n flex: 1,\n justifyContent: 'center',\n },\n});\n\nexport default withInternalTheme(ListAccordion);\n","import * as React from 'react';\nimport { View, ViewStyle, StyleSheet, StyleProp } from 'react-native';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { InternalTheme } from '../../types';\nimport Icon, { IconSource } from '../Icon';\n\nexport type Props = {\n /**\n * Icon to show.\n */\n icon: IconSource;\n /**\n * Color for the icon.\n */\n color?: string;\n style?: StyleProp;\n /**\n * @optional\n */\n theme: InternalTheme;\n};\n\nconst ICON_SIZE = 24;\n\n/**\n * A component to show an icon in a list item.\n *\n *
\n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { List, MD3Colors } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <>\n * \n * \n * \n * \n * );\n *\n * export default MyComponent;\n * ```\n */\nconst ListIcon = ({ icon, color: iconColor, style, theme }: Props) => (\n \n \n \n);\n\nconst styles = StyleSheet.create({\n item: {\n margin: 8,\n height: 40,\n width: 40,\n alignItems: 'center',\n justifyContent: 'center',\n },\n itemV3: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n\nListIcon.displayName = 'List.Icon';\n\nexport default withInternalTheme(ListIcon);\n","import * as React from 'react';\nimport {\n FlexAlignType,\n NativeSyntheticEvent,\n StyleProp,\n StyleSheet,\n TextLayoutEventData,\n TextStyle,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport color from 'color';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type {\n $RemoveChildren,\n EllipsizeProp,\n InternalTheme,\n} from '../../types';\nimport TouchableRipple from '../TouchableRipple/TouchableRipple';\nimport Text from '../Typography/Text';\nimport { getLeftStyles, getRightStyles } from './utils';\n\ntype Title =\n | React.ReactNode\n | ((props: {\n selectable: boolean;\n ellipsizeMode: EllipsizeProp | undefined;\n color: string;\n fontSize: number;\n }) => React.ReactNode);\n\ntype Description =\n | React.ReactNode\n | ((props: {\n selectable: boolean;\n ellipsizeMode: EllipsizeProp | undefined;\n color: string;\n fontSize: number;\n }) => React.ReactNode);\n\ninterface Style {\n marginLeft?: number;\n marginRight?: number;\n marginVertical?: number;\n alignSelf?: FlexAlignType;\n}\n\nexport type Props = $RemoveChildren & {\n /**\n * Title text for the list item.\n */\n title: Title;\n /**\n * Description text for the list item or callback which returns a React element to display the description.\n */\n description?: Description;\n /**\n * Callback which returns a React element to display on the left side.\n */\n left?: (props: { color: string; style: Style }) => React.ReactNode;\n /**\n * Callback which returns a React element to display on the right side.\n */\n right?: (props: { color: string; style?: Style }) => React.ReactNode;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * @optional\n */\n theme: InternalTheme;\n /**\n * Style that is passed to the wrapping TouchableRipple element.\n */\n style?: StyleProp;\n /**\n * Style that is passed to Title element.\n */\n titleStyle?: StyleProp;\n /**\n * Style that is passed to Description element.\n */\n descriptionStyle?: StyleProp;\n /**\n * Truncate Title text such that the total number of lines does not\n * exceed this number.\n */\n titleNumberOfLines?: number;\n /**\n * Truncate Description text such that the total number of lines does not\n * exceed this number.\n */\n descriptionNumberOfLines?: number;\n /**\n * Ellipsize Mode for the Title. One of `'head'`, `'middle'`, `'tail'`, `'clip'`.\n *\n * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)\n */\n titleEllipsizeMode?: EllipsizeProp;\n /**\n * Ellipsize Mode for the Description. One of `'head'`, `'middle'`, `'tail'`, `'clip'`.\n *\n * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)\n */\n descriptionEllipsizeMode?: EllipsizeProp;\n};\n\n/**\n * A component to show tiles inside a List.\n *\n *
\n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { List } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * }\n * />\n * );\n *\n * export default MyComponent;\n * ```\n *\n * @extends TouchableRipple props https://callstack.github.io/react-native-paper/touchable-ripple.html\n */\nconst ListItem = ({\n left,\n right,\n title,\n description,\n onPress,\n theme,\n style,\n titleStyle,\n titleNumberOfLines = 1,\n descriptionNumberOfLines = 2,\n titleEllipsizeMode,\n descriptionEllipsizeMode,\n descriptionStyle,\n ...rest\n}: Props) => {\n const [alignToTop, setAlignToTop] = React.useState(false);\n\n const onDescriptionTextLayout = (\n event: NativeSyntheticEvent\n ) => {\n if (!theme.isV3) {\n return;\n }\n const { nativeEvent } = event;\n setAlignToTop(nativeEvent.lines.length >= 2);\n };\n\n const renderDescription = (\n descriptionColor: string,\n description?: Description | null\n ) => {\n return typeof description === 'function' ? (\n description({\n selectable: false,\n ellipsizeMode: descriptionEllipsizeMode,\n color: descriptionColor,\n fontSize: styles.description.fontSize,\n })\n ) : (\n \n {description}\n \n );\n };\n\n const renderTitle = () => {\n const titleColor = theme.isV3\n ? theme.colors.onSurface\n : color(theme.colors.text).alpha(0.87).rgb().string();\n\n return typeof title === 'function' ? (\n title({\n selectable: false,\n ellipsizeMode: titleEllipsizeMode,\n color: titleColor,\n fontSize: styles.title.fontSize,\n })\n ) : (\n \n {title}\n \n );\n };\n\n const descriptionColor = theme.isV3\n ? theme.colors.onSurfaceVariant\n : color(theme.colors.text).alpha(0.54).rgb().string();\n\n return (\n \n \n {left\n ? left({\n color: descriptionColor,\n style: getLeftStyles(alignToTop, description, theme.isV3),\n })\n : null}\n \n {renderTitle()}\n\n {description\n ? renderDescription(descriptionColor, description)\n : null}\n \n {right\n ? right({\n color: descriptionColor,\n style: getRightStyles(alignToTop, description, theme.isV3),\n })\n : null}\n \n \n );\n};\n\nListItem.displayName = 'List.Item';\n\nconst styles = StyleSheet.create({\n container: {\n padding: 8,\n },\n containerV3: {\n paddingVertical: 8,\n paddingRight: 24,\n },\n row: {\n flexDirection: 'row',\n },\n rowV3: {\n flexDirection: 'row',\n marginVertical: 6,\n },\n title: {\n fontSize: 16,\n },\n description: {\n fontSize: 14,\n },\n item: {\n marginVertical: 6,\n paddingLeft: 8,\n },\n itemV3: {\n paddingLeft: 16,\n },\n content: {\n flex: 1,\n justifyContent: 'center',\n },\n});\n\nexport default withInternalTheme(ListItem);\n","import * as React from 'react';\nimport { StyleProp, StyleSheet, TextStyle } from 'react-native';\n\nimport color from 'color';\nimport type { InternalTheme } from 'src/types';\n\nimport { useInternalTheme } from '../../core/theming';\nimport Text from '../Typography/Text';\n\nexport type Props = React.ComponentProps & {\n /**\n * @optional\n */\n theme?: InternalTheme;\n /**\n * Style that is passed to Text element.\n */\n style?: StyleProp;\n};\n\n/**\n * A component used to display a header in lists.\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { List } from 'react-native-paper';\n *\n * const MyComponent = () => My List Title;\n *\n * export default MyComponent;\n * ```\n */\nconst ListSubheader = ({ style, theme: overrideTheme, ...rest }: Props) => {\n const theme = useInternalTheme(overrideTheme);\n\n const textColor = theme.isV3\n ? theme.colors.onSurfaceVariant\n : color(theme.colors.text).alpha(0.54).rgb().string();\n\n const font = theme.isV3 ? theme.fonts.bodyMedium : theme.fonts.medium;\n\n return (\n \n );\n};\n\nListSubheader.displayName = 'List.Subheader';\n\nconst styles = StyleSheet.create({\n container: {\n paddingHorizontal: 16,\n paddingVertical: 13,\n },\n});\n\nexport default ListSubheader;\n","import * as React from 'react';\nimport {\n StyleProp,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { InternalTheme } from '../../types';\nimport ListSubheader from './ListSubheader';\n\nexport type Props = React.ComponentPropsWithRef & {\n /**\n * Title text for the section.\n */\n title?: string;\n /**\n * Content of the section.\n */\n children: React.ReactNode;\n /**\n * @optional\n */\n theme: InternalTheme;\n /**\n * Style that is passed to Title element.\n */\n titleStyle?: StyleProp;\n style?: StyleProp;\n};\n\n/**\n * A component used to group list items.\n *\n *
\n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { List, MD3Colors } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * \n * Some title\n * } />\n * }\n * />\n * \n * );\n *\n * export default MyComponent;\n * ```\n */\nconst ListSection = ({\n children,\n title,\n titleStyle,\n style,\n ...rest\n}: Props) => (\n \n {title ? {title} : null}\n {children}\n \n);\n\nListSection.displayName = 'List.Section';\n\nconst styles = StyleSheet.create({\n container: {\n marginVertical: 8,\n },\n});\n\nexport default withInternalTheme(ListSection);\n","import * as React from 'react';\nimport {\n StyleSheet,\n StyleProp,\n Image,\n ImageSourcePropType,\n ImageStyle,\n} from 'react-native';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { InternalTheme } from '../../types';\n\nexport type Props = {\n source: ImageSourcePropType;\n variant?: 'image' | 'video';\n style?: StyleProp;\n /**\n * @optional\n */\n theme: InternalTheme;\n};\n\n/**\n * A component to show image in a list item.\n *\n *
\n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { List, MD3Colors } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <>\n * \n * \n * \n * );\n *\n * export default MyComponent;\n * ```\n */\nconst ListImage = ({ style, source, variant = 'image', theme }: Props) => {\n const getStyles = () => {\n if (variant === 'video') {\n if (!theme.isV3) {\n return [style, styles.video];\n }\n\n return [style, styles.videoV3];\n }\n\n return [style, styles.image];\n };\n\n return (\n \n );\n};\n\nconst styles = StyleSheet.create({\n image: {\n width: 56,\n height: 56,\n },\n video: {\n width: 100,\n height: 64,\n marginLeft: 0,\n },\n videoV3: {\n width: 114,\n height: 64,\n marginLeft: 0,\n },\n});\n\nListImage.displayName = 'List.Image';\n\nexport default withInternalTheme(ListImage);\n","import * as React from 'react';\nimport { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { withInternalTheme } from '../core/theming';\nimport type { $RemoveChildren, InternalTheme } from '../types';\nimport Button from './Button/Button';\nimport Icon, { IconSource } from './Icon';\nimport Surface from './Surface';\nimport Text from './Typography/Text';\n\nconst DEFAULT_MAX_WIDTH = 960;\n\nexport type Props = $RemoveChildren & {\n /**\n * Whether banner is currently visible.\n */\n visible: boolean;\n /**\n * Content that will be displayed inside banner.\n */\n children: React.ReactNode;\n /**\n * Icon to display for the `Banner`. Can be an image.\n */\n icon?: IconSource;\n /**\n * Action items to shown in the banner.\n * An 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 *\n * To customize button you can pass other props that button component takes.\n */\n actions?: Array<\n {\n label: string;\n } & Omit, 'children'>\n >;\n /**\n * Style of banner's inner content.\n * Use this prop to apply custom width for wide layouts.\n */\n contentStyle?: StyleProp;\n /**\n * @supported Available in v5.x with theme version 3\n * Changes Banner shadow and background on iOS and Android.\n */\n elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;\n style?: StyleProp;\n ref?: React.RefObject;\n /**\n * @optional\n */\n theme: InternalTheme;\n /**\n * @optional\n * Optional callback that will be called after the opening animation finished running normally\n */\n onShowAnimationFinished?: Animated.EndCallback;\n /**\n * @optional\n * Optional callback that will be called after the closing animation finished running normally\n */\n onHideAnimationFinished?: Animated.EndCallback;\n};\n\ntype NativeEvent = {\n nativeEvent: {\n layout: {\n x: number;\n y: number;\n width: number;\n height: number;\n };\n };\n};\n\n/**\n * Banner displays a prominent message and related actions.\n *\n *
\n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Image } from 'react-native';\n * import { Banner } from 'react-native-paper';\n *\n * const 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 *\n * export default MyComponent;\n * ```\n */\nconst Banner = ({\n visible,\n icon,\n children,\n actions = [],\n contentStyle,\n elevation = 1,\n style,\n theme,\n onShowAnimationFinished = () => {},\n onHideAnimationFinished = () => {},\n ...rest\n}: Props) => {\n const { current: position } = React.useRef(\n new Animated.Value(visible ? 1 : 0)\n );\n const [layout, setLayout] = React.useState<{\n height: number;\n measured: boolean;\n }>({\n height: 0,\n measured: false,\n });\n\n const { scale } = theme.animation;\n\n React.useEffect(() => {\n if (visible) {\n // show\n Animated.timing(position, {\n duration: 250 * scale,\n toValue: 1,\n useNativeDriver: false,\n }).start(onShowAnimationFinished);\n } else {\n // hide\n Animated.timing(position, {\n duration: 200 * scale,\n toValue: 0,\n useNativeDriver: false,\n }).start(onHideAnimationFinished);\n }\n }, [visible, position, scale]);\n\n const handleLayout = ({ nativeEvent }: NativeEvent) => {\n const { height } = nativeEvent.layout;\n setLayout({ height, measured: true });\n };\n\n // The banner animation has 2 parts:\n // 1. Blank spacer element which animates its height to move the content\n // 2. Actual banner which animates its translateY\n // In initial render, we position everything normally and measure the height of the banner\n // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute\n // We need this because we need to move the content below as if banner's height was being animated\n // However we can't animated banner's height directly as it'll also resize the content inside\n const height = Animated.multiply(position, layout.height);\n\n const translateY = Animated.multiply(\n Animated.add(position, -1),\n layout.height\n );\n return (\n \n \n \n \n \n {icon ? (\n \n \n \n ) : null}\n \n {children}\n \n \n \n {actions.map(({ label, ...others }, i) => (\n \n {label}\n \n ))}\n \n \n \n \n );\n};\n\nconst styles = StyleSheet.create({\n wrapper: {\n overflow: 'hidden',\n alignSelf: 'center',\n width: '100%',\n maxWidth: DEFAULT_MAX_WIDTH,\n },\n absolute: {\n position: 'absolute',\n top: 0,\n width: '100%',\n },\n content: {\n flexDirection: 'row',\n justifyContent: 'flex-start',\n marginHorizontal: 8,\n marginTop: 16,\n marginBottom: 0,\n },\n icon: {\n margin: 8,\n },\n message: {\n flex: 1,\n margin: 8,\n },\n actions: {\n flexDirection: 'row',\n justifyContent: 'flex-end',\n margin: 4,\n },\n button: {\n margin: 4,\n },\n elevation: {\n elevation: 1,\n },\n});\n\nexport default withInternalTheme(Banner);\n","import * as React from 'react';\nimport { Animated, StyleSheet, View } from 'react-native';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { $RemoveChildren, InternalTheme } from '../../types';\nimport MaterialCommunityIcon from '../MaterialCommunityIcon';\nimport TouchableRipple from '../TouchableRipple/TouchableRipple';\nimport { getAndroidSelectionControlColor } from './utils';\n\nexport type Props = $RemoveChildren & {\n /**\n * Status of checkbox.\n */\n status: 'checked' | 'unchecked' | 'indeterminate';\n /**\n * Whether checkbox is disabled.\n */\n disabled?: boolean;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * Custom color for unchecked checkbox.\n */\n uncheckedColor?: string;\n /**\n * Custom color for checkbox.\n */\n color?: string;\n /**\n * @optional\n */\n theme: InternalTheme;\n /**\n * testID to be used on tests.\n */\n testID?: string;\n};\n\n// From https://material.io/design/motion/speed.html#duration\nconst ANIMATION_DURATION = 100;\n\n/**\n * Checkboxes allow the selection of multiple options from a set.\n * This component follows platform guidelines for Android, but can be used\n * on any platform.\n *\n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { DataTable } from 'react-native-paper';\n *\n * const optionsPerPage = [2, 3, 4];\n *\n * const MyComponent = () => {\n * const [page, setPage] = React.useState(0);\n * const [itemsPerPage, setItemsPerPage] = React.useState(optionsPerPage[0]);\n *\n * React.useEffect(() => {\n * setPage(0);\n * }, [itemsPerPage]);\n *\n * return (\n * \n * \n * Dessert\n * Calories\n * Fat\n * \n *\n * \n * Frozen yogurt\n * 159\n * 6.0\n * \n *\n * \n * Ice cream sandwich\n * 237\n * 8.0\n * \n *\n * setPage(page)}\n * label=\"1-2 of 6\"\n * optionsPerPage={optionsPerPage}\n * itemsPerPage={itemsPerPage}\n * setItemsPerPage={setItemsPerPage}\n * showFastPagination\n * optionsLabel={'Rows per page'}\n * />\n * \n * );\n *}\n *\n * export default MyComponent;\n * ```\n */\nconst DataTable = ({ children, style, ...rest }: Props) => (\n \n {children}\n \n);\n\n// @component ./DataTableHeader.tsx\nDataTable.Header = DataTableHeader;\n\n// @component ./DataTableTitle.tsx\nDataTable.Title = DataTableTitle;\n\n// @component ./DataTableRow.tsx\nDataTable.Row = DataTableRow;\n\n// @component ./DataTableCell.tsx\nDataTable.Cell = DataTableCell;\n\n// @component ./DataTablePagination.tsx\nDataTable.Pagination = DataTablePagination;\n\nconst styles = StyleSheet.create({\n container: {\n width: '100%',\n },\n});\n\nexport default DataTable;\n","import * as React from 'react';\nimport {\n AccessibilityState,\n Animated,\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { $RemoveChildren, InternalTheme } from '../../types';\nimport ActivityIndicator from '../ActivityIndicator';\nimport CrossFadeIcon from '../CrossFadeIcon';\nimport Icon, { IconSource } from '../Icon';\nimport Surface from '../Surface';\nimport TouchableRipple from '../TouchableRipple/TouchableRipple';\nimport Text from '../Typography/Text';\nimport { getExtendedFabStyle, getFABColors, getFabStyle } from './utils';\n\ntype FABSize = 'small' | 'medium' | 'large';\n\ntype FABMode = 'flat' | 'elevated';\n\nexport type Props = $RemoveChildren & {\n /**\n * Icon to display for the `FAB`.\n */\n icon: IconSource;\n /**\n * Optional label for extended `FAB`.\n */\n label?: string;\n /**\n * Make the label text uppercased.\n */\n uppercase?: boolean;\n /**\n * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.\n * Uses `label` by default if specified.\n */\n accessibilityLabel?: string;\n /**\n * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.\n */\n accessibilityState?: AccessibilityState;\n /**\n * Whether an icon change is animated.\n */\n animated?: boolean;\n /**\n * @deprecated Deprecated in v.3x - use prop size=\"small\".\n *\n * Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.\n */\n small?: boolean;\n /**\n * Custom color for the icon and label of the `FAB`.\n */\n color?: string;\n /**\n * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.\n */\n disabled?: boolean;\n /**\n * Whether `FAB` is currently visible.\n */\n visible?: boolean;\n /**\n * Whether to show a loading indicator.\n */\n loading?: boolean;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * Function to execute on long press.\n */\n onLongPress?: () => void;\n /**\n * @supported Available in v5.x with theme version 3\n *\n * Size of the `FAB`.\n * - `small` - FAB with small height (40).\n * - `medium` - FAB with default medium height (56).\n * - `large` - FAB with large height (96).\n */\n size?: FABSize;\n /**\n * @supported Available in v5.x\n *\n * Custom size for the `FAB`. This prop takes precedence over size prop\n */\n customSize?: number;\n /**\n * @supported Available in v5.x with theme version 3\n *\n * Mode of the `FAB`. You can change the mode to adjust the the shadow:\n * - `flat` - button without a shadow.\n * - `elevated` - button with a shadow.\n */\n mode?: FABMode;\n /**\n * @supported Available in v5.x with theme version 3\n *\n * Color mappings variant for combinations of container and icon colors.\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';\n style?: StyleProp;\n /**\n * @optional\n */\n theme: InternalTheme;\n testID?: string;\n ref?: React.RefObject;\n};\n\n/**\n * A floating action button represents the primary action in an application.\n *
\n * \n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { StyleSheet } from 'react-native';\n * import { FAB } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * console.log('Pressed')}\n * />\n * );\n *\n * const styles = StyleSheet.create({\n * fab: {\n * position: 'absolute',\n * margin: 16,\n * right: 0,\n * bottom: 0,\n * },\n * })\n *\n * export default MyComponent;\n * ```\n */\nconst FAB = React.forwardRef(\n (\n {\n icon,\n label,\n accessibilityLabel = label,\n accessibilityState,\n animated = true,\n color: customColor,\n disabled,\n onPress,\n onLongPress,\n theme,\n style,\n visible = true,\n uppercase = !theme.isV3,\n loading,\n testID = 'fab',\n size = 'medium',\n customSize,\n mode = 'elevated',\n variant = 'primary',\n ...rest\n }: Props,\n ref\n ) => {\n const { current: visibility } = React.useRef(\n new Animated.Value(visible ? 1 : 0)\n );\n const { isV3, animation } = theme;\n const { scale } = animation;\n\n React.useEffect(() => {\n if (visible) {\n Animated.timing(visibility, {\n toValue: 1,\n duration: 200 * scale,\n useNativeDriver: true,\n }).start();\n } else {\n Animated.timing(visibility, {\n toValue: 0,\n duration: 150 * scale,\n useNativeDriver: true,\n }).start();\n }\n }, [visible, scale, visibility]);\n\n const IconComponent = animated ? CrossFadeIcon : Icon;\n\n const { backgroundColor, foregroundColor, rippleColor } = getFABColors({\n theme,\n variant,\n disabled,\n customColor,\n style,\n });\n\n const isLargeSize = size === 'large';\n const isFlatMode = mode === 'flat';\n const iconSize = isLargeSize ? 36 : 24;\n const loadingIndicatorSize = isLargeSize ? 24 : 18;\n const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;\n\n const fabStyle = getFabStyle({ customSize, size, theme });\n const extendedStyle = getExtendedFabStyle({ customSize, theme });\n const textStyle = {\n color: foregroundColor,\n ...font,\n };\n\n const { borderRadius = fabStyle.borderRadius } = (StyleSheet.flatten(\n style\n ) || {}) as ViewStyle;\n\n const md3Elevation = isFlatMode || disabled ? 0 : 3;\n\n const newAccessibilityState = { ...accessibilityState, disabled };\n\n return (\n \n }\n pointerEvents={visible ? 'auto' : 'none'}\n testID={`${testID}-container`}\n {...(isV3 && { elevation: md3Elevation })}\n >\n \n \n {icon && loading !== true ? (\n \n ) : null}\n {loading ? (\n \n ) : null}\n {label ? (\n \n {label}\n \n ) : null}\n \n \n \n );\n }\n);\n\nconst styles = StyleSheet.create({\n elevated: {\n elevation: 6,\n },\n container: {\n overflow: 'hidden',\n },\n content: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n },\n label: {\n marginHorizontal: 8,\n },\n uppercaseLabel: {\n textTransform: 'uppercase',\n },\n disabled: {\n elevation: 0,\n },\n});\n\nexport default withInternalTheme(FAB);\n\n// @component-docs ignore-next-line\nconst FABWithTheme = withInternalTheme(FAB);\n// @component-docs ignore-next-line\nexport { FABWithTheme as FAB };\n","import * as React from 'react';\nimport {\n Animated,\n SafeAreaView,\n StyleProp,\n StyleSheet,\n TextStyle,\n TouchableWithoutFeedback,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { InternalTheme } from '../../types';\nimport Card from '../Card/Card';\nimport type { IconSource } from '../Icon';\nimport Text from '../Typography/Text';\nimport FAB from './FAB';\nimport { getFABGroupColors } from './utils';\n\nexport type Props = {\n /**\n * Action items to display in the form of a speed dial.\n * An action item should contain the following properties:\n * - `icon`: icon to display (required)\n * - `label`: optional label text\n * - `color`: custom icon color of the action item\n * - `labelTextColor`: custom label text color of the action item\n * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified\n * - `accessibilityHint`: accessibility hint for the action\n * - `style`: pass additional styles for the fab item, for example, `backgroundColor`\n * - `containerStyle`: pass additional styles for the fab item label container, for example, `backgroundColor` @supported Available in 5.x\n * - `labelStyle`: pass additional styles for the fab item label, for example, `fontSize`\n * - `onPress`: callback that is called when `FAB` is pressed (required)\n * - `size`: size of action item. Defaults to `small`. @supported Available in v5.x\n * - `testID`: testID to be used on tests\n */\n actions: Array<{\n icon: IconSource;\n label?: string;\n color?: string;\n labelTextColor?: string;\n accessibilityLabel?: string;\n accessibilityHint?: string;\n style?: StyleProp;\n containerStyle?: StyleProp;\n labelStyle?: StyleProp;\n onPress: () => void;\n size?: 'small' | 'medium';\n testID?: string;\n }>;\n /**\n * Icon to display for the `FAB`.\n * You can toggle it based on whether the speed dial is open to display a different icon.\n */\n icon: IconSource;\n /**\n * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.\n */\n accessibilityLabel?: string;\n /**\n * Custom color for the `FAB`.\n */\n color?: string;\n /**\n * Custom backdrop color for opened speed dial background.\n */\n backdropColor?: string;\n /**\n * Function to execute on pressing the `FAB`.\n */\n onPress?: () => void;\n /**\n * Whether the speed dial is open.\n */\n open: boolean;\n /**\n * Callback which is called on opening and closing the speed dial.\n * The open state needs to be updated when it's called, otherwise the change is dropped.\n */\n onStateChange: (state: { open: boolean }) => void;\n /**\n * Whether `FAB` is currently visible.\n */\n visible: boolean;\n /**\n * Style for the group. You can use it to pass additional styles if you need.\n * For example, you can set an additional padding if you have a tab bar at the bottom.\n */\n style?: StyleProp;\n /**\n * Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor.\n */\n fabStyle?: StyleProp;\n /**\n * @supported Available in v5.x with theme version 3\n *\n * Color mappings variant for combinations of container and icon colors.\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';\n /**\n * @optional\n */\n theme: InternalTheme;\n /**\n * Pass down testID from Group props to FAB.\n */\n testID?: string;\n};\n\n/**\n * A component to display a stack of FABs with related actions in a speed dial.\n * To render the group above other components, you'll need to wrap it with the [`Portal`](portal.html) component.\n *\n *
\n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { FAB, Portal, Provider } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [state, setState] = React.useState({ open: false });\n *\n * const onStateChange = ({ open }) => setState({ open });\n *\n * const { open } = state;\n *\n * return (\n * \n * \n * console.log('Pressed add') },\n * {\n * icon: 'star',\n * label: 'Star',\n * onPress: () => console.log('Pressed star'),\n * },\n * {\n * icon: 'email',\n * label: 'Email',\n * onPress: () => console.log('Pressed email'),\n * },\n * {\n * icon: 'bell',\n * label: 'Remind',\n * onPress: () => console.log('Pressed notifications'),\n * },\n * ]}\n * onStateChange={onStateChange}\n * onPress={() => {\n * if (open) {\n * // do something if the speed dial is open\n * }\n * }}\n * />\n * \n * \n * );\n * };\n *\n * export default MyComponent;\n * ```\n */\nconst FABGroup = ({\n actions,\n icon,\n open,\n onPress,\n accessibilityLabel,\n theme,\n style,\n fabStyle,\n visible,\n testID,\n onStateChange,\n color: colorProp,\n variant = 'primary',\n backdropColor: customBackdropColor,\n}: Props) => {\n const { current: backdrop } = React.useRef(\n new Animated.Value(0)\n );\n const animations = React.useRef(\n actions.map(() => new Animated.Value(open ? 1 : 0))\n );\n\n const [prevActions, setPrevActions] = React.useState<\n | {\n icon: IconSource;\n label?: string;\n color?: string;\n accessibilityLabel?: string;\n style?: StyleProp;\n onPress: () => void;\n testID?: string;\n }[]\n | null\n >(null);\n\n const { scale } = theme.animation;\n const { isV3 } = theme;\n\n React.useEffect(() => {\n if (open) {\n Animated.parallel([\n Animated.timing(backdrop, {\n toValue: 1,\n duration: 250 * scale,\n useNativeDriver: true,\n }),\n Animated.stagger(\n isV3 ? 15 : 50 * scale,\n animations.current\n .map((animation) =>\n Animated.timing(animation, {\n toValue: 1,\n duration: 150 * scale,\n useNativeDriver: true,\n })\n )\n .reverse()\n ),\n ]).start();\n } else {\n Animated.parallel([\n Animated.timing(backdrop, {\n toValue: 0,\n duration: 200 * scale,\n useNativeDriver: true,\n }),\n ...animations.current.map((animation) =>\n Animated.timing(animation, {\n toValue: 0,\n duration: 150 * scale,\n useNativeDriver: true,\n })\n ),\n ]).start();\n }\n }, [open, actions, backdrop, scale, isV3]);\n\n const close = () => onStateChange({ open: false });\n\n const toggle = () => onStateChange({ open: !open });\n\n const { labelColor, backdropColor, stackedFABBackgroundColor } =\n getFABGroupColors({ theme, customBackdropColor });\n\n const backdropOpacity = open\n ? backdrop.interpolate({\n inputRange: [0, 0.5, 1],\n outputRange: [0, 1, 1],\n })\n : backdrop;\n\n const opacities = animations.current;\n const scales = opacities.map((opacity) =>\n open\n ? opacity.interpolate({\n inputRange: [0, 1],\n outputRange: [0.5, 1],\n })\n : 1\n );\n\n const translations = opacities.map((opacity) =>\n open\n ? opacity.interpolate({\n inputRange: [0, 1],\n outputRange: [24, -8],\n })\n : -8\n );\n const labelTranslations = opacities.map((opacity) =>\n open\n ? opacity.interpolate({\n inputRange: [0, 1],\n outputRange: [8, -8],\n })\n : -8\n );\n\n if (actions.length !== prevActions?.length) {\n animations.current = actions.map(\n (_, i) => animations.current[i] || new Animated.Value(open ? 1 : 0)\n );\n setPrevActions(actions);\n }\n\n return (\n \n \n \n \n \n \n {actions.map((it, i) => {\n const labelTextStyle = {\n color: it.labelTextColor ?? labelColor,\n ...(isV3 ? theme.fonts.titleMedium : {}),\n };\n const marginHorizontal =\n typeof it.size === 'undefined' || it.size === 'small' ? 24 : 16;\n const accessibilityLabel =\n typeof it.accessibilityLabel !== 'undefined'\n ? it.accessibilityLabel\n : it.label;\n const size = typeof it.size !== 'undefined' ? it.size : 'small';\n\n return (\n \n {it.label && (\n \n \n }\n onPress={() => {\n it.onPress();\n close();\n }}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"button\"\n {...(isV3 && { elevation: 0 })}\n >\n \n {it.label}\n \n \n \n )}\n \n }\n onPress={() => {\n it.onPress();\n close();\n }}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"button\"\n testID={it.testID}\n visible={open}\n />\n \n );\n })}\n \n {\n onPress?.();\n toggle();\n }}\n icon={icon}\n color={colorProp}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"button\"\n accessibilityState={{ expanded: open }}\n style={[styles.fab, fabStyle]}\n visible={visible}\n testID={testID}\n variant={variant}\n />\n \n \n );\n};\n\nFABGroup.displayName = 'FAB.Group';\n\nexport default withInternalTheme(FABGroup);\n\n// @component-docs ignore-next-line\nconst FABGroupWithTheme = withInternalTheme(FABGroup);\n// @component-docs ignore-next-line\nexport { FABGroupWithTheme as FABGroup };\n\nconst styles = StyleSheet.create({\n safeArea: {\n alignItems: 'flex-end',\n },\n container: {\n ...StyleSheet.absoluteFillObject,\n justifyContent: 'flex-end',\n },\n fab: {\n marginHorizontal: 16,\n marginBottom: 16,\n marginTop: 0,\n },\n backdrop: {\n ...StyleSheet.absoluteFillObject,\n },\n containerStyle: {\n borderRadius: 5,\n paddingHorizontal: 12,\n paddingVertical: 6,\n marginVertical: 8,\n marginHorizontal: 16,\n elevation: 2,\n },\n item: {\n marginBottom: 16,\n flexDirection: 'row',\n justifyContent: 'flex-end',\n alignItems: 'center',\n },\n v3ContainerStyle: {\n backgroundColor: 'transparent',\n elevation: 0,\n },\n});\n","import * as React from 'react';\nimport type {\n AccessibilityState,\n NativeSyntheticEvent,\n TextLayoutEventData,\n} from 'react-native';\nimport {\n Animated,\n Easing,\n I18nManager,\n Platform,\n ScrollView,\n StyleProp,\n StyleSheet,\n Text,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport color from 'color';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { $RemoveChildren, InternalTheme } from '../../types';\nimport type { IconSource } from '../Icon';\nimport Icon from '../Icon';\nimport Surface from '../Surface';\nimport TouchableRipple from '../TouchableRipple/TouchableRipple';\nimport AnimatedText from '../Typography/AnimatedText';\nimport { getCombinedStyles, getFABColors } from './utils';\n\nexport type AnimatedFABIconMode = 'static' | 'dynamic';\nexport type AnimatedFABAnimateFrom = 'left' | 'right';\n\nexport type Props = $RemoveChildren & {\n /**\n * Icon to display for the `FAB`.\n */\n icon: IconSource;\n /**\n * Label for extended `FAB`.\n */\n label: string;\n /**\n * Make the label text uppercased.\n */\n uppercase?: boolean;\n /**\n * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.\n * Uses `label` by default if specified.\n */\n accessibilityLabel?: string;\n /**\n * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.\n */\n accessibilityState?: AccessibilityState;\n /**\n * Custom color for the icon and label of the `FAB`.\n */\n color?: string;\n /**\n * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.\n */\n disabled?: boolean;\n /**\n * Whether `FAB` is currently visible.\n */\n visible?: boolean;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * Function to execute on long press.\n */\n onLongPress?: () => void;\n /**\n * Whether icon should be translated to the end of extended `FAB` or be static and stay in the same place. The default value is `dynamic`.\n */\n iconMode?: AnimatedFABIconMode;\n /**\n * Indicates from which direction animation should be performed. The default value is `right`.\n */\n animateFrom?: AnimatedFABAnimateFrom;\n /**\n * Whether `FAB` should start animation to extend.\n */\n extended: boolean;\n /**\n * @supported Available in v3.x with theme version 3\n *\n * Color mappings variant for combinations of container and icon colors.\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';\n style?: StyleProp;\n /**\n * @optional\n */\n theme: InternalTheme;\n testID?: string;\n};\n\nconst SIZE = 56;\nconst SCALE = 0.9;\n\n/**\n * An animated, extending horizontally floating action button represents the primary action in an application.\n *\n *
\n * \n *
\n *\n * ## Usage\n * ```js\n * import React from 'react';\n * import {\n * StyleProp,\n * ViewStyle,\n * Animated,\n * StyleSheet,\n * Platform,\n * ScrollView,\n * Text,\n * SafeAreaView,\n * I18nManager,\n * } from 'react-native';\n * import { AnimatedFAB } from 'react-native-paper';\n *\n * const MyComponent = ({\n * animatedValue,\n * visible,\n * extended,\n * label,\n * animateFrom,\n * style,\n * iconMode,\n * }) => {\n * const [isExtended, setIsExtended] = React.useState(true);\n *\n * const isIOS = Platform.OS === 'ios';\n *\n * const onScroll = ({ nativeEvent }) => {\n * const currentScrollPosition =\n * Math.floor(nativeEvent?.contentOffset?.y) ?? 0;\n *\n * setIsExtended(currentScrollPosition <= 0);\n * };\n *\n * const fabStyle = { [animateFrom]: 16 };\n *\n * return (\n * \n * \n * {[...new Array(100).keys()].map((_, i) => (\n * {i}\n * ))}\n * \n * console.log('Pressed')}\n * visible={visible}\n * animateFrom={'right'}\n * iconMode={'static'}\n * style={[styles.fabStyle, style, fabStyle]}\n * />\n * \n * );\n * };\n *\n * export default MyComponent;\n *\n * const styles = StyleSheet.create({\n * container: {\n * flexGrow: 1,\n * },\n * fabStyle: {\n * bottom: 16,\n * right: 16,\n * position: 'absolute',\n * },\n * });\n * ```\n */\nconst AnimatedFAB = ({\n icon,\n label,\n accessibilityLabel = label,\n accessibilityState,\n color: customColor,\n disabled,\n onPress,\n onLongPress,\n theme,\n style,\n visible = true,\n uppercase = !theme.isV3,\n testID,\n animateFrom = 'right',\n extended = false,\n iconMode = 'dynamic',\n variant = 'primary',\n ...rest\n}: Props) => {\n const isIOS = Platform.OS === 'ios';\n const isAnimatedFromRight = animateFrom === 'right';\n const isIconStatic = iconMode === 'static';\n const { isRTL } = I18nManager;\n const { current: visibility } = React.useRef(\n new Animated.Value(visible ? 1 : 0)\n );\n const { current: animFAB } = React.useRef(\n new Animated.Value(0)\n );\n const { isV3, animation } = theme;\n const { scale } = animation;\n\n const [textWidth, setTextWidth] = React.useState(0);\n const [textHeight, setTextHeight] = React.useState(0);\n\n const borderRadius = SIZE / (isV3 ? 3.5 : 2);\n\n React.useEffect(() => {\n if (visible) {\n Animated.timing(visibility, {\n toValue: 1,\n duration: 200 * scale,\n useNativeDriver: true,\n }).start();\n } else {\n Animated.timing(visibility, {\n toValue: 0,\n duration: 150 * scale,\n useNativeDriver: true,\n }).start();\n }\n }, [visible, scale, visibility]);\n\n const { backgroundColor, foregroundColor } = getFABColors({\n theme,\n variant,\n disabled,\n customColor,\n style,\n });\n\n const rippleColor = color(foregroundColor).alpha(0.12).rgb().string();\n\n const extendedWidth = textWidth + SIZE + borderRadius;\n\n const distance = isAnimatedFromRight\n ? -textWidth - borderRadius\n : textWidth + borderRadius;\n\n React.useEffect(() => {\n Animated.timing(animFAB, {\n toValue: !extended ? 0 : distance,\n duration: 150 * scale,\n useNativeDriver: true,\n easing: Easing.linear,\n }).start();\n }, [animFAB, scale, distance, extended]);\n\n const onTextLayout = ({\n nativeEvent,\n }: NativeSyntheticEvent) => {\n const currentWidth = Math.ceil(nativeEvent.lines[0].width);\n const currentHeight = Math.ceil(nativeEvent.lines[0].height);\n\n if (currentWidth !== textWidth || currentHeight !== textHeight) {\n setTextHeight(currentHeight);\n\n if (isIOS) {\n return setTextWidth(currentWidth - 12);\n }\n\n setTextWidth(currentWidth);\n }\n };\n\n const propForDirection = (right: T[]): T[] => {\n if (isAnimatedFromRight) {\n return right;\n }\n\n return right.reverse();\n };\n\n const combinedStyles = getCombinedStyles({\n isAnimatedFromRight,\n isIconStatic,\n distance,\n animFAB,\n });\n\n const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;\n\n const textStyle = {\n color: foregroundColor,\n ...font,\n };\n\n const md2Elevation = disabled || !isIOS ? 0 : 6;\n const md3Elevation = disabled || !isIOS ? 0 : 3;\n\n const newAccessibilityState = { ...accessibilityState, disabled };\n\n return (\n \n }\n {...(isV3 && { elevation: md3Elevation })}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n {label}\n \n \n\n {!isIOS && (\n // Method `onTextLayout` on Android returns sizes of text visible on the screen,\n // however during render the text in `FAB` isn't fully visible. In order to get\n // proper text measurements there is a need to additionaly render that text, but\n // wrapped in absolutely positioned `ScrollView` which height is 0.\n \n {label}\n \n )}\n \n );\n};\n\nconst styles = StyleSheet.create({\n standard: {\n height: SIZE,\n },\n disabled: {\n elevation: 0,\n },\n container: {\n position: 'absolute',\n backgroundColor: 'transparent',\n },\n innerWrapper: {\n flexDirection: 'row',\n overflow: 'hidden',\n },\n shadowWrapper: {\n elevation: 0,\n },\n shadow: {\n elevation: 6,\n },\n iconWrapper: {\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n height: SIZE,\n width: SIZE,\n },\n label: {\n position: 'absolute',\n },\n uppercaseLabel: {\n textTransform: 'uppercase',\n },\n textPlaceholderContainer: {\n height: 0,\n position: 'absolute',\n },\n});\n\nexport default withInternalTheme(AnimatedFAB);\n","import * as React from 'react';\nimport {\n Animated,\n I18nManager,\n LayoutChangeEvent,\n Platform,\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport setColor from 'color';\n\nimport { withInternalTheme } from '../core/theming';\nimport type { InternalTheme } from '../types';\n\nexport type Props = React.ComponentPropsWithRef & {\n /**\n * Animated value (between 0 and 1). This tells the progress bar to rely on this value to animate it.\n * Note: It should not be used in parallel with the `progress` prop.\n */\n animatedValue?: number;\n /**\n * Progress value (between 0 and 1).\n * Note: It should not be used in parallel with the `animatedValue` prop.\n */\n progress?: number;\n /**\n * 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.\n */\n color?: string;\n /**\n * If the progress bar will show indeterminate progress.\n */\n indeterminate?: boolean;\n /**\n * Whether to show the ProgressBar (true, the default) or hide it (false).\n */\n visible?: boolean;\n style?: StyleProp;\n /**\n * @optional\n */\n theme: InternalTheme;\n};\n\nconst INDETERMINATE_DURATION = 2000;\nconst INDETERMINATE_MAX_WIDTH = 0.6;\nconst { isRTL } = I18nManager;\n\n/**\n * Progress bar is an indicator used to present progress of some activity in the app.\n *\n *
\n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { ProgressBar, MD3Colors } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * \n * );\n *\n * export default MyComponent;\n * ```\n */\nconst ProgressBar = ({\n color,\n indeterminate,\n style,\n progress = 0,\n visible = true,\n theme,\n animatedValue,\n ...rest\n}: Props) => {\n const { current: timer } = React.useRef(\n new Animated.Value(0)\n );\n const { current: fade } = React.useRef(new Animated.Value(0));\n const [width, setWidth] = React.useState(0);\n const [prevWidth, setPrevWidth] = React.useState(0);\n\n const indeterminateAnimation =\n React.useRef(null);\n\n const { scale } = theme.animation;\n\n const startAnimation = React.useCallback(() => {\n // Show progress bar\n Animated.timing(fade, {\n duration: 200 * scale,\n toValue: 1,\n useNativeDriver: true,\n isInteraction: false,\n }).start();\n\n if (animatedValue && animatedValue >= 0) {\n return;\n }\n\n // Animate progress bar\n if (indeterminate) {\n if (!indeterminateAnimation.current) {\n indeterminateAnimation.current = Animated.timing(timer, {\n duration: INDETERMINATE_DURATION,\n toValue: 1,\n // Animated.loop does not work if useNativeDriver is true on web\n useNativeDriver: Platform.OS !== 'web',\n isInteraction: false,\n });\n }\n\n // Reset timer to the beginning\n timer.setValue(0);\n\n Animated.loop(indeterminateAnimation.current).start();\n } else {\n Animated.timing(timer, {\n duration: 200 * scale,\n toValue: progress ? progress : 0,\n useNativeDriver: true,\n isInteraction: false,\n }).start();\n }\n /**\n * We shouldn't add @param animatedValue to the\n * deps array, to avoid the unnecessary loop.\n * We can only check if the prop is passed initially,\n * and we do early return.\n */\n }, [fade, scale, indeterminate, timer, progress]);\n\n const stopAnimation = React.useCallback(() => {\n // Stop indeterminate animation\n if (indeterminateAnimation.current) {\n indeterminateAnimation.current.stop();\n }\n\n Animated.timing(fade, {\n duration: 200 * scale,\n toValue: 0,\n useNativeDriver: true,\n isInteraction: false,\n }).start();\n }, [fade, scale]);\n\n React.useEffect(() => {\n if (visible) startAnimation();\n else stopAnimation();\n }, [visible, startAnimation, stopAnimation]);\n\n React.useEffect(() => {\n if (animatedValue && animatedValue >= 0) {\n timer.setValue(animatedValue);\n }\n }, [animatedValue, timer]);\n\n React.useEffect(() => {\n // Start animation the very first time when previously the width was unclear\n if (visible && prevWidth === 0) {\n startAnimation();\n }\n }, [prevWidth, startAnimation, visible]);\n\n const onLayout = (event: LayoutChangeEvent) => {\n setPrevWidth(width);\n setWidth(event.nativeEvent.layout.width);\n };\n\n const tintColor = color || theme.colors?.primary;\n const trackTintColor = setColor(tintColor).alpha(0.38).rgb().string();\n\n return (\n \n \n {width ? (\n \n ) : null}\n \n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n height: 4,\n overflow: 'hidden',\n },\n\n progressBar: {\n flex: 1,\n },\n});\n\nexport default withInternalTheme(ProgressBar);\n","import * as React from 'react';\nimport { View } from 'react-native';\n\nexport type Props = {\n /**\n * Function to execute on selection change.\n */\n onValueChange: (value: string) => void;\n /**\n * Value of the currently selected radio button.\n */\n value: string;\n /**\n * React elements containing radio buttons.\n */\n children: React.ReactNode;\n};\n\nexport type RadioButtonContextType = {\n value: string;\n onValueChange: (item: string) => void;\n};\n\nexport const RadioButtonContext = React.createContext(\n null as any\n);\n\n/**\n * Radio button group allows to control a group of radio buttons.\n *\n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { View } from 'react-native';\n * import { RadioButton } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [checked, setChecked] = React.useState('first');\n *\n * return (\n * \n * setChecked('first')}\n * />\n * setChecked('second')}\n * />\n * \n * );\n * };\n *\n * export default MyComponent;\n * ```\n */\nconst RadioButton = (props: Props) => {\n const Button = Platform.select({\n default: RadioButtonAndroid,\n ios: RadioButtonIOS,\n });\n\n return ;\n};\n\nexport default withInternalTheme(RadioButton);\n","import * as React from 'react';\nimport {\n StyleProp,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { InternalTheme, MD3TypescaleKey } from '../../types';\nimport TouchableRipple from '../TouchableRipple/TouchableRipple';\nimport Text from '../Typography/Text';\nimport RadioButton from './RadioButton';\nimport RadioButtonAndroid from './RadioButtonAndroid';\nimport { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';\nimport RadioButtonIOS from './RadioButtonIOS';\nimport { handlePress, isChecked } from './utils';\n\nexport type Props = {\n /**\n * Value of the radio button.\n */\n value: string;\n /**\n * Label to be displayed on the item.\n */\n label: string;\n /**\n * Whether radio is disabled.\n */\n disabled?: boolean;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.\n */\n accessibilityLabel?: string;\n /**\n * Custom color for unchecked radio.\n */\n uncheckedColor?: string;\n /**\n * Custom color for radio.\n */\n color?: string;\n /**\n * Status of radio button.\n */\n status?: 'checked' | 'unchecked';\n /**\n * Additional styles for container View.\n */\n style?: StyleProp;\n /**\n * Style that is passed to Label element.\n */\n labelStyle?: StyleProp;\n /**\n * @supported Available in v5.x with theme version 3\n *\n * Label text variant defines appropriate text styles for type role and its size.\n * Available 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`\n */\n labelVariant?: keyof typeof MD3TypescaleKey;\n /**\n * @optional\n */\n theme: InternalTheme;\n /**\n * testID to be used on tests.\n */\n testID?: string;\n /**\n * Whether `` or `` should be used.\n * Left undefined `` will be used.\n */\n mode?: 'android' | 'ios';\n /**\n * Radio button control position.\n */\n position?: 'leading' | 'trailing';\n};\n\n/**\n * RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.\n *\n *
\n * \n * \n * Pressed\n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { RadioButton } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [value, setValue] = React.useState('first');\n *\n * return (\n * setValue(value)} value={value}>\n * \n * \n * \n * );\n * };\n *\n * export default MyComponent;\n *```\n */\nconst RadioButtonItem = ({\n value,\n label,\n style,\n labelStyle,\n onPress,\n disabled,\n color,\n uncheckedColor,\n status,\n theme,\n accessibilityLabel = label,\n testID,\n mode,\n position = 'trailing',\n labelVariant = 'bodyLarge',\n}: Props) => {\n const radioButtonProps = { value, disabled, status, color, uncheckedColor };\n const isLeading = position === 'leading';\n let radioButton: any;\n\n if (mode === 'android') {\n radioButton = ;\n } else if (mode === 'ios') {\n radioButton = ;\n } else {\n radioButton = ;\n }\n\n const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;\n const disabledTextColor = theme.isV3\n ? theme.colors.onSurfaceDisabled\n : theme.colors.disabled;\n const textAlign = isLeading ? 'right' : 'left';\n\n const computedStyle = {\n color: disabled ? disabledTextColor : textColor,\n textAlign,\n } as TextStyle;\n\n return (\n \n {(context?: RadioButtonContextType) => {\n const checked =\n isChecked({\n contextValue: context?.value,\n status,\n value,\n }) === 'checked';\n return (\n \n handlePress({\n onPress: onPress,\n onValueChange: context?.onValueChange,\n value,\n })\n }\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"radio\"\n accessibilityState={{\n checked,\n disabled,\n }}\n testID={testID}\n disabled={disabled}\n >\n \n {isLeading && radioButton}\n \n {label}\n \n {!isLeading && radioButton}\n \n \n );\n }}\n \n );\n};\n\nRadioButtonItem.displayName = 'RadioButton.Item';\n\nexport default withInternalTheme(RadioButtonItem);\n\n// @component-docs ignore-next-line\nconst RadioButtonItemWithTheme = withInternalTheme(RadioButtonItem);\n// @component-docs ignore-next-line\nexport { RadioButtonItemWithTheme as RadioButtonItem };\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n paddingVertical: 8,\n paddingHorizontal: 16,\n },\n label: {\n flexShrink: 1,\n flexGrow: 1,\n },\n font: {\n fontSize: 16,\n },\n});\n","import * as React from 'react';\nimport {\n Animated,\n I18nManager,\n Platform,\n StyleProp,\n StyleSheet,\n TextInput,\n TextInputProps,\n TextStyle,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport color from 'color';\n\nimport { withInternalTheme } from '../core/theming';\nimport type { InternalTheme } from '../types';\nimport ActivityIndicator from './ActivityIndicator';\nimport type { IconSource } from './Icon';\nimport IconButton from './IconButton/IconButton';\nimport MaterialCommunityIcon from './MaterialCommunityIcon';\nimport Surface from './Surface';\n\nexport type Props = React.ComponentPropsWithRef & {\n /**\n * Accessibility label for the button. This is read by the screen reader when the user taps the button.\n */\n clearAccessibilityLabel?: string;\n /**\n * Accessibility label for the button. This is read by the screen reader when the user taps the button.\n */\n searchAccessibilityLabel?: string;\n /**\n * Hint text shown when the input is empty.\n */\n placeholder?: string;\n /**\n * The value of the text input.\n */\n value: string;\n /**\n * Icon name for the left icon button (see `onIconPress`).\n */\n icon?: IconSource;\n /**\n * Callback that is called when the text input's text changes.\n */\n onChangeText?: (query: string) => void;\n /**\n * Callback to execute if we want the left icon to act as button.\n */\n onIconPress?: () => void;\n /**\n * @supported Available in v5.x with theme version 3\n * Changes Searchbar shadow and background on iOS and Android.\n */\n elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;\n /**\n * Set style of the TextInput component inside the searchbar\n */\n inputStyle?: StyleProp;\n style?: StyleProp;\n /**\n * Custom color for icon, default will be derived from theme\n */\n iconColor?: string;\n /**\n * Custom icon for clear button, default will be icon close\n */\n clearIcon?: IconSource;\n /**\n * @supported Available in v5.x\n * Custom flag for replacing clear button with activity indicator.\n */\n loading?: Boolean;\n /**\n * TestID used for testing purposes\n */\n testID?: string;\n /**\n * @optional\n */\n theme: InternalTheme;\n};\n\ntype TextInputHandles = Pick<\n TextInput,\n 'setNativeProps' | 'isFocused' | 'clear' | 'blur' | 'focus'\n>;\n\n/**\n * Searchbar is a simple input box where users can type search queries.\n *\n *
\n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Searchbar } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [searchQuery, setSearchQuery] = React.useState('');\n *\n * const onChangeSearch = query => setSearchQuery(query);\n *\n * return (\n * \n * );\n * };\n *\n * export default MyComponent;\n\n * ```\n */\nconst Searchbar = React.forwardRef(\n (\n {\n clearAccessibilityLabel = 'clear',\n clearIcon,\n icon,\n iconColor: customIconColor,\n inputStyle,\n onIconPress,\n placeholder,\n searchAccessibilityLabel = 'search',\n elevation = 1,\n style,\n theme,\n value,\n loading = false,\n testID = 'search-bar',\n ...rest\n }: Props,\n ref\n ) => {\n const root = React.useRef(null);\n\n React.useImperativeHandle(ref, () => {\n const input = root.current;\n\n if (input) {\n return {\n focus: () => input.focus(),\n clear: () => input.clear(),\n setNativeProps: (args: TextInputProps) => input.setNativeProps(args),\n isFocused: () => input.isFocused(),\n blur: () => input.blur(),\n };\n }\n\n const noop = () => {\n throw new Error('TextInput is not available');\n };\n\n return {\n focus: noop,\n clear: noop,\n setNativeProps: noop,\n isFocused: noop,\n blur: noop,\n };\n });\n\n const handleClearPress = () => {\n root.current?.clear();\n rest.onChangeText?.('');\n };\n\n const { colors, roundness, dark, isV3 } = theme;\n const textColor = isV3 ? theme.colors.onSurface : theme.colors.text;\n const iconColor =\n customIconColor ||\n (dark ? textColor : color(textColor).alpha(0.54).rgb().string());\n const rippleColor = color(textColor).alpha(0.32).rgb().string();\n\n return (\n \n (\n \n ))\n }\n accessibilityLabel={searchAccessibilityLabel}\n />\n \n {loading ? (\n \n ) : (\n // Clear icon should be always rendered within Searchbar – it's transparent,\n // without touch events, when there is no value. It's done to avoid issues\n // with the abruptly stopping ripple effect and changing bar width on web,\n // when clearing the value.\n \n (\n \n ))\n }\n accessibilityRole=\"button\"\n />\n \n )}\n \n );\n }\n);\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: 'row',\n alignItems: 'center',\n },\n input: {\n flex: 1,\n fontSize: 18,\n paddingLeft: 8,\n alignSelf: 'stretch',\n textAlign: I18nManager.getConstants().isRTL ? 'right' : 'left',\n minWidth: 0,\n },\n elevation: {\n elevation: 4,\n },\n loader: {\n margin: 10,\n },\n});\n\nexport default withInternalTheme(Searchbar);\n","import * as React from 'react';\nimport {\n Animated,\n Easing,\n SafeAreaView,\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport { withInternalTheme } from '../core/theming';\nimport type { InternalTheme } from '../types';\nimport Button from './Button/Button';\nimport Surface from './Surface';\nimport Text from './Typography/Text';\n\nexport type Props = React.ComponentProps & {\n /**\n * Whether the Snackbar is currently visible.\n */\n visible: boolean;\n /**\n * 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.\n */\n action?: Omit, 'children'> & {\n label: string;\n };\n /**\n * The duration for which the Snackbar is shown.\n */\n duration?: number;\n /**\n * Callback called when Snackbar is dismissed. The `visible` prop needs to be updated when this is called.\n */\n onDismiss: () => void;\n /**\n * Text content of the Snackbar.\n */\n children: React.ReactNode;\n /**\n * Style for the wrapper of the snackbar\n */\n /**\n * @supported Available in v5.x with theme version 3\n * Changes Snackbar shadow and background on iOS and Android.\n */\n elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;\n wrapperStyle?: StyleProp;\n style?: StyleProp;\n ref?: React.RefObject;\n /**\n * @optional\n */\n theme: InternalTheme;\n};\n\nconst DURATION_SHORT = 4000;\nconst DURATION_MEDIUM = 7000;\nconst DURATION_LONG = 10000;\n\n/**\n * Snackbars provide brief feedback about an operation through a message at the bottom of the screen.\n * Snackbar by default uses `onSurface` color from theme.\n *
\n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { View, StyleSheet } from 'react-native';\n * import { Button, Snackbar } from 'react-native-paper';\n *\n * const 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 *\n * const styles = StyleSheet.create({\n * container: {\n * flex: 1,\n * justifyContent: 'space-between',\n * },\n * });\n *\n * export default MyComponent;\n * ```\n */\nconst Snackbar = ({\n visible,\n action,\n duration = DURATION_MEDIUM,\n onDismiss,\n children,\n elevation = 2,\n wrapperStyle,\n style,\n theme,\n ...rest\n}: Props) => {\n const { current: opacity } = React.useRef(\n new Animated.Value(0.0)\n );\n const [hidden, setHidden] = React.useState(!visible);\n\n const hideTimeout = React.useRef(undefined);\n\n const { scale } = theme.animation;\n\n React.useEffect(() => {\n return () => {\n if (hideTimeout.current) clearTimeout(hideTimeout.current);\n };\n }, []);\n\n React.useLayoutEffect(() => {\n if (visible) {\n // show\n if (hideTimeout.current) clearTimeout(hideTimeout.current);\n setHidden(false);\n Animated.timing(opacity, {\n toValue: 1,\n duration: 200 * scale,\n easing: Easing.out(Easing.ease),\n useNativeDriver: true,\n }).start(({ finished }) => {\n if (finished) {\n const isInfinity =\n duration === Number.POSITIVE_INFINITY ||\n duration === Number.NEGATIVE_INFINITY;\n\n if (!isInfinity) {\n hideTimeout.current = setTimeout(\n onDismiss,\n duration\n ) as unknown as NodeJS.Timeout;\n }\n }\n });\n } else {\n // hide\n if (hideTimeout.current) {\n clearTimeout(hideTimeout.current);\n }\n\n Animated.timing(opacity, {\n toValue: 0,\n duration: 100 * scale,\n useNativeDriver: true,\n }).start(({ finished }) => {\n if (finished) {\n setHidden(true);\n }\n });\n }\n }, [visible, duration, opacity, scale, onDismiss]);\n\n const { colors, roundness, isV3 } = theme;\n\n if (hidden) {\n return null;\n }\n\n const {\n style: actionStyle,\n label: actionLabel,\n onPress: onPressAction,\n ...actionProps\n } = action || {};\n\n const marginRight = action ? 0 : 16;\n const textColor = theme.isV3\n ? theme.colors.inversePrimary\n : theme.colors.accent;\n\n const renderChildrenWithWrapper = () => {\n const viewStyles = [\n styles.content,\n { marginRight, color: colors?.surface },\n ];\n\n if (typeof children === 'string') {\n return {children};\n }\n\n return (\n \n {/* View is added to allow multiple lines support for Text component as children */}\n {children}\n \n );\n };\n\n return (\n \n \n }\n {...(isV3 && { elevation })}\n {...rest}\n >\n {renderChildrenWithWrapper()}\n {action ? (\n {\n onPressAction?.();\n onDismiss();\n }}\n style={[styles.button, actionStyle]}\n textColor={textColor}\n compact\n mode=\"text\"\n {...actionProps}\n >\n {actionLabel}\n \n ) : null}\n \n \n );\n};\n\n/**\n * Show the Snackbar for a short duration.\n */\nSnackbar.DURATION_SHORT = DURATION_SHORT;\n\n/**\n * Show the Snackbar for a medium duration.\n */\nSnackbar.DURATION_MEDIUM = DURATION_MEDIUM;\n\n/**\n * Show the Snackbar for a long duration.\n */\nSnackbar.DURATION_LONG = DURATION_LONG;\n\nconst styles = StyleSheet.create({\n wrapper: {\n position: 'absolute',\n bottom: 0,\n width: '100%',\n },\n container: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n margin: 8,\n borderRadius: 4,\n },\n content: {\n marginLeft: 16,\n marginVertical: 14,\n flex: 1,\n },\n button: {\n marginHorizontal: 8,\n marginVertical: 6,\n },\n elevation: {\n elevation: 6,\n },\n});\n\nexport default withInternalTheme(Snackbar);\n","import * as React from 'react';\nimport {\n NativeModules,\n Platform,\n StyleProp,\n Switch as NativeSwitch,\n ViewStyle,\n} from 'react-native';\n\nimport { withInternalTheme } from '../../core/theming';\nimport type { InternalTheme } from '../../types';\nimport { getSwitchColor } from './utils';\n\nconst version = NativeModules.PlatformConstants\n ? NativeModules.PlatformConstants.reactNativeVersion\n : undefined;\n\nexport type Props = React.ComponentPropsWithRef & {\n /**\n * Disable toggling the switch.\n */\n disabled?: boolean;\n /**\n * Value of the switch, true means 'on', false means 'off'.\n */\n value?: boolean;\n /**\n * Custom color for switch.\n */\n color?: string;\n /**\n * Callback called with the new value when it changes.\n */\n onValueChange?: Function;\n style?: StyleProp;\n /**\n * @optional\n */\n theme: InternalTheme;\n};\n\n/**\n * Switch is a visual toggle between two mutually exclusive states — on and off.\n *\n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Switch } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [isSwitchOn, setIsSwitchOn] = React.useState(false);\n *\n * const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);\n *\n * return ;\n * };\n *\n * export default MyComponent;\n * ```\n */\nconst Switch = ({\n value,\n disabled,\n onValueChange,\n color,\n theme,\n ...rest\n}: Props) => {\n const { checkedColor, onTintColor, thumbTintColor } = getSwitchColor({\n theme,\n disabled,\n value,\n color,\n });\n\n const props =\n version && version.major === 0 && version.minor <= 56\n ? {\n onTintColor,\n thumbTintColor,\n }\n : Platform.OS === 'web'\n ? {\n activeTrackColor: onTintColor,\n thumbColor: thumbTintColor,\n activeThumbColor: checkedColor,\n }\n : {\n thumbColor: thumbTintColor,\n trackColor: {\n true: onTintColor,\n false: onTintColor,\n },\n };\n\n return (\n \n );\n};\n\nexport default withInternalTheme(Switch);\n","import * as React from 'react';\n\nexport type Props = {\n /**\n * Function to execute on selection change.\n */\n onValueChange: (value: string) => void | null;\n /**\n * Value of the currently selected toggle button.\n */\n value: string | null;\n /**\n * React elements containing toggle buttons.\n */\n children: React.ReactNode;\n};\n\ntype ToggleButtonContextType = {\n value: string | null;\n onValueChange: (item: string) => void | null;\n};\n\nexport const ToggleButtonGroupContext =\n React.createContext(null as any);\n\n/**\n * Toggle group allows to control a group of toggle buttons.\n * It doesn't change the appearance of the toggle buttons. If you want to group them in a row, check out `ToggleButton.Row`.\n *\n *
\n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { ToggleButton } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [value, setValue] = React.useState('left');\n *\n * return (\n * setValue(value)}\n * value={value}>\n * \n * \n * \n * );\n * };\n *\n * export default MyComponent;\n *```\n */\nconst ToggleButtonGroup = ({ value, onValueChange, children }: Props) => (\n \n {children}\n \n);\n\nToggleButtonGroup.displayName = 'ToggleButton.Group';\n\nexport default ToggleButtonGroup;\n\n// @component-docs ignore-next-line\nexport { ToggleButtonGroup };\n","import * as React from 'react';\nimport {\n GestureResponderEvent,\n StyleProp,\n StyleSheet,\n ViewStyle,\n View,\n} from 'react-native';\n\nimport color from 'color';\n\nimport { withInternalTheme } from '../../core/theming';\nimport { black, white } from '../../styles/themes/v2/colors';\nimport type { InternalTheme } from '../../types';\nimport type { IconSource } from '../Icon';\nimport IconButton from '../IconButton/IconButton';\nimport { ToggleButtonGroupContext } from './ToggleButtonGroup';\nimport { getToggleButtonColor } from './utils';\n\nexport type Props = {\n /**\n * Icon to display for the `ToggleButton`.\n */\n icon: IconSource;\n /**\n * Size of the icon.\n */\n size?: number;\n /**\n * Custom text color for button.\n */\n color?: string;\n /**\n * Whether the button is disabled.\n */\n disabled?: boolean;\n /**\n * Accessibility label for the `ToggleButton`. This is read by the screen reader when the user taps the button.\n */\n accessibilityLabel?: string;\n /**\n * Function to execute on press.\n */\n onPress?: (value?: GestureResponderEvent | string) => void;\n /**\n * Value of button.\n */\n value?: string;\n /**\n * Status of button.\n */\n status?: 'checked' | 'unchecked';\n style?: StyleProp;\n /**\n * @optional\n */\n theme: InternalTheme;\n ref?: React.RefObject;\n};\n\n/**\n * Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons,\n * a group should share a common container.\n *\n *
\n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { ToggleButton } from 'react-native-paper';\n *\n * const 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 *\n * export default ToggleButtonExample;\n *\n * ```\n */\nconst ToggleButton = React.forwardRef(\n (\n {\n icon,\n size,\n theme,\n accessibilityLabel,\n disabled,\n style,\n value,\n status,\n onPress,\n ...rest\n }: Props,\n ref\n ) => {\n const borderRadius = theme.roundness;\n\n return (\n \n {(\n context: { value: string | null; onValueChange: Function } | null\n ) => {\n const checked: boolean | null =\n (context && context.value === value) || status === 'checked';\n\n const backgroundColor = getToggleButtonColor({ theme, checked });\n const borderColor = theme.isV3\n ? theme.colors.outline\n : color(theme.dark ? white : black)\n .alpha(0.29)\n .rgb()\n .string();\n\n return (\n {\n if (onPress) {\n onPress(e);\n }\n\n if (context) {\n context.onValueChange(!checked ? value : null);\n }\n }}\n size={size}\n accessibilityLabel={accessibilityLabel}\n accessibilityState={{ disabled, selected: checked }}\n disabled={disabled}\n style={[\n styles.content,\n {\n backgroundColor,\n borderRadius,\n borderColor,\n },\n style,\n ]}\n ref={ref}\n {...rest}\n />\n );\n }}\n \n );\n }\n);\n\nconst styles = StyleSheet.create({\n content: {\n width: 42,\n height: 42,\n margin: 0,\n },\n});\n\nexport default withInternalTheme(ToggleButton);\n\n// @component-docs ignore-next-line\nconst ToggleButtonWithTheme = withInternalTheme(ToggleButton);\n// @component-docs ignore-next-line\nexport { ToggleButtonWithTheme as ToggleButton };\n","import * as React from 'react';\nimport { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';\n\nimport ToggleButton from './ToggleButton';\nimport ToggleButtonGroup from './ToggleButtonGroup';\n\nexport type Props = {\n /**\n * Function to execute on selection change.\n */\n onValueChange: (value: string) => void;\n /**\n * Value of the currently selected toggle button.\n */\n value: string;\n /**\n * React elements containing toggle buttons.\n */\n children: React.ReactNode;\n style?: StyleProp;\n};\n\n/**\n * Toggle button row renders a group of toggle buttons in a row.\n *\n *
\n * \n * \n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { ToggleButton } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [value, setValue] = React.useState('left');\n *\n * return (\n * setValue(value)} value={value}>\n * \n * \n * \n * );\n * };\n *\n * export default MyComponent;\n *\n *```\n */\nconst ToggleButtonRow = ({ value, onValueChange, children, style }: Props) => {\n const count = React.Children.count(children);\n\n return (\n \n \n {React.Children.map(children, (child, i) => {\n // @ts-expect-error: TypeScript complains about child.type but it doesn't matter\n if (child && child.type === ToggleButton) {\n // @ts-expect-error: We're sure that child is a React Element\n return React.cloneElement(child, {\n style: [\n styles.button,\n i === 0\n ? styles.first\n : i === count - 1\n ? styles.last\n : styles.middle,\n // @ts-expect-error: We're sure that child is a React Element\n child.props.style,\n ],\n });\n }\n\n return child;\n })}\n \n \n );\n};\n\nToggleButtonRow.displayName = 'ToggleButton.Row';\n\nconst styles = StyleSheet.create({\n row: {\n flexDirection: 'row',\n },\n button: {\n borderWidth: StyleSheet.hairlineWidth,\n },\n\n first: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n middle: {\n borderRadius: 0,\n borderLeftWidth: 0,\n },\n\n last: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n },\n});\n\nexport default ToggleButtonRow;\n\n// @component-docs ignore-next-line\nexport { ToggleButtonRow };\n","import * as React from 'react';\nimport {\n Animated,\n GestureResponderEvent,\n StyleProp,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport color from 'color';\n\nimport { useInternalTheme } from '../../core/theming';\nimport type { IconSource } from '../Icon';\nimport Icon from '../Icon';\nimport TouchableRipple from '../TouchableRipple/TouchableRipple';\nimport Text from '../Typography/Text';\nimport {\n getSegmentedButtonBorderRadius,\n getSegmentedButtonColors,\n getSegmentedButtonDensityPadding,\n} from './utils';\n\nexport type Props = {\n /**\n * Whether the segmented button is checked\n */\n checked: boolean;\n /**\n * Icon to display for the `SegmentedButtonItem`.\n */\n icon?: IconSource;\n /**\n * Whether the button is disabled.\n */\n disabled?: boolean;\n /**\n * Accessibility label for the `SegmentedButtonItem`. This is read by the screen reader when the user taps the button.\n */\n accessibilityLabel?: string;\n /**\n * Function to execute on press.\n */\n onPress?: (event: GestureResponderEvent) => void;\n /**\n * Value of button.\n */\n value: string;\n /**\n * Label text of the button.\n */\n label?: string;\n /**\n * Button segment.\n */\n segment?: 'first' | 'last';\n /**\n * Show optional check icon to indicate selected state\n */\n showSelectedCheck?: boolean;\n /**\n * Density is applied to the height, to allow usage in denser UIs.\n */\n density?: 'regular' | 'small' | 'medium' | 'high';\n style?: StyleProp;\n /**\n * testID to be used on tests.\n */\n testID?: string;\n};\n\nconst SegmentedButtonItem = ({\n checked,\n accessibilityLabel,\n disabled,\n style,\n showSelectedCheck,\n icon,\n testID,\n label,\n onPress,\n segment,\n density = 'regular',\n}: Props) => {\n const theme = useInternalTheme();\n\n const checkScale = React.useRef(new Animated.Value(0)).current;\n\n React.useEffect(() => {\n if (!showSelectedCheck) {\n return;\n }\n if (checked) {\n Animated.spring(checkScale, {\n toValue: 1,\n useNativeDriver: true,\n }).start();\n } else {\n Animated.spring(checkScale, {\n toValue: 0,\n useNativeDriver: true,\n }).start();\n }\n }, [checked, checkScale, showSelectedCheck]);\n\n const { roundness, isV3 } = theme;\n const { borderColor, textColor, borderWidth, backgroundColor } =\n getSegmentedButtonColors({\n checked,\n theme,\n disabled,\n });\n\n const borderRadius = (isV3 ? 5 : 1) * roundness;\n const segmentBorderRadius = getSegmentedButtonBorderRadius({\n theme,\n segment,\n });\n const rippleColor = color(textColor).alpha(0.12).rgb().string();\n\n const iconSize = isV3 ? 18 : 16;\n const iconStyle = {\n marginRight: label ? 5 : checked && showSelectedCheck ? 3 : 0,\n ...(label && {\n transform: [\n {\n scale: checkScale.interpolate({\n inputRange: [0, 1],\n outputRange: [1, 0],\n }),\n },\n ],\n }),\n };\n\n const buttonStyle: ViewStyle = {\n backgroundColor,\n borderColor,\n borderWidth,\n borderRadius,\n ...segmentBorderRadius,\n };\n const paddingVertical = getSegmentedButtonDensityPadding({ density });\n const rippleStyle: ViewStyle = {\n borderRadius,\n ...segmentBorderRadius,\n };\n const showIcon = icon && !label ? true : checked ? !showSelectedCheck : true;\n const labelTextStyle: TextStyle = {\n ...(!isV3\n ? {\n textTransform: 'uppercase',\n fontWeight: '500',\n }\n : theme.fonts.labelLarge),\n color: textColor,\n };\n\n return (\n \n \n \n {checked && showSelectedCheck ? (\n \n \n \n ) : null}\n {showIcon ? (\n \n \n \n ) : null}\n \n {label}\n \n \n \n \n );\n};\n\nconst styles = StyleSheet.create({\n button: {\n minWidth: 76,\n borderStyle: 'solid',\n },\n label: {\n textAlign: 'center',\n },\n content: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n paddingVertical: 9,\n paddingHorizontal: 16,\n },\n});\n\nexport default SegmentedButtonItem;\n\nconst SegmentedButtonWithTheme = SegmentedButtonItem;\nexport { SegmentedButtonWithTheme as SegmentedButton };\n","import * as React from 'react';\nimport {\n GestureResponderEvent,\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport { useTheme } from '../../core/theming';\nimport type { IconSource } from '../Icon';\nimport SegmentedButtonItem from './SegmentedButtonItem';\nimport { getDisabledSegmentedButtonStyle } from './utils';\n\ntype ConditionalValue =\n | {\n /**\n * Array of the currently selected segmented button values.\n */\n value: string[];\n /**\n * Support multiple selected options.\n */\n multiSelect: true;\n /**\n * Function to execute on selection change\n */\n onValueChange: (value: string[]) => void;\n }\n | {\n /**\n * Value of the currently selected segmented button.\n */\n value: string;\n /**\n * Support multiple selected options.\n */\n multiSelect?: false;\n /**\n * Function to execute on selection change\n */\n onValueChange: (value: string) => void;\n };\n\nexport type Props = {\n /**\n * Buttons to display as options in toggle button.\n * Button should contain the following properties:\n * - `value`: value of button (required)\n * - `icon`: icon to display for the item\n * - `disabled`: whether the button is disabled\n * - `accessibilityLabel`: acccessibility label for the button. This is read by the screen reader when the user taps the button.\n * - `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\n */\n buttons: {\n value: string;\n icon?: IconSource;\n disabled?: boolean;\n accessibilityLabel?: string;\n onPress?: (event: GestureResponderEvent) => void;\n label?: string;\n showSelectedCheck?: boolean;\n style?: StyleProp;\n testID?: string;\n }[];\n /**\n * Density is applied to the height, to allow usage in denser UIs\n */\n density?: 'regular' | 'small' | 'medium' | 'high';\n style?: StyleProp;\n} & ConditionalValue;\n\n/**\n * @supported Available in v5.x\n * Segmented buttons can be used to select options, switch views or sort elements.\n *\n *
\n * \n *
\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { SegmentedButtons } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [value, setValue] = React.useState('');\n *\n * return (\n * \n * );\n * };\n *\n * export default MyComponent;\n *```\n */\nconst SegmentedButtons = ({\n value,\n onValueChange,\n buttons,\n multiSelect,\n density,\n style,\n}: Props) => {\n const theme = useTheme();\n return (\n \n {buttons.map((item, i) => {\n const disabledChildStyle = getDisabledSegmentedButtonStyle({\n theme,\n buttons,\n index: i,\n });\n const segment =\n i === 0 ? 'first' : i === buttons.length - 1 ? 'last' : undefined;\n\n const checked =\n multiSelect && Array.isArray(value)\n ? value.includes(item.value)\n : value === item.value;\n\n const onPress = (e: GestureResponderEvent) => {\n item.onPress?.(e);\n\n const nextValue =\n multiSelect && Array.isArray(value)\n ? checked\n ? value.filter((val) => item.value !== val)\n : [...value, item.value]\n : item.value;\n\n // @ts-expect-error: TS doesn't preserve types after destructuring, so the type isn't inferred correctly\n onValueChange(nextValue);\n };\n\n return (\n \n );\n })}\n \n );\n};\n\nconst styles = StyleSheet.create({\n row: {\n flexDirection: 'row',\n },\n});\n\nexport default SegmentedButtons;\n\n// @component-docs ignore-next-line\nexport { SegmentedButtons as SegmentedButtons };\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n */\n'use strict';\n\nimport canUseDOM from '../canUseDom';\n\nvar emptyFunction = () => {};\n\nfunction supportsPassiveEvents() {\n var supported = false; // Check if browser supports event with passive listeners\n // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support\n\n if (canUseDOM) {\n try {\n var options = {};\n Object.defineProperty(options, 'passive', {\n get() {\n supported = true;\n return false;\n }\n\n });\n window.addEventListener('test', null, options);\n window.removeEventListener('test', null, options);\n } catch (e) {}\n }\n\n return supported;\n}\n\nvar canUsePassiveEvents = supportsPassiveEvents();\n\nfunction getOptions(options) {\n if (options == null) {\n return false;\n }\n\n return canUsePassiveEvents ? options : Boolean(options.capture);\n}\n/**\n * Shim generic API compatibility with ReactDOM's synthetic events, without needing the\n * large amount of code ReactDOM uses to do this. Ideally we wouldn't use a synthetic\n * event wrapper at all.\n */\n\n\nfunction isPropagationStopped() {\n return this.cancelBubble;\n}\n\nfunction isDefaultPrevented() {\n return this.defaultPrevented;\n}\n\nfunction normalizeEvent(event) {\n event.nativeEvent = event;\n event.persist = emptyFunction;\n event.isDefaultPrevented = isDefaultPrevented;\n event.isPropagationStopped = isPropagationStopped;\n return event;\n}\n/**\n *\n */\n\n\nexport default function createEventHandle(type, options) {\n var opts = getOptions(options);\n return function (target, listener) {\n if (target == null || typeof target.addEventListener !== 'function') {\n throw new Error('createEventHandle: called on an invalid target.');\n }\n\n var element = target;\n\n if (listener != null) {\n var compatListener = e => listener(normalizeEvent(e));\n\n element.addEventListener(type, compatListener, opts);\n return function removeListener() {\n if (element != null) {\n element.removeEventListener(type, compatListener, opts);\n }\n };\n } else {\n return emptyFunction;\n }\n };\n}","/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n */\nimport createEventHandle from '../createEventHandle';\nimport canUseDOM from '../canUseDom';\n\nvar supportsPointerEvent = () => !!(typeof window !== 'undefined' && window.PointerEvent != null);\n\nvar activeModality = 'keyboard';\nvar modality = 'keyboard';\nvar previousModality;\nvar previousActiveModality;\nvar isEmulatingMouseEvents = false;\nvar listeners = new Set();\nvar KEYBOARD = 'keyboard';\nvar MOUSE = 'mouse';\nvar TOUCH = 'touch';\nvar BLUR = 'blur';\nvar CONTEXTMENU = 'contextmenu';\nvar FOCUS = 'focus';\nvar KEYDOWN = 'keydown';\nvar MOUSEDOWN = 'mousedown';\nvar MOUSEMOVE = 'mousemove';\nvar MOUSEUP = 'mouseup';\nvar POINTERDOWN = 'pointerdown';\nvar POINTERMOVE = 'pointermove';\nvar SCROLL = 'scroll';\nvar SELECTIONCHANGE = 'selectionchange';\nvar TOUCHCANCEL = 'touchcancel';\nvar TOUCHMOVE = 'touchmove';\nvar TOUCHSTART = 'touchstart';\nvar VISIBILITYCHANGE = 'visibilitychange';\nvar bubbleOptions = {\n passive: true\n};\nvar captureOptions = {\n capture: true,\n passive: true\n}; // Window events\n\nvar addBlurListener = createEventHandle(BLUR, bubbleOptions);\nvar addFocusListener = createEventHandle(FOCUS, bubbleOptions); // Must be capture phase because 'stopPropagation' might prevent these\n// events bubbling to the document.\n\nvar addVisibilityChangeListener = createEventHandle(VISIBILITYCHANGE, captureOptions);\nvar addKeyDownListener = createEventHandle(KEYDOWN, captureOptions);\nvar addPointerDownListener = createEventHandle(POINTERDOWN, captureOptions);\nvar addPointerMoveListener = createEventHandle(POINTERMOVE, captureOptions); // Fallback events\n\nvar addContextMenuListener = createEventHandle(CONTEXTMENU, captureOptions);\nvar addMouseDownListener = createEventHandle(MOUSEDOWN, captureOptions);\nvar addMouseMoveListener = createEventHandle(MOUSEMOVE, captureOptions);\nvar addMouseUpListener = createEventHandle(MOUSEUP, captureOptions);\nvar addScrollListener = createEventHandle(SCROLL, captureOptions);\nvar addSelectiomChangeListener = createEventHandle(SELECTIONCHANGE, captureOptions);\nvar addTouchCancelListener = createEventHandle(TOUCHCANCEL, captureOptions);\nvar addTouchMoveListener = createEventHandle(TOUCHMOVE, captureOptions);\nvar addTouchStartListener = createEventHandle(TOUCHSTART, captureOptions);\n\nfunction restoreModality() {\n if (previousModality != null || previousActiveModality != null) {\n if (previousModality != null) {\n modality = previousModality;\n previousModality = null;\n }\n\n if (previousActiveModality != null) {\n activeModality = previousActiveModality;\n previousActiveModality = null;\n }\n\n callListeners();\n }\n}\n\nfunction onBlurWindow() {\n previousModality = modality;\n previousActiveModality = activeModality;\n activeModality = KEYBOARD;\n modality = KEYBOARD;\n callListeners(); // for fallback events\n\n isEmulatingMouseEvents = false;\n}\n\nfunction onFocusWindow() {\n restoreModality();\n}\n\nfunction onKeyDown(event) {\n if (event.metaKey || event.altKey || event.ctrlKey) {\n return;\n }\n\n if (modality !== KEYBOARD) {\n modality = KEYBOARD;\n activeModality = KEYBOARD;\n callListeners();\n }\n}\n\nfunction onVisibilityChange() {\n if (document.visibilityState !== 'hidden') {\n restoreModality();\n }\n}\n\nfunction onPointerish(event) {\n var eventType = event.type;\n\n if (supportsPointerEvent()) {\n if (eventType === POINTERDOWN) {\n if (activeModality !== event.pointerType) {\n modality = event.pointerType;\n activeModality = event.pointerType;\n callListeners();\n }\n\n return;\n }\n\n if (eventType === POINTERMOVE) {\n if (modality !== event.pointerType) {\n modality = event.pointerType;\n callListeners();\n }\n\n return;\n }\n } // Fallback for non-PointerEvent environment\n else {\n if (!isEmulatingMouseEvents) {\n if (eventType === MOUSEDOWN) {\n if (activeModality !== MOUSE) {\n modality = MOUSE;\n activeModality = MOUSE;\n callListeners();\n }\n }\n\n if (eventType === MOUSEMOVE) {\n if (modality !== MOUSE) {\n modality = MOUSE;\n callListeners();\n }\n }\n } // Flag when browser may produce emulated events\n\n\n if (eventType === TOUCHSTART) {\n isEmulatingMouseEvents = true;\n\n if (event.touches && event.touches.length > 1) {\n isEmulatingMouseEvents = false;\n }\n\n if (activeModality !== TOUCH) {\n modality = TOUCH;\n activeModality = TOUCH;\n callListeners();\n }\n\n return;\n } // Remove flag after emulated events are finished or cancelled, and if an\n // event occurs that cuts short a touch event sequence.\n\n\n if (eventType === CONTEXTMENU || eventType === MOUSEUP || eventType === SELECTIONCHANGE || eventType === SCROLL || eventType === TOUCHCANCEL || eventType === TOUCHMOVE) {\n isEmulatingMouseEvents = false;\n }\n }\n}\n\nif (canUseDOM) {\n addBlurListener(window, onBlurWindow);\n addFocusListener(window, onFocusWindow);\n addKeyDownListener(document, onKeyDown);\n addPointerDownListener(document, onPointerish);\n addPointerMoveListener(document, onPointerish);\n addVisibilityChangeListener(document, onVisibilityChange); // fallbacks\n\n addContextMenuListener(document, onPointerish);\n addMouseDownListener(document, onPointerish);\n addMouseMoveListener(document, onPointerish);\n addMouseUpListener(document, onPointerish);\n addTouchCancelListener(document, onPointerish);\n addTouchMoveListener(document, onPointerish);\n addTouchStartListener(document, onPointerish);\n addSelectiomChangeListener(document, onPointerish);\n addScrollListener(document, onPointerish);\n}\n\nfunction callListeners() {\n var value = {\n activeModality,\n modality\n };\n listeners.forEach(listener => {\n listener(value);\n });\n}\n\nexport function getActiveModality() {\n return activeModality;\n}\nexport function getModality() {\n return modality;\n}\nexport function addModalityListener(listener) {\n listeners.add(listener);\n return () => {\n listeners.delete(listener);\n };\n}\nexport function testOnly_resetActiveModality() {\n isEmulatingMouseEvents = false;\n activeModality = KEYBOARD;\n modality = KEYBOARD;\n}","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n */\nimport createEventHandle from '../createEventHandle';\nimport useLayoutEffect from '../useLayoutEffect';\nimport useStable from '../useStable';\n\n/**\n * This can be used with any event type include custom events.\n *\n * const click = useEvent('click', options);\n * useEffect(() => {\n * click.setListener(target, onClick);\n * return () => click.clear();\n * }).\n */\nexport default function useEvent(event, options) {\n var targetListeners = useStable(() => new Map());\n var addListener = useStable(() => {\n var addEventListener = createEventHandle(event, options);\n return (target, callback) => {\n var removeTargetListener = targetListeners.get(target);\n\n if (removeTargetListener != null) {\n removeTargetListener();\n }\n\n if (callback == null) {\n targetListeners.delete(target);\n }\n\n var removeEventListener = addEventListener(target, callback);\n targetListeners.set(target, removeEventListener);\n return removeEventListener;\n };\n });\n useLayoutEffect(() => {\n return () => {\n targetListeners.forEach(removeListener => {\n removeListener();\n });\n targetListeners.clear();\n };\n }, [targetListeners]);\n return addListener;\n}","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n */\nimport { getModality } from '../modality';\nimport useEvent from '../useEvent';\nimport useLayoutEffect from '../useLayoutEffect';\n/**\n * Types\n */\n\n/**\n * Implementation\n */\nvar emptyObject = {};\nvar opts = {\n passive: true\n};\nvar lockEventType = 'react-gui:hover:lock';\nvar unlockEventType = 'react-gui:hover:unlock';\n\nvar supportsPointerEvent = () => !!(typeof window !== 'undefined' && window.PointerEvent != null);\n\nfunction dispatchCustomEvent(target, type, payload) {\n var event = document.createEvent('CustomEvent');\n\n var _ref = payload || emptyObject,\n _ref$bubbles = _ref.bubbles,\n bubbles = _ref$bubbles === void 0 ? true : _ref$bubbles,\n _ref$cancelable = _ref.cancelable,\n cancelable = _ref$cancelable === void 0 ? true : _ref$cancelable,\n detail = _ref.detail;\n\n event.initCustomEvent(type, bubbles, cancelable, detail);\n target.dispatchEvent(event);\n} // This accounts for the non-PointerEvent fallback events.\n\n\nfunction getPointerType(event) {\n var pointerType = event.pointerType;\n return pointerType != null ? pointerType : getModality();\n}\n\nexport default function useHover(targetRef, config) {\n var contain = config.contain,\n disabled = config.disabled,\n onHoverStart = config.onHoverStart,\n onHoverChange = config.onHoverChange,\n onHoverUpdate = config.onHoverUpdate,\n onHoverEnd = config.onHoverEnd;\n var canUsePE = supportsPointerEvent();\n var addMoveListener = useEvent(canUsePE ? 'pointermove' : 'mousemove', opts);\n var addEnterListener = useEvent(canUsePE ? 'pointerenter' : 'mouseenter', opts);\n var addLeaveListener = useEvent(canUsePE ? 'pointerleave' : 'mouseleave', opts); // These custom events are used to implement the \"contain\" prop.\n\n var addLockListener = useEvent(lockEventType, opts);\n var addUnlockListener = useEvent(unlockEventType, opts);\n useLayoutEffect(() => {\n var target = targetRef.current;\n\n if (target !== null) {\n /**\n * End the hover gesture\n */\n var hoverEnd = function hoverEnd(e) {\n if (onHoverEnd != null) {\n onHoverEnd(e);\n }\n\n if (onHoverChange != null) {\n onHoverChange(false);\n } // Remove the listeners once finished.\n\n\n addMoveListener(target, null);\n addLeaveListener(target, null);\n };\n /**\n * Leave element\n */\n\n\n var leaveListener = function leaveListener(e) {\n var target = targetRef.current;\n\n if (target != null && getPointerType(e) !== 'touch') {\n if (contain) {\n dispatchCustomEvent(target, unlockEventType);\n }\n\n hoverEnd(e);\n }\n };\n /**\n * Move within element\n */\n\n\n var moveListener = function moveListener(e) {\n if (getPointerType(e) !== 'touch') {\n if (onHoverUpdate != null) {\n // Not all browsers have these properties\n if (e.x == null) {\n e.x = e.clientX;\n }\n\n if (e.y == null) {\n e.y = e.clientY;\n }\n\n onHoverUpdate(e);\n }\n }\n };\n /**\n * Start the hover gesture\n */\n\n\n var hoverStart = function hoverStart(e) {\n if (onHoverStart != null) {\n onHoverStart(e);\n }\n\n if (onHoverChange != null) {\n onHoverChange(true);\n } // Set the listeners needed for the rest of the hover gesture.\n\n\n if (onHoverUpdate != null) {\n addMoveListener(target, !disabled ? moveListener : null);\n }\n\n addLeaveListener(target, !disabled ? leaveListener : null);\n };\n /**\n * Enter element\n */\n\n\n var enterListener = function enterListener(e) {\n var target = targetRef.current;\n\n if (target != null && getPointerType(e) !== 'touch') {\n if (contain) {\n dispatchCustomEvent(target, lockEventType);\n }\n\n hoverStart(e);\n\n var lockListener = function lockListener(lockEvent) {\n if (lockEvent.target !== target) {\n hoverEnd(e);\n }\n };\n\n var unlockListener = function unlockListener(lockEvent) {\n if (lockEvent.target !== target) {\n hoverStart(e);\n }\n };\n\n addLockListener(target, !disabled ? lockListener : null);\n addUnlockListener(target, !disabled ? unlockListener : null);\n }\n };\n\n addEnterListener(target, !disabled ? enterListener : null);\n }\n }, [addEnterListener, addMoveListener, addLeaveListener, addLockListener, addUnlockListener, contain, disabled, onHoverStart, onHoverChange, onHoverUpdate, onHoverEnd, targetRef]);\n}","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n */\n'use strict';\n\nimport _extends from \"@babel/runtime/helpers/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/objectWithoutPropertiesLoose\";\nvar _excluded = [\"children\", \"delayLongPress\", \"delayPressIn\", \"delayPressOut\", \"disabled\", \"focusable\", \"onBlur\", \"onContextMenu\", \"onFocus\", \"onHoverIn\", \"onHoverOut\", \"onKeyDown\", \"onLongPress\", \"onPress\", \"onPressMove\", \"onPressIn\", \"onPressOut\", \"style\", \"testOnly_hovered\", \"testOnly_pressed\"];\nimport * as React from 'react';\nimport { forwardRef, memo, useMemo, useState, useRef } from 'react';\nimport useMergeRefs from '../../modules/useMergeRefs';\nimport useHover from '../../modules/useHover';\nimport usePressEvents from '../../modules/usePressEvents';\nimport StyleSheet from '../StyleSheet';\nimport View from '../View';\n\n/**\n * Component used to build display components that should respond to whether the\n * component is currently pressed or not.\n */\nfunction Pressable(props, forwardedRef) {\n var children = props.children,\n delayLongPress = props.delayLongPress,\n delayPressIn = props.delayPressIn,\n delayPressOut = props.delayPressOut,\n disabled = props.disabled,\n focusable = props.focusable,\n onBlur = props.onBlur,\n onContextMenu = props.onContextMenu,\n onFocus = props.onFocus,\n onHoverIn = props.onHoverIn,\n onHoverOut = props.onHoverOut,\n onKeyDown = props.onKeyDown,\n onLongPress = props.onLongPress,\n onPress = props.onPress,\n onPressMove = props.onPressMove,\n onPressIn = props.onPressIn,\n onPressOut = props.onPressOut,\n style = props.style,\n testOnly_hovered = props.testOnly_hovered,\n testOnly_pressed = props.testOnly_pressed,\n rest = _objectWithoutPropertiesLoose(props, _excluded);\n\n var _useForceableState = useForceableState(testOnly_hovered === true),\n hovered = _useForceableState[0],\n setHovered = _useForceableState[1];\n\n var _useForceableState2 = useForceableState(false),\n focused = _useForceableState2[0],\n setFocused = _useForceableState2[1];\n\n var _useForceableState3 = useForceableState(testOnly_pressed === true),\n pressed = _useForceableState3[0],\n setPressed = _useForceableState3[1];\n\n var hostRef = useRef(null);\n var setRef = useMergeRefs(forwardedRef, hostRef);\n var pressConfig = useMemo(() => ({\n delayLongPress,\n delayPressStart: delayPressIn,\n delayPressEnd: delayPressOut,\n disabled,\n onLongPress,\n onPress,\n onPressChange: setPressed,\n onPressStart: onPressIn,\n onPressMove,\n onPressEnd: onPressOut\n }), [delayLongPress, delayPressIn, delayPressOut, disabled, onLongPress, onPress, onPressIn, onPressMove, onPressOut, setPressed]);\n var pressEventHandlers = usePressEvents(hostRef, pressConfig);\n var onContextMenuPress = pressEventHandlers.onContextMenu,\n onKeyDownPress = pressEventHandlers.onKeyDown;\n useHover(hostRef, {\n contain: true,\n disabled,\n onHoverChange: setHovered,\n onHoverStart: onHoverIn,\n onHoverEnd: onHoverOut\n });\n var interactionState = {\n hovered,\n focused,\n pressed\n };\n var blurHandler = React.useCallback(e => {\n if (e.nativeEvent.target === hostRef.current) {\n setFocused(false);\n\n if (onBlur != null) {\n onBlur(e);\n }\n }\n }, [hostRef, setFocused, onBlur]);\n var focusHandler = React.useCallback(e => {\n if (e.nativeEvent.target === hostRef.current) {\n setFocused(true);\n\n if (onFocus != null) {\n onFocus(e);\n }\n }\n }, [hostRef, setFocused, onFocus]);\n var contextMenuHandler = React.useCallback(e => {\n if (onContextMenuPress != null) {\n onContextMenuPress(e);\n }\n\n if (onContextMenu != null) {\n onContextMenu(e);\n }\n }, [onContextMenu, onContextMenuPress]);\n var keyDownHandler = React.useCallback(e => {\n if (onKeyDownPress != null) {\n onKeyDownPress(e);\n }\n\n if (onKeyDown != null) {\n onKeyDown(e);\n }\n }, [onKeyDown, onKeyDownPress]);\n return /*#__PURE__*/React.createElement(View, _extends({}, rest, pressEventHandlers, {\n accessibilityDisabled: disabled,\n focusable: !disabled && focusable !== false,\n onBlur: blurHandler,\n onContextMenu: contextMenuHandler,\n onFocus: focusHandler,\n onKeyDown: keyDownHandler,\n pointerEvents: disabled ? 'none' : rest.pointerEvents,\n ref: setRef,\n style: [!disabled && styles.root, typeof style === 'function' ? style(interactionState) : style]\n }), typeof children === 'function' ? children(interactionState) : children);\n}\n\nfunction useForceableState(forced) {\n var _useState = useState(false),\n bool = _useState[0],\n setBool = _useState[1];\n\n return [bool || forced, setBool];\n}\n\nvar styles = StyleSheet.create({\n root: {\n cursor: 'pointer',\n touchAction: 'manipulation'\n }\n});\nvar MemoedPressable = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(Pressable));\nMemoedPressable.displayName = 'Pressable';\nexport default MemoedPressable;","import _extends from \"@babel/runtime/helpers/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/objectWithoutPropertiesLoose\";\nvar _excluded = [\"behavior\", \"contentContainerStyle\", \"keyboardVerticalOffset\"];\n\n/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n */\nimport * as React from 'react';\nimport View from '../View';\n\nclass KeyboardAvoidingView extends React.Component {\n constructor() {\n super(...arguments);\n this.frame = null;\n\n this.onLayout = event => {\n this.frame = event.nativeEvent.layout;\n };\n }\n\n relativeKeyboardHeight(keyboardFrame) {\n var frame = this.frame;\n\n if (!frame || !keyboardFrame) {\n return 0;\n }\n\n var keyboardY = keyboardFrame.screenY - (this.props.keyboardVerticalOffset || 0);\n return Math.max(frame.y + frame.height - keyboardY, 0);\n }\n\n onKeyboardChange(event) {}\n\n render() {\n var _this$props = this.props,\n behavior = _this$props.behavior,\n contentContainerStyle = _this$props.contentContainerStyle,\n keyboardVerticalOffset = _this$props.keyboardVerticalOffset,\n rest = _objectWithoutPropertiesLoose(_this$props, _excluded);\n\n return /*#__PURE__*/React.createElement(View, _extends({\n onLayout: this.onLayout\n }, rest));\n }\n\n}\n\nexport default KeyboardAvoidingView;","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n * @format\n */\nimport NativeAnimatedNonTurboModule from './NativeAnimatedModule';\nimport NativeAnimatedTurboModule from './NativeAnimatedTurboModule';\nimport NativeEventEmitter from '../NativeEventEmitter';\nimport Platform from '../../../exports/Platform';\nimport invariant from 'fbjs/lib/invariant'; // TODO T69437152 @petetheheat - Delete this fork when Fabric ships to 100%.\n\nvar NativeAnimatedModule = Platform.OS === 'ios' && global.RN$Bridgeless ? NativeAnimatedTurboModule : NativeAnimatedNonTurboModule;\nvar __nativeAnimatedNodeTagCount = 1;\n/* used for animated nodes */\n\nvar __nativeAnimationIdCount = 1;\n/* used for started animations */\n\nvar nativeEventEmitter;\nvar waitingForQueuedOperations = new Set();\nvar queueOperations = false;\nvar queue = [];\n/**\n * Simple wrappers around NativeAnimatedModule to provide flow and autocomplete support for\n * the native module methods\n */\n\nvar API = {\n getValue: function getValue(tag, saveValueCallback) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n\n if (NativeAnimatedModule.getValue) {\n NativeAnimatedModule.getValue(tag, saveValueCallback);\n }\n },\n setWaitingForIdentifier: function setWaitingForIdentifier(id) {\n waitingForQueuedOperations.add(id);\n queueOperations = true;\n },\n unsetWaitingForIdentifier: function unsetWaitingForIdentifier(id) {\n waitingForQueuedOperations.delete(id);\n\n if (waitingForQueuedOperations.size === 0) {\n queueOperations = false;\n API.disableQueue();\n }\n },\n disableQueue: function disableQueue() {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n\n if (Platform.OS === 'android') {\n NativeAnimatedModule.startOperationBatch();\n }\n\n for (var q = 0, l = queue.length; q < l; q++) {\n queue[q]();\n }\n\n queue.length = 0;\n\n if (Platform.OS === 'android') {\n NativeAnimatedModule.finishOperationBatch();\n }\n },\n queueOperation: fn => {\n if (queueOperations) {\n queue.push(fn);\n } else {\n fn();\n }\n },\n createAnimatedNode: function createAnimatedNode(tag, config) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.createAnimatedNode(tag, config));\n },\n startListeningToAnimatedNodeValue: function startListeningToAnimatedNodeValue(tag) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.startListeningToAnimatedNodeValue(tag));\n },\n stopListeningToAnimatedNodeValue: function stopListeningToAnimatedNodeValue(tag) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.stopListeningToAnimatedNodeValue(tag));\n },\n connectAnimatedNodes: function connectAnimatedNodes(parentTag, childTag) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.connectAnimatedNodes(parentTag, childTag));\n },\n disconnectAnimatedNodes: function disconnectAnimatedNodes(parentTag, childTag) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.disconnectAnimatedNodes(parentTag, childTag));\n },\n startAnimatingNode: function startAnimatingNode(animationId, nodeTag, config, endCallback) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.startAnimatingNode(animationId, nodeTag, config, endCallback));\n },\n stopAnimation: function stopAnimation(animationId) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.stopAnimation(animationId));\n },\n setAnimatedNodeValue: function setAnimatedNodeValue(nodeTag, value) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.setAnimatedNodeValue(nodeTag, value));\n },\n setAnimatedNodeOffset: function setAnimatedNodeOffset(nodeTag, offset) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.setAnimatedNodeOffset(nodeTag, offset));\n },\n flattenAnimatedNodeOffset: function flattenAnimatedNodeOffset(nodeTag) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.flattenAnimatedNodeOffset(nodeTag));\n },\n extractAnimatedNodeOffset: function extractAnimatedNodeOffset(nodeTag) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.extractAnimatedNodeOffset(nodeTag));\n },\n connectAnimatedNodeToView: function connectAnimatedNodeToView(nodeTag, viewTag) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.connectAnimatedNodeToView(nodeTag, viewTag));\n },\n disconnectAnimatedNodeFromView: function disconnectAnimatedNodeFromView(nodeTag, viewTag) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.disconnectAnimatedNodeFromView(nodeTag, viewTag));\n },\n restoreDefaultValues: function restoreDefaultValues(nodeTag) {\n invariant(NativeAnimatedModule, 'Native animated module is not available'); // Backwards compat with older native runtimes, can be removed later.\n\n if (NativeAnimatedModule.restoreDefaultValues != null) {\n API.queueOperation(() => NativeAnimatedModule.restoreDefaultValues(nodeTag));\n }\n },\n dropAnimatedNode: function dropAnimatedNode(tag) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.dropAnimatedNode(tag));\n },\n addAnimatedEventToView: function addAnimatedEventToView(viewTag, eventName, eventMapping) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.addAnimatedEventToView(viewTag, eventName, eventMapping));\n },\n\n removeAnimatedEventFromView(viewTag, eventName, animatedNodeTag) {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n API.queueOperation(() => NativeAnimatedModule.removeAnimatedEventFromView(viewTag, eventName, animatedNodeTag));\n }\n\n};\n/**\n * Styles allowed by the native animated implementation.\n *\n * In general native animated implementation should support any numeric property that doesn't need\n * to be updated through the shadow view hierarchy (all non-layout properties).\n */\n\nvar SUPPORTED_STYLES = {\n opacity: true,\n transform: true,\n borderRadius: true,\n borderBottomEndRadius: true,\n borderBottomLeftRadius: true,\n borderBottomRightRadius: true,\n borderBottomStartRadius: true,\n borderTopEndRadius: true,\n borderTopLeftRadius: true,\n borderTopRightRadius: true,\n borderTopStartRadius: true,\n elevation: true,\n zIndex: true,\n\n /* ios styles */\n shadowOpacity: true,\n shadowRadius: true,\n\n /* legacy android transform properties */\n scaleX: true,\n scaleY: true,\n translateX: true,\n translateY: true\n};\nvar SUPPORTED_TRANSFORMS = {\n translateX: true,\n translateY: true,\n scale: true,\n scaleX: true,\n scaleY: true,\n rotate: true,\n rotateX: true,\n rotateY: true,\n rotateZ: true,\n perspective: true\n};\nvar SUPPORTED_INTERPOLATION_PARAMS = {\n inputRange: true,\n outputRange: true,\n extrapolate: true,\n extrapolateRight: true,\n extrapolateLeft: true\n};\n\nfunction addWhitelistedStyleProp(prop) {\n SUPPORTED_STYLES[prop] = true;\n}\n\nfunction addWhitelistedTransformProp(prop) {\n SUPPORTED_TRANSFORMS[prop] = true;\n}\n\nfunction addWhitelistedInterpolationParam(param) {\n SUPPORTED_INTERPOLATION_PARAMS[param] = true;\n}\n\nfunction validateTransform(configs) {\n configs.forEach(config => {\n if (!SUPPORTED_TRANSFORMS.hasOwnProperty(config.property)) {\n throw new Error(\"Property '\" + config.property + \"' is not supported by native animated module\");\n }\n });\n}\n\nfunction validateStyles(styles) {\n for (var _key in styles) {\n if (!SUPPORTED_STYLES.hasOwnProperty(_key)) {\n throw new Error(\"Style property '\" + _key + \"' is not supported by native animated module\");\n }\n }\n}\n\nfunction validateInterpolation(config) {\n for (var _key2 in config) {\n if (!SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(_key2)) {\n throw new Error(\"Interpolation property '\" + _key2 + \"' is not supported by native animated module\");\n }\n }\n}\n\nfunction generateNewNodeTag() {\n return __nativeAnimatedNodeTagCount++;\n}\n\nexport function generateNewAnimationId() {\n return __nativeAnimationIdCount++;\n}\n\nfunction assertNativeAnimatedModule() {\n invariant(NativeAnimatedModule, 'Native animated module is not available');\n}\n\nvar _warnedMissingNativeAnimated = false;\nexport function shouldUseNativeDriver(config) {\n if (config.useNativeDriver == null) {\n console.warn('Animated: `useNativeDriver` was not specified. This is a required ' + 'option and must be explicitly set to `true` or `false`');\n }\n\n if (config.useNativeDriver === true && !NativeAnimatedModule) {\n if (!_warnedMissingNativeAnimated) {\n console.warn('Animated: `useNativeDriver` is not supported because the native ' + 'animated module is missing. Falling back to JS-based animation. To ' + 'resolve this, add `RCTAnimation` module to this app, or remove ' + '`useNativeDriver`. ' + 'Make sure to run `pod install` first. Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md');\n _warnedMissingNativeAnimated = true;\n }\n\n return false;\n }\n\n return config.useNativeDriver || false;\n}\n\nfunction transformDataType(value) {\n // Change the string type to number type so we can reuse the same logic in\n // iOS and Android platform\n if (typeof value !== 'string') {\n return value;\n }\n\n if (/deg$/.test(value)) {\n var degrees = parseFloat(value) || 0;\n var radians = degrees * Math.PI / 180.0;\n return radians;\n } else {\n return value;\n }\n}\n\nexport default {\n API,\n addWhitelistedStyleProp,\n addWhitelistedTransformProp,\n addWhitelistedInterpolationParam,\n validateStyles,\n validateTransform,\n validateInterpolation,\n generateNewNodeTag,\n generateNewAnimationId,\n assertNativeAnimatedModule,\n shouldUseNativeDriver,\n transformDataType,\n\n // $FlowExpectedError - unsafe getter lint suppresion\n get nativeEventEmitter() {\n if (!nativeEventEmitter) {\n nativeEventEmitter = new NativeEventEmitter(NativeAnimatedModule);\n }\n\n return nativeEventEmitter;\n }\n\n};","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @format\n * \n */\n'use strict';\n/*\n * @returns {bool} true if different, false if equal\n */\n\nvar deepDiffer = function deepDiffer(one, two, maxDepth) {\n if (maxDepth === void 0) {\n maxDepth = -1;\n }\n\n if (maxDepth === 0) {\n return true;\n }\n\n if (one === two) {\n // Short circuit on identical object references instead of traversing them.\n return false;\n }\n\n if (typeof one === 'function' && typeof two === 'function') {\n // We consider all functions equal\n return false;\n }\n\n if (typeof one !== 'object' || one === null) {\n // Primitives can be directly compared\n return one !== two;\n }\n\n if (typeof two !== 'object' || two === null) {\n // We know they are different because the previous case would have triggered\n // otherwise.\n return true;\n }\n\n if (one.constructor !== two.constructor) {\n return true;\n }\n\n if (Array.isArray(one)) {\n // We know two is also an array because the constructors are equal\n var len = one.length;\n\n if (two.length !== len) {\n return true;\n }\n\n for (var ii = 0; ii < len; ii++) {\n if (deepDiffer(one[ii], two[ii], maxDepth - 1)) {\n return true;\n }\n }\n } else {\n for (var key in one) {\n if (deepDiffer(one[key], two[key], maxDepth - 1)) {\n return true;\n }\n }\n\n for (var twoKey in two) {\n // The only case we haven't checked yet is keys that are in two but aren't\n // in one, which means they are different.\n if (one[twoKey] === undefined && two[twoKey] !== undefined) {\n return true;\n }\n }\n }\n\n return false;\n};\n\nexport default deepDiffer;","import _extends from \"@babel/runtime/helpers/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/objectWithoutPropertiesLoose\";\nimport _objectSpread from \"@babel/runtime/helpers/objectSpread2\";\nvar _excluded = [\"numColumns\", \"columnWrapperStyle\", \"removeClippedSubviews\"];\n\n/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n * @format\n */\nimport Platform from '../../../exports/Platform';\nimport deepDiffer from '../deepDiffer';\nimport * as React from 'react';\nimport View from '../../../exports/View';\nimport VirtualizedList from '../VirtualizedList';\nimport StyleSheet from '../../../exports/StyleSheet';\nimport invariant from 'fbjs/lib/invariant';\nimport { keyExtractor as defaultKeyExtractor } from '../VirtualizeUtils';\n\n/**\n * Default Props Helper Functions\n * Use the following helper functions for default values\n */\n// removeClippedSubviewsOrDefault(this.props.removeClippedSubviews)\nfunction removeClippedSubviewsOrDefault(removeClippedSubviews) {\n return removeClippedSubviews !== null && removeClippedSubviews !== void 0 ? removeClippedSubviews : Platform.OS === 'android';\n} // numColumnsOrDefault(this.props.numColumns)\n\n\nfunction numColumnsOrDefault(numColumns) {\n return numColumns !== null && numColumns !== void 0 ? numColumns : 1;\n}\n\n/**\n * A performant interface for rendering simple, flat lists, supporting the most handy features:\n *\n * - Fully cross-platform.\n * - Optional horizontal mode.\n * - Configurable viewability callbacks.\n * - Header support.\n * - Footer support.\n * - Separator support.\n * - Pull to Refresh.\n * - Scroll loading.\n * - ScrollToIndex support.\n *\n * If you need section support, use [``](docs/sectionlist.html).\n *\n * Minimal Example:\n *\n * {item.key}}\n * />\n *\n * More complex, multi-select example demonstrating `PureComponent` usage for perf optimization and avoiding bugs.\n *\n * - By binding the `onPressItem` handler, the props will remain `===` and `PureComponent` will\n * prevent wasteful re-renders unless the actual `id`, `selected`, or `title` props change, even\n * if the components rendered in `MyListItem` did not have such optimizations.\n * - By passing `extraData={this.state}` to `FlatList` we make sure `FlatList` itself will re-render\n * when the `state.selected` changes. Without setting this prop, `FlatList` would not know it\n * needs to re-render any items because it is also a `PureComponent` and the prop comparison will\n * not show any changes.\n * - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.\n *\n *\n * class MyListItem extends React.PureComponent {\n * _onPress = () => {\n * this.props.onPressItem(this.props.id);\n * };\n *\n * render() {\n * const textColor = this.props.selected ? \"red\" : \"black\";\n * return (\n * \n * \n * \n * {this.props.title}\n * \n * \n * \n * );\n * }\n * }\n *\n * class MultiSelectList extends React.PureComponent {\n * state = {selected: (new Map(): Map)};\n *\n * _keyExtractor = (item, index) => item.id;\n *\n * _onPressItem = (id: string) => {\n * // updater functions are preferred for transactional updates\n * this.setState((state) => {\n * // copy the map rather than modifying state.\n * const selected = new Map(state.selected);\n * selected.set(id, !selected.get(id)); // toggle\n * return {selected};\n * });\n * };\n *\n * _renderItem = ({item}) => (\n * \n * );\n *\n * render() {\n * return (\n * \n * );\n * }\n * }\n *\n * This is a convenience wrapper around [``](docs/virtualizedlist.html),\n * and thus inherits its props (as well as those of `ScrollView`) that aren't explicitly listed\n * here, along with the following caveats:\n *\n * - Internal state is not preserved when content scrolls out of the render window. Make sure all\n * your data is captured in the item data or external stores like Flux, Redux, or Relay.\n * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow-\n * equal. Make sure that everything your `renderItem` function depends on is passed as a prop\n * (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on\n * changes. This includes the `data` prop and parent component state.\n * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously\n * offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see\n * blank content. This is a tradeoff that can be adjusted to suit the needs of each application,\n * and we are working on improving it behind the scenes.\n * - By default, the list looks for a `key` prop on each item and uses that for the React key.\n * Alternatively, you can provide a custom `keyExtractor` prop.\n *\n * Also inherits [ScrollView Props](docs/scrollview.html#props), unless it is nested in another FlatList of same orientation.\n */\nclass FlatList extends React.PureComponent {\n /**\n * Scrolls to the end of the content. May be janky without `getItemLayout` prop.\n */\n scrollToEnd(params) {\n if (this._listRef) {\n this._listRef.scrollToEnd(params);\n }\n }\n /**\n * Scrolls to the item at the specified index such that it is positioned in the viewable area\n * such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the\n * middle. `viewOffset` is a fixed number of pixels to offset the final target position.\n *\n * Note: cannot scroll to locations outside the render window without specifying the\n * `getItemLayout` prop.\n */\n\n\n scrollToIndex(params) {\n if (this._listRef) {\n this._listRef.scrollToIndex(params);\n }\n }\n /**\n * Requires linear scan through data - use `scrollToIndex` instead if possible.\n *\n * Note: cannot scroll to locations outside the render window without specifying the\n * `getItemLayout` prop.\n */\n\n\n scrollToItem(params) {\n if (this._listRef) {\n this._listRef.scrollToItem(params);\n }\n }\n /**\n * Scroll to a specific content pixel offset in the list.\n *\n * Check out [scrollToOffset](docs/virtualizedlist.html#scrolltooffset) of VirtualizedList\n */\n\n\n scrollToOffset(params) {\n if (this._listRef) {\n this._listRef.scrollToOffset(params);\n }\n }\n /**\n * Tells the list an interaction has occurred, which should trigger viewability calculations, e.g.\n * if `waitForInteractions` is true and the user has not scrolled. This is typically called by\n * taps on items or by navigation actions.\n */\n\n\n recordInteraction() {\n if (this._listRef) {\n this._listRef.recordInteraction();\n }\n }\n /**\n * Displays the scroll indicators momentarily.\n *\n * @platform ios\n */\n\n\n flashScrollIndicators() {\n if (this._listRef) {\n this._listRef.flashScrollIndicators();\n }\n }\n /**\n * Provides a handle to the underlying scroll responder.\n */\n\n\n getScrollResponder() {\n if (this._listRef) {\n return this._listRef.getScrollResponder();\n }\n }\n /**\n * Provides a reference to the underlying host component\n */\n\n\n getNativeScrollRef() {\n if (this._listRef) {\n /* $FlowFixMe[incompatible-return] Suppresses errors found when fixing\n * TextInput typing */\n return this._listRef.getScrollRef();\n }\n }\n\n getScrollableNode() {\n if (this._listRef) {\n return this._listRef.getScrollableNode();\n }\n }\n\n setNativeProps(props) {\n if (this._listRef) {\n this._listRef.setNativeProps(props);\n }\n }\n\n constructor(_props) {\n super(_props);\n this._virtualizedListPairs = [];\n\n this._captureRef = ref => {\n this._listRef = ref;\n };\n\n this._getItem = (data, index) => {\n var numColumns = numColumnsOrDefault(this.props.numColumns);\n\n if (numColumns > 1) {\n var ret = [];\n\n for (var kk = 0; kk < numColumns; kk++) {\n var _item = data[index * numColumns + kk];\n\n if (_item != null) {\n ret.push(_item);\n }\n }\n\n return ret;\n } else {\n return data[index];\n }\n };\n\n this._getItemCount = data => {\n if (data) {\n var numColumns = numColumnsOrDefault(this.props.numColumns);\n return numColumns > 1 ? Math.ceil(data.length / numColumns) : data.length;\n } else {\n return 0;\n }\n };\n\n this._keyExtractor = (items, index) => {\n var _this$props$keyExtrac;\n\n var numColumns = numColumnsOrDefault(this.props.numColumns);\n var keyExtractor = (_this$props$keyExtrac = this.props.keyExtractor) !== null && _this$props$keyExtrac !== void 0 ? _this$props$keyExtrac : defaultKeyExtractor;\n\n if (numColumns > 1) {\n if (Array.isArray(items)) {\n return items.map((item, kk) => keyExtractor(item, index * numColumns + kk)).join(':');\n } else {\n invariant(Array.isArray(items), 'FlatList: Encountered internal consistency error, expected each item to consist of an ' + 'array with 1-%s columns; instead, received a single item.', numColumns);\n }\n } else {\n // $FlowFixMe[incompatible-call] Can't call keyExtractor with an array\n return keyExtractor(items, index);\n }\n };\n\n this._renderer = () => {\n var _this$props = this.props,\n ListItemComponent = _this$props.ListItemComponent,\n renderItem = _this$props.renderItem,\n columnWrapperStyle = _this$props.columnWrapperStyle;\n var numColumns = numColumnsOrDefault(this.props.numColumns);\n var virtualizedListRenderKey = ListItemComponent ? 'ListItemComponent' : 'renderItem';\n\n var renderer = props => {\n if (ListItemComponent) {\n // $FlowFixMe[not-a-component] Component isn't valid\n // $FlowFixMe[incompatible-type-arg] Component isn't valid\n // $FlowFixMe[incompatible-return] Component isn't valid\n return /*#__PURE__*/React.createElement(ListItemComponent, props);\n } else if (renderItem) {\n // $FlowFixMe[incompatible-call]\n return renderItem(props);\n } else {\n return null;\n }\n };\n\n return {\n /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb)\n * This comment suppresses an error found when Flow v0.111 was deployed.\n * To see the error, delete this comment and run Flow. */\n [virtualizedListRenderKey]: info => {\n if (numColumns > 1) {\n var _item2 = info.item,\n _index = info.index;\n invariant(Array.isArray(_item2), 'Expected array of items with numColumns > 1');\n return /*#__PURE__*/React.createElement(View, {\n style: StyleSheet.compose(styles.row, columnWrapperStyle)\n }, _item2.map((it, kk) => {\n var element = renderer({\n item: it,\n index: _index * numColumns + kk,\n separators: info.separators\n });\n return element != null ? /*#__PURE__*/React.createElement(React.Fragment, {\n key: kk\n }, element) : null;\n }));\n } else {\n return renderer(info);\n }\n }\n };\n };\n\n this._checkProps(this.props);\n\n if (this.props.viewabilityConfigCallbackPairs) {\n this._virtualizedListPairs = this.props.viewabilityConfigCallbackPairs.map(pair => ({\n viewabilityConfig: pair.viewabilityConfig,\n onViewableItemsChanged: this._createOnViewableItemsChanged(pair.onViewableItemsChanged)\n }));\n } else if (this.props.onViewableItemsChanged) {\n this._virtualizedListPairs.push({\n /* $FlowFixMe[incompatible-call] (>=0.63.0 site=react_native_fb) This\n * comment suppresses an error found when Flow v0.63 was deployed. To\n * see the error delete this comment and run Flow. */\n viewabilityConfig: this.props.viewabilityConfig,\n onViewableItemsChanged: this._createOnViewableItemsChanged(this.props.onViewableItemsChanged)\n });\n }\n }\n\n componentDidUpdate(prevProps) {\n invariant(prevProps.numColumns === this.props.numColumns, 'Changing numColumns on the fly is not supported. Change the key prop on FlatList when ' + 'changing the number of columns to force a fresh render of the component.');\n invariant(prevProps.onViewableItemsChanged === this.props.onViewableItemsChanged, 'Changing onViewableItemsChanged on the fly is not supported');\n invariant(!deepDiffer(prevProps.viewabilityConfig, this.props.viewabilityConfig), 'Changing viewabilityConfig on the fly is not supported');\n invariant(prevProps.viewabilityConfigCallbackPairs === this.props.viewabilityConfigCallbackPairs, 'Changing viewabilityConfigCallbackPairs on the fly is not supported');\n\n this._checkProps(this.props);\n }\n\n _checkProps(props) {\n var getItem = props.getItem,\n getItemCount = props.getItemCount,\n horizontal = props.horizontal,\n columnWrapperStyle = props.columnWrapperStyle,\n onViewableItemsChanged = props.onViewableItemsChanged,\n viewabilityConfigCallbackPairs = props.viewabilityConfigCallbackPairs;\n var numColumns = numColumnsOrDefault(this.props.numColumns);\n invariant(!getItem && !getItemCount, 'FlatList does not support custom data formats.');\n\n if (numColumns > 1) {\n invariant(!horizontal, 'numColumns does not support horizontal.');\n } else {\n invariant(!columnWrapperStyle, 'columnWrapperStyle not supported for single column lists');\n }\n\n invariant(!(onViewableItemsChanged && viewabilityConfigCallbackPairs), 'FlatList does not support setting both onViewableItemsChanged and ' + 'viewabilityConfigCallbackPairs.');\n }\n\n _pushMultiColumnViewable(arr, v) {\n var _this$props$keyExtrac2;\n\n var numColumns = numColumnsOrDefault(this.props.numColumns);\n var keyExtractor = (_this$props$keyExtrac2 = this.props.keyExtractor) !== null && _this$props$keyExtrac2 !== void 0 ? _this$props$keyExtrac2 : defaultKeyExtractor;\n v.item.forEach((item, ii) => {\n invariant(v.index != null, 'Missing index!');\n var index = v.index * numColumns + ii;\n arr.push(_objectSpread(_objectSpread({}, v), {}, {\n item,\n key: keyExtractor(item, index),\n index\n }));\n });\n }\n\n _createOnViewableItemsChanged(onViewableItemsChanged) {\n return info => {\n var numColumns = numColumnsOrDefault(this.props.numColumns);\n\n if (onViewableItemsChanged) {\n if (numColumns > 1) {\n var changed = [];\n var viewableItems = [];\n info.viewableItems.forEach(v => this._pushMultiColumnViewable(viewableItems, v));\n info.changed.forEach(v => this._pushMultiColumnViewable(changed, v));\n onViewableItemsChanged({\n viewableItems,\n changed\n });\n } else {\n onViewableItemsChanged(info);\n }\n }\n };\n }\n\n render() {\n var _this$props2 = this.props,\n numColumns = _this$props2.numColumns,\n columnWrapperStyle = _this$props2.columnWrapperStyle,\n _removeClippedSubviews = _this$props2.removeClippedSubviews,\n restProps = _objectWithoutPropertiesLoose(_this$props2, _excluded);\n\n return /*#__PURE__*/React.createElement(VirtualizedList, _extends({}, restProps, {\n getItem: this._getItem,\n getItemCount: this._getItemCount,\n keyExtractor: this._keyExtractor,\n ref: this._captureRef,\n viewabilityConfigCallbackPairs: this._virtualizedListPairs,\n removeClippedSubviews: removeClippedSubviewsOrDefault(_removeClippedSubviews)\n }, this._renderer()));\n }\n\n}\n\nvar styles = StyleSheet.create({\n row: {\n flexDirection: 'row'\n }\n});\nexport default FlatList;","/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n */\nimport FlatList from '../../vendor/react-native/FlatList';\nexport default FlatList;","import type { NavigationState, PartialState, Route } from './types';\n\ntype ResetState =\n | PartialState\n | NavigationState\n | (Omit & {\n routes: Omit, 'key'>[];\n });\n\nexport type Action =\n | {\n type: 'GO_BACK';\n source?: string;\n target?: string;\n }\n | {\n type: 'NAVIGATE';\n payload:\n | {\n key: string;\n name?: undefined;\n params?: object;\n path?: string;\n merge?: boolean;\n }\n | {\n name: string;\n key?: string;\n params?: object;\n path?: string;\n merge?: boolean;\n };\n source?: string;\n target?: string;\n }\n | {\n type: 'RESET';\n payload: ResetState | undefined;\n source?: string;\n target?: string;\n }\n | {\n type: 'SET_PARAMS';\n payload: { params?: object };\n source?: string;\n target?: string;\n };\n\nexport function goBack(): Action {\n return { type: 'GO_BACK' };\n}\n\nexport function navigate(\n options:\n | { key: string; params?: object; path?: string; merge?: boolean }\n | {\n name: string;\n key?: string;\n params?: object;\n path?: string;\n merge?: boolean;\n }\n): Action;\n// eslint-disable-next-line no-redeclare\nexport function navigate(name: string, params?: object): Action;\n// eslint-disable-next-line no-redeclare\nexport function navigate(...args: any): Action {\n if (typeof args[0] === 'string') {\n return { type: 'NAVIGATE', payload: { name: args[0], params: args[1] } };\n } else {\n const payload = args[0] || {};\n\n if (!payload.hasOwnProperty('key') && !payload.hasOwnProperty('name')) {\n throw new Error(\n 'You need to specify name or key when calling navigate with an object as the argument. See https://reactnavigation.org/docs/navigation-actions#navigate for usage.'\n );\n }\n\n return { type: 'NAVIGATE', payload };\n }\n}\n\nexport function reset(state: ResetState | undefined): Action {\n return { type: 'RESET', payload: state };\n}\n\nexport function setParams(params: object): Action {\n return { type: 'SET_PARAMS', payload: { params } };\n}\n","import { nanoid } from 'nanoid/non-secure';\n\nimport type {\n CommonNavigationAction,\n NavigationState,\n PartialState,\n} from './types';\n\n/**\n * Base router object that can be used when writing custom routers.\n * This provides few helper methods to handle common actions such as `RESET`.\n */\nconst BaseRouter = {\n getStateForAction(\n state: State,\n action: CommonNavigationAction\n ): State | PartialState | null {\n switch (action.type) {\n case 'SET_PARAMS': {\n const index = action.source\n ? state.routes.findIndex((r) => r.key === action.source)\n : state.index;\n\n if (index === -1) {\n return null;\n }\n\n return {\n ...state,\n routes: state.routes.map((r, i) =>\n i === index\n ? { ...r, params: { ...r.params, ...action.payload.params } }\n : r\n ),\n };\n }\n\n case 'RESET': {\n const nextState = action.payload as State | PartialState;\n\n if (\n nextState.routes.length === 0 ||\n nextState.routes.some(\n (route: { name: string }) => !state.routeNames.includes(route.name)\n )\n ) {\n return null;\n }\n\n if (nextState.stale === false) {\n if (\n state.routeNames.length !== nextState.routeNames.length ||\n nextState.routeNames.some(\n (name) => !state.routeNames.includes(name)\n )\n ) {\n return null;\n }\n\n return {\n ...nextState,\n routes: nextState.routes.map((route) =>\n route.key ? route : { ...route, key: `${route.name}-${nanoid()}` }\n ),\n };\n }\n\n return nextState;\n }\n\n default:\n return null;\n }\n },\n\n shouldActionChangeFocus(action: CommonNavigationAction) {\n return action.type === 'NAVIGATE';\n },\n};\n\nexport default BaseRouter;\n","import { nanoid } from 'nanoid/non-secure';\n\nimport BaseRouter from './BaseRouter';\nimport type {\n CommonNavigationAction,\n DefaultRouterOptions,\n NavigationState,\n ParamListBase,\n PartialState,\n Route,\n Router,\n} from './types';\n\nexport type TabActionType = {\n type: 'JUMP_TO';\n payload: { name: string; params?: object };\n source?: string;\n target?: string;\n};\n\nexport type BackBehavior =\n | 'initialRoute'\n | 'firstRoute'\n | 'history'\n | 'order'\n | 'none';\n\nexport type TabRouterOptions = DefaultRouterOptions & {\n backBehavior?: BackBehavior;\n};\n\nexport type TabNavigationState = Omit<\n NavigationState,\n 'history'\n> & {\n /**\n * Type of the router, in this case, it's tab.\n */\n type: 'tab';\n /**\n * List of previously visited route keys.\n */\n history: { type: 'route'; key: string }[];\n};\n\nexport type TabActionHelpers = {\n /**\n * Jump to an existing tab.\n *\n * @param name Name of the route for the tab.\n * @param [params] Params object for the route.\n */\n jumpTo>(\n ...args: undefined extends ParamList[RouteName]\n ? [screen: RouteName] | [screen: RouteName, params: ParamList[RouteName]]\n : [screen: RouteName, params: ParamList[RouteName]]\n ): void;\n};\n\nconst TYPE_ROUTE = 'route' as const;\n\nexport const TabActions = {\n jumpTo(name: string, params?: object): TabActionType {\n return { type: 'JUMP_TO', payload: { name, params } };\n },\n};\n\nconst getRouteHistory = (\n routes: Route[],\n index: number,\n backBehavior: BackBehavior,\n initialRouteName: string | undefined\n) => {\n const history = [{ type: TYPE_ROUTE, key: routes[index].key }];\n let initialRouteIndex;\n\n switch (backBehavior) {\n case 'order':\n for (let i = index; i > 0; i--) {\n history.unshift({ type: TYPE_ROUTE, key: routes[i - 1].key });\n }\n break;\n case 'firstRoute':\n if (index !== 0) {\n history.unshift({\n type: TYPE_ROUTE,\n key: routes[0].key,\n });\n }\n break;\n case 'initialRoute':\n initialRouteIndex = routes.findIndex(\n (route) => route.name === initialRouteName\n );\n initialRouteIndex = initialRouteIndex === -1 ? 0 : initialRouteIndex;\n\n if (index !== initialRouteIndex) {\n history.unshift({\n type: TYPE_ROUTE,\n key: routes[initialRouteIndex].key,\n });\n }\n break;\n case 'history':\n // The history will fill up on navigation\n break;\n }\n\n return history;\n};\n\nconst changeIndex = (\n state: TabNavigationState,\n index: number,\n backBehavior: BackBehavior,\n initialRouteName: string | undefined\n) => {\n let history;\n\n if (backBehavior === 'history') {\n const currentKey = state.routes[index].key;\n\n history = state.history\n .filter((it) => (it.type === 'route' ? it.key !== currentKey : false))\n .concat({ type: TYPE_ROUTE, key: currentKey });\n } else {\n history = getRouteHistory(\n state.routes,\n index,\n backBehavior,\n initialRouteName\n );\n }\n\n return {\n ...state,\n index,\n history,\n };\n};\n\nexport default function TabRouter({\n initialRouteName,\n backBehavior = 'firstRoute',\n}: TabRouterOptions) {\n const router: Router<\n TabNavigationState,\n TabActionType | CommonNavigationAction\n > = {\n ...BaseRouter,\n\n type: 'tab',\n\n getInitialState({ routeNames, routeParamList }) {\n const index =\n initialRouteName !== undefined && routeNames.includes(initialRouteName)\n ? routeNames.indexOf(initialRouteName)\n : 0;\n\n const routes = routeNames.map((name) => ({\n name,\n key: `${name}-${nanoid()}`,\n params: routeParamList[name],\n }));\n\n const history = getRouteHistory(\n routes,\n index,\n backBehavior,\n initialRouteName\n );\n\n return {\n stale: false,\n type: 'tab',\n key: `tab-${nanoid()}`,\n index,\n routeNames,\n history,\n routes,\n };\n },\n\n getRehydratedState(partialState, { routeNames, routeParamList }) {\n let state = partialState;\n\n if (state.stale === false) {\n return state;\n }\n\n const routes = routeNames.map((name) => {\n const route = (\n state as PartialState>\n ).routes.find((r) => r.name === name);\n\n return {\n ...route,\n name,\n key:\n route && route.name === name && route.key\n ? route.key\n : `${name}-${nanoid()}`,\n params:\n routeParamList[name] !== undefined\n ? {\n ...routeParamList[name],\n ...(route ? route.params : undefined),\n }\n : route\n ? route.params\n : undefined,\n } as Route;\n });\n\n const index = Math.min(\n Math.max(routeNames.indexOf(state.routes[state?.index ?? 0]?.name), 0),\n routes.length - 1\n );\n\n const history =\n state.history?.filter((it) => routes.find((r) => r.key === it.key)) ??\n [];\n\n return changeIndex(\n {\n stale: false,\n type: 'tab',\n key: `tab-${nanoid()}`,\n index,\n routeNames,\n history,\n routes,\n },\n index,\n backBehavior,\n initialRouteName\n );\n },\n\n getStateForRouteNamesChange(\n state,\n { routeNames, routeParamList, routeKeyChanges }\n ) {\n const routes = routeNames.map(\n (name) =>\n state.routes.find(\n (r) => r.name === name && !routeKeyChanges.includes(r.name)\n ) || {\n name,\n key: `${name}-${nanoid()}`,\n params: routeParamList[name],\n }\n );\n\n const index = Math.max(\n 0,\n routeNames.indexOf(state.routes[state.index].name)\n );\n\n let history = state.history.filter(\n // Type will always be 'route' for tabs, but could be different in a router extending this (e.g. drawer)\n (it) => it.type !== 'route' || routes.find((r) => r.key === it.key)\n );\n\n if (!history.length) {\n history = getRouteHistory(\n routes,\n index,\n backBehavior,\n initialRouteName\n );\n }\n\n return {\n ...state,\n history,\n routeNames,\n routes,\n index,\n };\n },\n\n getStateForRouteFocus(state, key) {\n const index = state.routes.findIndex((r) => r.key === key);\n\n if (index === -1 || index === state.index) {\n return state;\n }\n\n return changeIndex(state, index, backBehavior, initialRouteName);\n },\n\n getStateForAction(state, action, { routeParamList }) {\n switch (action.type) {\n case 'JUMP_TO':\n case 'NAVIGATE': {\n let index = -1;\n\n if (action.type === 'NAVIGATE' && action.payload.key) {\n index = state.routes.findIndex(\n (route) => route.key === action.payload.key\n );\n } else {\n index = state.routes.findIndex(\n (route) => route.name === action.payload.name\n );\n }\n\n if (index === -1) {\n return null;\n }\n\n return changeIndex(\n {\n ...state,\n routes: state.routes.map((route, i) => {\n if (i !== index) {\n return route;\n }\n\n let params;\n\n if (action.type === 'NAVIGATE' && action.payload.merge) {\n params =\n action.payload.params !== undefined ||\n routeParamList[route.name] !== undefined\n ? {\n ...routeParamList[route.name],\n ...route.params,\n ...action.payload.params,\n }\n : route.params;\n } else {\n params =\n routeParamList[route.name] !== undefined\n ? {\n ...routeParamList[route.name],\n ...action.payload.params,\n }\n : action.payload.params;\n }\n\n const path =\n action.type === 'NAVIGATE' && action.payload.path != null\n ? action.payload.path\n : route.path;\n\n return params !== route.params || path !== route.path\n ? { ...route, path, params }\n : route;\n }),\n },\n index,\n backBehavior,\n initialRouteName\n );\n }\n\n case 'GO_BACK': {\n if (state.history.length === 1) {\n return null;\n }\n\n const previousKey = state.history[state.history.length - 2].key;\n const index = state.routes.findIndex(\n (route) => route.key === previousKey\n );\n\n if (index === -1) {\n return null;\n }\n\n return {\n ...state,\n history: state.history.slice(0, -1),\n index,\n };\n }\n\n default:\n return BaseRouter.getStateForAction(state, action);\n }\n },\n\n shouldActionChangeFocus(action) {\n return action.type === 'NAVIGATE';\n },\n\n actionCreators: TabActions,\n };\n\n return router;\n}\n","import { nanoid } from 'nanoid/non-secure';\n\nimport TabRouter, {\n TabActionHelpers,\n TabActions,\n TabActionType,\n TabNavigationState,\n TabRouterOptions,\n} from './TabRouter';\nimport type {\n CommonNavigationAction,\n ParamListBase,\n PartialState,\n Router,\n} from './types';\nexport type DrawerStatus = 'open' | 'closed';\n\nexport type DrawerActionType =\n | TabActionType\n | {\n type: 'OPEN_DRAWER' | 'CLOSE_DRAWER' | 'TOGGLE_DRAWER';\n source?: string;\n target?: string;\n };\n\nexport type DrawerRouterOptions = TabRouterOptions & {\n defaultStatus?: DrawerStatus;\n};\n\nexport type DrawerNavigationState = Omit<\n TabNavigationState,\n 'type' | 'history'\n> & {\n /**\n * Type of the router, in this case, it's drawer.\n */\n type: 'drawer';\n /**\n * Default status of the drawer.\n */\n default: DrawerStatus;\n /**\n * List of previously visited route keys and drawer open status.\n */\n history: (\n | { type: 'route'; key: string }\n | { type: 'drawer'; status: DrawerStatus }\n )[];\n};\n\nexport type DrawerActionHelpers =\n TabActionHelpers & {\n /**\n * Open the drawer sidebar.\n */\n openDrawer(): void;\n\n /**\n * Close the drawer sidebar.\n */\n closeDrawer(): void;\n\n /**\n * Open the drawer sidebar if closed, or close if opened.\n */\n toggleDrawer(): void;\n };\n\nexport const DrawerActions = {\n ...TabActions,\n openDrawer(): DrawerActionType {\n return { type: 'OPEN_DRAWER' };\n },\n closeDrawer(): DrawerActionType {\n return { type: 'CLOSE_DRAWER' };\n },\n toggleDrawer(): DrawerActionType {\n return { type: 'TOGGLE_DRAWER' };\n },\n};\n\nexport default function DrawerRouter({\n defaultStatus = 'closed',\n ...rest\n}: DrawerRouterOptions): Router<\n DrawerNavigationState,\n DrawerActionType | CommonNavigationAction\n> {\n const router = TabRouter(rest) as unknown as Router<\n DrawerNavigationState,\n TabActionType | CommonNavigationAction\n >;\n\n const isDrawerInHistory = (\n state:\n | DrawerNavigationState\n | PartialState>\n ) => Boolean(state.history?.some((it) => it.type === 'drawer'));\n\n const addDrawerToHistory = (\n state: DrawerNavigationState\n ): DrawerNavigationState => {\n if (isDrawerInHistory(state)) {\n return state;\n }\n\n return {\n ...state,\n history: [\n ...state.history,\n {\n type: 'drawer',\n status: defaultStatus === 'open' ? 'closed' : 'open',\n },\n ],\n };\n };\n\n const removeDrawerFromHistory = (\n state: DrawerNavigationState\n ): DrawerNavigationState => {\n if (!isDrawerInHistory(state)) {\n return state;\n }\n\n return {\n ...state,\n history: state.history.filter((it) => it.type !== 'drawer'),\n };\n };\n\n const openDrawer = (\n state: DrawerNavigationState\n ): DrawerNavigationState => {\n if (defaultStatus === 'open') {\n return removeDrawerFromHistory(state);\n }\n\n return addDrawerToHistory(state);\n };\n\n const closeDrawer = (\n state: DrawerNavigationState\n ): DrawerNavigationState => {\n if (defaultStatus === 'open') {\n return addDrawerToHistory(state);\n }\n\n return removeDrawerFromHistory(state);\n };\n\n return {\n ...router,\n\n type: 'drawer',\n\n getInitialState({ routeNames, routeParamList, routeGetIdList }) {\n const state = router.getInitialState({\n routeNames,\n routeParamList,\n routeGetIdList,\n });\n\n return {\n ...state,\n default: defaultStatus,\n stale: false,\n type: 'drawer',\n key: `drawer-${nanoid()}`,\n };\n },\n\n getRehydratedState(\n partialState,\n { routeNames, routeParamList, routeGetIdList }\n ) {\n if (partialState.stale === false) {\n return partialState;\n }\n\n let state = router.getRehydratedState(partialState, {\n routeNames,\n routeParamList,\n routeGetIdList,\n });\n\n if (isDrawerInHistory(partialState)) {\n // Re-sync the drawer entry in history to correct it if it was wrong\n state = removeDrawerFromHistory(state);\n state = addDrawerToHistory(state);\n }\n\n return {\n ...state,\n default: defaultStatus,\n type: 'drawer',\n key: `drawer-${nanoid()}`,\n };\n },\n\n getStateForRouteFocus(state, key) {\n const result = router.getStateForRouteFocus(state, key);\n\n return closeDrawer(result);\n },\n\n getStateForAction(state, action, options) {\n switch (action.type) {\n case 'OPEN_DRAWER':\n return openDrawer(state);\n\n case 'CLOSE_DRAWER':\n return closeDrawer(state);\n\n case 'TOGGLE_DRAWER':\n if (isDrawerInHistory(state)) {\n return removeDrawerFromHistory(state);\n }\n\n return addDrawerToHistory(state);\n\n case 'JUMP_TO':\n case 'NAVIGATE': {\n const result = router.getStateForAction(state, action, options);\n\n if (result != null && result.index !== state.index) {\n return closeDrawer(result as DrawerNavigationState);\n }\n\n return result;\n }\n\n case 'GO_BACK':\n if (isDrawerInHistory(state)) {\n return removeDrawerFromHistory(state);\n }\n\n return router.getStateForAction(state, action, options);\n\n default:\n return router.getStateForAction(state, action, options);\n }\n },\n\n actionCreators: DrawerActions,\n };\n}\n","import { nanoid } from 'nanoid/non-secure';\n\nimport BaseRouter from './BaseRouter';\nimport type {\n CommonNavigationAction,\n DefaultRouterOptions,\n NavigationState,\n ParamListBase,\n Route,\n Router,\n} from './types';\n\nexport type StackActionType =\n | {\n type: 'REPLACE';\n payload: { name: string; key?: string | undefined; params?: object };\n source?: string;\n target?: string;\n }\n | {\n type: 'PUSH';\n payload: { name: string; params?: object };\n source?: string;\n target?: string;\n }\n | {\n type: 'POP';\n payload: { count: number };\n source?: string;\n target?: string;\n }\n | {\n type: 'POP_TO_TOP';\n source?: string;\n target?: string;\n };\n\nexport type StackRouterOptions = DefaultRouterOptions;\n\nexport type StackNavigationState =\n NavigationState & {\n /**\n * Type of the router, in this case, it's stack.\n */\n type: 'stack';\n };\n\nexport type StackActionHelpers = {\n /**\n * Replace the current route with a new one.\n *\n * @param name Route name of the new route.\n * @param [params] Params object for the new route.\n */\n replace(\n ...args: undefined extends ParamList[RouteName]\n ? [screen: RouteName] | [screen: RouteName, params: ParamList[RouteName]]\n : [screen: RouteName, params: ParamList[RouteName]]\n ): void;\n\n /**\n * Push a new screen onto the stack.\n *\n * @param name Name of the route for the tab.\n * @param [params] Params object for the route.\n */\n push(\n ...args: undefined extends ParamList[RouteName]\n ? [screen: RouteName] | [screen: RouteName, params: ParamList[RouteName]]\n : [screen: RouteName, params: ParamList[RouteName]]\n ): void;\n\n /**\n * Pop a screen from the stack.\n */\n pop(count?: number): void;\n\n /**\n * Pop to the first route in the stack, dismissing all other screens.\n */\n popToTop(): void;\n};\n\nexport const StackActions = {\n replace(name: string, params?: object): StackActionType {\n return { type: 'REPLACE', payload: { name, params } };\n },\n push(name: string, params?: object): StackActionType {\n return { type: 'PUSH', payload: { name, params } };\n },\n pop(count: number = 1): StackActionType {\n return { type: 'POP', payload: { count } };\n },\n popToTop(): StackActionType {\n return { type: 'POP_TO_TOP' };\n },\n};\n\nexport default function StackRouter(options: StackRouterOptions) {\n const router: Router<\n StackNavigationState,\n CommonNavigationAction | StackActionType\n > = {\n ...BaseRouter,\n\n type: 'stack',\n\n getInitialState({ routeNames, routeParamList }) {\n const initialRouteName =\n options.initialRouteName !== undefined &&\n routeNames.includes(options.initialRouteName)\n ? options.initialRouteName\n : routeNames[0];\n\n return {\n stale: false,\n type: 'stack',\n key: `stack-${nanoid()}`,\n index: 0,\n routeNames,\n routes: [\n {\n key: `${initialRouteName}-${nanoid()}`,\n name: initialRouteName,\n params: routeParamList[initialRouteName],\n },\n ],\n };\n },\n\n getRehydratedState(partialState, { routeNames, routeParamList }) {\n let state = partialState;\n\n if (state.stale === false) {\n return state;\n }\n\n const routes = state.routes\n .filter((route) => routeNames.includes(route.name))\n .map(\n (route) =>\n ({\n ...route,\n key: route.key || `${route.name}-${nanoid()}`,\n params:\n routeParamList[route.name] !== undefined\n ? {\n ...routeParamList[route.name],\n ...route.params,\n }\n : route.params,\n } as Route)\n );\n\n if (routes.length === 0) {\n const initialRouteName =\n options.initialRouteName !== undefined\n ? options.initialRouteName\n : routeNames[0];\n\n routes.push({\n key: `${initialRouteName}-${nanoid()}`,\n name: initialRouteName,\n params: routeParamList[initialRouteName],\n });\n }\n\n return {\n stale: false,\n type: 'stack',\n key: `stack-${nanoid()}`,\n index: routes.length - 1,\n routeNames,\n routes,\n };\n },\n\n getStateForRouteNamesChange(\n state,\n { routeNames, routeParamList, routeKeyChanges }\n ) {\n const routes = state.routes.filter(\n (route) =>\n routeNames.includes(route.name) &&\n !routeKeyChanges.includes(route.name)\n );\n\n if (routes.length === 0) {\n const initialRouteName =\n options.initialRouteName !== undefined &&\n routeNames.includes(options.initialRouteName)\n ? options.initialRouteName\n : routeNames[0];\n\n routes.push({\n key: `${initialRouteName}-${nanoid()}`,\n name: initialRouteName,\n params: routeParamList[initialRouteName],\n });\n }\n\n return {\n ...state,\n routeNames,\n routes,\n index: Math.min(state.index, routes.length - 1),\n };\n },\n\n getStateForRouteFocus(state, key) {\n const index = state.routes.findIndex((r) => r.key === key);\n\n if (index === -1 || index === state.index) {\n return state;\n }\n\n return {\n ...state,\n index,\n routes: state.routes.slice(0, index + 1),\n };\n },\n\n getStateForAction(state, action, options) {\n const { routeParamList } = options;\n\n switch (action.type) {\n case 'REPLACE': {\n const index =\n action.target === state.key && action.source\n ? state.routes.findIndex((r) => r.key === action.source)\n : state.index;\n\n if (index === -1) {\n return null;\n }\n\n const { name, key, params } = action.payload;\n\n if (!state.routeNames.includes(name)) {\n return null;\n }\n\n return {\n ...state,\n routes: state.routes.map((route, i) =>\n i === index\n ? {\n key: key !== undefined ? key : `${name}-${nanoid()}`,\n name,\n params:\n routeParamList[name] !== undefined\n ? {\n ...routeParamList[name],\n ...params,\n }\n : params,\n }\n : route\n ),\n };\n }\n\n case 'PUSH':\n if (state.routeNames.includes(action.payload.name)) {\n const getId = options.routeGetIdList[action.payload.name];\n const id = getId?.({ params: action.payload.params });\n\n const route = id\n ? state.routes.find(\n (route) =>\n route.name === action.payload.name &&\n id === getId?.({ params: route.params })\n )\n : undefined;\n\n let routes: Route[];\n\n if (route) {\n routes = state.routes.filter((r) => r.key !== route.key);\n routes.push({\n ...route,\n params:\n routeParamList[action.payload.name] !== undefined\n ? {\n ...routeParamList[action.payload.name],\n ...action.payload.params,\n }\n : action.payload.params,\n });\n } else {\n routes = [\n ...state.routes,\n {\n key: `${action.payload.name}-${nanoid()}`,\n name: action.payload.name,\n params:\n routeParamList[action.payload.name] !== undefined\n ? {\n ...routeParamList[action.payload.name],\n ...action.payload.params,\n }\n : action.payload.params,\n },\n ];\n }\n\n return {\n ...state,\n index: routes.length - 1,\n routes,\n };\n }\n\n return null;\n\n case 'POP': {\n const index =\n action.target === state.key && action.source\n ? state.routes.findIndex((r) => r.key === action.source)\n : state.index;\n\n if (index > 0) {\n const count = Math.max(index - action.payload.count + 1, 1);\n const routes = state.routes\n .slice(0, count)\n .concat(state.routes.slice(index + 1));\n\n return {\n ...state,\n index: routes.length - 1,\n routes,\n };\n }\n\n return null;\n }\n\n case 'POP_TO_TOP':\n return router.getStateForAction(\n state,\n {\n type: 'POP',\n payload: { count: state.routes.length - 1 },\n },\n options\n );\n\n case 'NAVIGATE':\n if (\n action.payload.name !== undefined &&\n !state.routeNames.includes(action.payload.name)\n ) {\n return null;\n }\n\n if (action.payload.key || action.payload.name) {\n // If the route already exists, navigate to that\n let index = -1;\n\n const getId =\n // `getId` and `key` can't be used together\n action.payload.key === undefined &&\n action.payload.name !== undefined\n ? options.routeGetIdList[action.payload.name]\n : undefined;\n const id = getId?.({ params: action.payload.params });\n\n if (id) {\n index = state.routes.findIndex(\n (route) =>\n route.name === action.payload.name &&\n id === getId?.({ params: route.params })\n );\n } else if (\n (state.routes[state.index].name === action.payload.name &&\n action.payload.key === undefined) ||\n state.routes[state.index].key === action.payload.key\n ) {\n index = state.index;\n } else {\n for (let i = state.routes.length - 1; i >= 0; i--) {\n if (\n (state.routes[i].name === action.payload.name &&\n action.payload.key === undefined) ||\n state.routes[i].key === action.payload.key\n ) {\n index = i;\n break;\n }\n }\n }\n\n if (\n index === -1 &&\n action.payload.key &&\n action.payload.name === undefined\n ) {\n return null;\n }\n\n if (index === -1 && action.payload.name !== undefined) {\n const routes = [\n ...state.routes,\n {\n key:\n action.payload.key ?? `${action.payload.name}-${nanoid()}`,\n name: action.payload.name,\n path: action.payload.path,\n params:\n routeParamList[action.payload.name] !== undefined\n ? {\n ...routeParamList[action.payload.name],\n ...action.payload.params,\n }\n : action.payload.params,\n },\n ];\n\n return {\n ...state,\n routes,\n index: routes.length - 1,\n };\n }\n\n const route = state.routes[index];\n\n let params;\n\n if (action.payload.merge) {\n params =\n action.payload.params !== undefined ||\n routeParamList[route.name] !== undefined\n ? {\n ...routeParamList[route.name],\n ...route.params,\n ...action.payload.params,\n }\n : route.params;\n } else {\n params =\n routeParamList[route.name] !== undefined\n ? {\n ...routeParamList[route.name],\n ...action.payload.params,\n }\n : action.payload.params;\n }\n\n return {\n ...state,\n index,\n routes: [\n ...state.routes.slice(0, index),\n params !== route.params ||\n (action.payload.path && action.payload.path !== route.path)\n ? {\n ...route,\n path: action.payload.path ?? route.path,\n params,\n }\n : state.routes[index],\n ],\n };\n }\n\n return null;\n\n case 'GO_BACK':\n if (state.index > 0) {\n return router.getStateForAction(\n state,\n {\n type: 'POP',\n payload: { count: 1 },\n target: action.target,\n source: action.source,\n },\n options\n );\n }\n\n return null;\n\n default:\n return BaseRouter.getStateForAction(state, action);\n }\n },\n\n actionCreators: StackActions,\n };\n\n return router;\n}\n","import { CommonActions } from '@react-navigation/routers';\n\nimport type {\n NavigationContainerEventMap,\n NavigationContainerRef,\n NavigationContainerRefWithCurrent,\n} from './types';\n\nexport const NOT_INITIALIZED_ERROR =\n \"The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.\";\n\nexport default function createNavigationContainerRef<\n ParamList extends {} = ReactNavigation.RootParamList\n>(): NavigationContainerRefWithCurrent {\n const methods = [\n ...Object.keys(CommonActions),\n 'addListener',\n 'removeListener',\n 'resetRoot',\n 'dispatch',\n 'isFocused',\n 'canGoBack',\n 'getRootState',\n 'getState',\n 'getParent',\n 'getCurrentRoute',\n 'getCurrentOptions',\n ] as const;\n\n const listeners: Record void)[]> = {};\n\n const removeListener = (\n event: string,\n callback: (...args: any[]) => void\n ) => {\n if (listeners[event]) {\n listeners[event] = listeners[event].filter((cb) => cb !== callback);\n }\n };\n\n let current: NavigationContainerRef | null = null;\n\n const ref: NavigationContainerRefWithCurrent = {\n get current() {\n return current;\n },\n set current(value: NavigationContainerRef | null) {\n current = value;\n\n if (value != null) {\n Object.entries(listeners).forEach(([event, callbacks]) => {\n callbacks.forEach((callback) => {\n value.addListener(\n event as keyof NavigationContainerEventMap,\n callback\n );\n });\n });\n }\n },\n isReady: () => {\n if (current == null) {\n return false;\n }\n\n return current.isReady();\n },\n ...methods.reduce((acc, name) => {\n acc[name] = (...args: any[]) => {\n if (current == null) {\n switch (name) {\n case 'addListener': {\n const [event, callback] = args;\n\n listeners[event] = listeners[event] || [];\n listeners[event].push(callback);\n\n return () => removeListener(event, callback);\n }\n case 'removeListener': {\n const [event, callback] = args;\n\n removeListener(event, callback);\n break;\n }\n default:\n console.error(NOT_INITIALIZED_ERROR);\n }\n } else {\n // @ts-expect-error: this is ok\n return current[name](...args);\n }\n };\n return acc;\n }, {}),\n };\n\n return ref;\n}\n","import * as React from 'react';\n\ntype Props = {\n children: React.ReactNode;\n};\n\nconst MULTIPLE_NAVIGATOR_ERROR = `Another navigator is already registered for this container. You likely have multiple navigators under a single \"NavigationContainer\" or \"Screen\". Make sure each navigator is under a separate \"Screen\" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.`;\n\nexport const SingleNavigatorContext = React.createContext<\n | {\n register(key: string): void;\n unregister(key: string): void;\n }\n | undefined\n>(undefined);\n\n/**\n * Component which ensures that there's only one navigator nested under it.\n */\nexport default function EnsureSingleNavigator({ children }: Props) {\n const navigatorKeyRef = React.useRef();\n\n const value = React.useMemo(\n () => ({\n register(key: string) {\n const currentKey = navigatorKeyRef.current;\n\n if (currentKey !== undefined && key !== currentKey) {\n throw new Error(MULTIPLE_NAVIGATOR_ERROR);\n }\n\n navigatorKeyRef.current = key;\n },\n unregister(key: string) {\n const currentKey = navigatorKeyRef.current;\n\n if (key !== currentKey) {\n return;\n }\n\n navigatorKeyRef.current = undefined;\n },\n }),\n []\n );\n\n return (\n \n {children}\n \n );\n}\n","import type { InitialState } from '@react-navigation/routers';\n\nexport default function findFocusedRoute(state: InitialState) {\n let current: InitialState | undefined = state;\n\n while (current?.routes[current.index ?? 0].state != null) {\n current = current.routes[current.index ?? 0].state;\n }\n\n const route = current?.routes[current?.index ?? 0];\n\n return route;\n}\n","import type {\n NavigationAction,\n NavigationState,\n ParamListBase,\n} from '@react-navigation/routers';\nimport * as React from 'react';\n\nimport type { NavigationHelpers } from './types';\n\nexport type ListenerMap = {\n action: ChildActionListener;\n focus: FocusedNavigationListener;\n};\n\nexport type KeyedListenerMap = {\n getState: GetStateListener;\n beforeRemove: ChildBeforeRemoveListener;\n};\n\nexport type AddListener = (\n type: T,\n listener: ListenerMap[T]\n) => void;\n\nexport type AddKeyedListener = (\n type: T,\n key: string,\n listener: KeyedListenerMap[T]\n) => void;\n\nexport type ChildActionListener = (\n action: NavigationAction,\n visitedNavigators?: Set\n) => boolean;\n\nexport type FocusedNavigationCallback = (\n navigation: NavigationHelpers\n) => T;\n\nexport type FocusedNavigationListener = (\n callback: FocusedNavigationCallback\n) => {\n handled: boolean;\n result: T;\n};\n\nexport type GetStateListener = () => NavigationState;\n\nexport type ChildBeforeRemoveListener = (action: NavigationAction) => boolean;\n\n/**\n * Context which holds the required helpers needed to build nested navigators.\n */\nconst NavigationBuilderContext = React.createContext<{\n onAction?: (\n action: NavigationAction,\n visitedNavigators?: Set\n ) => boolean;\n addListener?: AddListener;\n addKeyedListener?: AddKeyedListener;\n onRouteFocus?: (key: string) => void;\n onDispatchAction: (action: NavigationAction, noop: boolean) => void;\n onOptionsChange: (options: object) => void;\n stackRef?: React.MutableRefObject;\n}>({\n onDispatchAction: () => undefined,\n onOptionsChange: () => undefined,\n});\n\nexport default NavigationBuilderContext;\n","import type { ParamListBase } from '@react-navigation/routers';\nimport * as React from 'react';\n\nimport type { NavigationContainerRef } from './types';\n\n/**\n * Context which holds the route prop for a screen.\n */\nconst NavigationContainerRefContext = React.createContext<\n NavigationContainerRef | undefined\n>(undefined);\n\nexport default NavigationContainerRefContext;\n","import type { ParamListBase } from '@react-navigation/routers';\nimport * as React from 'react';\n\nimport type { NavigationProp } from './types';\n\n/**\n * Context which holds the navigation prop for a screen.\n */\nconst NavigationContext = React.createContext<\n NavigationProp | undefined\n>(undefined);\n\nexport default NavigationContext;\n","import type { Route } from '@react-navigation/routers';\nimport * as React from 'react';\n\n/**\n * Context which holds the route prop for a screen.\n */\nconst NavigationRouteContext = React.createContext | undefined>(\n undefined\n);\n\nexport default NavigationRouteContext;\n","import type { NavigationState, PartialState } from '@react-navigation/routers';\nimport * as React from 'react';\n\nconst MISSING_CONTEXT_ERROR =\n \"Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.\";\n\nexport default React.createContext<{\n isDefault?: true;\n state?: NavigationState | PartialState;\n getKey: () => string | undefined;\n setKey: (key: string) => void;\n getState: () => NavigationState | PartialState | undefined;\n setState: (\n state: NavigationState | PartialState | undefined\n ) => void;\n getIsInitial: () => boolean;\n addOptionsGetter?: (\n key: string,\n getter: () => object | undefined | null\n ) => void;\n}>({\n isDefault: true,\n\n get getKey(): any {\n throw new Error(MISSING_CONTEXT_ERROR);\n },\n get setKey(): any {\n throw new Error(MISSING_CONTEXT_ERROR);\n },\n get getState(): any {\n throw new Error(MISSING_CONTEXT_ERROR);\n },\n get setState(): any {\n throw new Error(MISSING_CONTEXT_ERROR);\n },\n get getIsInitial(): any {\n throw new Error(MISSING_CONTEXT_ERROR);\n },\n});\n","import type { NavigationAction } from '@react-navigation/routers';\nimport * as React from 'react';\n\nconst UnhandledActionContext = React.createContext<\n ((action: NavigationAction) => void) | undefined\n>(undefined);\n\nexport default UnhandledActionContext;\n","import * as React from 'react';\n\nimport type { ListenerMap } from './NavigationBuilderContext';\n\n/**\n * Hook which lets child navigators add action listeners.\n */\nexport default function useChildListeners() {\n const { current: listeners } = React.useRef<{\n [K in keyof ListenerMap]: ListenerMap[K][];\n }>({\n action: [],\n focus: [],\n });\n\n const addListener = React.useCallback(\n (type: T, listener: ListenerMap[T]) => {\n listeners[type].push(listener);\n\n let removed = false;\n return () => {\n const index = listeners[type].indexOf(listener);\n\n if (!removed && index > -1) {\n removed = true;\n listeners[type].splice(index, 1);\n }\n };\n },\n [listeners]\n );\n\n return {\n listeners,\n addListener,\n };\n}\n","import * as React from 'react';\n\nimport type { EventArg, EventConsumer, EventEmitter } from './types';\n\nexport type NavigationEventEmitter> =\n EventEmitter & {\n create: (target: string) => EventConsumer;\n };\n\ntype Listeners = ((e: any) => void)[];\n\n/**\n * Hook to manage the event system used by the navigator to notify screens of various events.\n */\nexport default function useEventEmitter>(\n listen?: (e: any) => void\n): NavigationEventEmitter {\n const listenRef = React.useRef(listen);\n\n React.useEffect(() => {\n listenRef.current = listen;\n });\n\n const listeners = React.useRef>>(\n Object.create(null)\n );\n\n const create = React.useCallback((target: string) => {\n const removeListener = (type: string, callback: (data: any) => void) => {\n const callbacks = listeners.current[type]\n ? listeners.current[type][target]\n : undefined;\n\n if (!callbacks) {\n return;\n }\n\n const index = callbacks.indexOf(callback);\n\n if (index > -1) {\n callbacks.splice(index, 1);\n }\n };\n\n const addListener = (type: string, callback: (data: any) => void) => {\n listeners.current[type] = listeners.current[type] || {};\n listeners.current[type][target] = listeners.current[type][target] || [];\n listeners.current[type][target].push(callback);\n\n let removed = false;\n return () => {\n // Prevent removing other listeners when unsubscribing same listener multiple times\n if (!removed) {\n removed = true;\n removeListener(type, callback);\n }\n };\n };\n\n return {\n addListener,\n removeListener,\n };\n }, []);\n\n const emit = React.useCallback(\n ({\n type,\n data,\n target,\n canPreventDefault,\n }: {\n type: string;\n data?: any;\n target?: string;\n canPreventDefault?: boolean;\n }) => {\n const items = listeners.current[type] || {};\n\n // Copy the current list of callbacks in case they are mutated during execution\n const callbacks =\n target !== undefined\n ? items[target]?.slice()\n : ([] as Listeners)\n .concat(...Object.keys(items).map((t) => items[t]))\n .filter((cb, i, self) => self.lastIndexOf(cb) === i);\n\n const event: EventArg = {\n get type() {\n return type;\n },\n };\n\n if (target !== undefined) {\n Object.defineProperty(event, 'target', {\n enumerable: true,\n get() {\n return target;\n },\n });\n }\n\n if (data !== undefined) {\n Object.defineProperty(event, 'data', {\n enumerable: true,\n get() {\n return data;\n },\n });\n }\n\n if (canPreventDefault) {\n let defaultPrevented = false;\n\n Object.defineProperties(event, {\n defaultPrevented: {\n enumerable: true,\n get() {\n return defaultPrevented;\n },\n },\n preventDefault: {\n enumerable: true,\n value() {\n defaultPrevented = true;\n },\n },\n });\n }\n\n listenRef.current?.(event);\n\n callbacks?.forEach((cb) => cb(event));\n\n return event as any;\n },\n []\n );\n\n return React.useMemo(() => ({ create, emit }), [create, emit]);\n}\n","import * as React from 'react';\n\nimport type { KeyedListenerMap } from './NavigationBuilderContext';\n\n/**\n * Hook which lets child navigators add getters to be called for obtaining rehydrated state.\n */\nexport default function useKeyedChildListeners() {\n const { current: keyedListeners } = React.useRef<{\n [K in keyof KeyedListenerMap]: Record<\n string,\n KeyedListenerMap[K] | undefined\n >;\n }>(\n Object.assign(Object.create(null), {\n getState: {},\n beforeRemove: {},\n })\n );\n\n const addKeyedListener = React.useCallback(\n (\n type: T,\n key: string,\n listener: KeyedListenerMap[T]\n ) => {\n // @ts-expect-error: according to ref stated above you can use `key` to index type\n keyedListeners[type][key] = listener;\n\n return () => {\n // @ts-expect-error: according to ref stated above you can use `key` to index type\n keyedListeners[type][key] = undefined;\n };\n },\n [keyedListeners]\n );\n\n return {\n keyedListeners,\n addKeyedListener,\n };\n}\n","import type { ParamListBase } from '@react-navigation/routers';\nimport * as React from 'react';\n\nimport NavigationBuilderContext from './NavigationBuilderContext';\nimport NavigationStateContext from './NavigationStateContext';\nimport type { NavigationProp } from './types';\n\ntype Options = {\n key?: string;\n navigation?: NavigationProp;\n options?: object | undefined;\n};\n\nexport default function useOptionsGetters({\n key,\n options,\n navigation,\n}: Options) {\n const optionsRef = React.useRef
![](\"screenshots/avatar-icon.png\"){kind=icon}
\n * ![](\"screenshots/avatar-image.png\"){kind=avatar}
\n * ![](\"screenshots/avatar-text.png\"){kind=avatar}
\n * ![](\"screenshots/drawer-item.png\")
\n * ![](\"screenshots/drawer-collapsed.png\")
\n * ![](\"screenshots/divider.png\")
\n * ![](\"screenshots/drawer-section.png\")
\n * ![](\"screenshots/list-accordion-group.png\")
\n * ![](\"screenshots/list-accordion-1.png\")
\n * ![](\"screenshots/list-accordion-2.png\")
\n * ![](\"screenshots/list-accordion-3.png\")
\n * ![](\"screenshots/list-icon.png\"){kind=icon}
\n * ![](\"screenshots/list-item-1.png\")
\n * ![](\"screenshots/list-item-2.png\")
\n * ![](\"screenshots/list-item-3.png\")
\n * ![](\"screenshots/list-section.png\")
\n * ![](\"screenshots/list-image.png\")
\n * ![](\"screenshots/banner.gif\")
\n * ![](\"screenshots/checkbox-enabled.android.png\")
\n * ![](\"screenshots/checkbox-disabled.android.png\")
\n * ![](\"screenshots/checkbox-enabled.ios.png\")
\n * ![](\"screenshots/checkbox-disabled.ios.png\")
\n * ![](\"screenshots/data-table-row-cell.png\")
\n * ![](\"screenshots/data-table-header.png\")
\n * ![](\"screenshots/data-table-pagination.png\")
\n * ![](\"screenshots/data-table.png\")
\n * ![](\"screenshots/fab-1.png\")
\n * ![](\"screenshots/fab-2.png\")
\n * ![](\"screenshots/fab-3.png\")
\n * ![](\"screenshots/fab-4.png\")
\n * ![](\"screenshots/fab-group.gif\")
\n * ![](\"screenshots/animated-fab.gif\")
\n * ![](\"screenshots/progress-bar.png\")
\n * ![](\"screenshots/radio-button-group-android.gif\")
\n * ![](\"screenshots/radio-button-group-ios.gif\")
\n * ![](\"screenshots/radio-enabled.android.png\")
\n * ![](\"screenshots/radio-disabled.android.png\")
\n * ![](\"screenshots/radio-enabled.ios.png\")
\n * ![](\"screenshots/radio-disabled.ios.png\")
\n * ![](\"screenshots/radio-item.ios.png\")
\n * ![](\"screenshots/searchbar.png\")
\n * ![](\"screenshots/snackbar.gif\")
\n * ![](\"screenshots/switch-enabled.android.png\")
\n * ![](\"screenshots/switch-disabled.android.png\")
\n * ![](\"screenshots/switch-enabled.ios.png\")
\n * ![](\"screenshots/switch-disabled.ios.png\")
\n * ![](\"screenshots/toggle-button-group.gif\")
\n * ![](\"screenshots/toggle-button.png\")
\n * ![](\"screenshots/toggle-button-row.gif\")
\n * ![](\"screenshots/segmented-button.png\")
\n *