react-native-paper

react-native-paper

Version 5.14.5
Published 5 months ago
3.76 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,
            hitSlop,
            ...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,
            containerStyle,
            contentStyle,
            titleStyle,
            rippleColor: customRippleColor,
            testID,
            accessibilityLabel,
            accessibilityState,
            theme: themeOverrides,
            titleMaxFontSizeMultiplier,
            hitSlop,
        }: 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,
            hitSlop,
        }: 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,
        style,
        wrapperStyle,
        contentStyle,
        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 replacement 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: {
    <T extends NavigationTheme>(themes: {
        reactNavigationLight: T;
        materialLight?: MD3Theme;
    }): { LightTheme: NavigationTheme };
    <T extends NavigationTheme>(themes: {
        reactNavigationDark: T;
        materialDark?: MD3Theme;
    }): { DarkTheme: NavigationTheme };
    <TLight extends NavigationTheme, TDark extends NavigationTheme>(themes: {
        reactNavigationLight: TLight;
        reactNavigationDark: TDark;
        materialLight?: MD3Theme;
        materialDark?: MD3Theme;
    }): { LightTheme: TLight; DarkTheme: TDark };
};

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,
    hitSlop,
    ...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;

Deprecated

Deprecated in v5.x - use <Text variant="bodySmall" /> instead. 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,
    hitSlop,
    ...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;

Deprecated

Deprecated in v5.x - use <Text variant="headlineSmall" /> instead. 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. Note that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal.

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

Deprecated

Deprecated in v5.x - use <Text variant="bodyMedium" /> instead. 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: <T extends string = string>({
    value,
    onValueChange,
    buttons,
    multiSelect,
    density,
    style,
    theme: themeOverrides,
}: Props<T>) => 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;

Deprecated

Deprecated in v5.x - use <Text variant="titleMedium" /> instead. 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;

Deprecated

Deprecated in v5.x - use <Text variant="titleLarge" /> instead. 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>>;
    /**
     * Sets additional distance outside of element in which a press can be detected.
     */
    hitSlop?: TouchableRippleProps['hitSlop'];
    /**
     * @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. Note: If `Appbar.BackAction` is present, it will be rendered before any `isLeading` icons.
     */
    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 = Omit<React.ComponentProps<typeof Appbar>, 'safeAreaInsets'> & {
    /**
     * 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, to set a custom padding or 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;
    /**
     * Sets additional distance outside of element in which a press can be detected.
     */
    hitSlop?: TouchableRippleProps['hitSlop'];
    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';
    /**
     * Sets additional distance outside of element in which a press can be detected.
     */
    hitSlop?: TouchableRippleProps['hitSlop'];
};

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>>;
    /**
     * Sets additional distance outside of element in which a press can be detected.
     */
    hitSlop?: TouchableRippleProps['hitSlop'];
    /**
     * @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;
    /**
     * Sets additional distance outside of element in which a press can be detected.
     */
    hitSlop?: TouchableRippleProps['hitSlop'];
    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
     * - `wrapperStyle`: pass additional styles for the wrapper of the action item.
     * - `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>>;
        wrapperStyle?: 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;
    /**
     * Style of button's inner content.
     * Use this prop to apply custom height and width or to set a custom padding`.
     */
    contentStyle?: StyleProp<ViewStyle>;
    /**
     * 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 root TouchableRipple container.
     */
    style?: StyleProp<ViewStyle>;
    /**
     * Style that is passed to the outermost container that wraps the entire content, including left and right items and both title and description.
     */
    containerStyle?: StyleProp<ViewStyle>;
    /**
     * Style that is passed to the content container, which wraps the title and description.
     */
    contentStyle?: 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'];
    /**
     * Amount of space between the touchable area and the edge of the component.
     * This can be used to enlarge the touchable area beyond the visible component.
     */
    hitSlop?: TouchableRippleProps['hitSlop'];
};

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.
     */
    left?: (props: { color: string; style: Style }) => React.ReactNode;
    /**
     * Callback which returns a React element to display on the right side.
     */
    right?: (props: { color: string; style?: Style }) => React.ReactNode;
    /**
     * Function to execute on press.
     */
    onPress?: (e: GestureResponderEvent) => void;
    /**
     * @optional
     */
    theme?: ThemeProp;
    /**
     * Style that is passed to the root TouchableRipple container.
     */
    style?: StyleProp<ViewStyle>;
    /**
     * Style that is passed to the outermost container that wraps the entire content, including left and right items and both title and description.
     */
    containerStyle?: StyleProp<ViewStyle>;
    /**
     * Style that is passed to the content container, which wraps the title and description.
     */
    contentStyle?: StyleProp<ViewStyle>;
    /**
     * Style that is passed to Title element.
     */
    titleStyle?: StyleProp<TextStyle>;
    /**
     * Style that is passed to Description element.
     */
    descriptionStyle?: StyleProp<TextStyle>;
    /**
     * 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;
    /**
     * Ellipsize Mode for the Title.  One of `'head'`, `'middle'`, `'tail'`, `'clip'`.
     *
     * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)
     */
    titleEllipsizeMode?: EllipsizeProp;
    /**
     * Ellipsize Mode for the Description.  One of `'head'`, `'middle'`, `'tail'`, `'clip'`.
     *
     * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)
     */
    descriptionEllipsizeMode?: EllipsizeProp;
    /**
     * Specifies the largest possible scale a title font can reach.
     */
    titleMaxFontSizeMultiplier?: number;
    /**
     * Specifies the largest possible scale a description font can reach.
     */
    descriptionMaxFontSizeMultiplier?: number;
    /**
     * TestID used for testing purposes
     */
    testID?: string;
};

type ListSectionProps

type Props = React.ComponentPropsWithRef<typeof View> & {
    /**
     * Title text for the section.
     */
    title?: string;
    /**
     * Content of the section.
     */
    children: React.ReactNode;
    /**
     * @optional
     */
    theme?: ThemeProp;
    /**
     * Style that is passed to Title element.
     */
    titleStyle?: StyleProp<TextStyle>;
    style?: StyleProp<ViewStyle>;
};

type ListSubheaderProps

type Props = React.ComponentProps<typeof Text> & {
    /**
     * @optional
     */
    theme?: ThemeProp;
    /**
     * Style that is passed to Text element.
     */
    style?: StyleProp<TextStyle>;
    /**
     * Specifies the largest possible scale a text font can reach.
     */
    maxFontSizeMultiplier?: number;
};

type MaterialBottomTabNavigationEventMap

type MaterialBottomTabNavigationEventMap = {
    /**
     * Event which fires on tapping on the tab in the tab bar.
     */
    tabPress: {
        data: undefined;
        canPreventDefault: true;
    };
    /**
     * Event which fires on long pressing on the tab in the tab bar.
     */
    tabLongPress: {};
};

type MaterialBottomTabNavigationOptions

type MaterialBottomTabNavigationOptions = {
    /**
     * Title text for the screen.
     */
    title?: string;
    /**
     * @deprecated In v5.x works only with theme version 2.
     * Color of the tab bar when this tab is active. Only used when `shifting` is `true`.
     */
    tabBarColor?: string;
    /**
     * Label text of the tab displayed in the navigation bar. When undefined, scene title is used.
     */
    tabBarLabel?: string;
    /**
     * String referring to an icon in the `MaterialCommunityIcons` set, or a
     * function that given { focused: boolean, color: string } returns a React.Node to display in the navigation bar.
     */
    tabBarIcon?:
        | string
        | ((props: { focused: boolean; color: string }) => React.ReactNode);
    /**
     * Badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
     */
    tabBarBadge?: boolean | number | string;
    /**
     * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
     */
    tabBarAccessibilityLabel?: string;
    /**
     * ID to locate this tab button in tests.
     */
    tabBarButtonTestID?: string;
};

type MaterialBottomTabNavigationProp

type MaterialBottomTabNavigationProp<
    ParamList extends ParamListBase,
    RouteName extends keyof ParamList = keyof ParamList,
    NavigatorID extends string | undefined = undefined
> = NavigationProp<
    ParamList,
    RouteName,
    NavigatorID,
    TabNavigationState<ParamList>,
    MaterialBottomTabNavigationOptions,
    MaterialBottomTabNavigationEventMap
> &
    TabActionHelpers<ParamList>;

type MaterialBottomTabScreenProps

type MaterialBottomTabScreenProps<
    ParamList extends ParamListBase,
    RouteName extends keyof ParamList = keyof ParamList,
    NavigatorID extends string | undefined = undefined
> = {
    navigation: MaterialBottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
    route: RouteProp<ParamList, RouteName>;
};

type MD2Theme

type MD2Theme = ThemeBase & {
    version: 2;
    isV3: false;
    colors: MD2Colors;
    fonts: Fonts;
};

type MD3Elevation

type MD3Elevation = 0 | 1 | 2 | 3 | 4 | 5;

type MD3Theme

type MD3Theme = ThemeBase & {
    version: 3;
    isV3: true;
    colors: MD3Colors;
    fonts: MD3Typescale;
};

type MenuItemProps

type Props = {
    /**
     * Title text for the `MenuItem`.
     */
    title: React.ReactNode;
    /**
     * @renamed Renamed from 'icon' to 'leadingIcon' in v5.x
     *
     * Leading icon to display for the `MenuItem`.
     */
    leadingIcon?: IconSource;
    /**
     * @supported Available in v5.x with theme version 3
     *
     * Trailing icon to display for the `MenuItem`.
     */
    trailingIcon?: IconSource;
    /**
     * Whether the 'item' is disabled. A disabled 'item' is greyed out and `onPress` is not called on touch.
     */
    disabled?: boolean;
    /**
     * @supported Available in v5.x with theme version 3
     *
     * Sets min height with densed layout.
     */
    dense?: boolean;
    /**
     * Type of background drawabale to display the feedback (Android).
     * https://reactnative.dev/docs/pressable#rippleconfig
     */
    background?: PressableAndroidRippleConfig;
    /**
     * Function to execute on press.
     */
    onPress?: (e: GestureResponderEvent) => void;
    /**
     * Specifies the largest possible scale a title font can reach.
     */
    titleMaxFontSizeMultiplier?: number;
    /**
     * Style that is passed to the root TouchableRipple container.
     * @optional
     */
    style?: StyleProp<ViewStyle>;
    /**
     * Style that is passed to the outermost container that wraps the entire content, including leading and trailing icons and title text.
     */
    containerStyle?: StyleProp<ViewStyle>;
    /**
     * Style that is passed to the content container, which wraps the title text.
     */
    contentStyle?: StyleProp<ViewStyle>;
    /**
     * Style that is passed to the Title element.
     */
    titleStyle?: StyleProp<TextStyle>;
    /**
     * Color of the ripple effect.
     */
    rippleColor?: ColorValue;
    /**
     * @optional
     */
    theme?: ThemeProp;
    /**
     * Sets additional distance outside of element in which a press can be detected.
     */
    hitSlop?: TouchableRippleProps['hitSlop'];
    /**
     * TestID used for testing purposes
     */
    testID?: string;
    /**
     * Accessibility label for the Touchable. This is read by the screen reader when the user taps the component.
     */
    accessibilityLabel?: string;
    /**
     * Accessibility state for the Touchable. This is read by the screen reader when the user taps the component.
     */
    accessibilityState?: AccessibilityState;
};

type MenuProps

type Props = {
    /**
     * Whether the Menu is currently visible.
     */
    visible: boolean;
    /**
     * The anchor to open the menu from. In most cases, it will be a button that opens the menu.
     */
    anchor:
        | React.ReactNode
        | {
              x: number;
              y: number;
          };
    /**
     * Whether the menu should open at the top of the anchor or at its bottom.
     * Applied only when anchor is a node, not an x/y position.
     */
    anchorPosition?: 'top' | 'bottom';
    /**
     * Extra margin to add at the top of the menu to account for translucent status bar on Android.
     * 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 and customize it.
     * This is automatically handled on iOS.
     */
    statusBarHeight?: number;
    /**
     * Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called.
     */
    onDismiss?: () => void;
    /**
     * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the menu.
     */
    overlayAccessibilityLabel?: string;
    /**
     * Content of the `Menu`.
     */
    children: React.ReactNode;
    /**
     * Style of menu's inner content.
     */
    contentStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
    style?: StyleProp<ViewStyle>;
    /**
     * Elevation level of the menu's content. Shadow styles are calculated based on this value. Default `backgroundColor` is taken from the corresponding `theme.colors.elevation` property. By default equals `2`.
     * @supported Available in v5.x with theme version 3
     */
    elevation?: MD3Elevation;
    /**
     * Mode of the menu's content.
     * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.
     * - `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.
     *
     * @supported Available in v5.x with theme version 3
     */
    mode?: 'flat' | 'elevated';
    /**
     * @optional
     */
    theme?: ThemeProp;
    /**
     * Inner ScrollView prop
     */
    keyboardShouldPersistTaps?: ScrollViewProps['keyboardShouldPersistTaps'];
    /**
     * testID to be used on tests.
     */
    testID?: string;
};

type ModalProps

type Props = {
    /**
     * Determines whether clicking outside the modal dismisses it.
     */
    dismissable?: boolean;
    /**
     * Determines whether clicking Android hardware back button dismisses the dialog.
     */
    dismissableBackButton?: boolean;
    /**
     * Callback that is called when the user dismisses the modal.
     */
    onDismiss?: () => void;
    /**
     * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the modal.
     */
    overlayAccessibilityLabel?: string;
    /**
     * Determines Whether the modal is visible.
     */
    visible: boolean;
    /**
     * Content of the `Modal`.
     */
    children: React.ReactNode;
    /**
     * Style for the content of the modal
     */
    contentContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
    /**
     * Style for the wrapper of the modal.
     * Use this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom.
     */
    style?: StyleProp<ViewStyle>;
    /**
     * @optional
     */
    theme?: ThemeProp;
    /**
     * testID to be used on tests.
     */
    testID?: string;
};

type ParagraphProps

type Props = TextProps & {
    children: React.ReactNode;
};

type PortalHostProps

type Props = {
    children: React.ReactNode;
};

type PortalProps

type Props = {
    /**
     * Content of the `Portal`.
     */
    children: React.ReactNode;
    /**
     * @optional
     */
    theme: InternalTheme;
};

type ProgressBarProps

type Props = React.ComponentPropsWithRef<typeof View> & {
    /**
     * Animated value (between 0 and 1). This tells the progress bar to rely on this value to animate it.
     * Note: It should not be used in parallel with the `progress` prop.
     */
    animatedValue?: number;
    /**
     * Progress value (between 0 and 1).
     * Note: It should not be used in parallel with the `animatedValue` prop.
     */
    progress?: number;
    /**
     * Color of the progress bar. The background color will be calculated based on this but you can change it by passing `backgroundColor` to `style` prop.
     */
    color?: string;
    /**
     * If the progress bar will show indeterminate progress.
     */
    indeterminate?: boolean;
    /**
     * Whether to show the ProgressBar (true, the default) or hide it (false).
     */
    visible?: boolean;
    /**
     * Style of filled part of the ProgresBar.
     */
    fillStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
    style?: StyleProp<ViewStyle>;
    /**
     * @optional
     */
    theme?: ThemeProp;
    /**
     * testID to be used on tests.
     */
    testID?: string;
};

type Props

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>>;
    /**
     * Sets additional distance outside of element in which a press can be detected.
     */
    hitSlop?: TouchableRippleProps['hitSlop'];
    /**
     * @optional
     */
    theme?: ThemeProp;
    /**
     * TestID used for testing purposes
     */
    testID?: string;
};

type ProviderProps

type Props = {
    children: React.ReactNode;
    theme?: ThemeProp;
    settings?: Settings;
};

type RadioButtonAndroidProps

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

type RadioButtonGroupProps

type Props = {
    /**
     * Function to execute on selection change.
     */
    onValueChange: (value: string) => void;
    /**
     * Value of the currently selected radio button.
     */
    value: string;
    /**
     * React elements containing radio buttons.
     */
    children: React.ReactNode;
};

type RadioButtonIOSProps

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

type RadioButtonItemProps

type Props = {
    /**
     * Value of the radio button.
     */
    value: string;
    /**
     * Label to be displayed on the item.
     */
    label: string;
    /**
     * Whether radio is disabled.
     */
    disabled?: boolean;
    /**
     * Type of background drawabale to display the feedback (Android).
     * https://reactnative.dev/docs/pressable#rippleconfig
     */
    background?: PressableAndroidRippleConfig;
    /**
     * Function to execute on press.
     */
    onPress?: (e: GestureResponderEvent) => void;
    /**
     * Function to execute on long press.
     */
    onLongPress?: (e: GestureResponderEvent) => void;
    /**
     * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
     */
    accessibilityLabel?: string;
    /**
     * Custom color for unchecked radio.
     */
    uncheckedColor?: string;
    /**
     * Custom color for radio.
     */
    color?: string;
    /**
     * Color of the ripple effect.
     */
    rippleColor?: ColorValue;
    /**
     * Status of radio button.
     */
    status?: 'checked' | 'unchecked';
    /**
     * Additional styles for container View.
     */
    style?: StyleProp<ViewStyle>;
    /**
     * 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;
    /**
     * Specifies the largest possible scale a label font can reach.
     */
    labelMaxFontSizeMultiplier?: number;
    /**
     * @optional
     */
    theme?: ThemeProp;
    /**
     * testID to be used on tests.
     */
    testID?: string;
    /**
     * Whether `<RadioButton.Android />` or `<RadioButton.IOS />` should be used.
     * Left undefined `<RadioButton />` will be used.
     */
    mode?: 'android' | 'ios';
    /**
     * Radio button control position.
     */
    position?: 'leading' | 'trailing';
    /**
     * Sets additional distance outside of element in which a press can be detected.
     */
    hitSlop?: TouchableRippleProps['hitSlop'];
};

type RadioButtonProps

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

type SearchbarProps

type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    /**
     * Hint text shown when the input is empty.
     */
    placeholder?: string;
    /**
     * The value of the text input.
     */
    value: string;
    /**
     * Callback that is called when the text input's text changes.
     */
    onChangeText?: (query: string) => void;
    /**
     * @supported Available in v5.x with theme version 3
     * Search layout mode, the default value is "bar".
     */
    mode?: 'bar' | 'view';
    /**
     * Icon name for the left icon button (see `onIconPress`).
     */
    icon?: IconSource;
    /**
     * Custom color for icon, default will be derived from theme
     */
    iconColor?: string;
    /**
     * Color of the ripple effect.
     */
    rippleColor?: ColorValue;
    /**
     * Callback to execute if we want the left icon to act as button.
     */
    onIconPress?: (e: GestureResponderEvent) => void;
    /**
     * Callback to execute if we want to add custom behaviour to close icon button.
     */
    onClearIconPress?: (e: GestureResponderEvent) => void;
    /**
     * Accessibility label for the button. This is read by the screen reader when the user taps the button.
     */
    searchAccessibilityLabel?: string;
    /**
     * Custom icon for clear button, default will be icon close. It's visible when `loading` is set to `false`.
     * In v5.x with theme version 3, `clearIcon` is visible only `right` prop is not defined.
     */
    clearIcon?: IconSource;
    /**
     * Accessibility label for the button. This is read by the screen reader when the user taps the button.
     */
    clearAccessibilityLabel?: string;
    /**
     * @supported Available in v5.x with theme version 3
     * Icon name for the right trailering icon button.
     * Works only when `mode` is set to "bar". It won't be displayed if `loading` is set to `true`.
     */
    traileringIcon?: IconSource;
    /**
     * @supported Available in v5.x with theme version 3
     * Custom color for the right trailering icon, default will be derived from theme
     */
    traileringIconColor?: string;
    /**
     * @supported Available in v5.x with theme version 3
     * Color of the trailering icon ripple effect.
     */
    traileringRippleColor?: ColorValue;
    /**
     * @supported Available in v5.x with theme version 3
     * Callback to execute on the right trailering icon button press.
     */
    onTraileringIconPress?: (e: GestureResponderEvent) => void;
    /**
     * Accessibility label for the right trailering icon button. This is read by the screen reader when the user taps the button.
     */
    traileringIconAccessibilityLabel?: string;
    /**
     * @supported Available in v5.x with theme version 3
     * Callback which returns a React element to display on the right side.
     * Works only when `mode` is set to "bar".
     */
    right?: (props: {
        color: string;
        style: Style;
        testID: string;
    }) => React.ReactNode;
    /**
     * @supported Available in v5.x with theme version 3
     * Whether to show `Divider` at the bottom of the search.
     * Works only when `mode` is set to "view". True by default.
     */
    showDivider?: boolean;
    /**
     * @supported Available in v5.x with theme version 3
     * Changes Searchbar shadow and background on iOS and Android.
     */
    elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
    /**
     * Set style of the TextInput component inside the searchbar
     */
    inputStyle?: StyleProp<TextStyle>;
    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
    /**
     * Custom flag for replacing clear button with activity indicator.
     */
    loading?: Boolean;
    /**
     * TestID used for testing purposes
     */
    testID?: string;
    /**
     * @optional
     */
    theme?: ThemeProp;
};

type SegmentedButtonsProps

type Props<T extends string = string> = {
    /**
     * Buttons to display as options in toggle button.
     * Button should contain the following properties:
     * - `value`: value of button (required)
     * - `icon`: icon to display for the item
     * - `disabled`: whether the button is disabled
     * - `accessibilityLabel`: acccessibility label for the button. This is read by the screen reader when the user taps the button.
     * - `checkedColor`: custom color for checked Text and Icon
     * - `uncheckedColor`: custom color for unchecked Text and Icon
     * - `onPress`: callback that is called when button is pressed
     * - `label`: label text of the button
     * - `showSelectedCheck`: show optional check icon to indicate selected state
     * - `style`: pass additional styles for the button
     * - `testID`: testID to be used on tests
     */
    buttons: {
        value: T;
        icon?: IconSource;
        disabled?: boolean;
        accessibilityLabel?: string;
        checkedColor?: string;
        uncheckedColor?: string;
        onPress?: (event: GestureResponderEvent) => void;
        label?: string;
        showSelectedCheck?: boolean;
        style?: StyleProp<ViewStyle>;
        labelStyle?: StyleProp<TextStyle>;
        testID?: string;
    }[];
    /**
     * Density is applied to the height, to allow usage in denser UIs
     */
    density?: 'regular' | 'small' | 'medium' | 'high';
    style?: StyleProp<ViewStyle>;
    theme?: ThemeProp;
} & ConditionalValue<T>;

type SnackbarProps

type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    /**
     * Whether the Snackbar is currently visible.
     */
    visible: boolean;
    /**
     * Label and press callback for the action button. It should contain the following properties:
     * - `label` - Label of the action button
     * - `onPress` - Callback that is called when action button is pressed.
     */
    action?: $RemoveChildren<typeof Button> & {
        label: string;
    };
    /**
     * @supported Available in v5.x with theme version 3
     * Icon to display when `onIconPress` is defined. Default will be `close` icon.
     */
    icon?: IconSource;
    /**
     * @supported Available in v5.x with theme version 3
     * Color of the ripple effect.
     */
    rippleColor?: ColorValue;
    /**
     * @supported Available in v5.x with theme version 3
     * Function to execute on icon button press. The icon button appears only when this prop is specified.
     */
    onIconPress?: () => void;
    /**
     * @supported Available in v5.x with theme version 3
     * Accessibility label for the icon button. This is read by the screen reader when the user taps the button.
     */
    iconAccessibilityLabel?: string;
    /**
     * The duration for which the Snackbar is shown.
     */
    duration?: number;
    /**
     * Callback called when Snackbar is dismissed. The `visible` prop needs to be updated when this is called.
     */
    onDismiss: () => void;
    /**
     * Text content of the Snackbar.
     */
    children: React.ReactNode;
    /**
     * @supported Available in v5.x with theme version 3
     * Changes Snackbar 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 for the wrapper of the snackbar
     */
    wrapperStyle?: StyleProp<ViewStyle>;
    /**
     * Style for the content of the snackbar
     */
    contentStyle?: StyleProp<ViewStyle>;
    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
    ref?: React.RefObject<View>;
    /**
     * @optional
     */
    theme?: ThemeProp;
    /**
     * TestID used for testing purposes
     */
    testID?: string;
};

type SubheadingProps

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

type SurfaceProps

type Props = Omit<React.ComponentPropsWithRef<typeof View>, 'style'> & {
    /**
     * Content of the `Surface`.
     */
    children: React.ReactNode;
    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
    /**
     * @supported Available in v5.x with theme version 3
     * Changes shadows and background on iOS and Android.
     * Used to create UI hierarchy between components.
     *
     * Note: If `mode` is set to `flat`, Surface doesn't have a shadow.
     *
     * Note: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.
     * It's no longer supported with theme version 3 and you should use `elevation` property instead.
     */
    elevation?: Elevation;
    /**
     * @supported Available in v5.x with theme version 3
     * Mode of the Surface.
     * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.
     * - `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.
     */
    mode?: 'flat' | 'elevated';
    /**
     * @optional
     */
    theme?: ThemeProp;
    /**
     * TestID used for testing purposes
     */
    testID?: string;
    ref?: React.RefObject<View>;
    /**
     * @internal
     */
    container?: boolean;
};

type SwitchProps

type Props = React.ComponentPropsWithRef<typeof NativeSwitch> & {
    /**
     * Disable toggling the switch.
     */
    disabled?: boolean;
    /**
     * Value of the switch, true means 'on', false means 'off'.
     */
    value?: boolean;
    /**
     * Custom color for switch.
     */
    color?: string;
    /**
     * Callback called with the new value when it changes.
     */
    onValueChange?: Function;
    style?: StyleProp<ViewStyle>;
    /**
     * @optional
     */
    theme?: ThemeProp;
};

type TextInputAffixProps

type Props = {
    /**
     * Text to show.
     */
    text: string;
    onLayout?: (event: LayoutChangeEvent) => void;
    /**
     * Function to execute on press.
     */
    onPress?: (e: GestureResponderEvent) => void;
    /**
     * Accessibility label for the affix. This is read by the screen reader when the user taps the affix.
     */
    accessibilityLabel?: string;
    /**
     * Style that is passed to the Text element.
     */
    textStyle?: StyleProp<TextStyle>;
    /**
     * @optional
     */
    theme?: ThemeProp;
};

type TextInputIconProps

type Props = $Omit<
    React.ComponentProps<typeof IconButton>,
    'icon' | 'theme' | 'color' | 'iconColor'
> & {
    /**
     * @renamed Renamed from 'name' to 'icon` in v5.x
     * Icon to show.
     */
    icon: IconSource;
    /**
     * Function to execute on press.
     */
    onPress?: (e: GestureResponderEvent) => void;
    /**
     * Whether the TextInput will focus after onPress.
     */
    forceTextInputFocus?: boolean;
    /**
     * Color of the icon or a function receiving a boolean indicating whether the TextInput is focused and returning the color.
     */
    color?: ((isTextInputFocused: boolean) => string | undefined) | string;
    /**
     * Color of the ripple effect.
     */
    rippleColor?: ColorValue;
    style?: StyleProp<ViewStyle>;
    /**
     * @optional
     */
    theme?: ThemeProp;
};

type TextInputProps

type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
    /**
     * Mode of the TextInput.
     * - `flat` - flat input with an underline.
     * - `outlined` - input with an outline.
     *
     * In `outlined` mode, the background color of the label is derived from `colors?.background` in theme or the `backgroundColor` style.
     * This component render TextInputOutlined or TextInputFlat based on that props
     */
    mode?: 'flat' | 'outlined';
    /**
     * The adornment placed on the left side of the input. It can be either `TextInput.Icon` or `TextInput.Affix`.
     */
    left?: React.ReactNode;
    /**
     * The adornment placed on the right side of the input. It can be either `TextInput.Icon` or `TextInput.Affix`.
     */
    right?: React.ReactNode;
    /**
     * If true, user won't be able to interact with the component.
     */
    disabled?: boolean;
    /**
     * The text or component to use for the floating label.
     */
    label?: TextInputLabelProp;
    /**
     * Placeholder for the input.
     */
    placeholder?: string;
    /**
     * Whether to style the TextInput with error style.
     */
    error?: boolean;
    /**
     * Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.
     */
    onChangeText?: Function;
    /**
     * Selection color of the input. On iOS, it sets both the selection color and cursor color.
     * On Android, it sets only the selection color.
     */
    selectionColor?: string;
    /**
     * @platform Android only
     * Cursor (or "caret") color of the input on Android.
     * This property has no effect on iOS.
     */
    cursorColor?: string;
    /**
     * Inactive underline color of the input.
     */
    underlineColor?: string;
    /**
     * Active underline color of the input.
     */
    activeUnderlineColor?: string;
    /**
     * Inactive outline color of the input.
     */
    outlineColor?: string;
    /**
     * Active outline color of the input.
     */
    activeOutlineColor?: string;
    /**
     * Color of the text in the input.
     */
    textColor?: string;
    /**
     * Sets min height with densed layout. For `TextInput` in `flat` mode
     * height is `64dp` or in dense layout - `52dp` with label or `40dp` without label.
     * For `TextInput` in `outlined` mode
     * height is `56dp` or in dense layout - `40dp` regardless of label.
     * When you apply `height` prop in style the `dense` prop affects only `paddingVertical` inside `TextInput`
     */
    dense?: boolean;
    /**
     * Whether the input can have multiple lines.
     */
    multiline?: boolean;
    /**
     * @platform Android only
     * The number of lines to show in the input (Android only).
     */
    numberOfLines?: number;
    /**
     * Callback that is called when the text input is focused.
     */
    onFocus?: (args: any) => void;
    /**
     * Callback that is called when the text input is blurred.
     */
    onBlur?: (args: any) => void;
    /**
     *
     * Callback to render a custom input component such as `react-native-text-input-mask`
     * instead of the default `TextInput` component from `react-native`.
     *
     * Example:
     * ```js
     * <TextInput
     *   label="Phone number"
     *   render={props =>
     *     <TextInputMask
     *       {...props}
     *       mask="+[00] [000] [000] [000]"
     *     />
     *   }
     * />
     * ```
     */
    render?: (props: RenderProps) => React.ReactNode;
    /**
     * Value of the text input.
     */
    value?: string;
    /**
     * Pass `fontSize` prop to modify the font size inside `TextInput`.
     * Pass `height` prop to set `TextInput` height. When `height` is passed,
     * `dense` prop will affect only input's `paddingVertical`.
     * Pass `paddingHorizontal` to modify horizontal padding.
     * This can be used to get MD Guidelines v1 TextInput look.
     */
    style?: StyleProp<TextStyle>;
    /**
     * @optional
     */
    theme?: ThemeProp;
    /**
     * testID to be used on tests.
     */
    testID?: string;
    /**
     * Pass custom style directly to the input itself.
     * Overrides input style
     * Example: `paddingLeft`, `backgroundColor`
     */
    contentStyle?: StyleProp<TextStyle>;
    /**
     * Pass style to override the default style of outlined wrapper.
     * Overrides style when mode is set to `outlined`
     * Example: `borderRadius`, `borderColor`
     */
    outlineStyle?: StyleProp<ViewStyle>;
    /**
     * Pass style to override the default style of underlined wrapper.
     * Overrides style when mode is set to `flat`
     * Example: `borderRadius`, `borderColor`
     */
    underlineStyle?: StyleProp<ViewStyle>;
};

type TextProps

type Props<T> = React.ComponentProps<typeof NativeText> & {
    /**
     * @supported Available in v5.x with theme version 3
     *
     * 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`
     */
    variant?: VariantProp<T>;
    children: React.ReactNode;
    theme?: ThemeProp;
    style?: StyleProp<TextStyle>;
};

type ThemeBase

type ThemeBase = {
    dark: boolean;
    mode?: Mode;
    roundness: number;
    animation: {
        scale: number;
        defaultAnimationDuration?: number;
    };
};

type TitleProps

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

type ToggleButtonGroupProps

type Props<Value = string> = {
    /**
     * Function to execute on selection change.
     */
    onValueChange: (value: Value) => void;
    /**
     * Value of the currently selected toggle button.
     */
    value: Value | null;
    /**
     * React elements containing toggle buttons.
     */
    children: React.ReactNode;
};

type ToggleButtonProps

type Props = {
    /**
     * Icon to display for the `ToggleButton`.
     */
    icon: IconSource;
    /**
     * Size of the icon.
     */
    size?: number;
    /**
     * Custom text color for button.
     */
    iconColor?: string;
    /**
     * Color of the ripple effect.
     */
    rippleColor?: ColorValue;
    /**
     * Whether the button is disabled.
     */
    disabled?: boolean;
    /**
     * Accessibility label for the `ToggleButton`. This is read by the screen reader when the user taps the button.
     */
    accessibilityLabel?: string;
    /**
     * Function to execute on press.
     */
    onPress?: (value?: GestureResponderEvent | string) => void;
    /**
     * Value of button.
     */
    value?: string;
    /**
     * Status of button.
     */
    status?: 'checked' | 'unchecked';
    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
    /**
     * @optional
     */
    theme?: ThemeProp;
    ref?: React.RefObject<View>;
    /**
     * testID to be used on tests.
     */
    testID?: string;
};

type ToggleButtonRowProps

type Props = {
    /**
     * Function to execute on selection change.
     */
    onValueChange: (value: string) => void;
    /**
     * Value of the currently selected toggle button.
     */
    value: string;
    /**
     * React elements containing toggle buttons.
     */
    children: React.ReactNode;
    style?: StyleProp<ViewStyle>;
};

type TooltipProps

type Props = {
    /**
     * Tooltip reference element. Needs to be able to hold a ref.
     */
    children: React.ReactElement;
    /**
     * The number of milliseconds a user must touch the element before showing the tooltip.
     */
    enterTouchDelay?: number;
    /**
     * The number of milliseconds after the user stops touching an element before hiding the tooltip.
     */
    leaveTouchDelay?: number;
    /**
     * Tooltip title
     */
    title: string;
    /**
     * Specifies the largest possible scale a title font can reach.
     */
    titleMaxFontSizeMultiplier?: number;
    /**
     * @optional
     */
    theme?: ThemeProp;
};

type TouchableRippleProps

type Props = PressableProps & {
    /**
     * Whether to render the ripple outside the view bounds.
     */
    borderless?: boolean;
    /**
     * Type of background drawabale to display the feedback (Android).
     * https://reactnative.dev/docs/pressable#rippleconfig
     */
    background?: Object;
    /**
     * Whether to start the ripple at the center (Web).
     */
    centered?: boolean;
    /**
     * Whether to prevent interaction with the touchable.
     */
    disabled?: boolean;
    /**
     * Function to execute on press. If not set, will cause the touchable to be disabled.
     */
    onPress?: (e: GestureResponderEvent) => void;
    /**
     * Function to execute on long press.
     */
    onLongPress?: (e: GestureResponderEvent) => void;
    /**
     * Function to execute immediately when a touch is engaged, before `onPressOut` and `onPress`.
     */
    onPressIn?: (e: GestureResponderEvent) => void;
    /**
     * Function to execute when a touch is released.
     */
    onPressOut?: (e: GestureResponderEvent) => void;
    /**
     * Color of the ripple effect (Android >= 5.0 and Web).
     */
    rippleColor?: ColorValue;
    /**
     * Color of the underlay for the highlight effect (Android < 5.0 and iOS).
     */
    underlayColor?: string;
    /**
     * Content of the `TouchableRipple`.
     */
    children:
        | ((state: PressableStateCallbackType) => React.ReactNode)
        | React.ReactNode;
    style?:
        | StyleProp<ViewStyle>
        | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)
        | undefined;
    /**
     * @optional
     */
    theme?: ThemeProp;
};

Namespaces

namespace Avatar

module 'lib/typescript/components/Avatar/Avatar.d.ts' {}

variable Icon

const Icon: {
    ({
        icon,
        size,
        style,
        theme: themeOverrides,
        ...rest
    }: Props): React.JSX.Element;
    displayName: string;
};

Avatars can be used to represent people in a graphical way.

## Usage

import * as React from 'react';
import { Avatar } from 'react-native-paper';

const MyComponent = () => (
  <Avatar.Icon size={24} icon="folder" />
);

variable Image

const Image: {
    ({
        size,
        source,
        style,
        onError,
        onLayout,
        onLoad,
        onLoadEnd,
        onLoadStart,
        onProgress,
        theme: themeOverrides,
        testID,
        ...rest
    }: Props): React.JSX.Element;
    displayName: string;
};

Avatars can be used to represent people in a graphical way.

## Usage

import * as React from 'react';
import { Avatar } from 'react-native-paper';

const MyComponent = () => (
  <Avatar.Image size={24} source={require('../assets/avatar.png')} />
);
export default MyComponent

variable Text

const Text: {
    ({
        label,
        size,
        style,
        labelStyle,
        color: customColor,
        theme: themeOverrides,
        maxFontSizeMultiplier,
        ...rest
    }: Props): React.JSX.Element;
    displayName: string;
};

Avatars can be used to represent people in a graphical way.

## Usage

import * as React from 'react';
import { Avatar } from 'react-native-paper';

const MyComponent = () => (
  <Avatar.Text size={24} label="XD" />
);

namespace Drawer

module 'lib/typescript/components/Drawer/Drawer.d.ts' {}

variable CollapsedItem

const CollapsedItem: {
    ({
        focusedIcon,
        unfocusedIcon,
        label,
        active,
        theme: themeOverrides,
        style,
        onPress,
        disabled,
        accessibilityLabel,
        badge,
        testID,
        labelMaxFontSizeMultiplier,
        ...rest
    }: Props): React.JSX.Element | null;
    displayName: string;
};

Note: Available in v5.x with theme version 3

Collapsed component used to show an action item with an icon and optionally label in a navigation drawer.

## Usage

import * as React from 'react';
import { Drawer } from 'react-native-paper';

const MyComponent = () => (
   <Drawer.CollapsedItem
     focusedIcon="inbox"
     unfocusedIcon="inbox-outline"
     label="Inbox"
   />
);

export default MyComponent;

variable Item

const Item: {
    ({
        icon,
        label,
        active,
        disabled,
        theme: themeOverrides,
        rippleColor: customRippleColor,
        style,
        onPress,
        background,
        accessibilityLabel,
        right,
        labelMaxFontSizeMultiplier,
        hitSlop,
        ...rest
    }: Props): React.JSX.Element;
    displayName: string;
};

A component used to show an action item with an icon and a label in a navigation drawer.

## Usage

import * as React from 'react';
import { Drawer } from 'react-native-paper';

const MyComponent = () => (
   <Drawer.Item
     style={{ backgroundColor: '#64ffda' }}
     icon="star"
     label="First Item"
   />
);

export default MyComponent;

variable Section

const Section: {
    ({
        children,
        title,
        theme: themeOverrides,
        style,
        showDivider,
        titleMaxFontSizeMultiplier,
        ...rest
    }: Props): React.JSX.Element;
    displayName: string;
};

A component to group content inside a navigation drawer.

## Usage

import * as React from 'react';
import { Drawer } from 'react-native-paper';

const MyComponent = () => {
  const [active, setActive] = React.useState('');

  return (
    <Drawer.Section title="Some title">
      <Drawer.Item
        label="First Item"
        active={active === 'first'}
        onPress={() => setActive('first')}
      />
      <Drawer.Item
        label="Second Item"
        active={active === 'second'}
        onPress={() => setActive('second')}
      />
    </Drawer.Section>
  );
};

export default MyComponent;

namespace List

module 'lib/typescript/components/List/List.d.ts' {}

variable Accordion

const Accordion: {
    ({
        left,
        right,
        title,
        description,
        children,
        theme: themeOverrides,
        titleStyle,
        descriptionStyle,
        titleNumberOfLines,
        descriptionNumberOfLines,
        rippleColor: customRippleColor,
        style,
        containerStyle,
        contentStyle,
        id,
        testID,
        background,
        onPress,
        onLongPress,
        delayLongPress,
        expanded: expandedProp,
        accessibilityLabel,
        pointerEvents,
        titleMaxFontSizeMultiplier,
        descriptionMaxFontSizeMultiplier,
        hitSlop,
    }: Props): React.JSX.Element;
    displayName: string;
};

A component used to display an expandable list item.

## Usage

import * as React from 'react';
import { List } from 'react-native-paper';

const MyComponent = () => {
  const [expanded, setExpanded] = React.useState(true);

  const handlePress = () => setExpanded(!expanded);

  return (
    <List.Section title="Accordions">
      <List.Accordion
        title="Uncontrolled Accordion"
        left={props => <List.Icon {...props} icon="folder" />}>
        <List.Item title="First item" />
        <List.Item title="Second item" />
      </List.Accordion>

      <List.Accordion
        title="Controlled Accordion"
        left={props => <List.Icon {...props} icon="folder" />}
        expanded={expanded}
        onPress={handlePress}>
        <List.Item title="First item" />
        <List.Item title="Second item" />
      </List.Accordion>
    </List.Section>
  );
};

export default MyComponent;

variable AccordionGroup

const AccordionGroup: {
    ({
        expandedId: expandedIdProp,
        onAccordionPress,
        children,
    }: Props): React.JSX.Element;
    displayName: string;
};

List.AccordionGroup allows to control a group of List Accordions. id prop for List.Accordion is required in order for group to work. List.AccordionGroup can be a controlled or uncontrolled component. The example shows the uncontrolled version. At most one Accordion can be expanded at a given time.

## Usage

import * as React from 'react';
import { View, Text } from 'react-native';
import { List } from 'react-native-paper';

const MyComponent = () => (
  <List.AccordionGroup>
    <List.Accordion title="Accordion 1" id="1">
      <List.Item title="Item 1" />
    </List.Accordion>
    <List.Accordion title="Accordion 2" id="2">
      <List.Item title="Item 2" />
    </List.Accordion>
    <View>
      <Text>
        List.Accordion can be wrapped because implementation uses React.Context.
      </Text>
      <List.Accordion title="Accordion 3" id="3">
        <List.Item title="Item 3" />
      </List.Accordion>
    </View>
  </List.AccordionGroup>
);

export default MyComponent;

variable Icon

const Icon: {
    ({
        icon,
        color: iconColor,
        style,
        theme: themeOverrides,
    }: Props): React.JSX.Element;
    displayName: string;
};

A component to show an icon in a list item.

## Usage

import * as React from 'react';
import { List, MD3Colors } from 'react-native-paper';

const MyComponent = () => (
  <>
    <List.Icon color={MD3Colors.tertiary70} icon="folder" />
    <List.Icon color={MD3Colors.tertiary70} icon="equal" />
    <List.Icon color={MD3Colors.tertiary70} icon="calendar" />
  </>
);

export default MyComponent;

variable Image

const Image: {
    ({ style, source, variant, theme: themeOverrides }: Props): React.JSX.Element;
    displayName: string;
};

A component to show image in a list item.

## Usage

import * as React from 'react';
import { List, MD3Colors } from 'react-native-paper';

const MyComponent = () => (
  <>
    <List.Image variant="image" source={{uri: 'https://www.someurl.com/apple'}} />
    <List.Image variant="video" source={require('../../some-apple.png')} />
  </>
);

export default MyComponent;

variable Item

const Item: ForwardRefExoticComponent<any>;

variable Section

const Section: {
    ({
        children,
        title,
        titleStyle,
        style,
        theme: themeOverrides,
        ...rest
    }: Props): React.JSX.Element;
    displayName: string;
};

A component used to group list items.

## Usage

import * as React from 'react';
import { List, MD3Colors } from 'react-native-paper';

const MyComponent = () => (
  <List.Section>
    <List.Subheader>Some title</List.Subheader>
    <List.Item title="First Item" left={() => <List.Icon icon="folder" />} />
    <List.Item
      title="Second Item"
      left={() => <List.Icon color={MD3Colors.tertiary70} icon="folder" />}
    />
  </List.Section>
);

export default MyComponent;

variable Subheader

const Subheader: {
    ({
        style,
        theme: overrideTheme,
        maxFontSizeMultiplier,
        ...rest
    }: Props): React.JSX.Element;
    displayName: string;
};

A component used to display a header in lists.

## Usage

import * as React from 'react';
import { List } from 'react-native-paper';

const MyComponent = () => <List.Subheader>My List Title</List.Subheader>;

export default MyComponent;

namespace MD2Colors

module 'lib/typescript/styles/themes/v2/colors.d.ts' {}

variable amber100

const amber100: string;

variable amber200

const amber200: string;

variable amber300

const amber300: string;

variable amber400

const amber400: string;

variable amber50

const amber50: string;

variable amber500

const amber500: string;

variable amber600

const amber600: string;

variable amber700

const amber700: string;

variable amber800

const amber800: string;

variable amber900

const amber900: string;

variable amberA100

const amberA100: string;

variable amberA200

const amberA200: string;

variable amberA400

const amberA400: string;

variable amberA700

const amberA700: string;

variable black

const black: string;

variable blue100

const blue100: string;

variable blue200

const blue200: string;

variable blue300

const blue300: string;

variable blue400

const blue400: string;

variable blue50

const blue50: string;

variable blue500

const blue500: string;

variable blue600

const blue600: string;

variable blue700

const blue700: string;

variable blue800

const blue800: string;

variable blue900

const blue900: string;

variable blueA100

const blueA100: string;

variable blueA200

const blueA200: string;

variable blueA400

const blueA400: string;

variable blueA700

const blueA700: string;

variable blueGrey100

const blueGrey100: string;

variable blueGrey200

const blueGrey200: string;

variable blueGrey300

const blueGrey300: string;

variable blueGrey400

const blueGrey400: string;

variable blueGrey50

const blueGrey50: string;

variable blueGrey500

const blueGrey500: string;

variable blueGrey600

const blueGrey600: string;

variable blueGrey700

const blueGrey700: string;

variable blueGrey800

const blueGrey800: string;

variable blueGrey900

const blueGrey900: string;

variable brown100

const brown100: string;

variable brown200

const brown200: string;

variable brown300

const brown300: string;

variable brown400

const brown400: string;

variable brown50

const brown50: string;

variable brown500

const brown500: string;

variable brown600

const brown600: string;

variable brown700

const brown700: string;

variable brown800

const brown800: string;

variable brown900

const brown900: string;

variable cyan100

const cyan100: string;

variable cyan200

const cyan200: string;

variable cyan300

const cyan300: string;

variable cyan400

const cyan400: string;

variable cyan50

const cyan50: string;

variable cyan500

const cyan500: string;

variable cyan600

const cyan600: string;

variable cyan700

const cyan700: string;

variable cyan800

const cyan800: string;

variable cyan900

const cyan900: string;

variable cyanA100

const cyanA100: string;

variable cyanA200

const cyanA200: string;

variable cyanA400

const cyanA400: string;

variable cyanA700

const cyanA700: string;

variable deepOrange100

const deepOrange100: string;

variable deepOrange200

const deepOrange200: string;

variable deepOrange300

const deepOrange300: string;

variable deepOrange400

const deepOrange400: string;

variable deepOrange50

const deepOrange50: string;

variable deepOrange500

const deepOrange500: string;

variable deepOrange600

const deepOrange600: string;

variable deepOrange700

const deepOrange700: string;

variable deepOrange800

const deepOrange800: string;

variable deepOrange900

const deepOrange900: string;

variable deepOrangeA100

const deepOrangeA100: string;

variable deepOrangeA200

const deepOrangeA200: string;

variable deepOrangeA400

const deepOrangeA400: string;

variable deepOrangeA700

const deepOrangeA700: string;

variable deepPurple100

const deepPurple100: string;

variable deepPurple200

const deepPurple200: string;

variable deepPurple300

const deepPurple300: string;

variable deepPurple400

const deepPurple400: string;

variable deepPurple50

const deepPurple50: string;

variable deepPurple500

const deepPurple500: string;

variable deepPurple600

const deepPurple600: string;

variable deepPurple700

const deepPurple700: string;

variable deepPurple800

const deepPurple800: string;

variable deepPurple900

const deepPurple900: string;

variable deepPurpleA100

const deepPurpleA100: string;

variable deepPurpleA200

const deepPurpleA200: string;

variable deepPurpleA400

const deepPurpleA400: string;

variable deepPurpleA700

const deepPurpleA700: string;

variable green100

const green100: string;

variable green200

const green200: string;

variable green300

const green300: string;

variable green400

const green400: string;

variable green50

const green50: string;

variable green500

const green500: string;

variable green600

const green600: string;

variable green700

const green700: string;

variable green800

const green800: string;

variable green900

const green900: string;

variable greenA100

const greenA100: string;

variable greenA200

const greenA200: string;

variable greenA400

const greenA400: string;

variable greenA700

const greenA700: string;

variable grey100

const grey100: string;

variable grey200

const grey200: string;

variable grey300

const grey300: string;

variable grey400

const grey400: string;

variable grey50

const grey50: string;

variable grey500

const grey500: string;

variable grey600

const grey600: string;

variable grey700

const grey700: string;

variable grey800

const grey800: string;

variable grey900

const grey900: string;

variable indigo100

const indigo100: string;

variable indigo200

const indigo200: string;

variable indigo300

const indigo300: string;

variable indigo400

const indigo400: string;

variable indigo50

const indigo50: string;

variable indigo500

const indigo500: string;

variable indigo600

const indigo600: string;

variable indigo700

const indigo700: string;

variable indigo800

const indigo800: string;

variable indigo900

const indigo900: string;

variable indigoA100

const indigoA100: string;

variable indigoA200

const indigoA200: string;

variable indigoA400

const indigoA400: string;

variable indigoA700

const indigoA700: string;

variable lightBlue100

const lightBlue100: string;

variable lightBlue200

const lightBlue200: string;

variable lightBlue300

const lightBlue300: string;

variable lightBlue400

const lightBlue400: string;

variable lightBlue50

const lightBlue50: string;

variable lightBlue500

const lightBlue500: string;

variable lightBlue600

const lightBlue600: string;

variable lightBlue700

const lightBlue700: string;

variable lightBlue800

const lightBlue800: string;

variable lightBlue900

const lightBlue900: string;

variable lightBlueA100

const lightBlueA100: string;

variable lightBlueA200

const lightBlueA200: string;

variable lightBlueA400

const lightBlueA400: string;

variable lightBlueA700

const lightBlueA700: string;

variable lightGreen100

const lightGreen100: string;

variable lightGreen200

const lightGreen200: string;

variable lightGreen300

const lightGreen300: string;

variable lightGreen400

const lightGreen400: string;

variable lightGreen50

const lightGreen50: string;

variable lightGreen500

const lightGreen500: string;

variable lightGreen600

const lightGreen600: string;

variable lightGreen700

const lightGreen700: string;

variable lightGreen800

const lightGreen800: string;

variable lightGreen900

const lightGreen900: string;

variable lightGreenA100

const lightGreenA100: string;

variable lightGreenA200

const lightGreenA200: string;

variable lightGreenA400

const lightGreenA400: string;

variable lightGreenA700

const lightGreenA700: string;

variable lime100

const lime100: string;

variable lime200

const lime200: string;

variable lime300

const lime300: string;

variable lime400

const lime400: string;

variable lime50

const lime50: string;

variable lime500

const lime500: string;

variable lime600

const lime600: string;

variable lime700

const lime700: string;

variable lime800

const lime800: string;

variable lime900

const lime900: string;

variable limeA100

const limeA100: string;

variable limeA200

const limeA200: string;

variable limeA400

const limeA400: string;

variable limeA700

const limeA700: string;

variable orange100

const orange100: string;

variable orange200

const orange200: string;

variable orange300

const orange300: string;

variable orange400

const orange400: string;

variable orange50

const orange50: string;

variable orange500

const orange500: string;

variable orange600

const orange600: string;

variable orange700

const orange700: string;

variable orange800

const orange800: string;

variable orange900

const orange900: string;

variable orangeA100

const orangeA100: string;

variable orangeA200

const orangeA200: string;

variable orangeA400

const orangeA400: string;

variable orangeA700

const orangeA700: string;

variable pink100

const pink100: string;

variable pink200

const pink200: string;

variable pink300

const pink300: string;

variable pink400

const pink400: string;

variable pink50

const pink50: string;

variable pink500

const pink500: string;

variable pink600

const pink600: string;

variable pink700

const pink700: string;

variable pink800

const pink800: string;

variable pink900

const pink900: string;

variable pinkA100

const pinkA100: string;

variable pinkA200

const pinkA200: string;

variable pinkA400

const pinkA400: string;

variable pinkA700

const pinkA700: string;

variable purple100

const purple100: string;

variable purple200

const purple200: string;

variable purple300

const purple300: string;

variable purple400

const purple400: string;

variable purple50

const purple50: string;

variable purple500

const purple500: string;

variable purple600

const purple600: string;

variable purple700

const purple700: string;

variable purple800

const purple800: string;

variable purple900

const purple900: string;

variable purpleA100

const purpleA100: string;

variable purpleA200

const purpleA200: string;

variable purpleA400

const purpleA400: string;

variable purpleA700

const purpleA700: string;

variable red100

const red100: string;

variable red200

const red200: string;

variable red300

const red300: string;

variable red400

const red400: string;

variable red50

const red50: string;

variable red500

const red500: string;

variable red600

const red600: string;

variable red700

const red700: string;

variable red800

const red800: string;

variable red900

const red900: string;

variable redA100

const redA100: string;

variable redA200

const redA200: string;

variable redA400

const redA400: string;

variable redA700

const redA700: string;

variable teal100

const teal100: string;

variable teal200

const teal200: string;

variable teal300

const teal300: string;

variable teal400

const teal400: string;

variable teal50

const teal50: string;

variable teal500

const teal500: string;

variable teal600

const teal600: string;

variable teal700

const teal700: string;

variable teal800

const teal800: string;

variable teal900

const teal900: string;

variable tealA100

const tealA100: string;

variable tealA200

const tealA200: string;

variable tealA400

const tealA400: string;

variable tealA700

const tealA700: string;

variable transparent

const transparent: string;

variable white

const white: string;

variable yellow100

const yellow100: string;

variable yellow200

const yellow200: string;

variable yellow300

const yellow300: string;

variable yellow400

const yellow400: string;

variable yellow50

const yellow50: string;

variable yellow500

const yellow500: string;

variable yellow600

const yellow600: string;

variable yellow700

const yellow700: string;

variable yellow800

const yellow800: string;

variable yellow900

const yellow900: string;

variable yellowA100

const yellowA100: string;

variable yellowA200

const yellowA200: string;

variable yellowA400

const yellowA400: string;

variable yellowA700

const yellowA700: string;

Package Files (104)

Dependencies (3)

Peer Dependencies (3)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-native-paper.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-native-paper)

HTML

<a href="https://www.jsdocs.io/package/react-native-paper"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 5 months ago.
Package analyzed in 8914 ms.
Missing or incorrect documentation? Open an issue for this package.

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

Deprecated

function Chip

function configureFonts

function customText

function Divider

function Headline

Deprecated

function HelperText

function Icon

function Modal

function overlay

function PaperProvider

function Paragraph

Deprecated

function ProgressBar

function Provider

function SegmentedButtons

function shadow

function Subheading

Deprecated

function Switch

function Title

Deprecated

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