react-native-paper

react-native-paper

Version 5.13.1
Published 4 days ago
3.85 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

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: any;

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: {
    ({
        visible,
        statusBarHeight,
        overlayAccessibilityLabel,
        testID,
        anchor,
        onDismiss,
        anchorPosition,
        contentStyle,
        style,
        elevation,
        mode,
        children,
        theme: themeOverrides,
        keyboardShouldPersistTaps,
    }: Props): React.JSX.Element;
    Item: {
        ({
            leadingIcon,
            trailingIcon,
            dense,
            title,
            disabled,
            background,
            onPress,
            style,
            contentStyle,
            titleStyle,
            rippleColor: customRippleColor,
            testID,
            accessibilityLabel,
            accessibilityState,
            theme: themeOverrides,
            titleMaxFontSizeMultiplier,
        }: import('./MenuItem').Props): React.JSX.Element;
        displayName: string;
    };
};

Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.

## Usage

import * as React from 'react';
import { View } from 'react-native';
import { Button, Menu, Divider, PaperProvider } from 'react-native-paper';

const MyComponent = () => {
  const [visible, setVisible] = React.useState(false);

  const openMenu = () => setVisible(true);

  const closeMenu = () => setVisible(false);

  return (
    <PaperProvider>
      <View
        style={{
          paddingTop: 50,
          flexDirection: 'row',
          justifyContent: 'center',
        }}>
        <Menu
          visible={visible}
          onDismiss={closeMenu}
          anchor={<Button onPress={openMenu}>Show menu</Button>}>
          <Menu.Item onPress={() => {}} title="Item 1" />
          <Menu.Item onPress={() => {}} title="Item 2" />
          <Divider />
          <Menu.Item onPress={() => {}} title="Item 3" />
        </Menu>
      </View>
    </PaperProvider>
  );
};

export default MyComponent;

### Note When using Menu within a React Native's Modal component, you need to wrap all Modal contents within a PaperProvider in order for the menu to show. This wrapping is not necessary if you use Paper's Modal instead.

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;
    };
};

variable Searchbar

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;

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,
    accessibilityRole,
    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;
    /**
     * Reference for the touchable
     */
    touchableRef?: React.RefObject<View>;
    /**
     * 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?: Animated.WithAnimatedValue<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 = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
    /**
     * 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.
     */
    title: Title;
    /**
     * Description text for the list item or callback which returns a React element to display the description.
     */
    description?: Description;
    /**
     * Callback which returns a React element to display on the left side.

react-native-paper

Install

Overview

Index

Variables

Functions

Enums

Type Aliases

Namespaces

Variables

variable Appbar

variable BottomNavigation

variable Button

variable Card

variable Checkbox

variable DataTable

variable DefaultTheme

variable Dialog

variable FAB

variable IconButton

variable MD2DarkTheme

variable MD2LightTheme

variable MD3Colors

variable MD3DarkTheme

variable MD3LightTheme

variable Menu

variable Portal

variable RadioButton

variable Searchbar

variable Snackbar

variable Surface

variable Text

variable TextInput

variable ThemeProvider

variable ToggleButton

variable Tooltip

variable TouchableRipple

Functions

function ActivityIndicator

function adaptNavigationTheme

function AnimatedFAB

function Badge

function Banner

function Caption

function Chip

function configureFonts

function customText

function Divider

function Headline

function HelperText

function Icon

function Modal

function overlay

function PaperProvider

function Paragraph

function ProgressBar

function Provider

function SegmentedButtons

function shadow

function Subheading

function Switch

function Title

function useTheme

function withTheme

Enums

enum MD3TypescaleKey

member bodyLarge

member bodyMedium

member bodySmall

member displayLarge

member displayMedium

member displaySmall

member headlineLarge

member headlineMedium

member headlineSmall

member labelLarge

member labelMedium

member labelSmall

member titleLarge

member titleMedium