react-native-paper

  • Version 5.12.3
  • Published
  • 3.84 MB
  • 3 dependencies
  • MIT license

Install

npm i react-native-paper
yarn add react-native-paper
pnpm add react-native-paper

Overview

Material design for React Native

Index

Variables

Functions

Enums

Type Aliases

Namespaces

Variables

variable Appbar

const Appbar: (({
children,
dark,
style,
mode,
elevated,
safeAreaInsets,
theme: themeOverrides,
...rest
}: import('./Appbar').Props) => any) & {
Content: {
({
color: titleColor,
subtitle,
subtitleStyle,
onPress,
disabled,
style,
titleRef,
titleStyle,
title,
titleMaxFontSizeMultiplier,
mode,
theme: themeOverrides,
testID,
...rest
}: import('./AppbarContent').Props): any;
displayName: string;
};
Action: ForwardRefExoticComponent<any>;
BackAction: ForwardRefExoticComponent<any>;
Header: {
({
statusBarHeight,
style,
dark,
mode,
elevated,
theme: themeOverrides,
testID,
...rest
}: import('./AppbarHeader').Props): any;
displayName: string;
};
};

    variable BottomNavigation

    const BottomNavigation: {
    <Route extends BaseRoute>({
    navigationState,
    renderScene,
    renderIcon,
    renderLabel,
    renderTouchable,
    getLabelText,
    getBadge,
    getColor,
    getAccessibilityLabel,
    getTestID,
    activeColor,
    inactiveColor,
    keyboardHidesNavigationBar,
    barStyle,
    labeled,
    style,
    activeIndicatorStyle,
    sceneAnimationEnabled,
    sceneAnimationType,
    sceneAnimationEasing,
    onTabPress,
    onTabLongPress,
    onIndexChange,
    shifting: shiftingProp,
    safeAreaInsets,
    labelMaxFontSizeMultiplier,
    compact: compactProp,
    testID,
    theme: themeOverrides,
    getLazy,
    }: Props<Route>): React.JSX.Element;
    SceneMap<Route_1 extends BaseRoute>(scenes: {
    [key: string]: React.ComponentType<{
    route: Route_1;
    jumpTo: (key: string) => void;
    }>;
    }): ({
    route,
    jumpTo,
    }: {
    route: Route_1;
    jumpTo: (key: string) => void;
    }) => React.JSX.Element;
    Bar: {
    <
    Route_2 extends {
    key: string;
    title?: string | undefined;
    focusedIcon?: IconSource | undefined;
    unfocusedIcon?: IconSource | undefined;
    badge?: string | number | boolean | undefined;
    color?: string | undefined;
    accessibilityLabel?: string | undefined;
    testID?: string | undefined;
    lazy?: boolean | undefined;
    }
    >({
    navigationState,
    renderIcon,
    renderLabel,
    renderTouchable,
    getLabelText,
    getBadge,
    getColor,
    getAccessibilityLabel,
    getTestID,
    activeColor,
    inactiveColor,
    keyboardHidesNavigationBar,
    style,
    activeIndicatorStyle,
    labeled,
    animationEasing,
    onTabPress,
    onTabLongPress,
    shifting: shiftingProp,
    safeAreaInsets,
    labelMaxFontSizeMultiplier,
    compact: compactProp,
    testID,
    theme: themeOverrides,
    }: Props<Route_2>): React.JSX.Element;
    displayName: string;
    };
    };
    • BottomNavigation provides quick navigation between top-level views of an app with a bottom navigation bar. It is primarily designed for use on mobile. If you want to use the navigation bar only see [BottomNavigation.Bar](BottomNavigationBar).

      By default BottomNavigation uses primary color as a background, in dark theme with adaptive mode it will use surface colour instead. See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.

      ## Usage

      import * as React from 'react';
      import { BottomNavigation, Text } from 'react-native-paper';
      const MusicRoute = () => <Text>Music</Text>;
      const AlbumsRoute = () => <Text>Albums</Text>;
      const RecentsRoute = () => <Text>Recents</Text>;
      const NotificationsRoute = () => <Text>Notifications</Text>;
      const MyComponent = () => {
      const [index, setIndex] = React.useState(0);
      const [routes] = React.useState([
      { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
      { key: 'albums', title: 'Albums', focusedIcon: 'album' },
      { key: 'recents', title: 'Recents', focusedIcon: 'history' },
      { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
      ]);
      const renderScene = BottomNavigation.SceneMap({
      music: MusicRoute,
      albums: AlbumsRoute,
      recents: RecentsRoute,
      notifications: NotificationsRoute,
      });
      return (
      <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
      />
      );
      };
      export default MyComponent;

    variable Button

    const Button: ForwardRefExoticComponent<any>;

      variable Card

      const Card: {
      ({
      elevation: cardElevation,
      delayLongPress,
      onPress,
      onLongPress,
      onPressOut,
      onPressIn,
      mode: cardMode,
      children,
      style,
      contentStyle,
      theme: themeOverrides,
      testID,
      accessible,
      disabled,
      ...rest
      }: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) &
      Props): React.JSX.Element;
      Content: {
      ({
      index,
      total,
      siblings,
      style,
      ...rest
      }: import('./CardContent').Props): React.JSX.Element;
      displayName: string;
      };
      Actions: {
      (props: import('./CardActions').Props): React.JSX.Element;
      displayName: string;
      };
      Cover: {
      ({
      index,
      total,
      style,
      theme: themeOverrides,
      ...rest
      }: import('./CardCover').Props): React.JSX.Element;
      displayName: string;
      };
      Title: {
      ({
      title,
      titleStyle,
      titleNumberOfLines,
      titleVariant,
      titleMaxFontSizeMultiplier,
      subtitle,
      subtitleStyle,
      subtitleNumberOfLines,
      subtitleVariant,
      subtitleMaxFontSizeMultiplier,
      left,
      leftStyle,
      right,
      rightStyle,
      style,
      theme: themeOverrides,
      }: import('./CardTitle').Props): React.JSX.Element;
      displayName: string;
      };
      };
      • A card is a sheet of material that serves as an entry point to more detailed information.

        ## Usage

        import * as React from 'react';
        import { Avatar, Button, Card, Text } from 'react-native-paper';
        const LeftContent = props => <Avatar.Icon {...props} icon="folder" />
        const MyComponent = () => (
        <Card>
        <Card.Title title="Card Title" subtitle="Card Subtitle" left={LeftContent} />
        <Card.Content>
        <Text variant="titleLarge">Card title</Text>
        <Text variant="bodyMedium">Card content</Text>
        </Card.Content>
        <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
        <Card.Actions>
        <Button>Cancel</Button>
        <Button>Ok</Button>
        </Card.Actions>
        </Card>
        );
        export default MyComponent;

      variable Checkbox

      const Checkbox: (({
      theme: themeOverrides,
      ...props
      }: import('./Checkbox').Props) => any) & {
      Item: {
      ({
      style,
      status,
      label,
      onPress,
      onLongPress,
      labelStyle,
      theme: themeOverrides,
      testID,
      mode,
      position,
      accessibilityLabel,
      disabled,
      labelVariant,
      labelMaxFontSizeMultiplier,
      rippleColor,
      background,
      ...props
      }: import('./CheckboxItem').Props): any;
      displayName: string;
      };
      Android: {
      ({
      status,
      theme: themeOverrides,
      disabled,
      onPress,
      testID,
      ...rest
      }: import('./CheckboxAndroid').Props): any;
      displayName: string;
      };
      IOS: {
      ({
      status,
      disabled,
      onPress,
      theme: themeOverrides,
      testID,
      ...rest
      }: import('./CheckboxIOS').Props): any;
      displayName: string;
      };
      };

        variable DataTable

        const DataTable: {
        ({ children, style, ...rest }: Props): React.JSX.Element;
        Header: {
        ({
        children,
        style,
        theme: themeOverrides,
        ...rest
        }: import('./DataTableHeader').Props): React.JSX.Element;
        displayName: string;
        };
        Title: {
        ({
        numeric,
        children,
        onPress,
        sortDirection,
        textStyle,
        style,
        theme: themeOverrides,
        numberOfLines,
        maxFontSizeMultiplier,
        ...rest
        }: import('./DataTableTitle').Props): React.JSX.Element;
        displayName: string;
        };
        Row: {
        ({
        onPress,
        style,
        children,
        pointerEvents,
        theme: themeOverrides,
        ...rest
        }: import('./DataTableRow').Props): React.JSX.Element;
        displayName: string;
        };
        Cell: {
        ({
        children,
        textStyle,
        style,
        numeric,
        maxFontSizeMultiplier,
        testID,
        ...rest
        }: import('./DataTableCell').Props): React.JSX.Element;
        displayName: string;
        };
        Pagination: {
        ({
        label,
        accessibilityLabel,
        page,
        numberOfPages,
        onPageChange,
        style,
        showFastPaginationControls,
        numberOfItemsPerPageList,
        numberOfItemsPerPage,
        onItemsPerPageChange,
        selectPageDropdownLabel,
        selectPageDropdownAccessibilityLabel,
        selectPageDropdownRippleColor,
        dropdownItemRippleColor,
        theme: themeOverrides,
        ...rest
        }: import('./DataTablePagination').Props): React.JSX.Element;
        displayName: string;
        };
        };
        • Data tables allow displaying sets of data.

          ## Usage

          import * as React from 'react';
          import { DataTable } from 'react-native-paper';
          const MyComponent = () => {
          const [page, setPage] = React.useState<number>(0);
          const [numberOfItemsPerPageList] = React.useState([2, 3, 4]);
          const [itemsPerPage, onItemsPerPageChange] = React.useState(
          numberOfItemsPerPageList[0]
          );
          const [items] = React.useState([
          {
          key: 1,
          name: 'Cupcake',
          calories: 356,
          fat: 16,
          },
          {
          key: 2,
          name: 'Eclair',
          calories: 262,
          fat: 16,
          },
          {
          key: 3,
          name: 'Frozen yogurt',
          calories: 159,
          fat: 6,
          },
          {
          key: 4,
          name: 'Gingerbread',
          calories: 305,
          fat: 3.7,
          },
          ]);
          const from = page * itemsPerPage;
          const to = Math.min((page + 1) * itemsPerPage, items.length);
          React.useEffect(() => {
          setPage(0);
          }, [itemsPerPage]);
          return (
          <DataTable>
          <DataTable.Header>
          <DataTable.Title>Dessert</DataTable.Title>
          <DataTable.Title numeric>Calories</DataTable.Title>
          <DataTable.Title numeric>Fat</DataTable.Title>
          </DataTable.Header>
          {items.slice(from, to).map((item) => (
          <DataTable.Row key={item.key}>
          <DataTable.Cell>{item.name}</DataTable.Cell>
          <DataTable.Cell numeric>{item.calories}</DataTable.Cell>
          <DataTable.Cell numeric>{item.fat}</DataTable.Cell>
          </DataTable.Row>
          ))}
          <DataTable.Pagination
          page={page}
          numberOfPages={Math.ceil(items.length / itemsPerPage)}
          onPageChange={(page) => setPage(page)}
          label={`${from + 1}-${to} of ${items.length}`}
          numberOfItemsPerPageList={numberOfItemsPerPageList}
          numberOfItemsPerPage={itemsPerPage}
          onItemsPerPageChange={onItemsPerPageChange}
          showFastPaginationControls
          selectPageDropdownLabel={'Rows per page'}
          />
          </DataTable>
          );
          };
          export default MyComponent;

        variable DefaultTheme

        const DefaultTheme: MD3Theme;

          variable Dialog

          const Dialog: {
          ({
          children,
          dismissable,
          dismissableBackButton,
          onDismiss,
          visible,
          style,
          theme: themeOverrides,
          testID,
          }: Props): React.JSX.Element;
          Content: {
          (props: import('./DialogContent').Props): React.JSX.Element;
          displayName: string;
          };
          Actions: {
          (props: import('./DialogActions').Props): React.JSX.Element;
          displayName: string;
          };
          Title: {
          ({
          children,
          theme: themeOverrides,
          style,
          ...rest
          }: import('./DialogTitle').Props): React.JSX.Element;
          displayName: string;
          };
          ScrollArea: {
          (props: import('./DialogScrollArea').Props): React.JSX.Element;
          displayName: string;
          };
          Icon: {
          ({
          size,
          color,
          icon,
          theme: themeOverrides,
          }: import('./DialogIcon').Props): React.JSX.Element | null;
          displayName: string;
          };
          };
          • Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. To render the Dialog above other components, you'll need to wrap it with the [Portal](../../Portal) component.

            ## Usage

            import * as React from 'react';
            import { View } from 'react-native';
            import { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';
            const MyComponent = () => {
            const [visible, setVisible] = React.useState(false);
            const showDialog = () => setVisible(true);
            const hideDialog = () => setVisible(false);
            return (
            <PaperProvider>
            <View>
            <Button onPress={showDialog}>Show Dialog</Button>
            <Portal>
            <Dialog visible={visible} onDismiss={hideDialog}>
            <Dialog.Title>Alert</Dialog.Title>
            <Dialog.Content>
            <Text variant="bodyMedium">This is simple dialog</Text>
            </Dialog.Content>
            <Dialog.Actions>
            <Button onPress={hideDialog}>Done</Button>
            </Dialog.Actions>
            </Dialog>
            </Portal>
            </View>
            </PaperProvider>
            );
            };
            export default MyComponent;

          variable FAB

          const FAB: any;

            variable IconButton

            const IconButton: ForwardRefExoticComponent<any>;
            • An icon button is a button which displays only an icon without a label.

              ## Usage

              import * as React from 'react';
              import { IconButton, MD3Colors } from 'react-native-paper';
              const MyComponent = () => (
              <IconButton
              icon="camera"
              iconColor={MD3Colors.error50}
              size={20}
              onPress={() => console.log('Pressed')}
              />
              );
              export default MyComponent;

              TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple

            variable MD2DarkTheme

            const MD2DarkTheme: MD2Theme;

              variable MD2LightTheme

              const MD2LightTheme: MD2Theme;

                variable MD3Colors

                const MD3Colors: {
                primary100: string;
                primary99: string;
                primary95: string;
                primary90: string;
                primary80: string;
                primary70: string;
                primary60: string;
                primary50: string;
                primary40: string;
                primary30: string;
                primary20: string;
                primary10: string;
                primary0: string;
                secondary100: string;
                secondary99: string;
                secondary95: string;
                secondary90: string;
                secondary80: string;
                secondary70: string;
                secondary60: string;
                secondary50: string;
                secondary40: string;
                secondary30: string;
                secondary20: string;
                secondary10: string;
                secondary0: string;
                tertiary100: string;
                tertiary99: string;
                tertiary95: string;
                tertiary90: string;
                tertiary80: string;
                tertiary70: string;
                tertiary60: string;
                tertiary50: string;
                tertiary40: string;
                tertiary30: string;
                tertiary20: string;
                tertiary10: string;
                tertiary0: string;
                neutral100: string;
                neutral99: string;
                neutral95: string;
                neutral90: string;
                neutral80: string;
                neutral70: string;
                neutral60: string;
                neutral50: string;
                neutral40: string;
                neutral30: string;
                neutral20: string;
                neutral10: string;
                neutral0: string;
                neutralVariant100: string;
                neutralVariant99: string;
                neutralVariant95: string;
                neutralVariant90: string;
                neutralVariant80: string;
                neutralVariant70: string;
                neutralVariant60: string;
                neutralVariant50: string;
                neutralVariant40: string;
                neutralVariant30: string;
                neutralVariant20: string;
                neutralVariant10: string;
                neutralVariant0: string;
                error100: string;
                error99: string;
                error95: string;
                error90: string;
                error80: string;
                error70: string;
                error60: string;
                error50: string;
                error40: string;
                error30: string;
                error20: string;
                error10: string;
                error0: string;
                };

                  variable MD3DarkTheme

                  const MD3DarkTheme: MD3Theme;

                    variable MD3LightTheme

                    const MD3LightTheme: MD3Theme;
                      const Menu: any;

                        variable Portal

                        const Portal: any;

                          variable RadioButton

                          const RadioButton: (({
                          theme: themeOverrides,
                          ...props
                          }: import('./RadioButton').Props) => any) & {
                          Group: {
                          ({
                          value,
                          onValueChange,
                          children,
                          }: import('./RadioButtonGroup').Props): any;
                          displayName: string;
                          };
                          Android: {
                          ({
                          disabled,
                          onPress,
                          theme: themeOverrides,
                          value,
                          status,
                          testID,
                          ...rest
                          }: import('./RadioButtonAndroid').Props): any;
                          displayName: string;
                          };
                          IOS: {
                          ({
                          disabled,
                          onPress,
                          theme: themeOverrides,
                          status,
                          value,
                          testID,
                          ...rest
                          }: import('./RadioButtonIOS').Props): any;
                          displayName: string;
                          };
                          Item: {
                          ({
                          value,
                          label,
                          style,
                          labelStyle,
                          onPress,
                          onLongPress,
                          disabled,
                          color,
                          uncheckedColor,
                          rippleColor,
                          status,
                          theme: themeOverrides,
                          background,
                          accessibilityLabel,
                          testID,
                          mode,
                          position,
                          labelVariant,
                          labelMaxFontSizeMultiplier,
                          }: import('./RadioButtonItem').Props): any;
                          displayName: string;
                          };
                          };
                            const Searchbar: ForwardRefExoticComponent<any>;
                            • Searchbar is a simple input box where users can type search queries.

                              ## Usage

                              import * as React from 'react';
                              import { Searchbar } from 'react-native-paper';
                              const MyComponent = () => {
                              const [searchQuery, setSearchQuery] = React.useState('');
                              return (
                              <Searchbar
                              placeholder="Search"
                              onChangeText={setSearchQuery}
                              value={searchQuery}
                              />
                              );
                              };
                              export default MyComponent;

                            variable Snackbar

                            const Snackbar: {
                            ({
                            visible,
                            action,
                            icon,
                            onIconPress,
                            iconAccessibilityLabel,
                            duration,
                            onDismiss,
                            children,
                            elevation,
                            wrapperStyle,
                            style,
                            theme: themeOverrides,
                            maxFontSizeMultiplier,
                            rippleColor,
                            testID,
                            ...rest
                            }: Props): React.JSX.Element | null;
                            DURATION_SHORT: number;
                            DURATION_MEDIUM: number;
                            DURATION_LONG: number;
                            };
                            • Snackbars provide brief feedback about an operation through a message rendered at the bottom of the container in which it's wrapped.

                              Note: To display it as a popup, regardless of the parent's position, wrap it with a Portal component – refer to the example in the "More Examples` section.

                              ## Usage

                              import * as React from 'react';
                              import { View, StyleSheet } from 'react-native';
                              import { Button, Snackbar } from 'react-native-paper';
                              const MyComponent = () => {
                              const [visible, setVisible] = React.useState(false);
                              const onToggleSnackBar = () => setVisible(!visible);
                              const onDismissSnackBar = () => setVisible(false);
                              return (
                              <View style={styles.container}>
                              <Button onPress={onToggleSnackBar}>{visible ? 'Hide' : 'Show'}</Button>
                              <Snackbar
                              visible={visible}
                              onDismiss={onDismissSnackBar}
                              action={{
                              label: 'Undo',
                              onPress: () => {
                              // Do something
                              },
                              }}>
                              Hey there! I'm a Snackbar.
                              </Snackbar>
                              </View>
                              );
                              };
                              const styles = StyleSheet.create({
                              container: {
                              flex: 1,
                              justifyContent: 'space-between',
                              },
                              });
                              export default MyComponent;

                            variable Surface

                            const Surface: ForwardRefExoticComponent<any>;
                            • Surface is a basic container that can give depth to an element with elevation shadow. On dark theme with adaptive mode, surface is constructed by also placing a semi-transparent white overlay over a component surface. See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information. Overlay and shadow can be applied by specifying the elevation property both on Android and iOS.

                              ## Usage

                              import * as React from 'react';
                              import { Surface, Text } from 'react-native-paper';
                              import { StyleSheet } from 'react-native';
                              const MyComponent = () => (
                              <Surface style={styles.surface} elevation={4}>
                              <Text>Surface</Text>
                              </Surface>
                              );
                              export default MyComponent;
                              const styles = StyleSheet.create({
                              surface: {
                              padding: 8,
                              height: 80,
                              width: 80,
                              alignItems: 'center',
                              justifyContent: 'center',
                              },
                              });

                            variable Text

                            const Text: TextComponent<never>;

                              variable TextInput

                              const TextInput: CompoundedComponent;
                              • A component to allow users to input text.

                                ## Usage

                                import * as React from 'react';
                                import { TextInput } from 'react-native-paper';
                                const MyComponent = () => {
                                const [text, setText] = React.useState("");
                                return (
                                <TextInput
                                label="Email"
                                value={text}
                                onChangeText={text => setText(text)}
                                />
                                );
                                };
                                export default MyComponent;

                                TextInput props https://reactnative.dev/docs/textinput#props

                              variable ThemeProvider

                              const ThemeProvider: ComponentType<{ children: any; theme?: unknown }>;

                                variable ToggleButton

                                const ToggleButton: any;

                                  variable Tooltip

                                  const Tooltip: {
                                  ({
                                  children,
                                  enterTouchDelay,
                                  leaveTouchDelay,
                                  title,
                                  theme: themeOverrides,
                                  titleMaxFontSizeMultiplier,
                                  ...rest
                                  }: Props): React.JSX.Element;
                                  displayName: string;
                                  };
                                  • Tooltips display informative text when users hover over, focus on, or tap an element.

                                    Plain tooltips, when activated, display a text label identifying an element, such as a description of its function. Tooltips should include only short, descriptive text and avoid restating visible UI text.

                                    ## Usage

                                    import * as React from 'react';
                                    import { IconButton, Tooltip } from 'react-native-paper';
                                    const MyComponent = () => (
                                    <Tooltip title="Selected Camera">
                                    <IconButton icon="camera" selected size={24} onPress={() => {}} />
                                    </Tooltip>
                                    );
                                    export default MyComponent;

                                  variable TouchableRipple

                                  const TouchableRipple: any;

                                    Functions

                                    function ActivityIndicator

                                    ActivityIndicator: ({
                                    animating,
                                    color: indicatorColor,
                                    hidesWhenStopped,
                                    size: indicatorSize,
                                    style,
                                    theme: themeOverrides,
                                    ...rest
                                    }: Props) => React.JSX.Element;
                                    • Activity indicator is used to present progress of some activity in the app. It can be used as a drop-in for the ActivityIndicator shipped with React Native.

                                      ## Usage

                                      import * as React from 'react';
                                      import { ActivityIndicator, MD2Colors } from 'react-native-paper';
                                      const MyComponent = () => (
                                      <ActivityIndicator animating={true} color={MD2Colors.red800} />
                                      );
                                      export default MyComponent;

                                    function adaptNavigationTheme

                                    adaptNavigationTheme: {
                                    (themes: { reactNavigationLight: NavigationTheme; materialLight?: MD3Theme }): {
                                    LightTheme: NavigationTheme;
                                    };
                                    (themes: { reactNavigationDark: NavigationTheme; materialDark?: MD3Theme }): {
                                    DarkTheme: NavigationTheme;
                                    };
                                    (themes: {
                                    reactNavigationLight: NavigationTheme;
                                    reactNavigationDark: NavigationTheme;
                                    materialLight?: MD3Theme;
                                    materialDark?: MD3Theme;
                                    }): { LightTheme: NavigationTheme; DarkTheme: NavigationTheme };
                                    };

                                      function AnimatedFAB

                                      AnimatedFAB: ({
                                      icon,
                                      label,
                                      background,
                                      accessibilityLabel,
                                      accessibilityState,
                                      color: customColor,
                                      rippleColor: customRippleColor,
                                      disabled,
                                      onPress,
                                      onLongPress,
                                      delayLongPress,
                                      theme: themeOverrides,
                                      style,
                                      visible,
                                      uppercase: uppercaseProp,
                                      testID,
                                      animateFrom,
                                      extended,
                                      iconMode,
                                      variant,
                                      labelMaxFontSizeMultiplier,
                                      ...rest
                                      }: Props) => React.JSX.Element;
                                      • An animated, extending horizontally floating action button represents the primary action in an application.

                                        ## Usage

                                        import React from 'react';
                                        import {
                                        StyleProp,
                                        ViewStyle,
                                        Animated,
                                        StyleSheet,
                                        Platform,
                                        ScrollView,
                                        Text,
                                        SafeAreaView,
                                        I18nManager,
                                        } from 'react-native';
                                        import { AnimatedFAB } from 'react-native-paper';
                                        const MyComponent = ({
                                        animatedValue,
                                        visible,
                                        extended,
                                        label,
                                        animateFrom,
                                        style,
                                        iconMode,
                                        }) => {
                                        const [isExtended, setIsExtended] = React.useState(true);
                                        const isIOS = Platform.OS === 'ios';
                                        const onScroll = ({ nativeEvent }) => {
                                        const currentScrollPosition =
                                        Math.floor(nativeEvent?.contentOffset?.y) ?? 0;
                                        setIsExtended(currentScrollPosition <= 0);
                                        };
                                        const fabStyle = { [animateFrom]: 16 };
                                        return (
                                        <SafeAreaView style={styles.container}>
                                        <ScrollView onScroll={onScroll}>
                                        {[...new Array(100).keys()].map((_, i) => (
                                        <Text>{i}</Text>
                                        ))}
                                        </ScrollView>
                                        <AnimatedFAB
                                        icon={'plus'}
                                        label={'Label'}
                                        extended={isExtended}
                                        onPress={() => console.log('Pressed')}
                                        visible={visible}
                                        animateFrom={'right'}
                                        iconMode={'static'}
                                        style={[styles.fabStyle, style, fabStyle]}
                                        />
                                        </SafeAreaView>
                                        );
                                        };
                                        export default MyComponent;
                                        const styles = StyleSheet.create({
                                        container: {
                                        flexGrow: 1,
                                        },
                                        fabStyle: {
                                        bottom: 16,
                                        right: 16,
                                        position: 'absolute',
                                        },
                                        });

                                      function Badge

                                      Badge: ({
                                      children,
                                      size,
                                      style,
                                      theme: themeOverrides,
                                      visible,
                                      ...rest
                                      }: Props) => React.JSX.Element;
                                      • Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.

                                        ## Usage

                                        import * as React from 'react';
                                        import { Badge } from 'react-native-paper';
                                        const MyComponent = () => (
                                        <Badge>3</Badge>
                                        );
                                        export default MyComponent;
                                      Banner: ({
                                      visible,
                                      icon,
                                      children,
                                      actions,
                                      contentStyle,
                                      elevation,
                                      style,
                                      theme: themeOverrides,
                                      onShowAnimationFinished,
                                      onHideAnimationFinished,
                                      maxFontSizeMultiplier,
                                      ...rest
                                      }: Props) => React.JSX.Element;
                                      • Banner displays a prominent message and related actions.

                                        ## Usage

                                        import * as React from 'react';
                                        import { Image } from 'react-native';
                                        import { Banner } from 'react-native-paper';
                                        const MyComponent = () => {
                                        const [visible, setVisible] = React.useState(true);
                                        return (
                                        <Banner
                                        visible={visible}
                                        actions={[
                                        {
                                        label: 'Fix it',
                                        onPress: () => setVisible(false),
                                        },
                                        {
                                        label: 'Learn more',
                                        onPress: () => setVisible(false),
                                        },
                                        ]}
                                        icon={({size}) => (
                                        <Image
                                        source={{
                                        uri: 'https://avatars3.githubusercontent.com/u/17571969?s=400&v=4',
                                        }}
                                        style={{
                                        width: size,
                                        height: size,
                                        }}
                                        />
                                        )}>
                                        There was a problem processing a transaction on your credit card.
                                        </Banner>
                                        );
                                        };
                                        export default MyComponent;

                                      function Caption

                                      Caption: (props: Props) => React.JSX.Element;
                                      • Typography component for showing a caption.

                                        ## Usage

                                        import * as React from 'react';
                                        import { Caption } from 'react-native-paper';
                                        const MyComponent = () => (
                                        <Caption>Caption</Caption>
                                        );
                                        export default MyComponent;

                                      function Chip

                                      Chip: ({
                                      mode,
                                      children,
                                      icon,
                                      avatar,
                                      selected,
                                      disabled,
                                      background,
                                      accessibilityLabel,
                                      closeIconAccessibilityLabel,
                                      onPress,
                                      onLongPress,
                                      onPressOut,
                                      onPressIn,
                                      delayLongPress,
                                      onClose,
                                      closeIcon,
                                      textStyle,
                                      style,
                                      theme: themeOverrides,
                                      testID,
                                      selectedColor,
                                      rippleColor: customRippleColor,
                                      showSelectedOverlay,
                                      showSelectedCheck,
                                      ellipsizeMode,
                                      compact,
                                      elevated,
                                      maxFontSizeMultiplier,
                                      ...rest
                                      }: Props) => React.JSX.Element;
                                      • Chips are compact elements that can represent inputs, attributes, or actions. They can have an icon or avatar on the left, and a close button icon on the right. They are typically used to: Present multiple options Represent attributes active or chosen Present filter options Trigger actions related to primary content

                                        ## Usage

                                        import * as React from 'react';
                                        import { Chip } from 'react-native-paper';
                                        const MyComponent = () => (
                                        <Chip icon="information" onPress={() => console.log('Pressed')}>Example Chip</Chip>
                                        );
                                        export default MyComponent;

                                      function configureFonts

                                      configureFonts: {
                                      (params: { isV3: false }): Fonts;
                                      (params: { config?: MD2FontsConfig; isV3: false }): Fonts;
                                      (params?: { config?: Partial<MD3Type>; isV3?: true }): MD3Typescale;
                                      (params?: {
                                      config?: Partial<Record<MD3TypescaleKey, Partial<MD3Type>>>;
                                      isV3?: true;
                                      }): MD3Typescale;
                                      (params: { config: Record<string, MD3Type>; isV3?: true }): {
                                      displayLarge: MD3Type;
                                      displayMedium: MD3Type;
                                      displaySmall: MD3Type;
                                      headlineLarge: MD3Type;
                                      headlineMedium: MD3Type;
                                      headlineSmall: MD3Type;
                                      titleLarge: MD3Type;
                                      titleMedium: MD3Type;
                                      titleSmall: MD3Type;
                                      labelLarge: MD3Type;
                                      labelMedium: MD3Type;
                                      labelSmall: MD3Type;
                                      bodyLarge: MD3Type;
                                      bodyMedium: MD3Type;
                                      bodySmall: MD3Type;
                                      } & { default: Omit<MD3Type, 'lineHeight' | 'fontSize'> } & {
                                      [key: string]: MD3Type;
                                      };
                                      };

                                        function customText

                                        customText: <T>() => TextComponent<T>;

                                          function Divider

                                          Divider: ({
                                          leftInset,
                                          horizontalInset,
                                          style,
                                          theme: themeOverrides,
                                          bold,
                                          ...rest
                                          }: Props) => React.JSX.Element;
                                          • A divider is a thin, lightweight separator that groups content in lists and page layouts.

                                            ## Usage

                                            import * as React from 'react';
                                            import { View } from 'react-native';
                                            import { Divider, Text } from 'react-native-paper';
                                            const MyComponent = () => (
                                            <View>
                                            <Text>Lemon</Text>
                                            <Divider />
                                            <Text>Mango</Text>
                                            <Divider />
                                            </View>
                                            );
                                            export default MyComponent;

                                          function Headline

                                          Headline: (props: Props) => React.JSX.Element;
                                          • Typography component for showing a headline.

                                            ## Usage

                                            import * as React from 'react';
                                            import { Headline } from 'react-native-paper';
                                            const MyComponent = () => (
                                            <Headline>Headline</Headline>
                                            );
                                            export default MyComponent;

                                          function HelperText

                                          HelperText: ({
                                          style,
                                          type,
                                          visible,
                                          theme: themeOverrides,
                                          onLayout,
                                          padding,
                                          disabled,
                                          ...rest
                                          }: Props) => React.JSX.Element;
                                          • Helper text is used in conjuction with input elements to provide additional hints for the user.

                                            ## Usage

                                            import * as React from 'react';
                                            import { View } from 'react-native';
                                            import { HelperText, TextInput } from 'react-native-paper';
                                            const MyComponent = () => {
                                            const [text, setText] = React.useState('');
                                            const onChangeText = text => setText(text);
                                            const hasErrors = () => {
                                            return !text.includes('@');
                                            };
                                            return (
                                            <View>
                                            <TextInput label="Email" value={text} onChangeText={onChangeText} />
                                            <HelperText type="error" visible={hasErrors()}>
                                            Email address is invalid!
                                            </HelperText>
                                            </View>
                                            );
                                            };
                                            export default MyComponent;

                                          function Icon

                                          Icon: ({
                                          source,
                                          color,
                                          size,
                                          theme: themeOverrides,
                                          testID,
                                          ...rest
                                          }: Props) => any;
                                          • An icon component which renders icon from vector library.

                                            ## Usage

                                            import * as React from 'react';
                                            import { Icon, MD3Colors } from 'react-native-paper';
                                            const MyComponent = () => (
                                            <Icon
                                            source="camera"
                                            color={MD3Colors.error50}
                                            size={20}
                                            />
                                            );
                                            export default MyComponent;
                                          Modal: ({
                                          dismissable,
                                          dismissableBackButton,
                                          visible,
                                          overlayAccessibilityLabel,
                                          onDismiss,
                                          children,
                                          contentContainerStyle,
                                          style,
                                          theme: themeOverrides,
                                          testID,
                                          }: Props) => React.JSX.Element | null;
                                          • The Modal component is a simple way to present content above an enclosing view. To render the Modal above other components, you'll need to wrap it with the [Portal](./Portal) component.

                                            ## Usage

                                            import * as React from 'react';
                                            import { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';
                                            const MyComponent = () => {
                                            const [visible, setVisible] = React.useState(false);
                                            const showModal = () => setVisible(true);
                                            const hideModal = () => setVisible(false);
                                            const containerStyle = {backgroundColor: 'white', padding: 20};
                                            return (
                                            <PaperProvider>
                                            <Portal>
                                            <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
                                            <Text>Example Modal. Click outside this area to dismiss.</Text>
                                            </Modal>
                                            </Portal>
                                            <Button style={{marginTop: 30}} onPress={showModal}>
                                            Show
                                            </Button>
                                            </PaperProvider>
                                            );
                                            };
                                            export default MyComponent;

                                          function overlay

                                          overlay: <T extends unknown>(
                                          elevation: T,
                                          surfaceColor?: string
                                          ) => T extends number ? string : Animated.AnimatedInterpolation<number | string>;

                                            function PaperProvider

                                            PaperProvider: (props: Props) => React.JSX.Element;

                                              function Paragraph

                                              Paragraph: (props: Props) => React.JSX.Element;
                                              • Typography component for showing a paragraph.

                                                ## Usage

                                                import * as React from 'react';
                                                import { Paragraph } from 'react-native-paper';
                                                const MyComponent = () => (
                                                <Paragraph>Paragraph</Paragraph>
                                                );
                                                export default MyComponent;

                                              function ProgressBar

                                              ProgressBar: ({
                                              color,
                                              indeterminate,
                                              progress,
                                              visible,
                                              theme: themeOverrides,
                                              animatedValue,
                                              style,
                                              fillStyle,
                                              testID,
                                              ...rest
                                              }: Props) => React.JSX.Element;
                                              • Progress bar is an indicator used to present progress of some activity in the app.

                                                ## Usage

                                                import * as React from 'react';
                                                import { ProgressBar, MD3Colors } from 'react-native-paper';
                                                const MyComponent = () => (
                                                <ProgressBar progress={0.5} color={MD3Colors.error50} />
                                                );
                                                export default MyComponent;

                                              function Provider

                                              Provider: (props: Props) => React.JSX.Element;

                                                function SegmentedButtons

                                                SegmentedButtons: ({
                                                value,
                                                onValueChange,
                                                buttons,
                                                multiSelect,
                                                density,
                                                style,
                                                theme: themeOverrides,
                                                }: Props) => React.JSX.Element;
                                                • Segmented buttons can be used to select options, switch views or sort elements.

                                                  ## Usage

                                                  import * as React from 'react';
                                                  import { SafeAreaView, StyleSheet } from 'react-native';
                                                  import { SegmentedButtons } from 'react-native-paper';
                                                  const MyComponent = () => {
                                                  const [value, setValue] = React.useState('');
                                                  return (
                                                  <SafeAreaView style={styles.container}>
                                                  <SegmentedButtons
                                                  value={value}
                                                  onValueChange={setValue}
                                                  buttons={[
                                                  {
                                                  value: 'walk',
                                                  label: 'Walking',
                                                  },
                                                  {
                                                  value: 'train',
                                                  label: 'Transit',
                                                  },
                                                  { value: 'drive', label: 'Driving' },
                                                  ]}
                                                  />
                                                  </SafeAreaView>
                                                  );
                                                  };
                                                  const styles = StyleSheet.create({
                                                  container: {
                                                  flex: 1,
                                                  alignItems: 'center',
                                                  },
                                                  });
                                                  export default MyComponent;

                                                function shadow

                                                shadow: (
                                                elevation?: number | Animated.Value,
                                                isV3?: boolean
                                                ) =>
                                                | {
                                                shadowColor: string;
                                                shadowOffset: {
                                                width: Animated.Value;
                                                height: Animated.AnimatedInterpolation<string | number>;
                                                };
                                                shadowOpacity: Animated.AnimatedInterpolation<string | number>;
                                                shadowRadius: Animated.AnimatedInterpolation<string | number>;
                                                }
                                                | {
                                                shadowColor: string;
                                                shadowOpacity: number;
                                                shadowOffset: { width: number; height: number };
                                                shadowRadius: number;
                                                }
                                                | {
                                                shadowColor?: undefined;
                                                shadowOffset?: undefined;
                                                shadowOpacity?: undefined;
                                                shadowRadius?: undefined;
                                                };

                                                  function Subheading

                                                  Subheading: (props: Props) => React.JSX.Element;
                                                  • Typography component for showing a subheading.

                                                    ## Usage

                                                    import * as React from 'react';
                                                    import { Subheading } from 'react-native-paper';
                                                    const MyComponent = () => (
                                                    <Subheading>Subheading</Subheading>
                                                    );
                                                    export default MyComponent;

                                                  function Switch

                                                  Switch: ({
                                                  value,
                                                  disabled,
                                                  onValueChange,
                                                  color,
                                                  theme: themeOverrides,
                                                  ...rest
                                                  }: Props) => React.JSX.Element;
                                                  • Switch is a visual toggle between two mutually exclusive states — on and off.

                                                    ## Usage

                                                    import * as React from 'react';
                                                    import { Switch } from 'react-native-paper';
                                                    const MyComponent = () => {
                                                    const [isSwitchOn, setIsSwitchOn] = React.useState(false);
                                                    const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
                                                    return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;
                                                    };
                                                    export default MyComponent;

                                                  function Title

                                                  Title: (props: Props) => React.JSX.Element;
                                                  • Typography component for showing a title.

                                                    ## Usage

                                                    import * as React from 'react';
                                                    import { Title } from 'react-native-paper';
                                                    const MyComponent = () => (
                                                    <Title>Title</Title>
                                                    );
                                                    export default MyComponent;

                                                  function useTheme

                                                  useTheme: <T = MD3Theme>(overrides?: $DeepPartial<T>) => T;

                                                    function withTheme

                                                    withTheme: <Props extends { theme: unknown }, C>(WrappedComponent: any) => any;

                                                      Enums

                                                      enum MD3TypescaleKey

                                                      enum MD3TypescaleKey {
                                                      displayLarge = 'displayLarge',
                                                      displayMedium = 'displayMedium',
                                                      displaySmall = 'displaySmall',
                                                      headlineLarge = 'headlineLarge',
                                                      headlineMedium = 'headlineMedium',
                                                      headlineSmall = 'headlineSmall',
                                                      titleLarge = 'titleLarge',
                                                      titleMedium = 'titleMedium',
                                                      titleSmall = 'titleSmall',
                                                      labelLarge = 'labelLarge',
                                                      labelMedium = 'labelMedium',
                                                      labelSmall = 'labelSmall',
                                                      bodyLarge = 'bodyLarge',
                                                      bodyMedium = 'bodyMedium',
                                                      bodySmall = 'bodySmall',
                                                      }

                                                        member bodyLarge

                                                        bodyLarge = 'bodyLarge'

                                                          member bodyMedium

                                                          bodyMedium = 'bodyMedium'

                                                            member bodySmall

                                                            bodySmall = 'bodySmall'

                                                              member displayLarge

                                                              displayLarge = 'displayLarge'

                                                                member displayMedium

                                                                displayMedium = 'displayMedium'

                                                                  member displaySmall

                                                                  displaySmall = 'displaySmall'

                                                                    member headlineLarge

                                                                    headlineLarge = 'headlineLarge'

                                                                      member headlineMedium

                                                                      headlineMedium = 'headlineMedium'

                                                                        member headlineSmall

                                                                        headlineSmall = 'headlineSmall'

                                                                          member labelLarge

                                                                          labelLarge = 'labelLarge'

                                                                            member labelMedium

                                                                            labelMedium = 'labelMedium'

                                                                              member labelSmall

                                                                              labelSmall = 'labelSmall'

                                                                                member titleLarge

                                                                                titleLarge = 'titleLarge'

                                                                                  member titleMedium

                                                                                  titleMedium = 'titleMedium'

                                                                                    member titleSmall

                                                                                    titleSmall = 'titleSmall'

                                                                                      Type Aliases

                                                                                      type ActivityIndicatorProps

                                                                                      type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                      /**
                                                                                      * Whether to show the indicator or hide it.
                                                                                      */
                                                                                      animating?: boolean;
                                                                                      /**
                                                                                      * The color of the spinner.
                                                                                      */
                                                                                      color?: string;
                                                                                      /**
                                                                                      * Size of the indicator.
                                                                                      */
                                                                                      size?: 'small' | 'large' | number;
                                                                                      /**
                                                                                      * Whether the indicator should hide when not animating.
                                                                                      */
                                                                                      hidesWhenStopped?: boolean;
                                                                                      style?: StyleProp<ViewStyle>;
                                                                                      /**
                                                                                      * @optional
                                                                                      */
                                                                                      theme?: ThemeProp;
                                                                                      };

                                                                                        type AnimatedFABAnimateFrom

                                                                                        type AnimatedFABAnimateFrom = 'left' | 'right';

                                                                                          type AnimatedFABIconMode

                                                                                          type AnimatedFABIconMode = 'static' | 'dynamic';

                                                                                            type AnimatedFABProps

                                                                                            type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
                                                                                            /**
                                                                                            * Icon to display for the `FAB`.
                                                                                            */
                                                                                            icon: IconSource;
                                                                                            /**
                                                                                            * Label for extended `FAB`.
                                                                                            */
                                                                                            label: string;
                                                                                            /**
                                                                                            * Make the label text uppercased.
                                                                                            */
                                                                                            uppercase?: boolean;
                                                                                            /**
                                                                                            * Type of background drawabale to display the feedback (Android).
                                                                                            * https://reactnative.dev/docs/pressable#rippleconfig
                                                                                            */
                                                                                            background?: PressableAndroidRippleConfig;
                                                                                            /**
                                                                                            * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
                                                                                            * Uses `label` by default if specified.
                                                                                            */
                                                                                            accessibilityLabel?: string;
                                                                                            /**
                                                                                            * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.
                                                                                            */
                                                                                            accessibilityState?: AccessibilityState;
                                                                                            /**
                                                                                            * Custom color for the icon and label of the `FAB`.
                                                                                            */
                                                                                            color?: string;
                                                                                            /**
                                                                                            * Color of the ripple effect.
                                                                                            */
                                                                                            rippleColor?: ColorValue;
                                                                                            /**
                                                                                            * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.
                                                                                            */
                                                                                            disabled?: boolean;
                                                                                            /**
                                                                                            * Whether `FAB` is currently visible.
                                                                                            */
                                                                                            visible?: boolean;
                                                                                            /**
                                                                                            * Function to execute on press.
                                                                                            */
                                                                                            onPress?: (e: GestureResponderEvent) => void;
                                                                                            /**
                                                                                            * Function to execute on long press.
                                                                                            */
                                                                                            onLongPress?: (e: GestureResponderEvent) => void;
                                                                                            /**
                                                                                            * The number of milliseconds a user must touch the element before executing `onLongPress`.
                                                                                            */
                                                                                            delayLongPress?: number;
                                                                                            /**
                                                                                            * 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`.
                                                                                            */
                                                                                            iconMode?: AnimatedFABIconMode;
                                                                                            /**
                                                                                            * Indicates from which direction animation should be performed. The default value is `right`.
                                                                                            */
                                                                                            animateFrom?: AnimatedFABAnimateFrom;
                                                                                            /**
                                                                                            * Whether `FAB` should start animation to extend.
                                                                                            */
                                                                                            extended: boolean;
                                                                                            /**
                                                                                            * Specifies the largest possible scale a label font can reach.
                                                                                            */
                                                                                            labelMaxFontSizeMultiplier?: number;
                                                                                            /**
                                                                                            * @supported Available in v5.x with theme version 3
                                                                                            *
                                                                                            * Color mappings variant for combinations of container and icon colors.
                                                                                            */
                                                                                            variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
                                                                                            style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                            /**
                                                                                            * @optional
                                                                                            */
                                                                                            theme?: ThemeProp;
                                                                                            /**
                                                                                            * TestID used for testing purposes
                                                                                            */
                                                                                            testID?: string;
                                                                                            };

                                                                                              type AppbarActionProps

                                                                                              type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
                                                                                              /**
                                                                                              * Custom color for action icon.
                                                                                              */
                                                                                              color?: string;
                                                                                              /**
                                                                                              * Color of the ripple effect.
                                                                                              */
                                                                                              rippleColor?: ColorValue;
                                                                                              /**
                                                                                              * Name of the icon to show.
                                                                                              */
                                                                                              icon: IconSource;
                                                                                              /**
                                                                                              * Optional icon size.
                                                                                              */
                                                                                              size?: number;
                                                                                              /**
                                                                                              * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
                                                                                              */
                                                                                              disabled?: boolean;
                                                                                              /**
                                                                                              * Accessibility label for the button. This is read by the screen reader when the user taps the button.
                                                                                              */
                                                                                              accessibilityLabel?: string;
                                                                                              /**
                                                                                              * Function to execute on press.
                                                                                              */
                                                                                              onPress?: () => void;
                                                                                              /**
                                                                                              * @supported Available in v5.x with theme version 3
                                                                                              *
                                                                                              * Whether it's the leading button.
                                                                                              */
                                                                                              isLeading?: boolean;
                                                                                              style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                              ref?: React.RefObject<View>;
                                                                                              /**
                                                                                              * @optional
                                                                                              */
                                                                                              theme?: ThemeProp;
                                                                                              };

                                                                                                type AppbarBackActionProps

                                                                                                type Props = $Omit<React.ComponentPropsWithoutRef<typeof AppbarAction>, 'icon'> & {
                                                                                                /**
                                                                                                * Custom color for back icon.
                                                                                                */
                                                                                                color?: string;
                                                                                                /**
                                                                                                * Optional icon size.
                                                                                                */
                                                                                                size?: number;
                                                                                                /**
                                                                                                * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
                                                                                                */
                                                                                                disabled?: boolean;
                                                                                                /**
                                                                                                * Accessibility label for the button. This is read by the screen reader when the user taps the button.
                                                                                                */
                                                                                                accessibilityLabel?: string;
                                                                                                /**
                                                                                                * Function to execute on press.
                                                                                                */
                                                                                                onPress?: (e: GestureResponderEvent) => void;
                                                                                                style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                ref?: React.RefObject<View>;
                                                                                                };

                                                                                                  type AppbarContentProps

                                                                                                  type Props = $RemoveChildren<typeof View> & {
                                                                                                  /**
                                                                                                  * Text or component for the title.
                                                                                                  */
                                                                                                  title: React.ReactNode;
                                                                                                  /**
                                                                                                  * Style for the title, if `title` is a string.
                                                                                                  */
                                                                                                  titleStyle?: StyleProp<TextStyle>;
                                                                                                  /**
                                                                                                  * Reference for the title.
                                                                                                  */
                                                                                                  titleRef?: React.RefObject<TextRef>;
                                                                                                  /**
                                                                                                  * @deprecated Deprecated in v5.x
                                                                                                  * Text for the subtitle.
                                                                                                  */
                                                                                                  subtitle?: React.ReactNode;
                                                                                                  /**
                                                                                                  * @deprecated Deprecated in v5.x
                                                                                                  * Style for the subtitle.
                                                                                                  */
                                                                                                  subtitleStyle?: StyleProp<TextStyle>;
                                                                                                  /**
                                                                                                  * Function to execute on press.
                                                                                                  */
                                                                                                  onPress?: (e: GestureResponderEvent) => void;
                                                                                                  /**
                                                                                                  * If true, disable all interactions for this component.
                                                                                                  */
                                                                                                  disabled?: boolean;
                                                                                                  /**
                                                                                                  * Custom color for the text.
                                                                                                  */
                                                                                                  color?: string;
                                                                                                  /**
                                                                                                  * Specifies the largest possible scale a title font can reach.
                                                                                                  */
                                                                                                  titleMaxFontSizeMultiplier?: number;
                                                                                                  /**
                                                                                                  * @internal
                                                                                                  */
                                                                                                  mode?: 'small' | 'medium' | 'large' | 'center-aligned';
                                                                                                  style?: StyleProp<ViewStyle>;
                                                                                                  /**
                                                                                                  * @optional
                                                                                                  */
                                                                                                  theme?: ThemeProp;
                                                                                                  /**
                                                                                                  * testID to be used on tests.
                                                                                                  */
                                                                                                  testID?: string;
                                                                                                  } & (TitleString | TitleElement);

                                                                                                    type AppbarHeaderProps

                                                                                                    type Props = React.ComponentProps<typeof Appbar> & {
                                                                                                    /**
                                                                                                    * Whether the background color is a dark color. A dark header will render light text and vice-versa.
                                                                                                    */
                                                                                                    dark?: boolean;
                                                                                                    /**
                                                                                                    * Extra padding to add at the top of header to account for translucent status bar.
                                                                                                    * This is automatically handled on iOS >= 11 including iPhone X using `SafeAreaView`.
                                                                                                    * If you are using Expo, we assume translucent status bar and set a height for status bar automatically.
                                                                                                    * Pass `0` or a custom value to disable the default behaviour, and customize the height.
                                                                                                    */
                                                                                                    statusBarHeight?: number;
                                                                                                    /**
                                                                                                    * Content of the header.
                                                                                                    */
                                                                                                    children: React.ReactNode;
                                                                                                    /**
                                                                                                    * @supported Available in v5.x with theme version 3
                                                                                                    *
                                                                                                    * Mode of the Appbar.
                                                                                                    * - `small` - Appbar with default height (64).
                                                                                                    * - `medium` - Appbar with medium height (112).
                                                                                                    * - `large` - Appbar with large height (152).
                                                                                                    * - `center-aligned` - Appbar with default height and center-aligned title.
                                                                                                    */
                                                                                                    mode?: 'small' | 'medium' | 'large' | 'center-aligned';
                                                                                                    /**
                                                                                                    * @supported Available in v5.x with theme version 3
                                                                                                    * Whether Appbar background should have the elevation along with primary color pigment.
                                                                                                    */
                                                                                                    elevated?: boolean;
                                                                                                    /**
                                                                                                    * @optional
                                                                                                    */
                                                                                                    theme?: ThemeProp;
                                                                                                    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                    };

                                                                                                      type AppbarProps

                                                                                                      type Props = Omit<Partial<React.ComponentPropsWithRef<typeof View>>, 'style'> & {
                                                                                                      /**
                                                                                                      * Whether the background color is a dark color. A dark appbar will render light text and vice-versa.
                                                                                                      */
                                                                                                      dark?: boolean;
                                                                                                      /**
                                                                                                      * Content of the `Appbar`.
                                                                                                      */
                                                                                                      children: React.ReactNode;
                                                                                                      /**
                                                                                                      * @supported Available in v5.x with theme version 3
                                                                                                      *
                                                                                                      * Mode of the Appbar.
                                                                                                      * - `small` - Appbar with default height (64).
                                                                                                      * - `medium` - Appbar with medium height (112).
                                                                                                      * - `large` - Appbar with large height (152).
                                                                                                      * - `center-aligned` - Appbar with default height and center-aligned title.
                                                                                                      */
                                                                                                      mode?: 'small' | 'medium' | 'large' | 'center-aligned';
                                                                                                      /**
                                                                                                      * @supported Available in v5.x with theme version 3
                                                                                                      * Whether Appbar background should have the elevation along with primary color pigment.
                                                                                                      */
                                                                                                      elevated?: boolean;
                                                                                                      /**
                                                                                                      * Safe area insets for the Appbar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
                                                                                                      */
                                                                                                      safeAreaInsets?: {
                                                                                                      bottom?: number;
                                                                                                      top?: number;
                                                                                                      left?: number;
                                                                                                      right?: number;
                                                                                                      };
                                                                                                      /**
                                                                                                      * @optional
                                                                                                      */
                                                                                                      theme?: ThemeProp;
                                                                                                      style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                      };

                                                                                                        type AvatarIconProps

                                                                                                        type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                        /**
                                                                                                        * Icon to display for the `Avatar`.
                                                                                                        */
                                                                                                        icon: IconSource;
                                                                                                        /**
                                                                                                        * Size of the avatar.
                                                                                                        */
                                                                                                        size?: number;
                                                                                                        /**
                                                                                                        * Custom color for the icon.
                                                                                                        */
                                                                                                        color?: string;
                                                                                                        style?: StyleProp<ViewStyle>;
                                                                                                        /**
                                                                                                        * @optional
                                                                                                        */
                                                                                                        theme?: ThemeProp;
                                                                                                        };

                                                                                                          type AvatarImageProps

                                                                                                          type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                          /**
                                                                                                          * Image to display for the `Avatar`.
                                                                                                          * It accepts a standard React Native Image `source` prop
                                                                                                          * Or a function that returns an `Image`.
                                                                                                          */
                                                                                                          source: AvatarImageSource;
                                                                                                          /**
                                                                                                          * Size of the avatar.
                                                                                                          */
                                                                                                          size?: number;
                                                                                                          style?: StyleProp<ViewStyle>;
                                                                                                          /**
                                                                                                          * Invoked on load error.
                                                                                                          */
                                                                                                          onError?: ImageProps['onError'];
                                                                                                          /**
                                                                                                          * Invoked on mount and on layout changes.
                                                                                                          */
                                                                                                          onLayout?: ImageProps['onLayout'];
                                                                                                          /**
                                                                                                          * Invoked when load completes successfully.
                                                                                                          */
                                                                                                          onLoad?: ImageProps['onLoad'];
                                                                                                          /**
                                                                                                          * Invoked when load either succeeds or fails.
                                                                                                          */
                                                                                                          onLoadEnd?: ImageProps['onLoadEnd'];
                                                                                                          /**
                                                                                                          * Invoked on load start.
                                                                                                          */
                                                                                                          onLoadStart?: ImageProps['onLoadStart'];
                                                                                                          /**
                                                                                                          * Invoked on download progress.
                                                                                                          */
                                                                                                          onProgress?: ImageProps['onProgress'];
                                                                                                          /**
                                                                                                          * @optional
                                                                                                          */
                                                                                                          theme?: ThemeProp;
                                                                                                          };

                                                                                                            type AvatarTextProps

                                                                                                            type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                            /**
                                                                                                            * Initials to show as the text in the `Avatar`.
                                                                                                            */
                                                                                                            label: string;
                                                                                                            /**
                                                                                                            * Size of the avatar.
                                                                                                            */
                                                                                                            size?: number;
                                                                                                            /**
                                                                                                            * Custom color for the text.
                                                                                                            */
                                                                                                            color?: string;
                                                                                                            /**
                                                                                                            * Style for text container
                                                                                                            */
                                                                                                            style?: StyleProp<ViewStyle>;
                                                                                                            /**
                                                                                                            * Style for the title.
                                                                                                            */
                                                                                                            labelStyle?: StyleProp<TextStyle>;
                                                                                                            /**
                                                                                                            * Specifies the largest possible scale a text font can reach.
                                                                                                            */
                                                                                                            maxFontSizeMultiplier?: number;
                                                                                                            /**
                                                                                                            * @optional
                                                                                                            */
                                                                                                            theme?: ThemeProp;
                                                                                                            };

                                                                                                              type BadgeProps

                                                                                                              type Props = React.ComponentProps<typeof Animated.Text> & {
                                                                                                              /**
                                                                                                              * Whether the badge is visible
                                                                                                              */
                                                                                                              visible?: boolean;
                                                                                                              /**
                                                                                                              * Content of the `Badge`.
                                                                                                              */
                                                                                                              children?: string | number;
                                                                                                              /**
                                                                                                              * Size of the `Badge`.
                                                                                                              */
                                                                                                              size?: number;
                                                                                                              style?: StyleProp<TextStyle>;
                                                                                                              ref?: React.RefObject<typeof Animated.Text>;
                                                                                                              /**
                                                                                                              * @optional
                                                                                                              */
                                                                                                              theme?: ThemeProp;
                                                                                                              };

                                                                                                                type BannerProps

                                                                                                                type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
                                                                                                                /**
                                                                                                                * Whether banner is currently visible.
                                                                                                                */
                                                                                                                visible: boolean;
                                                                                                                /**
                                                                                                                * Content that will be displayed inside banner.
                                                                                                                */
                                                                                                                children: React.ReactNode;
                                                                                                                /**
                                                                                                                * Icon to display for the `Banner`. Can be an image.
                                                                                                                */
                                                                                                                icon?: IconSource;
                                                                                                                /**
                                                                                                                * Action items to shown in the banner.
                                                                                                                * An action item should contain the following properties:
                                                                                                                *
                                                                                                                * - `label`: label of the action button (required)
                                                                                                                * - `onPress`: callback that is called when button is pressed (required)
                                                                                                                *
                                                                                                                * To customize button you can pass other props that button component takes.
                                                                                                                */
                                                                                                                actions?: Array<
                                                                                                                {
                                                                                                                label: string;
                                                                                                                } & $RemoveChildren<typeof Button>
                                                                                                                >;
                                                                                                                /**
                                                                                                                * Style of banner's inner content.
                                                                                                                * Use this prop to apply custom width for wide layouts.
                                                                                                                */
                                                                                                                contentStyle?: StyleProp<ViewStyle>;
                                                                                                                /**
                                                                                                                * @supported Available in v5.x with theme version 3
                                                                                                                * Changes Banner shadow and background on iOS and Android.
                                                                                                                */
                                                                                                                elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
                                                                                                                /**
                                                                                                                * Specifies the largest possible scale a text font can reach.
                                                                                                                */
                                                                                                                maxFontSizeMultiplier?: number;
                                                                                                                style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                                ref?: React.RefObject<View>;
                                                                                                                /**
                                                                                                                * @optional
                                                                                                                */
                                                                                                                theme?: ThemeProp;
                                                                                                                /**
                                                                                                                * @optional
                                                                                                                * Optional callback that will be called after the opening animation finished running normally
                                                                                                                */
                                                                                                                onShowAnimationFinished?: Animated.EndCallback;
                                                                                                                /**
                                                                                                                * @optional
                                                                                                                * Optional callback that will be called after the closing animation finished running normally
                                                                                                                */
                                                                                                                onHideAnimationFinished?: Animated.EndCallback;
                                                                                                                };

                                                                                                                  type BottomNavigationProps

                                                                                                                  type Props<Route extends BaseRoute> = {
                                                                                                                  /**
                                                                                                                  * Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.
                                                                                                                  *
                                                                                                                  * By default, this is `false` with theme version 3 and `true` when you have more than 3 tabs.
                                                                                                                  * Pass `shifting={false}` to explicitly disable this animation, or `shifting={true}` to always use this animation.
                                                                                                                  * Note that you need at least 2 tabs be able to run this animation.
                                                                                                                  */
                                                                                                                  shifting?: boolean;
                                                                                                                  /**
                                                                                                                  * Whether to show labels in tabs. When `false`, only icons will be displayed.
                                                                                                                  */
                                                                                                                  labeled?: boolean;
                                                                                                                  /**
                                                                                                                  * Whether tabs should be spread across the entire width.
                                                                                                                  */
                                                                                                                  compact?: boolean;
                                                                                                                  /**
                                                                                                                  * State for the bottom navigation. The state should contain the following properties:
                                                                                                                  *
                                                                                                                  * - `index`: a number representing the index of the active route in the `routes` array
                                                                                                                  * - `routes`: an array containing a list of route objects used for rendering the tabs
                                                                                                                  *
                                                                                                                  * Each route object should contain the following properties:
                                                                                                                  *
                                                                                                                  * - `key`: a unique key to identify the route (required)
                                                                                                                  * - `title`: title of the route to use as the tab label
                                                                                                                  * - `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
                                                                                                                  * - `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3
                                                                                                                  * - `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2.
                                                                                                                  * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
                                                                                                                  * - `accessibilityLabel`: accessibility label for the tab button
                                                                                                                  * - `testID`: test id for the tab button
                                                                                                                  *
                                                                                                                  * Example:
                                                                                                                  *
                                                                                                                  * ```js
                                                                                                                  * {
                                                                                                                  * index: 1,
                                                                                                                  * routes: [
                                                                                                                  * { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
                                                                                                                  * { key: 'albums', title: 'Albums', focusedIcon: 'album' },
                                                                                                                  * { key: 'recents', title: 'Recents', focusedIcon: 'history' },
                                                                                                                  * { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
                                                                                                                  * ]
                                                                                                                  * }
                                                                                                                  * ```
                                                                                                                  *
                                                                                                                  * `BottomNavigation` is a controlled component, which means the `index` needs to be updated via the `onIndexChange` callback.
                                                                                                                  */
                                                                                                                  navigationState: NavigationState<Route>;
                                                                                                                  /**
                                                                                                                  * Callback which is called on tab change, receives the index of the new tab as argument.
                                                                                                                  * The navigation state needs to be updated when it's called, otherwise the change is dropped.
                                                                                                                  */
                                                                                                                  onIndexChange: (index: number) => void;
                                                                                                                  /**
                                                                                                                  * Callback which returns a react element to render as the page for the tab. Receives an object containing the route as the argument:
                                                                                                                  *
                                                                                                                  * ```js
                                                                                                                  * renderScene = ({ route, jumpTo }) => {
                                                                                                                  * switch (route.key) {
                                                                                                                  * case 'music':
                                                                                                                  * return <MusicRoute jumpTo={jumpTo} />;
                                                                                                                  * case 'albums':
                                                                                                                  * return <AlbumsRoute jumpTo={jumpTo} />;
                                                                                                                  * }
                                                                                                                  * }
                                                                                                                  * ```
                                                                                                                  *
                                                                                                                  * Pages are lazily rendered, which means that a page will be rendered the first time you navigate to it.
                                                                                                                  * After initial render, all the pages stay rendered to preserve their state.
                                                                                                                  *
                                                                                                                  * You need to make sure that your individual routes implement a `shouldComponentUpdate` to improve the performance.
                                                                                                                  * To make it easier to specify the components, you can use the `SceneMap` helper:
                                                                                                                  *
                                                                                                                  * ```js
                                                                                                                  * renderScene = BottomNavigation.SceneMap({
                                                                                                                  * music: MusicRoute,
                                                                                                                  * albums: AlbumsRoute,
                                                                                                                  * });
                                                                                                                  * ```
                                                                                                                  *
                                                                                                                  * Specifying the components this way is easier and takes care of implementing a `shouldComponentUpdate` method.
                                                                                                                  * Each component will receive the current route and a `jumpTo` method as it's props.
                                                                                                                  * The `jumpTo` method can be used to navigate to other tabs programmatically:
                                                                                                                  *
                                                                                                                  * ```js
                                                                                                                  * this.props.jumpTo('albums')
                                                                                                                  * ```
                                                                                                                  */
                                                                                                                  renderScene: (props: {
                                                                                                                  route: Route;
                                                                                                                  jumpTo: (key: string) => void;
                                                                                                                  }) => React.ReactNode | null;
                                                                                                                  /**
                                                                                                                  * Callback which returns a React Element to be used as tab icon.
                                                                                                                  */
                                                                                                                  renderIcon?: (props: {
                                                                                                                  route: Route;
                                                                                                                  focused: boolean;
                                                                                                                  color: string;
                                                                                                                  }) => React.ReactNode;
                                                                                                                  /**
                                                                                                                  * Callback which React Element to be used as tab label.
                                                                                                                  */
                                                                                                                  renderLabel?: (props: {
                                                                                                                  route: Route;
                                                                                                                  focused: boolean;
                                                                                                                  color: string;
                                                                                                                  }) => React.ReactNode;
                                                                                                                  /**
                                                                                                                  * Callback which returns a React element to be used as the touchable for the tab item.
                                                                                                                  * Renders a `TouchableRipple` on Android and `Pressable` on iOS.
                                                                                                                  */
                                                                                                                  renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode;
                                                                                                                  /**
                                                                                                                  * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
                                                                                                                  * Uses `route.accessibilityLabel` by default.
                                                                                                                  */
                                                                                                                  getAccessibilityLabel?: (props: { route: Route }) => string | undefined;
                                                                                                                  /**
                                                                                                                  * Get badge for the tab, uses `route.badge` by default.
                                                                                                                  */
                                                                                                                  getBadge?: (props: { route: Route }) => boolean | number | string | undefined;
                                                                                                                  /**
                                                                                                                  * Get color for the tab, uses `route.color` by default.
                                                                                                                  */
                                                                                                                  getColor?: (props: { route: Route }) => string | undefined;
                                                                                                                  /**
                                                                                                                  * Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component.
                                                                                                                  */
                                                                                                                  getLabelText?: (props: { route: Route }) => string | undefined;
                                                                                                                  /**
                                                                                                                  * Get lazy for the current screen. Uses true by default.
                                                                                                                  */
                                                                                                                  getLazy?: (props: { route: Route }) => boolean | undefined;
                                                                                                                  /**
                                                                                                                  * Get the id to locate this tab button in tests, uses `route.testID` by default.
                                                                                                                  */
                                                                                                                  getTestID?: (props: { route: Route }) => string | undefined;
                                                                                                                  /**
                                                                                                                  * Function to execute on tab press. It receives the route for the pressed tab, useful for things like scroll to top.
                                                                                                                  */
                                                                                                                  onTabPress?: (
                                                                                                                  props: {
                                                                                                                  route: Route;
                                                                                                                  } & TabPressEvent
                                                                                                                  ) => void;
                                                                                                                  /**
                                                                                                                  * Function to execute on tab long press. It receives the route for the pressed tab, useful for things like custom action when longed pressed.
                                                                                                                  */
                                                                                                                  onTabLongPress?: (
                                                                                                                  props: {
                                                                                                                  route: Route;
                                                                                                                  } & TabPressEvent
                                                                                                                  ) => void;
                                                                                                                  /**
                                                                                                                  * Custom color for icon and label in the active tab.
                                                                                                                  */
                                                                                                                  activeColor?: string;
                                                                                                                  /**
                                                                                                                  * Custom color for icon and label in the inactive tab.
                                                                                                                  */
                                                                                                                  inactiveColor?: string;
                                                                                                                  /**
                                                                                                                  * Whether animation is enabled for scenes transitions in `shifting` mode.
                                                                                                                  * By default, the scenes cross-fade during tab change when `shifting` is enabled.
                                                                                                                  * Specify `sceneAnimationEnabled` as `false` to disable the animation.
                                                                                                                  */
                                                                                                                  sceneAnimationEnabled?: boolean;
                                                                                                                  /**
                                                                                                                  * The scene animation effect. Specify `'shifting'` for a different effect.
                                                                                                                  * By default, 'opacity' will be used.
                                                                                                                  */
                                                                                                                  sceneAnimationType?: 'opacity' | 'shifting';
                                                                                                                  /**
                                                                                                                  * The scene animation Easing.
                                                                                                                  */
                                                                                                                  sceneAnimationEasing?: EasingFunction | undefined;
                                                                                                                  /**
                                                                                                                  * Whether the bottom navigation bar is hidden when keyboard is shown.
                                                                                                                  * On Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.
                                                                                                                  */
                                                                                                                  keyboardHidesNavigationBar?: boolean;
                                                                                                                  /**
                                                                                                                  * Safe area insets for the tab bar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
                                                                                                                  * The bottom insets for iOS is added by default. You can override the behavior with this option.
                                                                                                                  */
                                                                                                                  safeAreaInsets?: {
                                                                                                                  top?: number;
                                                                                                                  right?: number;
                                                                                                                  bottom?: number;
                                                                                                                  left?: number;
                                                                                                                  };
                                                                                                                  /**
                                                                                                                  * Style for the bottom navigation bar. You can pass a custom background color here:
                                                                                                                  *
                                                                                                                  * ```js
                                                                                                                  * barStyle={{ backgroundColor: '#694fad' }}
                                                                                                                  * ```
                                                                                                                  */
                                                                                                                  barStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                                  /**
                                                                                                                  * Specifies the largest possible scale a label font can reach.
                                                                                                                  */
                                                                                                                  labelMaxFontSizeMultiplier?: number;
                                                                                                                  style?: StyleProp<ViewStyle>;
                                                                                                                  activeIndicatorStyle?: StyleProp<ViewStyle>;
                                                                                                                  /**
                                                                                                                  * @optional
                                                                                                                  */
                                                                                                                  theme?: ThemeProp;
                                                                                                                  /**
                                                                                                                  * TestID used for testing purposes
                                                                                                                  */
                                                                                                                  testID?: string;
                                                                                                                  };

                                                                                                                    type BottomNavigationRoute

                                                                                                                    type BaseRoute = {
                                                                                                                    key: string;
                                                                                                                    title?: string;
                                                                                                                    focusedIcon?: IconSource;
                                                                                                                    unfocusedIcon?: IconSource;
                                                                                                                    badge?: string | number | boolean;
                                                                                                                    /**
                                                                                                                    * @deprecated In v5.x works only with theme version 2.
                                                                                                                    */
                                                                                                                    color?: string;
                                                                                                                    accessibilityLabel?: string;
                                                                                                                    testID?: string;
                                                                                                                    lazy?: boolean;
                                                                                                                    };

                                                                                                                      type ButtonProps

                                                                                                                      type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
                                                                                                                      /**
                                                                                                                      * Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.
                                                                                                                      * - `text` - flat button without background or outline, used for the lowest priority actions, especially when presenting multiple options.
                                                                                                                      * - `outlined` - button with an outline without background, typically used for important, but not primary action – represents medium emphasis.
                                                                                                                      * - `contained` - button with a background color, used for important action, have the most visual impact and high emphasis.
                                                                                                                      * - `elevated` - button with a background color and elevation, used when absolutely necessary e.g. button requires visual separation from a patterned background. @supported Available in v5.x with theme version 3
                                                                                                                      * - `contained-tonal` - button with a secondary background color, an alternative middle ground between contained and outlined buttons. @supported Available in v5.x with theme version 3
                                                                                                                      */
                                                                                                                      mode?: 'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal';
                                                                                                                      /**
                                                                                                                      * Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for:
                                                                                                                      * * `contained` mode for theme version 2
                                                                                                                      * * `contained`, `contained-tonal` and `elevated` modes for theme version 3.
                                                                                                                      */
                                                                                                                      dark?: boolean;
                                                                                                                      /**
                                                                                                                      * Use a compact look, useful for `text` buttons in a row.
                                                                                                                      */
                                                                                                                      compact?: boolean;
                                                                                                                      /**
                                                                                                                      * @deprecated Deprecated in v5.x - use `buttonColor` or `textColor` instead.
                                                                                                                      * Custom text color for flat button, or background color for contained button.
                                                                                                                      */
                                                                                                                      color?: string;
                                                                                                                      /**
                                                                                                                      * Custom button's background color.
                                                                                                                      */
                                                                                                                      buttonColor?: string;
                                                                                                                      /**
                                                                                                                      * Custom button's text color.
                                                                                                                      */
                                                                                                                      textColor?: string;
                                                                                                                      /**
                                                                                                                      * Color of the ripple effect.
                                                                                                                      */
                                                                                                                      rippleColor?: ColorValue;
                                                                                                                      /**
                                                                                                                      * Whether to show a loading indicator.
                                                                                                                      */
                                                                                                                      loading?: boolean;
                                                                                                                      /**
                                                                                                                      * Icon to display for the `Button`.
                                                                                                                      */
                                                                                                                      icon?: IconSource;
                                                                                                                      /**
                                                                                                                      * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
                                                                                                                      */
                                                                                                                      disabled?: boolean;
                                                                                                                      /**
                                                                                                                      * Label text of the button.
                                                                                                                      */
                                                                                                                      children: React.ReactNode;
                                                                                                                      /**
                                                                                                                      * Make the label text uppercased. Note that this won't work if you pass React elements as children.
                                                                                                                      */
                                                                                                                      uppercase?: boolean;
                                                                                                                      /**
                                                                                                                      * Type of background drawabale to display the feedback (Android).
                                                                                                                      * https://reactnative.dev/docs/pressable#rippleconfig
                                                                                                                      */
                                                                                                                      background?: PressableAndroidRippleConfig;
                                                                                                                      /**
                                                                                                                      * Accessibility label for the button. This is read by the screen reader when the user taps the button.
                                                                                                                      */
                                                                                                                      accessibilityLabel?: string;
                                                                                                                      /**
                                                                                                                      * Accessibility hint for the button. This is read by the screen reader when the user taps the button.
                                                                                                                      */
                                                                                                                      accessibilityHint?: string;
                                                                                                                      /**
                                                                                                                      * Accessibility role for the button. The "button" role is set by default.
                                                                                                                      */
                                                                                                                      accessibilityRole?: AccessibilityRole;
                                                                                                                      /**
                                                                                                                      * Function to execute on press.
                                                                                                                      */
                                                                                                                      onPress?: (e: GestureResponderEvent) => void;
                                                                                                                      /**
                                                                                                                      * Function to execute as soon as the touchable element is pressed and invoked even before onPress.
                                                                                                                      */
                                                                                                                      onPressIn?: (e: GestureResponderEvent) => void;
                                                                                                                      /**
                                                                                                                      * Function to execute as soon as the touch is released even before onPress.
                                                                                                                      */
                                                                                                                      onPressOut?: (e: GestureResponderEvent) => void;
                                                                                                                      /**
                                                                                                                      * Function to execute on long press.
                                                                                                                      */
                                                                                                                      onLongPress?: (e: GestureResponderEvent) => void;
                                                                                                                      /**
                                                                                                                      * The number of milliseconds a user must touch the element before executing `onLongPress`.
                                                                                                                      */
                                                                                                                      delayLongPress?: number;
                                                                                                                      /**
                                                                                                                      * Style of button's inner content.
                                                                                                                      * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`.
                                                                                                                      */
                                                                                                                      contentStyle?: StyleProp<ViewStyle>;
                                                                                                                      /**
                                                                                                                      * Specifies the largest possible scale a text font can reach.
                                                                                                                      */
                                                                                                                      maxFontSizeMultiplier?: number;
                                                                                                                      style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                                      /**
                                                                                                                      * Style for the button text.
                                                                                                                      */
                                                                                                                      labelStyle?: StyleProp<TextStyle>;
                                                                                                                      /**
                                                                                                                      * @optional
                                                                                                                      */
                                                                                                                      theme?: ThemeProp;
                                                                                                                      /**
                                                                                                                      * testID to be used on tests.
                                                                                                                      */
                                                                                                                      testID?: string;
                                                                                                                      };

                                                                                                                        type CaptionProps

                                                                                                                        type Props = React.ComponentProps<typeof Text> & {
                                                                                                                        style?: StyleProp<TextStyle>;
                                                                                                                        children: React.ReactNode;
                                                                                                                        };

                                                                                                                          type CardActionsProps

                                                                                                                          type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                                          /**
                                                                                                                          * Items inside the `CardActions`.
                                                                                                                          */
                                                                                                                          children: React.ReactNode;
                                                                                                                          style?: StyleProp<ViewStyle>;
                                                                                                                          theme?: ThemeProp;
                                                                                                                          };

                                                                                                                            type CardContentProps

                                                                                                                            type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                                            /**
                                                                                                                            * Items inside the `Card.Content`.
                                                                                                                            */
                                                                                                                            children: React.ReactNode;
                                                                                                                            /**
                                                                                                                            * @internal
                                                                                                                            */
                                                                                                                            index?: number;
                                                                                                                            /**
                                                                                                                            * @internal
                                                                                                                            */
                                                                                                                            total?: number;
                                                                                                                            /**
                                                                                                                            * @internal
                                                                                                                            */
                                                                                                                            siblings?: Array<string>;
                                                                                                                            style?: StyleProp<ViewStyle>;
                                                                                                                            };

                                                                                                                              type CardCoverProps

                                                                                                                              type Props = React.ComponentPropsWithRef<typeof Image> & {
                                                                                                                              /**
                                                                                                                              * @internal
                                                                                                                              */
                                                                                                                              index?: number;
                                                                                                                              /**
                                                                                                                              * @internal
                                                                                                                              */
                                                                                                                              total?: number;
                                                                                                                              style?: StyleProp<ViewStyle>;
                                                                                                                              /**
                                                                                                                              * @optional
                                                                                                                              */
                                                                                                                              theme?: ThemeProp;
                                                                                                                              };

                                                                                                                                type CardProps

                                                                                                                                type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
                                                                                                                                /**
                                                                                                                                * Mode of the Card.
                                                                                                                                * - `elevated` - Card with elevation.
                                                                                                                                * - `contained` - Card without outline and elevation @supported Available in v5.x with theme version 3
                                                                                                                                * - `outlined` - Card with an outline.
                                                                                                                                */
                                                                                                                                mode?: Mode;
                                                                                                                                /**
                                                                                                                                * Content of the `Card`.
                                                                                                                                */
                                                                                                                                children: React.ReactNode;
                                                                                                                                /**
                                                                                                                                * Function to execute on long press.
                                                                                                                                */
                                                                                                                                onLongPress?: () => void;
                                                                                                                                /**
                                                                                                                                * Function to execute on press.
                                                                                                                                */
                                                                                                                                onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                /**
                                                                                                                                * Function to execute as soon as the touchable element is pressed and invoked even before onPress.
                                                                                                                                */
                                                                                                                                onPressIn?: (e: GestureResponderEvent) => void;
                                                                                                                                /**
                                                                                                                                * Function to execute as soon as the touch is released even before onPress.
                                                                                                                                */
                                                                                                                                onPressOut?: (e: GestureResponderEvent) => void;
                                                                                                                                /**
                                                                                                                                * The number of milliseconds a user must touch the element before executing `onLongPress`.
                                                                                                                                */
                                                                                                                                delayLongPress?: number;
                                                                                                                                /**
                                                                                                                                * If true, disable all interactions for this component.
                                                                                                                                */
                                                                                                                                disabled?: boolean;
                                                                                                                                /**
                                                                                                                                * Changes Card shadow and background on iOS and Android.
                                                                                                                                */
                                                                                                                                elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
                                                                                                                                /**
                                                                                                                                * Style of card's inner content.
                                                                                                                                */
                                                                                                                                contentStyle?: StyleProp<ViewStyle>;
                                                                                                                                style?: StyleProp<ViewStyle>;
                                                                                                                                /**
                                                                                                                                * @optional
                                                                                                                                */
                                                                                                                                theme?: ThemeProp;
                                                                                                                                /**
                                                                                                                                * Pass down testID from card props to touchable
                                                                                                                                */
                                                                                                                                testID?: string;
                                                                                                                                /**
                                                                                                                                * Pass down accessible from card props to touchable
                                                                                                                                */
                                                                                                                                accessible?: boolean;
                                                                                                                                };

                                                                                                                                  type CardTitleProps

                                                                                                                                  type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                                                  /**
                                                                                                                                  * Text for the title. Note that this will only accept a string or `<Text>`-based node.
                                                                                                                                  */
                                                                                                                                  title: React.ReactNode;
                                                                                                                                  /**
                                                                                                                                  * Style for the title.
                                                                                                                                  */
                                                                                                                                  titleStyle?: StyleProp<TextStyle>;
                                                                                                                                  /**
                                                                                                                                  * Number of lines for the title.
                                                                                                                                  */
                                                                                                                                  titleNumberOfLines?: number;
                                                                                                                                  /**
                                                                                                                                  * @supported Available in v5.x with theme version 3
                                                                                                                                  *
                                                                                                                                  * Title text variant defines appropriate text styles for type role and its size.
                                                                                                                                  * Available variants:
                                                                                                                                  *
                                                                                                                                  * Display: `displayLarge`, `displayMedium`, `displaySmall`
                                                                                                                                  *
                                                                                                                                  * Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
                                                                                                                                  *
                                                                                                                                  * Title: `titleLarge`, `titleMedium`, `titleSmall`
                                                                                                                                  *
                                                                                                                                  * Label: `labelLarge`, `labelMedium`, `labelSmall`
                                                                                                                                  *
                                                                                                                                  * Body: `bodyLarge`, `bodyMedium`, `bodySmall`
                                                                                                                                  */
                                                                                                                                  titleVariant?: keyof typeof MD3TypescaleKey;
                                                                                                                                  /**
                                                                                                                                  * Text for the subtitle. Note that this will only accept a string or `<Text>`-based node.
                                                                                                                                  */
                                                                                                                                  subtitle?: React.ReactNode;
                                                                                                                                  /**
                                                                                                                                  * Style for the subtitle.
                                                                                                                                  */
                                                                                                                                  subtitleStyle?: StyleProp<TextStyle>;
                                                                                                                                  /**
                                                                                                                                  * Number of lines for the subtitle.
                                                                                                                                  */
                                                                                                                                  subtitleNumberOfLines?: number;
                                                                                                                                  /**
                                                                                                                                  * @supported Available in v5.x with theme version 3
                                                                                                                                  *
                                                                                                                                  * Subtitle text variant defines appropriate text styles for type role and its size.
                                                                                                                                  * Available variants:
                                                                                                                                  *
                                                                                                                                  * Display: `displayLarge`, `displayMedium`, `displaySmall`
                                                                                                                                  *
                                                                                                                                  * Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
                                                                                                                                  *
                                                                                                                                  * Title: `titleLarge`, `titleMedium`, `titleSmall`
                                                                                                                                  *
                                                                                                                                  * Label: `labelLarge`, `labelMedium`, `labelSmall`
                                                                                                                                  *
                                                                                                                                  * Body: `bodyLarge`, `bodyMedium`, `bodySmall`
                                                                                                                                  */
                                                                                                                                  subtitleVariant?: keyof typeof MD3TypescaleKey;
                                                                                                                                  /**
                                                                                                                                  * Callback which returns a React element to display on the left side.
                                                                                                                                  */
                                                                                                                                  left?: (props: { size: number }) => React.ReactNode;
                                                                                                                                  /**
                                                                                                                                  * Style for the left element wrapper.
                                                                                                                                  */
                                                                                                                                  leftStyle?: StyleProp<ViewStyle>;
                                                                                                                                  /**
                                                                                                                                  * Callback which returns a React element to display on the right side.
                                                                                                                                  */
                                                                                                                                  right?: (props: { size: number }) => React.ReactNode;
                                                                                                                                  /**
                                                                                                                                  * Style for the right element wrapper.
                                                                                                                                  */
                                                                                                                                  rightStyle?: StyleProp<ViewStyle>;
                                                                                                                                  /**
                                                                                                                                  * @internal
                                                                                                                                  */
                                                                                                                                  index?: number;
                                                                                                                                  /**
                                                                                                                                  * @internal
                                                                                                                                  */
                                                                                                                                  total?: number;
                                                                                                                                  /**
                                                                                                                                  * Specifies the largest possible scale a title font can reach.
                                                                                                                                  */
                                                                                                                                  titleMaxFontSizeMultiplier?: number;
                                                                                                                                  /**
                                                                                                                                  * Specifies the largest possible scale a subtitle font can reach.
                                                                                                                                  */
                                                                                                                                  subtitleMaxFontSizeMultiplier?: number;
                                                                                                                                  style?: StyleProp<ViewStyle>;
                                                                                                                                  /**
                                                                                                                                  * @optional
                                                                                                                                  */
                                                                                                                                  theme?: ThemeProp;
                                                                                                                                  };

                                                                                                                                    type CheckboxAndroidProps

                                                                                                                                    type Props = $RemoveChildren<typeof TouchableRipple> & {
                                                                                                                                    /**
                                                                                                                                    * Status of checkbox.
                                                                                                                                    */
                                                                                                                                    status: 'checked' | 'unchecked' | 'indeterminate';
                                                                                                                                    /**
                                                                                                                                    * Whether checkbox is disabled.
                                                                                                                                    */
                                                                                                                                    disabled?: boolean;
                                                                                                                                    /**
                                                                                                                                    * Function to execute on press.
                                                                                                                                    */
                                                                                                                                    onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                    /**
                                                                                                                                    * Custom color for unchecked checkbox.
                                                                                                                                    */
                                                                                                                                    uncheckedColor?: string;
                                                                                                                                    /**
                                                                                                                                    * Custom color for checkbox.
                                                                                                                                    */
                                                                                                                                    color?: string;
                                                                                                                                    /**
                                                                                                                                    * @optional
                                                                                                                                    */
                                                                                                                                    theme?: ThemeProp;
                                                                                                                                    /**
                                                                                                                                    * testID to be used on tests.
                                                                                                                                    */
                                                                                                                                    testID?: string;
                                                                                                                                    };

                                                                                                                                      type CheckboxIOSProps

                                                                                                                                      type Props = $RemoveChildren<typeof TouchableRipple> & {
                                                                                                                                      /**
                                                                                                                                      * Status of checkbox.
                                                                                                                                      */
                                                                                                                                      status: 'checked' | 'unchecked' | 'indeterminate';
                                                                                                                                      /**
                                                                                                                                      * Whether checkbox is disabled.
                                                                                                                                      */
                                                                                                                                      disabled?: boolean;
                                                                                                                                      /**
                                                                                                                                      * Function to execute on press.
                                                                                                                                      */
                                                                                                                                      onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                      /**
                                                                                                                                      * Custom color for checkbox.
                                                                                                                                      */
                                                                                                                                      color?: string;
                                                                                                                                      /**
                                                                                                                                      * @optional
                                                                                                                                      */
                                                                                                                                      theme?: ThemeProp;
                                                                                                                                      /**
                                                                                                                                      * testID to be used on tests.
                                                                                                                                      */
                                                                                                                                      testID?: string;
                                                                                                                                      };

                                                                                                                                        type CheckboxItemProps

                                                                                                                                        type Props = {
                                                                                                                                        /**
                                                                                                                                        * Status of checkbox.
                                                                                                                                        */
                                                                                                                                        status: 'checked' | 'unchecked' | 'indeterminate';
                                                                                                                                        /**
                                                                                                                                        * Whether checkbox is disabled.
                                                                                                                                        */
                                                                                                                                        disabled?: boolean;
                                                                                                                                        /**
                                                                                                                                        * Label to be displayed on the item.
                                                                                                                                        */
                                                                                                                                        label: string;
                                                                                                                                        /**
                                                                                                                                        * Function to execute on press.
                                                                                                                                        */
                                                                                                                                        onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                        /**
                                                                                                                                        * Function to execute on long press.
                                                                                                                                        */
                                                                                                                                        onLongPress?: (e: GestureResponderEvent) => void;
                                                                                                                                        /**
                                                                                                                                        * Type of background drawabale to display the feedback (Android).
                                                                                                                                        * https://reactnative.dev/docs/pressable#rippleconfig
                                                                                                                                        */
                                                                                                                                        background?: PressableAndroidRippleConfig;
                                                                                                                                        /**
                                                                                                                                        * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
                                                                                                                                        */
                                                                                                                                        accessibilityLabel?: string;
                                                                                                                                        /**
                                                                                                                                        * Custom color for unchecked checkbox.
                                                                                                                                        */
                                                                                                                                        uncheckedColor?: string;
                                                                                                                                        /**
                                                                                                                                        * Custom color for checkbox.
                                                                                                                                        */
                                                                                                                                        color?: string;
                                                                                                                                        /**
                                                                                                                                        * Color of the ripple effect.
                                                                                                                                        */
                                                                                                                                        rippleColor?: ColorValue;
                                                                                                                                        /**
                                                                                                                                        * Additional styles for container View.
                                                                                                                                        */
                                                                                                                                        style?: StyleProp<ViewStyle>;
                                                                                                                                        /**
                                                                                                                                        * Specifies the largest possible scale a label font can reach.
                                                                                                                                        */
                                                                                                                                        labelMaxFontSizeMultiplier?: number;
                                                                                                                                        /**
                                                                                                                                        * Style that is passed to Label element.
                                                                                                                                        */
                                                                                                                                        labelStyle?: StyleProp<TextStyle>;
                                                                                                                                        /**
                                                                                                                                        * @supported Available in v5.x with theme version 3
                                                                                                                                        *
                                                                                                                                        * Label text variant defines appropriate text styles for type role and its size.
                                                                                                                                        * Available variants:
                                                                                                                                        *
                                                                                                                                        * Display: `displayLarge`, `displayMedium`, `displaySmall`
                                                                                                                                        *
                                                                                                                                        * Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
                                                                                                                                        *
                                                                                                                                        * Title: `titleLarge`, `titleMedium`, `titleSmall`
                                                                                                                                        *
                                                                                                                                        * Label: `labelLarge`, `labelMedium`, `labelSmall`
                                                                                                                                        *
                                                                                                                                        * Body: `bodyLarge`, `bodyMedium`, `bodySmall`
                                                                                                                                        */
                                                                                                                                        labelVariant?: keyof typeof MD3TypescaleKey;
                                                                                                                                        /**
                                                                                                                                        * @optional
                                                                                                                                        */
                                                                                                                                        theme?: ThemeProp;
                                                                                                                                        /**
                                                                                                                                        * testID to be used on tests.
                                                                                                                                        */
                                                                                                                                        testID?: string;
                                                                                                                                        /**
                                                                                                                                        * Checkbox control position.
                                                                                                                                        */
                                                                                                                                        position?: 'leading' | 'trailing';
                                                                                                                                        /**
                                                                                                                                        * Whether `<Checkbox.Android />` or `<Checkbox.IOS />` should be used.
                                                                                                                                        * Left undefined `<Checkbox />` will be used.
                                                                                                                                        */
                                                                                                                                        mode?: 'android' | 'ios';
                                                                                                                                        };

                                                                                                                                          type CheckboxProps

                                                                                                                                          type Props = {
                                                                                                                                          /**
                                                                                                                                          * Status of checkbox.
                                                                                                                                          */
                                                                                                                                          status: 'checked' | 'unchecked' | 'indeterminate';
                                                                                                                                          /**
                                                                                                                                          * Whether checkbox is disabled.
                                                                                                                                          */
                                                                                                                                          disabled?: boolean;
                                                                                                                                          /**
                                                                                                                                          * Function to execute on press.
                                                                                                                                          */
                                                                                                                                          onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                          /**
                                                                                                                                          * Custom color for unchecked checkbox.
                                                                                                                                          */
                                                                                                                                          uncheckedColor?: string;
                                                                                                                                          /**
                                                                                                                                          * Custom color for checkbox.
                                                                                                                                          */
                                                                                                                                          color?: string;
                                                                                                                                          /**
                                                                                                                                          * @optional
                                                                                                                                          */
                                                                                                                                          theme?: ThemeProp;
                                                                                                                                          /**
                                                                                                                                          * testID to be used on tests.
                                                                                                                                          */
                                                                                                                                          testID?: string;
                                                                                                                                          };

                                                                                                                                            type ChipProps

                                                                                                                                            type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
                                                                                                                                            /**
                                                                                                                                            * Mode of the chip.
                                                                                                                                            * - `flat` - flat chip without outline.
                                                                                                                                            * - `outlined` - chip with an outline.
                                                                                                                                            */
                                                                                                                                            mode?: 'flat' | 'outlined';
                                                                                                                                            /**
                                                                                                                                            * Text content of the `Chip`.
                                                                                                                                            */
                                                                                                                                            children: React.ReactNode;
                                                                                                                                            /**
                                                                                                                                            * Icon to display for the `Chip`. Both icon and avatar cannot be specified.
                                                                                                                                            */
                                                                                                                                            icon?: IconSource;
                                                                                                                                            /**
                                                                                                                                            * Avatar to display for the `Chip`. Both icon and avatar cannot be specified.
                                                                                                                                            */
                                                                                                                                            avatar?: React.ReactNode;
                                                                                                                                            /**
                                                                                                                                            * Icon to display as the close button for the `Chip`. The icon appears only when the onClose prop is specified.
                                                                                                                                            */
                                                                                                                                            closeIcon?: IconSource;
                                                                                                                                            /**
                                                                                                                                            * Whether chip is selected.
                                                                                                                                            */
                                                                                                                                            selected?: boolean;
                                                                                                                                            /**
                                                                                                                                            * Whether to style the chip color as selected.
                                                                                                                                            * Note: With theme version 3 `selectedColor` doesn't apply to the `icon`.
                                                                                                                                            * If you want specify custom color for the `icon`, render your own `Icon` component.
                                                                                                                                            */
                                                                                                                                            selectedColor?: string;
                                                                                                                                            /**
                                                                                                                                            * @supported Available in v5.x with theme version 3
                                                                                                                                            * Whether to display overlay on selected chip
                                                                                                                                            */
                                                                                                                                            showSelectedOverlay?: boolean;
                                                                                                                                            /**
                                                                                                                                            * Whether to display default check icon on selected chip.
                                                                                                                                            * Note: Check will not be shown if `icon` is specified. If specified, `icon` will be shown regardless of `selected`.
                                                                                                                                            */
                                                                                                                                            showSelectedCheck?: boolean;
                                                                                                                                            /**
                                                                                                                                            * Color of the ripple effect.
                                                                                                                                            */
                                                                                                                                            rippleColor?: ColorValue;
                                                                                                                                            /**
                                                                                                                                            * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.
                                                                                                                                            */
                                                                                                                                            disabled?: boolean;
                                                                                                                                            /**
                                                                                                                                            * Type of background drawabale to display the feedback (Android).
                                                                                                                                            * https://reactnative.dev/docs/pressable#rippleconfig
                                                                                                                                            */
                                                                                                                                            background?: PressableAndroidRippleConfig;
                                                                                                                                            /**
                                                                                                                                            * Accessibility label for the chip. This is read by the screen reader when the user taps the chip.
                                                                                                                                            */
                                                                                                                                            accessibilityLabel?: string;
                                                                                                                                            /**
                                                                                                                                            * Accessibility label for the close icon. This is read by the screen reader when the user taps the close icon.
                                                                                                                                            */
                                                                                                                                            closeIconAccessibilityLabel?: string;
                                                                                                                                            /**
                                                                                                                                            * Function to execute on press.
                                                                                                                                            */
                                                                                                                                            onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                            /**
                                                                                                                                            * Function to execute on long press.
                                                                                                                                            */
                                                                                                                                            onLongPress?: () => void;
                                                                                                                                            /**
                                                                                                                                            * Function to execute as soon as the touchable element is pressed and invoked even before onPress.
                                                                                                                                            */
                                                                                                                                            onPressIn?: (e: GestureResponderEvent) => void;
                                                                                                                                            /**
                                                                                                                                            * Function to execute as soon as the touch is released even before onPress.
                                                                                                                                            */
                                                                                                                                            onPressOut?: (e: GestureResponderEvent) => void;
                                                                                                                                            /**
                                                                                                                                            * Function to execute on close button press. The close button appears only when this prop is specified.
                                                                                                                                            */
                                                                                                                                            onClose?: () => void;
                                                                                                                                            /**
                                                                                                                                            * The number of milliseconds a user must touch the element before executing `onLongPress`.
                                                                                                                                            */
                                                                                                                                            delayLongPress?: number;
                                                                                                                                            /**
                                                                                                                                            * @supported Available in v5.x with theme version 3
                                                                                                                                            * Sets smaller horizontal paddings `12dp` around label, when there is only label.
                                                                                                                                            */
                                                                                                                                            compact?: boolean;
                                                                                                                                            /**
                                                                                                                                            * @supported Available in v5.x with theme version 3
                                                                                                                                            * Whether chip should have the elevation.
                                                                                                                                            */
                                                                                                                                            elevated?: boolean;
                                                                                                                                            /**
                                                                                                                                            * Style of chip's text
                                                                                                                                            */
                                                                                                                                            textStyle?: StyleProp<TextStyle>;
                                                                                                                                            style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                                                            /**
                                                                                                                                            * @optional
                                                                                                                                            */
                                                                                                                                            theme?: ThemeProp;
                                                                                                                                            /**
                                                                                                                                            * Pass down testID from chip props to touchable for Detox tests.
                                                                                                                                            */
                                                                                                                                            testID?: string;
                                                                                                                                            /**
                                                                                                                                            * Ellipsize Mode for the children text
                                                                                                                                            */
                                                                                                                                            ellipsizeMode?: EllipsizeProp;
                                                                                                                                            /**
                                                                                                                                            * Specifies the largest possible scale a text font can reach.
                                                                                                                                            */
                                                                                                                                            maxFontSizeMultiplier?: number;
                                                                                                                                            };

                                                                                                                                              type DataTableCellProps

                                                                                                                                              type Props = $RemoveChildren<typeof TouchableRipple> & {
                                                                                                                                              /**
                                                                                                                                              * Content of the `DataTableCell`.
                                                                                                                                              */
                                                                                                                                              children: React.ReactNode;
                                                                                                                                              /**
                                                                                                                                              * Align the text to the right. Generally monetary or number fields are aligned to right.
                                                                                                                                              */
                                                                                                                                              numeric?: boolean;
                                                                                                                                              /**
                                                                                                                                              * Function to execute on press.
                                                                                                                                              */
                                                                                                                                              onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                              style?: StyleProp<ViewStyle>;
                                                                                                                                              /**
                                                                                                                                              * Text content style of the `DataTableCell`.
                                                                                                                                              */
                                                                                                                                              textStyle?: StyleProp<TextStyle>;
                                                                                                                                              /**
                                                                                                                                              * Specifies the largest possible scale a text font can reach.
                                                                                                                                              */
                                                                                                                                              maxFontSizeMultiplier?: number;
                                                                                                                                              /**
                                                                                                                                              * testID to be used on tests.
                                                                                                                                              */
                                                                                                                                              testID?: string;
                                                                                                                                              };

                                                                                                                                                type DataTableHeaderProps

                                                                                                                                                type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                                                                /**
                                                                                                                                                * Content of the `DataTableHeader`.
                                                                                                                                                */
                                                                                                                                                children: React.ReactNode;
                                                                                                                                                style?: StyleProp<ViewStyle>;
                                                                                                                                                /**
                                                                                                                                                * @optional
                                                                                                                                                */
                                                                                                                                                theme?: ThemeProp;
                                                                                                                                                };

                                                                                                                                                  type DataTablePaginationProps

                                                                                                                                                  type Props = React.ComponentPropsWithRef<typeof View> &
                                                                                                                                                  PaginationControlsProps &
                                                                                                                                                  PaginationDropdownProps & {
                                                                                                                                                  /**
                                                                                                                                                  * Label text for select page dropdown to display.
                                                                                                                                                  */
                                                                                                                                                  selectPageDropdownLabel?: React.ReactNode;
                                                                                                                                                  /**
                                                                                                                                                  * AccessibilityLabel for `selectPageDropdownLabel`.
                                                                                                                                                  */
                                                                                                                                                  selectPageDropdownAccessibilityLabel?: string;
                                                                                                                                                  /**
                                                                                                                                                  * Label text to display which indicates current pagination.
                                                                                                                                                  */
                                                                                                                                                  label?: React.ReactNode;
                                                                                                                                                  /**
                                                                                                                                                  * AccessibilityLabel for `label`.
                                                                                                                                                  */
                                                                                                                                                  accessibilityLabel?: string;
                                                                                                                                                  style?: StyleProp<ViewStyle>;
                                                                                                                                                  /**
                                                                                                                                                  * @optional
                                                                                                                                                  */
                                                                                                                                                  theme?: ThemeProp;
                                                                                                                                                  };

                                                                                                                                                    type DataTableProps

                                                                                                                                                    type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                                                                    /**
                                                                                                                                                    * Content of the `DataTable`.
                                                                                                                                                    */
                                                                                                                                                    children: React.ReactNode;
                                                                                                                                                    style?: StyleProp<ViewStyle>;
                                                                                                                                                    };

                                                                                                                                                      type DataTableRowProps

                                                                                                                                                      type Props = $RemoveChildren<typeof TouchableRipple> & {
                                                                                                                                                      /**
                                                                                                                                                      * Content of the `DataTableRow`.
                                                                                                                                                      */
                                                                                                                                                      children: React.ReactNode;
                                                                                                                                                      /**
                                                                                                                                                      * Function to execute on press.
                                                                                                                                                      */
                                                                                                                                                      onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                                      style?: StyleProp<ViewStyle>;
                                                                                                                                                      /**
                                                                                                                                                      * @optional
                                                                                                                                                      */
                                                                                                                                                      theme?: ThemeProp;
                                                                                                                                                      /**
                                                                                                                                                      * `pointerEvents` passed to the `View` container, which is wrapping children within `TouchableRipple`.
                                                                                                                                                      */
                                                                                                                                                      pointerEvents?: ViewProps['pointerEvents'];
                                                                                                                                                      };

                                                                                                                                                        type DataTableTitleProps

                                                                                                                                                        type Props = React.ComponentPropsWithRef<typeof Pressable> & {
                                                                                                                                                        /**
                                                                                                                                                        * Text content of the `DataTableTitle`.
                                                                                                                                                        */
                                                                                                                                                        children: React.ReactNode;
                                                                                                                                                        /**
                                                                                                                                                        * Align the text to the right. Generally monetary or number fields are aligned to right.
                                                                                                                                                        */
                                                                                                                                                        numeric?: boolean;
                                                                                                                                                        /**
                                                                                                                                                        * Direction of sorting. An arrow indicating the direction is displayed when this is given.
                                                                                                                                                        */
                                                                                                                                                        sortDirection?: 'ascending' | 'descending';
                                                                                                                                                        /**
                                                                                                                                                        * The number of lines to show.
                                                                                                                                                        */
                                                                                                                                                        numberOfLines?: number;
                                                                                                                                                        /**
                                                                                                                                                        * Function to execute on press.
                                                                                                                                                        */
                                                                                                                                                        onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                                        style?: StyleProp<ViewStyle>;
                                                                                                                                                        /**
                                                                                                                                                        * Text content style of the `DataTableTitle`.
                                                                                                                                                        */
                                                                                                                                                        textStyle?: StyleProp<TextStyle>;
                                                                                                                                                        /**
                                                                                                                                                        * Specifies the largest possible scale a text font can reach.
                                                                                                                                                        */
                                                                                                                                                        maxFontSizeMultiplier?: number;
                                                                                                                                                        /**
                                                                                                                                                        * @optional
                                                                                                                                                        */
                                                                                                                                                        theme?: ThemeProp;
                                                                                                                                                        };

                                                                                                                                                          type DialogActionsProps

                                                                                                                                                          type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                                                                          /**
                                                                                                                                                          * Content of the `DialogActions`.
                                                                                                                                                          */
                                                                                                                                                          children: React.ReactNode;
                                                                                                                                                          style?: StyleProp<ViewStyle>;
                                                                                                                                                          /**
                                                                                                                                                          * @optional
                                                                                                                                                          */
                                                                                                                                                          theme?: ThemeProp;
                                                                                                                                                          };

                                                                                                                                                            type DialogContentProps

                                                                                                                                                            type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                                                                            /**
                                                                                                                                                            * Content of the `DialogContent`.
                                                                                                                                                            */
                                                                                                                                                            children: React.ReactNode;
                                                                                                                                                            style?: StyleProp<ViewStyle>;
                                                                                                                                                            };

                                                                                                                                                              type DialogIconProps

                                                                                                                                                              type Props = {
                                                                                                                                                              /**
                                                                                                                                                              * Custom color for action icon.
                                                                                                                                                              */
                                                                                                                                                              color?: string;
                                                                                                                                                              /**
                                                                                                                                                              * Name of the icon to show.
                                                                                                                                                              */
                                                                                                                                                              icon: IconSource;
                                                                                                                                                              /**
                                                                                                                                                              * Optional icon size.
                                                                                                                                                              */
                                                                                                                                                              size?: number;
                                                                                                                                                              /**
                                                                                                                                                              * @optional
                                                                                                                                                              */
                                                                                                                                                              theme?: ThemeProp;
                                                                                                                                                              };

                                                                                                                                                                type DialogProps

                                                                                                                                                                type Props = {
                                                                                                                                                                /**
                                                                                                                                                                * Determines whether clicking outside the dialog dismiss it.
                                                                                                                                                                */
                                                                                                                                                                dismissable?: boolean;
                                                                                                                                                                /**
                                                                                                                                                                * Determines whether clicking Android hardware back button dismiss dialog.
                                                                                                                                                                */
                                                                                                                                                                dismissableBackButton?: boolean;
                                                                                                                                                                /**
                                                                                                                                                                * Callback that is called when the user dismisses the dialog.
                                                                                                                                                                */
                                                                                                                                                                onDismiss?: () => void;
                                                                                                                                                                /**
                                                                                                                                                                * Determines Whether the dialog is visible.
                                                                                                                                                                */
                                                                                                                                                                visible: boolean;
                                                                                                                                                                /**
                                                                                                                                                                * Content of the `Dialog`.
                                                                                                                                                                */
                                                                                                                                                                children: React.ReactNode;
                                                                                                                                                                style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                                                                                /**
                                                                                                                                                                * @optional
                                                                                                                                                                */
                                                                                                                                                                theme?: ThemeProp;
                                                                                                                                                                /**
                                                                                                                                                                * testID to be used on tests.
                                                                                                                                                                */
                                                                                                                                                                testID?: string;
                                                                                                                                                                };

                                                                                                                                                                  type DialogScrollAreaProps

                                                                                                                                                                  type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                                                                                  /**
                                                                                                                                                                  * Content of the `DialogScrollArea`.
                                                                                                                                                                  */
                                                                                                                                                                  children: React.ReactNode;
                                                                                                                                                                  style?: StyleProp<ViewStyle>;
                                                                                                                                                                  /**
                                                                                                                                                                  * @optional
                                                                                                                                                                  */
                                                                                                                                                                  theme?: ThemeProp;
                                                                                                                                                                  };

                                                                                                                                                                    type DialogTitleProps

                                                                                                                                                                    type Props = React.ComponentPropsWithRef<typeof Title> & {
                                                                                                                                                                    /**
                                                                                                                                                                    * Title text for the `DialogTitle`.
                                                                                                                                                                    */
                                                                                                                                                                    children: React.ReactNode;
                                                                                                                                                                    style?: StyleProp<TextStyle>;
                                                                                                                                                                    /**
                                                                                                                                                                    * @optional
                                                                                                                                                                    */
                                                                                                                                                                    theme?: ThemeProp;
                                                                                                                                                                    };

                                                                                                                                                                      type DividerProps

                                                                                                                                                                      type Props = $RemoveChildren<typeof View> & {
                                                                                                                                                                      /**
                                                                                                                                                                      * @renamed Renamed from 'inset' to 'leftInset` in v5.x
                                                                                                                                                                      * Whether divider has a left inset.
                                                                                                                                                                      */
                                                                                                                                                                      leftInset?: boolean;
                                                                                                                                                                      /**
                                                                                                                                                                      * @supported Available in v5.x with theme version 3
                                                                                                                                                                      * Whether divider has a horizontal inset on both sides.
                                                                                                                                                                      */
                                                                                                                                                                      horizontalInset?: boolean;
                                                                                                                                                                      /**
                                                                                                                                                                      * @supported Available in v5.x with theme version 3
                                                                                                                                                                      * Whether divider should be bolded.
                                                                                                                                                                      */
                                                                                                                                                                      bold?: boolean;
                                                                                                                                                                      style?: StyleProp<ViewStyle>;
                                                                                                                                                                      /**
                                                                                                                                                                      * @optional
                                                                                                                                                                      */
                                                                                                                                                                      theme?: ThemeProp;
                                                                                                                                                                      };

                                                                                                                                                                        type DrawerCollapsedItemProps

                                                                                                                                                                        type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                                                                                        /**
                                                                                                                                                                        * The label text of the item.
                                                                                                                                                                        */
                                                                                                                                                                        label?: string;
                                                                                                                                                                        /**
                                                                                                                                                                        * Badge to show on the icon, can be `true` to show a dot, `string` or `number` to show text.
                                                                                                                                                                        */
                                                                                                                                                                        badge?: string | number | boolean;
                                                                                                                                                                        /**
                                                                                                                                                                        * Whether the item is disabled.
                                                                                                                                                                        */
                                                                                                                                                                        disabled?: boolean;
                                                                                                                                                                        /**
                                                                                                                                                                        * @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
                                                                                                                                                                        * Icon to use as the focused destination icon, can be a string, an image source or a react component
                                                                                                                                                                        */
                                                                                                                                                                        focusedIcon?: IconSource;
                                                                                                                                                                        /**
                                                                                                                                                                        * @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
                                                                                                                                                                        * Icon to use as the unfocused destination icon, can be a string, an image source or a react component
                                                                                                                                                                        */
                                                                                                                                                                        unfocusedIcon?: IconSource;
                                                                                                                                                                        /**
                                                                                                                                                                        * Whether to highlight the drawer item as active.
                                                                                                                                                                        */
                                                                                                                                                                        active?: boolean;
                                                                                                                                                                        /**
                                                                                                                                                                        * Function to execute on press.
                                                                                                                                                                        */
                                                                                                                                                                        onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                                                        /**
                                                                                                                                                                        * Specifies the largest possible scale a label font can reach.
                                                                                                                                                                        */
                                                                                                                                                                        labelMaxFontSizeMultiplier?: number;
                                                                                                                                                                        /**
                                                                                                                                                                        * Accessibility label for the button. This is read by the screen reader when the user taps the button.
                                                                                                                                                                        */
                                                                                                                                                                        accessibilityLabel?: string;
                                                                                                                                                                        style?: StyleProp<ViewStyle>;
                                                                                                                                                                        /**
                                                                                                                                                                        * @optional
                                                                                                                                                                        */
                                                                                                                                                                        theme?: ThemeProp;
                                                                                                                                                                        /**
                                                                                                                                                                        * TestID used for testing purposes
                                                                                                                                                                        */
                                                                                                                                                                        testID?: string;
                                                                                                                                                                        };

                                                                                                                                                                          type DrawerItemProps

                                                                                                                                                                          type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                                                                                          /**
                                                                                                                                                                          * The label text of the item.
                                                                                                                                                                          */
                                                                                                                                                                          label: string;
                                                                                                                                                                          /**
                                                                                                                                                                          * Icon to display for the `DrawerItem`.
                                                                                                                                                                          */
                                                                                                                                                                          icon?: IconSource;
                                                                                                                                                                          /**
                                                                                                                                                                          * Whether to highlight the drawer item as active.
                                                                                                                                                                          */
                                                                                                                                                                          active?: boolean;
                                                                                                                                                                          /**
                                                                                                                                                                          * Whether the item is disabled.
                                                                                                                                                                          */
                                                                                                                                                                          disabled?: boolean;
                                                                                                                                                                          /**
                                                                                                                                                                          * Function to execute on press.
                                                                                                                                                                          */
                                                                                                                                                                          onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                                                          /**
                                                                                                                                                                          * Type of background drawabale to display the feedback (Android).
                                                                                                                                                                          * https://reactnative.dev/docs/pressable#rippleconfig
                                                                                                                                                                          */
                                                                                                                                                                          background?: PressableAndroidRippleConfig;
                                                                                                                                                                          /**
                                                                                                                                                                          * Accessibility label for the button. This is read by the screen reader when the user taps the button.
                                                                                                                                                                          */
                                                                                                                                                                          accessibilityLabel?: string;
                                                                                                                                                                          /**
                                                                                                                                                                          * Callback which returns a React element to display on the right side. For instance a Badge.
                                                                                                                                                                          */
                                                                                                                                                                          right?: (props: { color: string }) => React.ReactNode;
                                                                                                                                                                          /**
                                                                                                                                                                          * Specifies the largest possible scale a label font can reach.
                                                                                                                                                                          */
                                                                                                                                                                          labelMaxFontSizeMultiplier?: number;
                                                                                                                                                                          /**
                                                                                                                                                                          * Color of the ripple effect.
                                                                                                                                                                          */
                                                                                                                                                                          rippleColor?: ColorValue;
                                                                                                                                                                          style?: StyleProp<ViewStyle>;
                                                                                                                                                                          /**
                                                                                                                                                                          * @optional
                                                                                                                                                                          */
                                                                                                                                                                          theme?: ThemeProp;
                                                                                                                                                                          };

                                                                                                                                                                            type DrawerSectionProps

                                                                                                                                                                            type Props = React.ComponentPropsWithRef<typeof View> & {
                                                                                                                                                                            /**
                                                                                                                                                                            * Title to show as the header for the section.
                                                                                                                                                                            */
                                                                                                                                                                            title?: string;
                                                                                                                                                                            /**
                                                                                                                                                                            * Content of the `Drawer.Section`.
                                                                                                                                                                            */
                                                                                                                                                                            children: React.ReactNode;
                                                                                                                                                                            /**
                                                                                                                                                                            * Whether to show `Divider` at the end of the section. True by default.
                                                                                                                                                                            */
                                                                                                                                                                            showDivider?: boolean;
                                                                                                                                                                            /**
                                                                                                                                                                            * Specifies the largest possible scale a title font can reach.
                                                                                                                                                                            */
                                                                                                                                                                            titleMaxFontSizeMultiplier?: number;
                                                                                                                                                                            style?: StyleProp<ViewStyle>;
                                                                                                                                                                            /**
                                                                                                                                                                            * @optional
                                                                                                                                                                            */
                                                                                                                                                                            theme?: ThemeProp;
                                                                                                                                                                            };

                                                                                                                                                                              type FABGroupProps

                                                                                                                                                                              type Props = {
                                                                                                                                                                              /**
                                                                                                                                                                              * Action items to display in the form of a speed dial.
                                                                                                                                                                              * An action item should contain the following properties:
                                                                                                                                                                              * - `icon`: icon to display (required)
                                                                                                                                                                              * - `label`: optional label text
                                                                                                                                                                              * - `color`: custom icon color of the action item
                                                                                                                                                                              * - `labelTextColor`: custom label text color of the action item
                                                                                                                                                                              * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified
                                                                                                                                                                              * - `accessibilityHint`: accessibility hint for the action
                                                                                                                                                                              * - `style`: pass additional styles for the fab item, for example, `backgroundColor`
                                                                                                                                                                              * - `containerStyle`: pass additional styles for the fab item label container, for example, `backgroundColor` @supported Available in 5.x
                                                                                                                                                                              * - `labelStyle`: pass additional styles for the fab item label, for example, `fontSize`
                                                                                                                                                                              * - `labelMaxFontSizeMultiplier`: specifies the largest possible scale a title font can reach.
                                                                                                                                                                              * - `onPress`: callback that is called when `FAB` is pressed (required)
                                                                                                                                                                              * - `onLongPress`: callback that is called when `FAB` is long pressed
                                                                                                                                                                              * - `toggleStackOnLongPress`: callback that is called when `FAB` is long pressed
                                                                                                                                                                              * - `size`: size of action item. Defaults to `small`. @supported Available in v5.x
                                                                                                                                                                              * - `testID`: testID to be used on tests
                                                                                                                                                                              * - `rippleColor`: color of the ripple effect.
                                                                                                                                                                              */
                                                                                                                                                                              actions: Array<{
                                                                                                                                                                              icon: IconSource;
                                                                                                                                                                              label?: string;
                                                                                                                                                                              color?: string;
                                                                                                                                                                              labelTextColor?: string;
                                                                                                                                                                              accessibilityLabel?: string;
                                                                                                                                                                              accessibilityHint?: string;
                                                                                                                                                                              style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                                                                                              containerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                                                                                              labelStyle?: StyleProp<TextStyle>;
                                                                                                                                                                              labelMaxFontSizeMultiplier?: number;
                                                                                                                                                                              onPress: (e: GestureResponderEvent) => void;
                                                                                                                                                                              size?: 'small' | 'medium';
                                                                                                                                                                              testID?: string;
                                                                                                                                                                              rippleColor?: ColorValue;
                                                                                                                                                                              }>;
                                                                                                                                                                              /**
                                                                                                                                                                              * Icon to display for the `FAB`.
                                                                                                                                                                              * You can toggle it based on whether the speed dial is open to display a different icon.
                                                                                                                                                                              */
                                                                                                                                                                              icon: IconSource;
                                                                                                                                                                              /**
                                                                                                                                                                              * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
                                                                                                                                                                              */
                                                                                                                                                                              accessibilityLabel?: string;
                                                                                                                                                                              /**
                                                                                                                                                                              * Custom color for the `FAB`.
                                                                                                                                                                              */
                                                                                                                                                                              color?: string;
                                                                                                                                                                              /**
                                                                                                                                                                              * Custom backdrop color for opened speed dial background.
                                                                                                                                                                              */
                                                                                                                                                                              backdropColor?: string;
                                                                                                                                                                              /**
                                                                                                                                                                              * Color of the ripple effect.
                                                                                                                                                                              */
                                                                                                                                                                              rippleColor?: ColorValue;
                                                                                                                                                                              /**
                                                                                                                                                                              * Function to execute on pressing the `FAB`.
                                                                                                                                                                              */
                                                                                                                                                                              onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                                                              /**
                                                                                                                                                                              * Function to execute on long pressing the `FAB`.
                                                                                                                                                                              */
                                                                                                                                                                              onLongPress?: (e: GestureResponderEvent) => void;
                                                                                                                                                                              /**
                                                                                                                                                                              * Makes actions stack appear on long press instead of on press.
                                                                                                                                                                              */
                                                                                                                                                                              toggleStackOnLongPress?: boolean;
                                                                                                                                                                              /**
                                                                                                                                                                              * Changes the delay for long press reaction.
                                                                                                                                                                              */
                                                                                                                                                                              delayLongPress?: number;
                                                                                                                                                                              /**
                                                                                                                                                                              * Allows for onLongPress when stack is opened.
                                                                                                                                                                              */
                                                                                                                                                                              enableLongPressWhenStackOpened?: boolean;
                                                                                                                                                                              /**
                                                                                                                                                                              * Whether the speed dial is open.
                                                                                                                                                                              */
                                                                                                                                                                              open: boolean;
                                                                                                                                                                              /**
                                                                                                                                                                              * Callback which is called on opening and closing the speed dial.
                                                                                                                                                                              * The open state needs to be updated when it's called, otherwise the change is dropped.
                                                                                                                                                                              */
                                                                                                                                                                              onStateChange: (state: { open: boolean }) => void;
                                                                                                                                                                              /**
                                                                                                                                                                              * Whether `FAB` is currently visible.
                                                                                                                                                                              */
                                                                                                                                                                              visible: boolean;
                                                                                                                                                                              /**
                                                                                                                                                                              * Style for the group. You can use it to pass additional styles if you need.
                                                                                                                                                                              * For example, you can set an additional padding if you have a tab bar at the bottom.
                                                                                                                                                                              */
                                                                                                                                                                              style?: StyleProp<ViewStyle>;
                                                                                                                                                                              /**
                                                                                                                                                                              * Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor.
                                                                                                                                                                              */
                                                                                                                                                                              fabStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                                                                                              /**
                                                                                                                                                                              * @supported Available in v5.x with theme version 3
                                                                                                                                                                              *
                                                                                                                                                                              * Color mappings variant for combinations of container and icon colors.
                                                                                                                                                                              */
                                                                                                                                                                              variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
                                                                                                                                                                              /**
                                                                                                                                                                              * @optional
                                                                                                                                                                              */
                                                                                                                                                                              theme?: ThemeProp;
                                                                                                                                                                              /**
                                                                                                                                                                              * Optional label for `FAB`.
                                                                                                                                                                              */
                                                                                                                                                                              label?: string;
                                                                                                                                                                              /**
                                                                                                                                                                              * Pass down testID from Group props to FAB.
                                                                                                                                                                              */
                                                                                                                                                                              testID?: string;
                                                                                                                                                                              };

                                                                                                                                                                                type FABProps

                                                                                                                                                                                type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
                                                                                                                                                                                /**
                                                                                                                                                                                * Icon to display for the `FAB`. It's optional only if `label` is defined.
                                                                                                                                                                                */
                                                                                                                                                                                icon?: IconSource;
                                                                                                                                                                                /**
                                                                                                                                                                                * Optional label for extended `FAB`. It's optional only if `icon` is defined.
                                                                                                                                                                                */
                                                                                                                                                                                label?: string;
                                                                                                                                                                                /**
                                                                                                                                                                                * Make the label text uppercased.
                                                                                                                                                                                */
                                                                                                                                                                                uppercase?: boolean;
                                                                                                                                                                                /**
                                                                                                                                                                                * Type of background drawabale to display the feedback (Android).
                                                                                                                                                                                * https://reactnative.dev/docs/pressable#rippleconfig
                                                                                                                                                                                */
                                                                                                                                                                                background?: PressableAndroidRippleConfig;
                                                                                                                                                                                /**
                                                                                                                                                                                * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
                                                                                                                                                                                * Uses `label` by default if specified.
                                                                                                                                                                                */
                                                                                                                                                                                accessibilityLabel?: string;
                                                                                                                                                                                /**
                                                                                                                                                                                * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.
                                                                                                                                                                                */
                                                                                                                                                                                accessibilityState?: AccessibilityState;
                                                                                                                                                                                /**
                                                                                                                                                                                * Whether an icon change is animated.
                                                                                                                                                                                */
                                                                                                                                                                                animated?: boolean;
                                                                                                                                                                                /**
                                                                                                                                                                                * @deprecated Deprecated in v.5x - use prop size="small".
                                                                                                                                                                                *
                                                                                                                                                                                * Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
                                                                                                                                                                                */
                                                                                                                                                                                small?: boolean;
                                                                                                                                                                                /**
                                                                                                                                                                                * Custom color for the icon and label of the `FAB`.
                                                                                                                                                                                */
                                                                                                                                                                                color?: string;
                                                                                                                                                                                /**
                                                                                                                                                                                * Color of the ripple effect.
                                                                                                                                                                                */
                                                                                                                                                                                rippleColor?: ColorValue;
                                                                                                                                                                                /**
                                                                                                                                                                                * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.
                                                                                                                                                                                */
                                                                                                                                                                                disabled?: boolean;
                                                                                                                                                                                /**
                                                                                                                                                                                * Whether `FAB` is currently visible.
                                                                                                                                                                                */
                                                                                                                                                                                visible?: boolean;
                                                                                                                                                                                /**
                                                                                                                                                                                * Whether to show a loading indicator.
                                                                                                                                                                                */
                                                                                                                                                                                loading?: boolean;
                                                                                                                                                                                /**
                                                                                                                                                                                * Function to execute on press.
                                                                                                                                                                                */
                                                                                                                                                                                onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                                                                /**
                                                                                                                                                                                * Function to execute on long press.
                                                                                                                                                                                */
                                                                                                                                                                                onLongPress?: (e: GestureResponderEvent) => void;
                                                                                                                                                                                /**
                                                                                                                                                                                * The number of milliseconds a user must touch the element before executing `onLongPress`.
                                                                                                                                                                                */
                                                                                                                                                                                delayLongPress?: number;
                                                                                                                                                                                /**
                                                                                                                                                                                * @supported Available in v5.x with theme version 3
                                                                                                                                                                                *
                                                                                                                                                                                * Size of the `FAB`.
                                                                                                                                                                                * - `small` - FAB with small height (40).
                                                                                                                                                                                * - `medium` - FAB with default medium height (56).
                                                                                                                                                                                * - `large` - FAB with large height (96).
                                                                                                                                                                                */
                                                                                                                                                                                size?: FABSize;
                                                                                                                                                                                /**
                                                                                                                                                                                * Custom size for the `FAB`. This prop takes precedence over size prop
                                                                                                                                                                                */
                                                                                                                                                                                customSize?: number;
                                                                                                                                                                                /**
                                                                                                                                                                                * @supported Available in v5.x with theme version 3
                                                                                                                                                                                *
                                                                                                                                                                                * Mode of the `FAB`. You can change the mode to adjust the the shadow:
                                                                                                                                                                                * - `flat` - button without a shadow.
                                                                                                                                                                                * - `elevated` - button with a shadow.
                                                                                                                                                                                */
                                                                                                                                                                                mode?: FABMode;
                                                                                                                                                                                /**
                                                                                                                                                                                * @supported Available in v5.x with theme version 3
                                                                                                                                                                                *
                                                                                                                                                                                * Color mappings variant for combinations of container and icon colors.
                                                                                                                                                                                */
                                                                                                                                                                                variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
                                                                                                                                                                                /**
                                                                                                                                                                                * Specifies the largest possible scale a label font can reach.
                                                                                                                                                                                */
                                                                                                                                                                                labelMaxFontSizeMultiplier?: number;
                                                                                                                                                                                style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                                                                                                /**
                                                                                                                                                                                * @optional
                                                                                                                                                                                */
                                                                                                                                                                                theme?: ThemeProp;
                                                                                                                                                                                /**
                                                                                                                                                                                * TestID used for testing purposes
                                                                                                                                                                                */
                                                                                                                                                                                testID?: string;
                                                                                                                                                                                ref?: React.RefObject<View>;
                                                                                                                                                                                } & IconOrLabel;

                                                                                                                                                                                  type HeadlineProps

                                                                                                                                                                                  type Props = React.ComponentProps<typeof Text> & {
                                                                                                                                                                                  style?: StyleProp<TextStyle>;
                                                                                                                                                                                  children: React.ReactNode;
                                                                                                                                                                                  };

                                                                                                                                                                                    type HelperTextProps

                                                                                                                                                                                    type Props = $Omit<
                                                                                                                                                                                    $Omit<React.ComponentPropsWithRef<typeof AnimatedText>, 'padding'>,
                                                                                                                                                                                    'type'
                                                                                                                                                                                    > & {
                                                                                                                                                                                    /**
                                                                                                                                                                                    * Type of the helper text.
                                                                                                                                                                                    */
                                                                                                                                                                                    type: 'error' | 'info';
                                                                                                                                                                                    /**
                                                                                                                                                                                    * Text content of the HelperText.
                                                                                                                                                                                    */
                                                                                                                                                                                    children: React.ReactNode;
                                                                                                                                                                                    /**
                                                                                                                                                                                    * Whether to display the helper text.
                                                                                                                                                                                    */
                                                                                                                                                                                    visible?: boolean;
                                                                                                                                                                                    /**
                                                                                                                                                                                    * Whether to apply padding to the helper text.
                                                                                                                                                                                    */
                                                                                                                                                                                    padding?: 'none' | 'normal';
                                                                                                                                                                                    /**
                                                                                                                                                                                    * Whether the text input tied with helper text is disabled.
                                                                                                                                                                                    */
                                                                                                                                                                                    disabled?: boolean;
                                                                                                                                                                                    style?: StyleProp<TextStyle>;
                                                                                                                                                                                    /**
                                                                                                                                                                                    * @optional
                                                                                                                                                                                    */
                                                                                                                                                                                    theme?: ThemeProp;
                                                                                                                                                                                    /**
                                                                                                                                                                                    * TestID used for testing purposes
                                                                                                                                                                                    */
                                                                                                                                                                                    testID?: string;
                                                                                                                                                                                    };

                                                                                                                                                                                      type IconButtonProps

                                                                                                                                                                                      type Props = $RemoveChildren<typeof TouchableRipple> & {
                                                                                                                                                                                      /**
                                                                                                                                                                                      * Icon to display.
                                                                                                                                                                                      */
                                                                                                                                                                                      icon: IconSource;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * @supported Available in v5.x with theme version 3
                                                                                                                                                                                      * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
                                                                                                                                                                                      */
                                                                                                                                                                                      mode?: IconButtonMode;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * @renamed Renamed from 'color' to 'iconColor' in v5.x
                                                                                                                                                                                      * Color of the icon.
                                                                                                                                                                                      */
                                                                                                                                                                                      iconColor?: string;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * Background color of the icon container.
                                                                                                                                                                                      */
                                                                                                                                                                                      containerColor?: string;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * Color of the ripple effect.
                                                                                                                                                                                      */
                                                                                                                                                                                      rippleColor?: ColorValue;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * @supported Available in v5.x with theme version 3
                                                                                                                                                                                      * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
                                                                                                                                                                                      */
                                                                                                                                                                                      selected?: boolean;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * Size of the icon.
                                                                                                                                                                                      */
                                                                                                                                                                                      size?: number;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
                                                                                                                                                                                      */
                                                                                                                                                                                      disabled?: boolean;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * Whether an icon change is animated.
                                                                                                                                                                                      */
                                                                                                                                                                                      animated?: boolean;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * Accessibility label for the button. This is read by the screen reader when the user taps the button.
                                                                                                                                                                                      */
                                                                                                                                                                                      accessibilityLabel?: string;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * Function to execute on press.
                                                                                                                                                                                      */
                                                                                                                                                                                      onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                                                                      style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
                                                                                                                                                                                      ref?: React.RefObject<View>;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * TestID used for testing purposes
                                                                                                                                                                                      */
                                                                                                                                                                                      testID?: string;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * @optional
                                                                                                                                                                                      */
                                                                                                                                                                                      theme?: ThemeProp;
                                                                                                                                                                                      /**
                                                                                                                                                                                      * Whether to show a loading indicator.
                                                                                                                                                                                      */
                                                                                                                                                                                      loading?: boolean;
                                                                                                                                                                                      };

                                                                                                                                                                                        type ListAccordionGroupProps

                                                                                                                                                                                        type Props = {
                                                                                                                                                                                        /**
                                                                                                                                                                                        * Function to execute on selection change.
                                                                                                                                                                                        */
                                                                                                                                                                                        onAccordionPress?: (expandedId: string | number) => void;
                                                                                                                                                                                        /**
                                                                                                                                                                                        * Id of the currently expanded list accordion
                                                                                                                                                                                        */
                                                                                                                                                                                        expandedId?: string | number;
                                                                                                                                                                                        /**
                                                                                                                                                                                        * React elements containing list accordions
                                                                                                                                                                                        */
                                                                                                                                                                                        children: React.ReactNode;
                                                                                                                                                                                        };

                                                                                                                                                                                          type ListAccordionProps

                                                                                                                                                                                          type Props = {
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Title text for the list accordion.
                                                                                                                                                                                          */
                                                                                                                                                                                          title: React.ReactNode;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Description text for the list accordion.
                                                                                                                                                                                          */
                                                                                                                                                                                          description?: React.ReactNode;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Callback which returns a React element to display on the left side.
                                                                                                                                                                                          */
                                                                                                                                                                                          left?: (props: { color: string; style: Style }) => React.ReactNode;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Callback which returns a React element to display on the right side.
                                                                                                                                                                                          */
                                                                                                                                                                                          right?: (props: { isExpanded: boolean }) => React.ReactNode;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Whether the accordion is expanded
                                                                                                                                                                                          * If this prop is provided, the accordion will behave as a "controlled component".
                                                                                                                                                                                          * You'll need to update this prop when you want to toggle the component or on `onPress`.
                                                                                                                                                                                          */
                                                                                                                                                                                          expanded?: boolean;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Function to execute on press.
                                                                                                                                                                                          */
                                                                                                                                                                                          onPress?: (e: GestureResponderEvent) => void;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Function to execute on long press.
                                                                                                                                                                                          */
                                                                                                                                                                                          onLongPress?: (e: GestureResponderEvent) => void;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * The number of milliseconds a user must touch the element before executing `onLongPress`.
                                                                                                                                                                                          */
                                                                                                                                                                                          delayLongPress?: number;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Content of the section.
                                                                                                                                                                                          */
                                                                                                                                                                                          children: React.ReactNode;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * @optional
                                                                                                                                                                                          */
                                                                                                                                                                                          theme?: ThemeProp;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Type of background drawabale to display the feedback (Android).
                                                                                                                                                                                          * https://reactnative.dev/docs/pressable#rippleconfig
                                                                                                                                                                                          */
                                                                                                                                                                                          background?: PressableAndroidRippleConfig;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Style that is passed to the wrapping TouchableRipple element.
                                                                                                                                                                                          */
                                                                                                                                                                                          style?: StyleProp<ViewStyle>;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Style that is passed to Title element.
                                                                                                                                                                                          */
                                                                                                                                                                                          titleStyle?: StyleProp<TextStyle>;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Style that is passed to Description element.
                                                                                                                                                                                          */
                                                                                                                                                                                          descriptionStyle?: StyleProp<TextStyle>;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Color of the ripple effect.
                                                                                                                                                                                          */
                                                                                                                                                                                          rippleColor?: ColorValue;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Truncate Title text such that the total number of lines does not
                                                                                                                                                                                          * exceed this number.
                                                                                                                                                                                          */
                                                                                                                                                                                          titleNumberOfLines?: number;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Truncate Description text such that the total number of lines does not
                                                                                                                                                                                          * exceed this number.
                                                                                                                                                                                          */
                                                                                                                                                                                          descriptionNumberOfLines?: number;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Specifies the largest possible scale a title font can reach.
                                                                                                                                                                                          */
                                                                                                                                                                                          titleMaxFontSizeMultiplier?: number;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Specifies the largest possible scale a description font can reach.
                                                                                                                                                                                          */
                                                                                                                                                                                          descriptionMaxFontSizeMultiplier?: number;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * 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.
                                                                                                                                                                                          */
                                                                                                                                                                                          id?: string | number;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * TestID used for testing purposes
                                                                                                                                                                                          */
                                                                                                                                                                                          testID?: string;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * Accessibility label for the TouchableRipple. This is read by the screen reader when the user taps the touchable.
                                                                                                                                                                                          */
                                                                                                                                                                                          accessibilityLabel?: string;
                                                                                                                                                                                          /**
                                                                                                                                                                                          * `pointerEvents` passed to the `View` container
                                                                                                                                                                                          */
                                                                                                                                                                                          pointerEvents?: ViewProps['pointerEvents'];
                                                                                                                                                                                          };

                                                                                                                                                                                            type ListIconProps

                                                                                                                                                                                            type Props = {
                                                                                                                                                                                            /**
                                                                                                                                                                                            * Icon to show.
                                                                                                                                                                                            */
                                                                                                                                                                                            icon: IconSource;
                                                                                                                                                                                            /**
                                                                                                                                                                                            * Color for the icon.
                                                                                                                                                                                            */
                                                                                                                                                                                            color?: string;
                                                                                                                                                                                            style?: StyleProp<ViewStyle>;
                                                                                                                                                                                            /**
                                                                                                                                                                                            * @optional
                                                                                                                                                                                            */
                                                                                                                                                                                            theme?: ThemeProp;
                                                                                                                                                                                            };

                                                                                                                                                                                              type ListImageProps

                                                                                                                                                                                              type Props = {
                                                                                                                                                                                              source: ImageSourcePropType;
                                                                                                                                                                                              variant?: 'image' | 'video';
                                                                                                                                                                                              style?: StyleProp<ImageStyle>;
                                                                                                                                                                                              /**
                                                                                                                                                                                              * @optional
                                                                                                                                                                                              */
                                                                                                                                                                                              theme?: ThemeProp;
                                                                                                                                                                                              };

                                                                                                                                                                                                type ListItemProps

                                                                                                                                                                                                type Props = $RemoveChildren<typeof TouchableRipple> & {
                                                                                                                                                                                                /**
                                                                                                                                                                                                * Title text for the list item.
                                                                                                                                                                                                */