react-native-paper
- Version 5.12.3
- Published
- 3.84 MB
- 3 dependencies
- MIT license
Install
npm i react-native-paper
yarn add react-native-paper
pnpm add react-native-paper
Overview
Material design for React Native
Index
Variables
Functions
Enums
Type Aliases
- ActivityIndicatorProps
- AnimatedFABAnimateFrom
- AnimatedFABIconMode
- AnimatedFABProps
- AppbarActionProps
- AppbarBackActionProps
- AppbarContentProps
- AppbarHeaderProps
- AppbarProps
- AvatarIconProps
- AvatarImageProps
- AvatarTextProps
- BadgeProps
- BannerProps
- BottomNavigationProps
- BottomNavigationRoute
- ButtonProps
- CaptionProps
- CardActionsProps
- CardContentProps
- CardCoverProps
- CardProps
- CardTitleProps
- CheckboxAndroidProps
- CheckboxIOSProps
- CheckboxItemProps
- CheckboxProps
- ChipProps
- DataTableCellProps
- DataTableHeaderProps
- DataTablePaginationProps
- DataTableProps
- DataTableRowProps
- DataTableTitleProps
- DialogActionsProps
- DialogContentProps
- DialogIconProps
- DialogProps
- DialogScrollAreaProps
- DialogTitleProps
- DividerProps
- DrawerCollapsedItemProps
- DrawerItemProps
- DrawerSectionProps
- FABGroupProps
- FABProps
- HeadlineProps
- HelperTextProps
- IconButtonProps
- ListAccordionGroupProps
- ListAccordionProps
- ListIconProps
- ListImageProps
- ListItemProps
- ListSectionProps
- ListSubheaderProps
- MaterialBottomTabNavigationEventMap
- MaterialBottomTabNavigationOptions
- MaterialBottomTabNavigationProp
- MaterialBottomTabScreenProps
- MD2Theme
- MD3Elevation
- MD3Theme
- MenuItemProps
- MenuProps
- ModalProps
- ParagraphProps
- PortalHostProps
- PortalProps
- ProgressBarProps
- Props
- ProviderProps
- RadioButtonAndroidProps
- RadioButtonGroupProps
- RadioButtonIOSProps
- RadioButtonItemProps
- RadioButtonProps
- SearchbarProps
- SegmentedButtonsProps
- SnackbarProps
- SubheadingProps
- SurfaceProps
- SwitchProps
- TextInputAffixProps
- TextInputIconProps
- TextInputProps
- TextProps
- ThemeBase
- TitleProps
- ToggleButtonGroupProps
- ToggleButtonProps
- ToggleButtonRowProps
- TooltipProps
- TouchableRippleProps
Namespaces
MD2Colors
- amber100
- amber200
- amber300
- amber400
- amber50
- amber500
- amber600
- amber700
- amber800
- amber900
- amberA100
- amberA200
- amberA400
- amberA700
- black
- blue100
- blue200
- blue300
- blue400
- blue50
- blue500
- blue600
- blue700
- blue800
- blue900
- blueA100
- blueA200
- blueA400
- blueA700
- blueGrey100
- blueGrey200
- blueGrey300
- blueGrey400
- blueGrey50
- blueGrey500
- blueGrey600
- blueGrey700
- blueGrey800
- blueGrey900
- brown100
- brown200
- brown300
- brown400
- brown50
- brown500
- brown600
- brown700
- brown800
- brown900
- cyan100
- cyan200
- cyan300
- cyan400
- cyan50
- cyan500
- cyan600
- cyan700
- cyan800
- cyan900
- cyanA100
- cyanA200
- cyanA400
- cyanA700
- deepOrange100
- deepOrange200
- deepOrange300
- deepOrange400
- deepOrange50
- deepOrange500
- deepOrange600
- deepOrange700
- deepOrange800
- deepOrange900
- deepOrangeA100
- deepOrangeA200
- deepOrangeA400
- deepOrangeA700
- deepPurple100
- deepPurple200
- deepPurple300
- deepPurple400
- deepPurple50
- deepPurple500
- deepPurple600
- deepPurple700
- deepPurple800
- deepPurple900
- deepPurpleA100
- deepPurpleA200
- deepPurpleA400
- deepPurpleA700
- green100
- green200
- green300
- green400
- green50
- green500
- green600
- green700
- green800
- green900
- greenA100
- greenA200
- greenA400
- greenA700
- grey100
- grey200
- grey300
- grey400
- grey50
- grey500
- grey600
- grey700
- grey800
- grey900
- indigo100
- indigo200
- indigo300
- indigo400
- indigo50
- indigo500
- indigo600
- indigo700
- indigo800
- indigo900
- indigoA100
- indigoA200
- indigoA400
- indigoA700
- lightBlue100
- lightBlue200
- lightBlue300
- lightBlue400
- lightBlue50
- lightBlue500
- lightBlue600
- lightBlue700
- lightBlue800
- lightBlue900
- lightBlueA100
- lightBlueA200
- lightBlueA400
- lightBlueA700
- lightGreen100
- lightGreen200
- lightGreen300
- lightGreen400
- lightGreen50
- lightGreen500
- lightGreen600
- lightGreen700
- lightGreen800
- lightGreen900
- lightGreenA100
- lightGreenA200
- lightGreenA400
- lightGreenA700
- lime100
- lime200
- lime300
- lime400
- lime50
- lime500
- lime600
- lime700
- lime800
- lime900
- limeA100
- limeA200
- limeA400
- limeA700
- orange100
- orange200
- orange300
- orange400
- orange50
- orange500
- orange600
- orange700
- orange800
- orange900
- orangeA100
- orangeA200
- orangeA400
- orangeA700
- pink100
- pink200
- pink300
- pink400
- pink50
- pink500
- pink600
- pink700
- pink800
- pink900
- pinkA100
- pinkA200
- pinkA400
- pinkA700
- purple100
- purple200
- purple300
- purple400
- purple50
- purple500
- purple600
- purple700
- purple800
- purple900
- purpleA100
- purpleA200
- purpleA400
- purpleA700
- red100
- red200
- red300
- red400
- red50
- red500
- red600
- red700
- red800
- red900
- redA100
- redA200
- redA400
- redA700
- teal100
- teal200
- teal300
- teal400
- teal50
- teal500
- teal600
- teal700
- teal800
- teal900
- tealA100
- tealA200
- tealA400
- tealA700
- transparent
- white
- yellow100
- yellow200
- yellow300
- yellow400
- yellow50
- yellow500
- yellow600
- yellow700
- yellow800
- yellow900
- yellowA100
- yellowA200
- yellowA400
- yellowA700
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 (<BottomNavigationnavigationState={{ index, routes }}onIndexChange={setIndex}renderScene={renderScene}/>);};export default MyComponent;
variable Button
const Button: ForwardRefExoticComponent<any>;
variable Card
const Card: { ({ elevation: cardElevation, delayLongPress, onPress, onLongPress, onPressOut, onPressIn, mode: cardMode, children, style, contentStyle, theme: themeOverrides, testID, accessible, disabled, ...rest }: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) & Props): React.JSX.Element; Content: { ({ index, total, siblings, style, ...rest }: import('./CardContent').Props): React.JSX.Element; displayName: string; }; Actions: { (props: import('./CardActions').Props): React.JSX.Element; displayName: string; }; Cover: { ({ index, total, style, theme: themeOverrides, ...rest }: import('./CardCover').Props): React.JSX.Element; displayName: string; }; Title: { ({ title, titleStyle, titleNumberOfLines, titleVariant, titleMaxFontSizeMultiplier, subtitle, subtitleStyle, subtitleNumberOfLines, subtitleVariant, subtitleMaxFontSizeMultiplier, left, leftStyle, right, rightStyle, style, theme: themeOverrides, }: import('./CardTitle').Props): React.JSX.Element; displayName: string; };};
A card is a sheet of material that serves as an entry point to more detailed information.
## Usage
import * as React from 'react';import { Avatar, Button, Card, Text } from 'react-native-paper';const LeftContent = props => <Avatar.Icon {...props} icon="folder" />const MyComponent = () => (<Card><Card.Title title="Card Title" subtitle="Card Subtitle" left={LeftContent} /><Card.Content><Text variant="titleLarge">Card title</Text><Text variant="bodyMedium">Card content</Text></Card.Content><Card.Cover source={{ uri: 'https://picsum.photos/700' }} /><Card.Actions><Button>Cancel</Button><Button>Ok</Button></Card.Actions></Card>);export default MyComponent;
variable Checkbox
const Checkbox: (({ theme: themeOverrides, ...props}: import('./Checkbox').Props) => any) & { Item: { ({ style, status, label, onPress, onLongPress, labelStyle, theme: themeOverrides, testID, mode, position, accessibilityLabel, disabled, labelVariant, labelMaxFontSizeMultiplier, rippleColor, background, ...props }: import('./CheckboxItem').Props): any; displayName: string; }; Android: { ({ status, theme: themeOverrides, disabled, onPress, testID, ...rest }: import('./CheckboxAndroid').Props): any; displayName: string; }; IOS: { ({ status, disabled, onPress, theme: themeOverrides, testID, ...rest }: import('./CheckboxIOS').Props): any; displayName: string; };};
variable DataTable
const DataTable: { ({ children, style, ...rest }: Props): React.JSX.Element; Header: { ({ children, style, theme: themeOverrides, ...rest }: import('./DataTableHeader').Props): React.JSX.Element; displayName: string; }; Title: { ({ numeric, children, onPress, sortDirection, textStyle, style, theme: themeOverrides, numberOfLines, maxFontSizeMultiplier, ...rest }: import('./DataTableTitle').Props): React.JSX.Element; displayName: string; }; Row: { ({ onPress, style, children, pointerEvents, theme: themeOverrides, ...rest }: import('./DataTableRow').Props): React.JSX.Element; displayName: string; }; Cell: { ({ children, textStyle, style, numeric, maxFontSizeMultiplier, testID, ...rest }: import('./DataTableCell').Props): React.JSX.Element; displayName: string; }; Pagination: { ({ label, accessibilityLabel, page, numberOfPages, onPageChange, style, showFastPaginationControls, numberOfItemsPerPageList, numberOfItemsPerPage, onItemsPerPageChange, selectPageDropdownLabel, selectPageDropdownAccessibilityLabel, selectPageDropdownRippleColor, dropdownItemRippleColor, theme: themeOverrides, ...rest }: import('./DataTablePagination').Props): React.JSX.Element; displayName: string; };};
Data tables allow displaying sets of data.
## Usage
import * as React from 'react';import { DataTable } from 'react-native-paper';const MyComponent = () => {const [page, setPage] = React.useState<number>(0);const [numberOfItemsPerPageList] = React.useState([2, 3, 4]);const [itemsPerPage, onItemsPerPageChange] = React.useState(numberOfItemsPerPageList[0]);const [items] = React.useState([{key: 1,name: 'Cupcake',calories: 356,fat: 16,},{key: 2,name: 'Eclair',calories: 262,fat: 16,},{key: 3,name: 'Frozen yogurt',calories: 159,fat: 6,},{key: 4,name: 'Gingerbread',calories: 305,fat: 3.7,},]);const from = page * itemsPerPage;const to = Math.min((page + 1) * itemsPerPage, items.length);React.useEffect(() => {setPage(0);}, [itemsPerPage]);return (<DataTable><DataTable.Header><DataTable.Title>Dessert</DataTable.Title><DataTable.Title numeric>Calories</DataTable.Title><DataTable.Title numeric>Fat</DataTable.Title></DataTable.Header>{items.slice(from, to).map((item) => (<DataTable.Row key={item.key}><DataTable.Cell>{item.name}</DataTable.Cell><DataTable.Cell numeric>{item.calories}</DataTable.Cell><DataTable.Cell numeric>{item.fat}</DataTable.Cell></DataTable.Row>))}<DataTable.Paginationpage={page}numberOfPages={Math.ceil(items.length / itemsPerPage)}onPageChange={(page) => setPage(page)}label={`${from + 1}-${to} of ${items.length}`}numberOfItemsPerPageList={numberOfItemsPerPageList}numberOfItemsPerPage={itemsPerPage}onItemsPerPageChange={onItemsPerPageChange}showFastPaginationControlsselectPageDropdownLabel={'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 = () => (<IconButtonicon="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;
variable Menu
const Menu: any;
variable Portal
const Portal: any;
variable RadioButton
const RadioButton: (({ theme: themeOverrides, ...props}: import('./RadioButton').Props) => any) & { Group: { ({ value, onValueChange, children, }: import('./RadioButtonGroup').Props): any; displayName: string; }; Android: { ({ disabled, onPress, theme: themeOverrides, value, status, testID, ...rest }: import('./RadioButtonAndroid').Props): any; displayName: string; }; IOS: { ({ disabled, onPress, theme: themeOverrides, status, value, testID, ...rest }: import('./RadioButtonIOS').Props): any; displayName: string; }; Item: { ({ value, label, style, labelStyle, onPress, onLongPress, disabled, color, uncheckedColor, rippleColor, status, theme: themeOverrides, background, accessibilityLabel, testID, mode, position, labelVariant, labelMaxFontSizeMultiplier, }: import('./RadioButtonItem').Props): any; displayName: string; };};
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 (<Searchbarplaceholder="Search"onChangeText={setSearchQuery}value={searchQuery}/>);};export default MyComponent;
variable Snackbar
const Snackbar: { ({ visible, action, icon, onIconPress, iconAccessibilityLabel, duration, onDismiss, children, elevation, wrapperStyle, style, theme: themeOverrides, maxFontSizeMultiplier, rippleColor, testID, ...rest }: Props): React.JSX.Element | null; DURATION_SHORT: number; DURATION_MEDIUM: number; DURATION_LONG: number;};
Snackbars provide brief feedback about an operation through a message rendered at the bottom of the container in which it's wrapped.
Note: To display it as a popup, regardless of the parent's position, wrap it with a
Portal
component – refer to the example in the "More Examples` section.## Usage
import * as React from 'react';import { View, StyleSheet } from 'react-native';import { Button, Snackbar } from 'react-native-paper';const MyComponent = () => {const [visible, setVisible] = React.useState(false);const onToggleSnackBar = () => setVisible(!visible);const onDismissSnackBar = () => setVisible(false);return (<View style={styles.container}><Button onPress={onToggleSnackBar}>{visible ? 'Hide' : 'Show'}</Button><Snackbarvisible={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 theelevation
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 (<TextInputlabel="Email"value={text}onChangeText={text => setText(text)}/>);};export default MyComponent;TextInput props https://reactnative.dev/docs/textinput#props
variable ThemeProvider
const ThemeProvider: ComponentType<{ children: any; theme?: unknown }>;
variable ToggleButton
const ToggleButton: any;
variable Tooltip
const Tooltip: { ({ children, enterTouchDelay, leaveTouchDelay, title, theme: themeOverrides, titleMaxFontSizeMultiplier, ...rest }: Props): React.JSX.Element; displayName: string;};
Tooltips display informative text when users hover over, focus on, or tap an element.
Plain tooltips, when activated, display a text label identifying an element, such as a description of its function. Tooltips should include only short, descriptive text and avoid restating visible UI text.
## Usage
import * as React from 'react';import { IconButton, Tooltip } from 'react-native-paper';const MyComponent = () => (<Tooltip title="Selected Camera"><IconButton icon="camera" selected size={24} onPress={() => {}} /></Tooltip>);export default MyComponent;
variable TouchableRipple
const TouchableRipple: any;
Functions
function ActivityIndicator
ActivityIndicator: ({ animating, color: indicatorColor, hidesWhenStopped, size: indicatorSize, style, theme: themeOverrides, ...rest}: Props) => React.JSX.Element;
Activity indicator is used to present progress of some activity in the app. It can be used as a drop-in for the ActivityIndicator shipped with React Native.
## Usage
import * as React from 'react';import { ActivityIndicator, MD2Colors } from 'react-native-paper';const MyComponent = () => (<ActivityIndicator animating={true} color={MD2Colors.red800} />);export default MyComponent;
function adaptNavigationTheme
adaptNavigationTheme: { (themes: { reactNavigationLight: NavigationTheme; materialLight?: MD3Theme }): { LightTheme: NavigationTheme; }; (themes: { reactNavigationDark: NavigationTheme; materialDark?: MD3Theme }): { DarkTheme: NavigationTheme; }; (themes: { reactNavigationLight: NavigationTheme; reactNavigationDark: NavigationTheme; materialLight?: MD3Theme; materialDark?: MD3Theme; }): { LightTheme: NavigationTheme; DarkTheme: NavigationTheme };};
function AnimatedFAB
AnimatedFAB: ({ icon, label, background, accessibilityLabel, accessibilityState, color: customColor, rippleColor: customRippleColor, disabled, onPress, onLongPress, delayLongPress, theme: themeOverrides, style, visible, uppercase: uppercaseProp, testID, animateFrom, extended, iconMode, variant, labelMaxFontSizeMultiplier, ...rest}: Props) => React.JSX.Element;
An animated, extending horizontally floating action button represents the primary action in an application.
## Usage
import React from 'react';import {StyleProp,ViewStyle,Animated,StyleSheet,Platform,ScrollView,Text,SafeAreaView,I18nManager,} from 'react-native';import { AnimatedFAB } from 'react-native-paper';const MyComponent = ({animatedValue,visible,extended,label,animateFrom,style,iconMode,}) => {const [isExtended, setIsExtended] = React.useState(true);const isIOS = Platform.OS === 'ios';const onScroll = ({ nativeEvent }) => {const currentScrollPosition =Math.floor(nativeEvent?.contentOffset?.y) ?? 0;setIsExtended(currentScrollPosition <= 0);};const fabStyle = { [animateFrom]: 16 };return (<SafeAreaView style={styles.container}><ScrollView onScroll={onScroll}>{[...new Array(100).keys()].map((_, i) => (<Text>{i}</Text>))}</ScrollView><AnimatedFABicon={'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;
function Banner
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 (<Bannervisible={visible}actions={[{label: 'Fix it',onPress: () => setVisible(false),},{label: 'Learn more',onPress: () => setVisible(false),},]}icon={({size}) => (<Imagesource={{uri: 'https://avatars3.githubusercontent.com/u/17571969?s=400&v=4',}}style={{width: size,height: size,}}/>)}>There was a problem processing a transaction on your credit card.</Banner>);};export default MyComponent;
function Caption
Caption: (props: Props) => React.JSX.Element;
Typography component for showing a caption.
## Usage
import * as React from 'react';import { Caption } from 'react-native-paper';const MyComponent = () => (<Caption>Caption</Caption>);export default MyComponent;
function Chip
Chip: ({ mode, children, icon, avatar, selected, disabled, background, accessibilityLabel, closeIconAccessibilityLabel, onPress, onLongPress, onPressOut, onPressIn, delayLongPress, onClose, closeIcon, textStyle, style, theme: themeOverrides, testID, selectedColor, rippleColor: customRippleColor, showSelectedOverlay, showSelectedCheck, ellipsizeMode, compact, elevated, maxFontSizeMultiplier, ...rest}: Props) => React.JSX.Element;
Chips are compact elements that can represent inputs, attributes, or actions. They can have an icon or avatar on the left, and a close button icon on the right. They are typically used to: Present multiple options Represent attributes active or chosen Present filter options Trigger actions related to primary content
## Usage
import * as React from 'react';import { Chip } from 'react-native-paper';const MyComponent = () => (<Chip icon="information" onPress={() => console.log('Pressed')}>Example Chip</Chip>);export default MyComponent;
function configureFonts
configureFonts: { (params: { isV3: false }): Fonts; (params: { config?: MD2FontsConfig; isV3: false }): Fonts; (params?: { config?: Partial<MD3Type>; isV3?: true }): MD3Typescale; (params?: { config?: Partial<Record<MD3TypescaleKey, Partial<MD3Type>>>; isV3?: true; }): MD3Typescale; (params: { config: Record<string, MD3Type>; isV3?: true }): { displayLarge: MD3Type; displayMedium: MD3Type; displaySmall: MD3Type; headlineLarge: MD3Type; headlineMedium: MD3Type; headlineSmall: MD3Type; titleLarge: MD3Type; titleMedium: MD3Type; titleSmall: MD3Type; labelLarge: MD3Type; labelMedium: MD3Type; labelSmall: MD3Type; bodyLarge: MD3Type; bodyMedium: MD3Type; bodySmall: MD3Type; } & { default: Omit<MD3Type, 'lineHeight' | 'fontSize'> } & { [key: string]: MD3Type; };};
function customText
customText: <T>() => TextComponent<T>;
function Divider
Divider: ({ leftInset, horizontalInset, style, theme: themeOverrides, bold, ...rest}: Props) => React.JSX.Element;
A divider is a thin, lightweight separator that groups content in lists and page layouts.
## Usage
import * as React from 'react';import { View } from 'react-native';import { Divider, Text } from 'react-native-paper';const MyComponent = () => (<View><Text>Lemon</Text><Divider /><Text>Mango</Text><Divider /></View>);export default MyComponent;
function Headline
Headline: (props: Props) => React.JSX.Element;
Typography component for showing a headline.
## Usage
import * as React from 'react';import { Headline } from 'react-native-paper';const MyComponent = () => (<Headline>Headline</Headline>);export default MyComponent;
function HelperText
HelperText: ({ style, type, visible, theme: themeOverrides, onLayout, padding, disabled, ...rest}: Props) => React.JSX.Element;
Helper text is used in conjuction with input elements to provide additional hints for the user.
## Usage
import * as React from 'react';import { View } from 'react-native';import { HelperText, TextInput } from 'react-native-paper';const MyComponent = () => {const [text, setText] = React.useState('');const onChangeText = text => setText(text);const hasErrors = () => {return !text.includes('@');};return (<View><TextInput label="Email" value={text} onChangeText={onChangeText} /><HelperText type="error" visible={hasErrors()}>Email address is invalid!</HelperText></View>);};export default MyComponent;
function Icon
Icon: ({ source, color, size, theme: themeOverrides, testID, ...rest}: Props) => any;
An icon component which renders icon from vector library.
## Usage
import * as React from 'react';import { Icon, MD3Colors } from 'react-native-paper';const MyComponent = () => (<Iconsource="camera"color={MD3Colors.error50}size={20}/>);export default MyComponent;
function Modal
Modal: ({ dismissable, dismissableBackButton, visible, overlayAccessibilityLabel, onDismiss, children, contentContainerStyle, style, theme: themeOverrides, testID,}: Props) => React.JSX.Element | null;
The Modal component is a simple way to present content above an enclosing view. To render the
Modal
above other components, you'll need to wrap it with the [Portal
](./Portal) component.## Usage
import * as React from 'react';import { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';const MyComponent = () => {const [visible, setVisible] = React.useState(false);const showModal = () => setVisible(true);const hideModal = () => setVisible(false);const containerStyle = {backgroundColor: 'white', padding: 20};return (<PaperProvider><Portal><Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}><Text>Example Modal. Click outside this area to dismiss.</Text></Modal></Portal><Button style={{marginTop: 30}} onPress={showModal}>Show</Button></PaperProvider>);};export default MyComponent;
function overlay
overlay: <T extends unknown>( elevation: T, surfaceColor?: string) => T extends number ? string : Animated.AnimatedInterpolation<number | string>;
function PaperProvider
PaperProvider: (props: Props) => React.JSX.Element;
function Paragraph
Paragraph: (props: Props) => React.JSX.Element;
Typography component for showing a paragraph.
## Usage
import * as React from 'react';import { Paragraph } from 'react-native-paper';const MyComponent = () => (<Paragraph>Paragraph</Paragraph>);export default MyComponent;
function ProgressBar
ProgressBar: ({ color, indeterminate, progress, visible, theme: themeOverrides, animatedValue, style, fillStyle, testID, ...rest}: Props) => React.JSX.Element;
Progress bar is an indicator used to present progress of some activity in the app.
## Usage
import * as React from 'react';import { ProgressBar, MD3Colors } from 'react-native-paper';const MyComponent = () => (<ProgressBar progress={0.5} color={MD3Colors.error50} />);export default MyComponent;
function Provider
Provider: (props: Props) => React.JSX.Element;
function SegmentedButtons
SegmentedButtons: ({ value, onValueChange, buttons, multiSelect, density, style, theme: themeOverrides,}: Props) => React.JSX.Element;
Segmented buttons can be used to select options, switch views or sort elements.
## Usage
import * as React from 'react';import { SafeAreaView, StyleSheet } from 'react-native';import { SegmentedButtons } from 'react-native-paper';const MyComponent = () => {const [value, setValue] = React.useState('');return (<SafeAreaView style={styles.container}><SegmentedButtonsvalue={value}onValueChange={setValue}buttons={[{value: 'walk',label: 'Walking',},{value: 'train',label: 'Transit',},{ value: 'drive', label: 'Driving' },]}/></SafeAreaView>);};const styles = StyleSheet.create({container: {flex: 1,alignItems: 'center',},});export default MyComponent;
function shadow
shadow: ( elevation?: number | Animated.Value, isV3?: boolean) => | { shadowColor: string; shadowOffset: { width: Animated.Value; height: Animated.AnimatedInterpolation<string | number>; }; shadowOpacity: Animated.AnimatedInterpolation<string | number>; shadowRadius: Animated.AnimatedInterpolation<string | number>; } | { shadowColor: string; shadowOpacity: number; shadowOffset: { width: number; height: number }; shadowRadius: number; } | { shadowColor?: undefined; shadowOffset?: undefined; shadowOpacity?: undefined; shadowRadius?: undefined; };
function Subheading
Subheading: (props: Props) => React.JSX.Element;
Typography component for showing a subheading.
## Usage
import * as React from 'react';import { Subheading } from 'react-native-paper';const MyComponent = () => (<Subheading>Subheading</Subheading>);export default MyComponent;
function Switch
Switch: ({ value, disabled, onValueChange, color, theme: themeOverrides, ...rest}: Props) => React.JSX.Element;
Switch is a visual toggle between two mutually exclusive states — on and off.
## Usage
import * as React from 'react';import { Switch } from 'react-native-paper';const MyComponent = () => {const [isSwitchOn, setIsSwitchOn] = React.useState(false);const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;};export default MyComponent;
function Title
Title: (props: Props) => React.JSX.Element;
Typography component for showing a title.
## Usage
import * as React from 'react';import { Title } from 'react-native-paper';const MyComponent = () => (<Title>Title</Title>);export default MyComponent;
function useTheme
useTheme: <T = MD3Theme>(overrides?: $DeepPartial<T>) => T;
function withTheme
withTheme: <Props extends { theme: unknown }, C>(WrappedComponent: any) => any;
Enums
enum MD3TypescaleKey
enum MD3TypescaleKey { displayLarge = 'displayLarge', displayMedium = 'displayMedium', displaySmall = 'displaySmall', headlineLarge = 'headlineLarge', headlineMedium = 'headlineMedium', headlineSmall = 'headlineSmall', titleLarge = 'titleLarge', titleMedium = 'titleMedium', titleSmall = 'titleSmall', labelLarge = 'labelLarge', labelMedium = 'labelMedium', labelSmall = 'labelSmall', bodyLarge = 'bodyLarge', bodyMedium = 'bodyMedium', bodySmall = 'bodySmall',}
member bodyLarge
bodyLarge = 'bodyLarge'
member bodyMedium
bodyMedium = 'bodyMedium'
member bodySmall
bodySmall = 'bodySmall'
member displayLarge
displayLarge = 'displayLarge'
member displayMedium
displayMedium = 'displayMedium'
member displaySmall
displaySmall = 'displaySmall'
member headlineLarge
headlineLarge = 'headlineLarge'
member headlineMedium
headlineMedium = 'headlineMedium'
member headlineSmall
headlineSmall = 'headlineSmall'
member labelLarge
labelLarge = 'labelLarge'
member labelMedium
labelMedium = 'labelMedium'
member labelSmall
labelSmall = 'labelSmall'
member titleLarge
titleLarge = 'titleLarge'
member titleMedium
titleMedium = 'titleMedium'
member titleSmall
titleSmall = 'titleSmall'
Type Aliases
type ActivityIndicatorProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Whether to show the indicator or hide it. */ animating?: boolean; /** * The color of the spinner. */ color?: string; /** * Size of the indicator. */ size?: 'small' | 'large' | number; /** * Whether the indicator should hide when not animating. */ hidesWhenStopped?: boolean; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp;};
type AnimatedFABAnimateFrom
type AnimatedFABAnimateFrom = 'left' | 'right';
type AnimatedFABIconMode
type AnimatedFABIconMode = 'static' | 'dynamic';
type AnimatedFABProps
type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & { /** * Icon to display for the `FAB`. */ icon: IconSource; /** * Label for extended `FAB`. */ label: string; /** * Make the label text uppercased. */ uppercase?: boolean; /** * Type of background drawabale to display the feedback (Android). * https://reactnative.dev/docs/pressable#rippleconfig */ background?: PressableAndroidRippleConfig; /** * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB. * Uses `label` by default if specified. */ accessibilityLabel?: string; /** * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB. */ accessibilityState?: AccessibilityState; /** * Custom color for the icon and label of the `FAB`. */ color?: string; /** * Color of the ripple effect. */ rippleColor?: ColorValue; /** * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch. */ disabled?: boolean; /** * Whether `FAB` is currently visible. */ visible?: boolean; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * Function to execute on long press. */ onLongPress?: (e: GestureResponderEvent) => void; /** * The number of milliseconds a user must touch the element before executing `onLongPress`. */ delayLongPress?: number; /** * Whether icon should be translated to the end of extended `FAB` or be static and stay in the same place. The default value is `dynamic`. */ iconMode?: AnimatedFABIconMode; /** * Indicates from which direction animation should be performed. The default value is `right`. */ animateFrom?: AnimatedFABAnimateFrom; /** * Whether `FAB` should start animation to extend. */ extended: boolean; /** * Specifies the largest possible scale a label font can reach. */ labelMaxFontSizeMultiplier?: number; /** * @supported Available in v5.x with theme version 3 * * Color mappings variant for combinations of container and icon colors. */ variant?: 'primary' | 'secondary' | 'tertiary' | 'surface'; style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; /** * @optional */ theme?: ThemeProp; /** * TestID used for testing purposes */ testID?: string;};
type AppbarActionProps
type Props = React.ComponentPropsWithoutRef<typeof IconButton> & { /** * Custom color for action icon. */ color?: string; /** * Color of the ripple effect. */ rippleColor?: ColorValue; /** * Name of the icon to show. */ icon: IconSource; /** * Optional icon size. */ size?: number; /** * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch. */ disabled?: boolean; /** * Accessibility label for the button. This is read by the screen reader when the user taps the button. */ accessibilityLabel?: string; /** * Function to execute on press. */ onPress?: () => void; /** * @supported Available in v5.x with theme version 3 * * Whether it's the leading button. */ isLeading?: boolean; style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; ref?: React.RefObject<View>; /** * @optional */ theme?: ThemeProp;};
type AppbarBackActionProps
type Props = $Omit<React.ComponentPropsWithoutRef<typeof AppbarAction>, 'icon'> & { /** * Custom color for back icon. */ color?: string; /** * Optional icon size. */ size?: number; /** * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch. */ disabled?: boolean; /** * Accessibility label for the button. This is read by the screen reader when the user taps the button. */ accessibilityLabel?: string; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; ref?: React.RefObject<View>;};
type AppbarContentProps
type Props = $RemoveChildren<typeof View> & { /** * Text or component for the title. */ title: React.ReactNode; /** * Style for the title, if `title` is a string. */ titleStyle?: StyleProp<TextStyle>; /** * Reference for the title. */ titleRef?: React.RefObject<TextRef>; /** * @deprecated Deprecated in v5.x * Text for the subtitle. */ subtitle?: React.ReactNode; /** * @deprecated Deprecated in v5.x * Style for the subtitle. */ subtitleStyle?: StyleProp<TextStyle>; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * If true, disable all interactions for this component. */ disabled?: boolean; /** * Custom color for the text. */ color?: string; /** * Specifies the largest possible scale a title font can reach. */ titleMaxFontSizeMultiplier?: number; /** * @internal */ mode?: 'small' | 'medium' | 'large' | 'center-aligned'; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp; /** * testID to be used on tests. */ testID?: string;} & (TitleString | TitleElement);
type AppbarHeaderProps
type Props = React.ComponentProps<typeof Appbar> & { /** * Whether the background color is a dark color. A dark header will render light text and vice-versa. */ dark?: boolean; /** * Extra padding to add at the top of header to account for translucent status bar. * This is automatically handled on iOS >= 11 including iPhone X using `SafeAreaView`. * If you are using Expo, we assume translucent status bar and set a height for status bar automatically. * Pass `0` or a custom value to disable the default behaviour, and customize the height. */ statusBarHeight?: number; /** * Content of the header. */ children: React.ReactNode; /** * @supported Available in v5.x with theme version 3 * * Mode of the Appbar. * - `small` - Appbar with default height (64). * - `medium` - Appbar with medium height (112). * - `large` - Appbar with large height (152). * - `center-aligned` - Appbar with default height and center-aligned title. */ mode?: 'small' | 'medium' | 'large' | 'center-aligned'; /** * @supported Available in v5.x with theme version 3 * Whether Appbar background should have the elevation along with primary color pigment. */ elevated?: boolean; /** * @optional */ theme?: ThemeProp; style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;};
type AppbarProps
type Props = Omit<Partial<React.ComponentPropsWithRef<typeof View>>, 'style'> & { /** * Whether the background color is a dark color. A dark appbar will render light text and vice-versa. */ dark?: boolean; /** * Content of the `Appbar`. */ children: React.ReactNode; /** * @supported Available in v5.x with theme version 3 * * Mode of the Appbar. * - `small` - Appbar with default height (64). * - `medium` - Appbar with medium height (112). * - `large` - Appbar with large height (152). * - `center-aligned` - Appbar with default height and center-aligned title. */ mode?: 'small' | 'medium' | 'large' | 'center-aligned'; /** * @supported Available in v5.x with theme version 3 * Whether Appbar background should have the elevation along with primary color pigment. */ elevated?: boolean; /** * Safe area insets for the Appbar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS. */ safeAreaInsets?: { bottom?: number; top?: number; left?: number; right?: number; }; /** * @optional */ theme?: ThemeProp; style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;};
type AvatarIconProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Icon to display for the `Avatar`. */ icon: IconSource; /** * Size of the avatar. */ size?: number; /** * Custom color for the icon. */ color?: string; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp;};
type AvatarImageProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Image to display for the `Avatar`. * It accepts a standard React Native Image `source` prop * Or a function that returns an `Image`. */ source: AvatarImageSource; /** * Size of the avatar. */ size?: number; style?: StyleProp<ViewStyle>; /** * Invoked on load error. */ onError?: ImageProps['onError']; /** * Invoked on mount and on layout changes. */ onLayout?: ImageProps['onLayout']; /** * Invoked when load completes successfully. */ onLoad?: ImageProps['onLoad']; /** * Invoked when load either succeeds or fails. */ onLoadEnd?: ImageProps['onLoadEnd']; /** * Invoked on load start. */ onLoadStart?: ImageProps['onLoadStart']; /** * Invoked on download progress. */ onProgress?: ImageProps['onProgress']; /** * @optional */ theme?: ThemeProp;};
type AvatarTextProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Initials to show as the text in the `Avatar`. */ label: string; /** * Size of the avatar. */ size?: number; /** * Custom color for the text. */ color?: string; /** * Style for text container */ style?: StyleProp<ViewStyle>; /** * Style for the title. */ labelStyle?: StyleProp<TextStyle>; /** * Specifies the largest possible scale a text font can reach. */ maxFontSizeMultiplier?: number; /** * @optional */ theme?: ThemeProp;};
type BadgeProps
type Props = React.ComponentProps<typeof Animated.Text> & { /** * Whether the badge is visible */ visible?: boolean; /** * Content of the `Badge`. */ children?: string | number; /** * Size of the `Badge`. */ size?: number; style?: StyleProp<TextStyle>; ref?: React.RefObject<typeof Animated.Text>; /** * @optional */ theme?: ThemeProp;};
type BannerProps
type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & { /** * Whether banner is currently visible. */ visible: boolean; /** * Content that will be displayed inside banner. */ children: React.ReactNode; /** * Icon to display for the `Banner`. Can be an image. */ icon?: IconSource; /** * Action items to shown in the banner. * An action item should contain the following properties: * * - `label`: label of the action button (required) * - `onPress`: callback that is called when button is pressed (required) * * To customize button you can pass other props that button component takes. */ actions?: Array< { label: string; } & $RemoveChildren<typeof Button> >; /** * Style of banner's inner content. * Use this prop to apply custom width for wide layouts. */ contentStyle?: StyleProp<ViewStyle>; /** * @supported Available in v5.x with theme version 3 * Changes Banner shadow and background on iOS and Android. */ elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value; /** * Specifies the largest possible scale a text font can reach. */ maxFontSizeMultiplier?: number; style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; ref?: React.RefObject<View>; /** * @optional */ theme?: ThemeProp; /** * @optional * Optional callback that will be called after the opening animation finished running normally */ onShowAnimationFinished?: Animated.EndCallback; /** * @optional * Optional callback that will be called after the closing animation finished running normally */ onHideAnimationFinished?: Animated.EndCallback;};
type BottomNavigationProps
type Props<Route extends BaseRoute> = { /** * Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label. * * By default, this is `false` with theme version 3 and `true` when you have more than 3 tabs. * Pass `shifting={false}` to explicitly disable this animation, or `shifting={true}` to always use this animation. * Note that you need at least 2 tabs be able to run this animation. */ shifting?: boolean; /** * Whether to show labels in tabs. When `false`, only icons will be displayed. */ labeled?: boolean; /** * Whether tabs should be spread across the entire width. */ compact?: boolean; /** * State for the bottom navigation. The state should contain the following properties: * * - `index`: a number representing the index of the active route in the `routes` array * - `routes`: an array containing a list of route objects used for rendering the tabs * * Each route object should contain the following properties: * * - `key`: a unique key to identify the route (required) * - `title`: title of the route to use as the tab label * - `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x * - `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3 * - `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2. * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text. * - `accessibilityLabel`: accessibility label for the tab button * - `testID`: test id for the tab button * * Example: * * ```js * { * index: 1, * routes: [ * { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'}, * { key: 'albums', title: 'Albums', focusedIcon: 'album' }, * { key: 'recents', title: 'Recents', focusedIcon: 'history' }, * { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' }, * ] * } * ``` * * `BottomNavigation` is a controlled component, which means the `index` needs to be updated via the `onIndexChange` callback. */ navigationState: NavigationState<Route>; /** * Callback which is called on tab change, receives the index of the new tab as argument. * The navigation state needs to be updated when it's called, otherwise the change is dropped. */ onIndexChange: (index: number) => void; /** * Callback which returns a react element to render as the page for the tab. Receives an object containing the route as the argument: * * ```js * renderScene = ({ route, jumpTo }) => { * switch (route.key) { * case 'music': * return <MusicRoute jumpTo={jumpTo} />; * case 'albums': * return <AlbumsRoute jumpTo={jumpTo} />; * } * } * ``` * * Pages are lazily rendered, which means that a page will be rendered the first time you navigate to it. * After initial render, all the pages stay rendered to preserve their state. * * You need to make sure that your individual routes implement a `shouldComponentUpdate` to improve the performance. * To make it easier to specify the components, you can use the `SceneMap` helper: * * ```js * renderScene = BottomNavigation.SceneMap({ * music: MusicRoute, * albums: AlbumsRoute, * }); * ``` * * Specifying the components this way is easier and takes care of implementing a `shouldComponentUpdate` method. * Each component will receive the current route and a `jumpTo` method as it's props. * The `jumpTo` method can be used to navigate to other tabs programmatically: * * ```js * this.props.jumpTo('albums') * ``` */ renderScene: (props: { route: Route; jumpTo: (key: string) => void; }) => React.ReactNode | null; /** * Callback which returns a React Element to be used as tab icon. */ renderIcon?: (props: { route: Route; focused: boolean; color: string; }) => React.ReactNode; /** * Callback which React Element to be used as tab label. */ renderLabel?: (props: { route: Route; focused: boolean; color: string; }) => React.ReactNode; /** * Callback which returns a React element to be used as the touchable for the tab item. * Renders a `TouchableRipple` on Android and `Pressable` on iOS. */ renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode; /** * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab. * Uses `route.accessibilityLabel` by default. */ getAccessibilityLabel?: (props: { route: Route }) => string | undefined; /** * Get badge for the tab, uses `route.badge` by default. */ getBadge?: (props: { route: Route }) => boolean | number | string | undefined; /** * Get color for the tab, uses `route.color` by default. */ getColor?: (props: { route: Route }) => string | undefined; /** * Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component. */ getLabelText?: (props: { route: Route }) => string | undefined; /** * Get lazy for the current screen. Uses true by default. */ getLazy?: (props: { route: Route }) => boolean | undefined; /** * Get the id to locate this tab button in tests, uses `route.testID` by default. */ getTestID?: (props: { route: Route }) => string | undefined; /** * Function to execute on tab press. It receives the route for the pressed tab, useful for things like scroll to top. */ onTabPress?: ( props: { route: Route; } & TabPressEvent ) => void; /** * Function to execute on tab long press. It receives the route for the pressed tab, useful for things like custom action when longed pressed. */ onTabLongPress?: ( props: { route: Route; } & TabPressEvent ) => void; /** * Custom color for icon and label in the active tab. */ activeColor?: string; /** * Custom color for icon and label in the inactive tab. */ inactiveColor?: string; /** * Whether animation is enabled for scenes transitions in `shifting` mode. * By default, the scenes cross-fade during tab change when `shifting` is enabled. * Specify `sceneAnimationEnabled` as `false` to disable the animation. */ sceneAnimationEnabled?: boolean; /** * The scene animation effect. Specify `'shifting'` for a different effect. * By default, 'opacity' will be used. */ sceneAnimationType?: 'opacity' | 'shifting'; /** * The scene animation Easing. */ sceneAnimationEasing?: EasingFunction | undefined; /** * Whether the bottom navigation bar is hidden when keyboard is shown. * On Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`. */ keyboardHidesNavigationBar?: boolean; /** * Safe area insets for the tab bar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS. * The bottom insets for iOS is added by default. You can override the behavior with this option. */ safeAreaInsets?: { top?: number; right?: number; bottom?: number; left?: number; }; /** * Style for the bottom navigation bar. You can pass a custom background color here: * * ```js * barStyle={{ backgroundColor: '#694fad' }} * ``` */ barStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; /** * Specifies the largest possible scale a label font can reach. */ labelMaxFontSizeMultiplier?: number; style?: StyleProp<ViewStyle>; activeIndicatorStyle?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp; /** * TestID used for testing purposes */ testID?: string;};
type BottomNavigationRoute
type BaseRoute = { key: string; title?: string; focusedIcon?: IconSource; unfocusedIcon?: IconSource; badge?: string | number | boolean; /** * @deprecated In v5.x works only with theme version 2. */ color?: string; accessibilityLabel?: string; testID?: string; lazy?: boolean;};
type ButtonProps
type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & { /** * Mode of the button. You can change the mode to adjust the styling to give it desired emphasis. * - `text` - flat button without background or outline, used for the lowest priority actions, especially when presenting multiple options. * - `outlined` - button with an outline without background, typically used for important, but not primary action – represents medium emphasis. * - `contained` - button with a background color, used for important action, have the most visual impact and high emphasis. * - `elevated` - button with a background color and elevation, used when absolutely necessary e.g. button requires visual separation from a patterned background. @supported Available in v5.x with theme version 3 * - `contained-tonal` - button with a secondary background color, an alternative middle ground between contained and outlined buttons. @supported Available in v5.x with theme version 3 */ mode?: 'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal'; /** * Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for: * * `contained` mode for theme version 2 * * `contained`, `contained-tonal` and `elevated` modes for theme version 3. */ dark?: boolean; /** * Use a compact look, useful for `text` buttons in a row. */ compact?: boolean; /** * @deprecated Deprecated in v5.x - use `buttonColor` or `textColor` instead. * Custom text color for flat button, or background color for contained button. */ color?: string; /** * Custom button's background color. */ buttonColor?: string; /** * Custom button's text color. */ textColor?: string; /** * Color of the ripple effect. */ rippleColor?: ColorValue; /** * Whether to show a loading indicator. */ loading?: boolean; /** * Icon to display for the `Button`. */ icon?: IconSource; /** * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch. */ disabled?: boolean; /** * Label text of the button. */ children: React.ReactNode; /** * Make the label text uppercased. Note that this won't work if you pass React elements as children. */ uppercase?: boolean; /** * Type of background drawabale to display the feedback (Android). * https://reactnative.dev/docs/pressable#rippleconfig */ background?: PressableAndroidRippleConfig; /** * Accessibility label for the button. This is read by the screen reader when the user taps the button. */ accessibilityLabel?: string; /** * Accessibility hint for the button. This is read by the screen reader when the user taps the button. */ accessibilityHint?: string; /** * Accessibility role for the button. The "button" role is set by default. */ accessibilityRole?: AccessibilityRole; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * Function to execute as soon as the touchable element is pressed and invoked even before onPress. */ onPressIn?: (e: GestureResponderEvent) => void; /** * Function to execute as soon as the touch is released even before onPress. */ onPressOut?: (e: GestureResponderEvent) => void; /** * Function to execute on long press. */ onLongPress?: (e: GestureResponderEvent) => void; /** * The number of milliseconds a user must touch the element before executing `onLongPress`. */ delayLongPress?: number; /** * Style of button's inner content. * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`. */ contentStyle?: StyleProp<ViewStyle>; /** * Specifies the largest possible scale a text font can reach. */ maxFontSizeMultiplier?: number; style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; /** * Style for the button text. */ labelStyle?: StyleProp<TextStyle>; /** * @optional */ theme?: ThemeProp; /** * testID to be used on tests. */ testID?: string;};
type CaptionProps
type Props = React.ComponentProps<typeof Text> & { style?: StyleProp<TextStyle>; children: React.ReactNode;};
type CardActionsProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Items inside the `CardActions`. */ children: React.ReactNode; style?: StyleProp<ViewStyle>; theme?: ThemeProp;};
type CardContentProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Items inside the `Card.Content`. */ children: React.ReactNode; /** * @internal */ index?: number; /** * @internal */ total?: number; /** * @internal */ siblings?: Array<string>; style?: StyleProp<ViewStyle>;};
type CardCoverProps
type Props = React.ComponentPropsWithRef<typeof Image> & { /** * @internal */ index?: number; /** * @internal */ total?: number; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp;};
type CardProps
type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & { /** * Mode of the Card. * - `elevated` - Card with elevation. * - `contained` - Card without outline and elevation @supported Available in v5.x with theme version 3 * - `outlined` - Card with an outline. */ mode?: Mode; /** * Content of the `Card`. */ children: React.ReactNode; /** * Function to execute on long press. */ onLongPress?: () => void; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * Function to execute as soon as the touchable element is pressed and invoked even before onPress. */ onPressIn?: (e: GestureResponderEvent) => void; /** * Function to execute as soon as the touch is released even before onPress. */ onPressOut?: (e: GestureResponderEvent) => void; /** * The number of milliseconds a user must touch the element before executing `onLongPress`. */ delayLongPress?: number; /** * If true, disable all interactions for this component. */ disabled?: boolean; /** * Changes Card shadow and background on iOS and Android. */ elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value; /** * Style of card's inner content. */ contentStyle?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp; /** * Pass down testID from card props to touchable */ testID?: string; /** * Pass down accessible from card props to touchable */ accessible?: boolean;};
type CardTitleProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Text for the title. Note that this will only accept a string or `<Text>`-based node. */ title: React.ReactNode; /** * Style for the title. */ titleStyle?: StyleProp<TextStyle>; /** * Number of lines for the title. */ titleNumberOfLines?: number; /** * @supported Available in v5.x with theme version 3 * * Title text variant defines appropriate text styles for type role and its size. * Available variants: * * Display: `displayLarge`, `displayMedium`, `displaySmall` * * Headline: `headlineLarge`, `headlineMedium`, `headlineSmall` * * Title: `titleLarge`, `titleMedium`, `titleSmall` * * Label: `labelLarge`, `labelMedium`, `labelSmall` * * Body: `bodyLarge`, `bodyMedium`, `bodySmall` */ titleVariant?: keyof typeof MD3TypescaleKey; /** * Text for the subtitle. Note that this will only accept a string or `<Text>`-based node. */ subtitle?: React.ReactNode; /** * Style for the subtitle. */ subtitleStyle?: StyleProp<TextStyle>; /** * Number of lines for the subtitle. */ subtitleNumberOfLines?: number; /** * @supported Available in v5.x with theme version 3 * * Subtitle text variant defines appropriate text styles for type role and its size. * Available variants: * * Display: `displayLarge`, `displayMedium`, `displaySmall` * * Headline: `headlineLarge`, `headlineMedium`, `headlineSmall` * * Title: `titleLarge`, `titleMedium`, `titleSmall` * * Label: `labelLarge`, `labelMedium`, `labelSmall` * * Body: `bodyLarge`, `bodyMedium`, `bodySmall` */ subtitleVariant?: keyof typeof MD3TypescaleKey; /** * Callback which returns a React element to display on the left side. */ left?: (props: { size: number }) => React.ReactNode; /** * Style for the left element wrapper. */ leftStyle?: StyleProp<ViewStyle>; /** * Callback which returns a React element to display on the right side. */ right?: (props: { size: number }) => React.ReactNode; /** * Style for the right element wrapper. */ rightStyle?: StyleProp<ViewStyle>; /** * @internal */ index?: number; /** * @internal */ total?: number; /** * Specifies the largest possible scale a title font can reach. */ titleMaxFontSizeMultiplier?: number; /** * Specifies the largest possible scale a subtitle font can reach. */ subtitleMaxFontSizeMultiplier?: number; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp;};
type CheckboxAndroidProps
type Props = $RemoveChildren<typeof TouchableRipple> & { /** * Status of checkbox. */ status: 'checked' | 'unchecked' | 'indeterminate'; /** * Whether checkbox is disabled. */ disabled?: boolean; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * Custom color for unchecked checkbox. */ uncheckedColor?: string; /** * Custom color for checkbox. */ color?: string; /** * @optional */ theme?: ThemeProp; /** * testID to be used on tests. */ testID?: string;};
type CheckboxIOSProps
type Props = $RemoveChildren<typeof TouchableRipple> & { /** * Status of checkbox. */ status: 'checked' | 'unchecked' | 'indeterminate'; /** * Whether checkbox is disabled. */ disabled?: boolean; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * Custom color for checkbox. */ color?: string; /** * @optional */ theme?: ThemeProp; /** * testID to be used on tests. */ testID?: string;};
type CheckboxItemProps
type Props = { /** * Status of checkbox. */ status: 'checked' | 'unchecked' | 'indeterminate'; /** * Whether checkbox is disabled. */ disabled?: boolean; /** * Label to be displayed on the item. */ label: string; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * Function to execute on long press. */ onLongPress?: (e: GestureResponderEvent) => void; /** * Type of background drawabale to display the feedback (Android). * https://reactnative.dev/docs/pressable#rippleconfig */ background?: PressableAndroidRippleConfig; /** * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable. */ accessibilityLabel?: string; /** * Custom color for unchecked checkbox. */ uncheckedColor?: string; /** * Custom color for checkbox. */ color?: string; /** * Color of the ripple effect. */ rippleColor?: ColorValue; /** * Additional styles for container View. */ style?: StyleProp<ViewStyle>; /** * Specifies the largest possible scale a label font can reach. */ labelMaxFontSizeMultiplier?: number; /** * Style that is passed to Label element. */ labelStyle?: StyleProp<TextStyle>; /** * @supported Available in v5.x with theme version 3 * * Label text variant defines appropriate text styles for type role and its size. * Available variants: * * Display: `displayLarge`, `displayMedium`, `displaySmall` * * Headline: `headlineLarge`, `headlineMedium`, `headlineSmall` * * Title: `titleLarge`, `titleMedium`, `titleSmall` * * Label: `labelLarge`, `labelMedium`, `labelSmall` * * Body: `bodyLarge`, `bodyMedium`, `bodySmall` */ labelVariant?: keyof typeof MD3TypescaleKey; /** * @optional */ theme?: ThemeProp; /** * testID to be used on tests. */ testID?: string; /** * Checkbox control position. */ position?: 'leading' | 'trailing'; /** * Whether `<Checkbox.Android />` or `<Checkbox.IOS />` should be used. * Left undefined `<Checkbox />` will be used. */ mode?: 'android' | 'ios';};
type CheckboxProps
type Props = { /** * Status of checkbox. */ status: 'checked' | 'unchecked' | 'indeterminate'; /** * Whether checkbox is disabled. */ disabled?: boolean; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * Custom color for unchecked checkbox. */ uncheckedColor?: string; /** * Custom color for checkbox. */ color?: string; /** * @optional */ theme?: ThemeProp; /** * testID to be used on tests. */ testID?: string;};
type ChipProps
type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & { /** * Mode of the chip. * - `flat` - flat chip without outline. * - `outlined` - chip with an outline. */ mode?: 'flat' | 'outlined'; /** * Text content of the `Chip`. */ children: React.ReactNode; /** * Icon to display for the `Chip`. Both icon and avatar cannot be specified. */ icon?: IconSource; /** * Avatar to display for the `Chip`. Both icon and avatar cannot be specified. */ avatar?: React.ReactNode; /** * Icon to display as the close button for the `Chip`. The icon appears only when the onClose prop is specified. */ closeIcon?: IconSource; /** * Whether chip is selected. */ selected?: boolean; /** * Whether to style the chip color as selected. * Note: With theme version 3 `selectedColor` doesn't apply to the `icon`. * If you want specify custom color for the `icon`, render your own `Icon` component. */ selectedColor?: string; /** * @supported Available in v5.x with theme version 3 * Whether to display overlay on selected chip */ showSelectedOverlay?: boolean; /** * Whether to display default check icon on selected chip. * Note: Check will not be shown if `icon` is specified. If specified, `icon` will be shown regardless of `selected`. */ showSelectedCheck?: boolean; /** * Color of the ripple effect. */ rippleColor?: ColorValue; /** * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch. */ disabled?: boolean; /** * Type of background drawabale to display the feedback (Android). * https://reactnative.dev/docs/pressable#rippleconfig */ background?: PressableAndroidRippleConfig; /** * Accessibility label for the chip. This is read by the screen reader when the user taps the chip. */ accessibilityLabel?: string; /** * Accessibility label for the close icon. This is read by the screen reader when the user taps the close icon. */ closeIconAccessibilityLabel?: string; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * Function to execute on long press. */ onLongPress?: () => void; /** * Function to execute as soon as the touchable element is pressed and invoked even before onPress. */ onPressIn?: (e: GestureResponderEvent) => void; /** * Function to execute as soon as the touch is released even before onPress. */ onPressOut?: (e: GestureResponderEvent) => void; /** * Function to execute on close button press. The close button appears only when this prop is specified. */ onClose?: () => void; /** * The number of milliseconds a user must touch the element before executing `onLongPress`. */ delayLongPress?: number; /** * @supported Available in v5.x with theme version 3 * Sets smaller horizontal paddings `12dp` around label, when there is only label. */ compact?: boolean; /** * @supported Available in v5.x with theme version 3 * Whether chip should have the elevation. */ elevated?: boolean; /** * Style of chip's text */ textStyle?: StyleProp<TextStyle>; style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; /** * @optional */ theme?: ThemeProp; /** * Pass down testID from chip props to touchable for Detox tests. */ testID?: string; /** * Ellipsize Mode for the children text */ ellipsizeMode?: EllipsizeProp; /** * Specifies the largest possible scale a text font can reach. */ maxFontSizeMultiplier?: number;};
type DataTableCellProps
type Props = $RemoveChildren<typeof TouchableRipple> & { /** * Content of the `DataTableCell`. */ children: React.ReactNode; /** * Align the text to the right. Generally monetary or number fields are aligned to right. */ numeric?: boolean; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; style?: StyleProp<ViewStyle>; /** * Text content style of the `DataTableCell`. */ textStyle?: StyleProp<TextStyle>; /** * Specifies the largest possible scale a text font can reach. */ maxFontSizeMultiplier?: number; /** * testID to be used on tests. */ testID?: string;};
type DataTableHeaderProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Content of the `DataTableHeader`. */ children: React.ReactNode; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp;};
type DataTablePaginationProps
type Props = React.ComponentPropsWithRef<typeof View> & PaginationControlsProps & PaginationDropdownProps & { /** * Label text for select page dropdown to display. */ selectPageDropdownLabel?: React.ReactNode; /** * AccessibilityLabel for `selectPageDropdownLabel`. */ selectPageDropdownAccessibilityLabel?: string; /** * Label text to display which indicates current pagination. */ label?: React.ReactNode; /** * AccessibilityLabel for `label`. */ accessibilityLabel?: string; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp; };
type DataTableProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Content of the `DataTable`. */ children: React.ReactNode; style?: StyleProp<ViewStyle>;};
type DataTableRowProps
type Props = $RemoveChildren<typeof TouchableRipple> & { /** * Content of the `DataTableRow`. */ children: React.ReactNode; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp; /** * `pointerEvents` passed to the `View` container, which is wrapping children within `TouchableRipple`. */ pointerEvents?: ViewProps['pointerEvents'];};
type DataTableTitleProps
type Props = React.ComponentPropsWithRef<typeof Pressable> & { /** * Text content of the `DataTableTitle`. */ children: React.ReactNode; /** * Align the text to the right. Generally monetary or number fields are aligned to right. */ numeric?: boolean; /** * Direction of sorting. An arrow indicating the direction is displayed when this is given. */ sortDirection?: 'ascending' | 'descending'; /** * The number of lines to show. */ numberOfLines?: number; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; style?: StyleProp<ViewStyle>; /** * Text content style of the `DataTableTitle`. */ textStyle?: StyleProp<TextStyle>; /** * Specifies the largest possible scale a text font can reach. */ maxFontSizeMultiplier?: number; /** * @optional */ theme?: ThemeProp;};
type DialogActionsProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Content of the `DialogActions`. */ children: React.ReactNode; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp;};
type DialogContentProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Content of the `DialogContent`. */ children: React.ReactNode; style?: StyleProp<ViewStyle>;};
type DialogIconProps
type Props = { /** * Custom color for action icon. */ color?: string; /** * Name of the icon to show. */ icon: IconSource; /** * Optional icon size. */ size?: number; /** * @optional */ theme?: ThemeProp;};
type DialogProps
type Props = { /** * Determines whether clicking outside the dialog dismiss it. */ dismissable?: boolean; /** * Determines whether clicking Android hardware back button dismiss dialog. */ dismissableBackButton?: boolean; /** * Callback that is called when the user dismisses the dialog. */ onDismiss?: () => void; /** * Determines Whether the dialog is visible. */ visible: boolean; /** * Content of the `Dialog`. */ children: React.ReactNode; style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; /** * @optional */ theme?: ThemeProp; /** * testID to be used on tests. */ testID?: string;};
type DialogScrollAreaProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Content of the `DialogScrollArea`. */ children: React.ReactNode; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp;};
type DialogTitleProps
type Props = React.ComponentPropsWithRef<typeof Title> & { /** * Title text for the `DialogTitle`. */ children: React.ReactNode; style?: StyleProp<TextStyle>; /** * @optional */ theme?: ThemeProp;};
type DividerProps
type Props = $RemoveChildren<typeof View> & { /** * @renamed Renamed from 'inset' to 'leftInset` in v5.x * Whether divider has a left inset. */ leftInset?: boolean; /** * @supported Available in v5.x with theme version 3 * Whether divider has a horizontal inset on both sides. */ horizontalInset?: boolean; /** * @supported Available in v5.x with theme version 3 * Whether divider should be bolded. */ bold?: boolean; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp;};
type DrawerCollapsedItemProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * The label text of the item. */ label?: string; /** * Badge to show on the icon, can be `true` to show a dot, `string` or `number` to show text. */ badge?: string | number | boolean; /** * Whether the item is disabled. */ disabled?: boolean; /** * @renamed Renamed from 'icon' to 'focusedIcon' in v5.x * Icon to use as the focused destination icon, can be a string, an image source or a react component */ focusedIcon?: IconSource; /** * @renamed Renamed from 'icon' to 'focusedIcon' in v5.x * Icon to use as the unfocused destination icon, can be a string, an image source or a react component */ unfocusedIcon?: IconSource; /** * Whether to highlight the drawer item as active. */ active?: boolean; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * Specifies the largest possible scale a label font can reach. */ labelMaxFontSizeMultiplier?: number; /** * Accessibility label for the button. This is read by the screen reader when the user taps the button. */ accessibilityLabel?: string; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp; /** * TestID used for testing purposes */ testID?: string;};
type DrawerItemProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * The label text of the item. */ label: string; /** * Icon to display for the `DrawerItem`. */ icon?: IconSource; /** * Whether to highlight the drawer item as active. */ active?: boolean; /** * Whether the item is disabled. */ disabled?: boolean; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * Type of background drawabale to display the feedback (Android). * https://reactnative.dev/docs/pressable#rippleconfig */ background?: PressableAndroidRippleConfig; /** * Accessibility label for the button. This is read by the screen reader when the user taps the button. */ accessibilityLabel?: string; /** * Callback which returns a React element to display on the right side. For instance a Badge. */ right?: (props: { color: string }) => React.ReactNode; /** * Specifies the largest possible scale a label font can reach. */ labelMaxFontSizeMultiplier?: number; /** * Color of the ripple effect. */ rippleColor?: ColorValue; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp;};
type DrawerSectionProps
type Props = React.ComponentPropsWithRef<typeof View> & { /** * Title to show as the header for the section. */ title?: string; /** * Content of the `Drawer.Section`. */ children: React.ReactNode; /** * Whether to show `Divider` at the end of the section. True by default. */ showDivider?: boolean; /** * Specifies the largest possible scale a title font can reach. */ titleMaxFontSizeMultiplier?: number; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp;};
type FABGroupProps
type Props = { /** * Action items to display in the form of a speed dial. * An action item should contain the following properties: * - `icon`: icon to display (required) * - `label`: optional label text * - `color`: custom icon color of the action item * - `labelTextColor`: custom label text color of the action item * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified * - `accessibilityHint`: accessibility hint for the action * - `style`: pass additional styles for the fab item, for example, `backgroundColor` * - `containerStyle`: pass additional styles for the fab item label container, for example, `backgroundColor` @supported Available in 5.x * - `labelStyle`: pass additional styles for the fab item label, for example, `fontSize` * - `labelMaxFontSizeMultiplier`: specifies the largest possible scale a title font can reach. * - `onPress`: callback that is called when `FAB` is pressed (required) * - `onLongPress`: callback that is called when `FAB` is long pressed * - `toggleStackOnLongPress`: callback that is called when `FAB` is long pressed * - `size`: size of action item. Defaults to `small`. @supported Available in v5.x * - `testID`: testID to be used on tests * - `rippleColor`: color of the ripple effect. */ actions: Array<{ icon: IconSource; label?: string; color?: string; labelTextColor?: string; accessibilityLabel?: string; accessibilityHint?: string; style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; containerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; labelStyle?: StyleProp<TextStyle>; labelMaxFontSizeMultiplier?: number; onPress: (e: GestureResponderEvent) => void; size?: 'small' | 'medium'; testID?: string; rippleColor?: ColorValue; }>; /** * Icon to display for the `FAB`. * You can toggle it based on whether the speed dial is open to display a different icon. */ icon: IconSource; /** * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB. */ accessibilityLabel?: string; /** * Custom color for the `FAB`. */ color?: string; /** * Custom backdrop color for opened speed dial background. */ backdropColor?: string; /** * Color of the ripple effect. */ rippleColor?: ColorValue; /** * Function to execute on pressing the `FAB`. */ onPress?: (e: GestureResponderEvent) => void; /** * Function to execute on long pressing the `FAB`. */ onLongPress?: (e: GestureResponderEvent) => void; /** * Makes actions stack appear on long press instead of on press. */ toggleStackOnLongPress?: boolean; /** * Changes the delay for long press reaction. */ delayLongPress?: number; /** * Allows for onLongPress when stack is opened. */ enableLongPressWhenStackOpened?: boolean; /** * Whether the speed dial is open. */ open: boolean; /** * Callback which is called on opening and closing the speed dial. * The open state needs to be updated when it's called, otherwise the change is dropped. */ onStateChange: (state: { open: boolean }) => void; /** * Whether `FAB` is currently visible. */ visible: boolean; /** * Style for the group. You can use it to pass additional styles if you need. * For example, you can set an additional padding if you have a tab bar at the bottom. */ style?: StyleProp<ViewStyle>; /** * Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor. */ fabStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; /** * @supported Available in v5.x with theme version 3 * * Color mappings variant for combinations of container and icon colors. */ variant?: 'primary' | 'secondary' | 'tertiary' | 'surface'; /** * @optional */ theme?: ThemeProp; /** * Optional label for `FAB`. */ label?: string; /** * Pass down testID from Group props to FAB. */ testID?: string;};
type FABProps
type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & { /** * Icon to display for the `FAB`. It's optional only if `label` is defined. */ icon?: IconSource; /** * Optional label for extended `FAB`. It's optional only if `icon` is defined. */ label?: string; /** * Make the label text uppercased. */ uppercase?: boolean; /** * Type of background drawabale to display the feedback (Android). * https://reactnative.dev/docs/pressable#rippleconfig */ background?: PressableAndroidRippleConfig; /** * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB. * Uses `label` by default if specified. */ accessibilityLabel?: string; /** * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB. */ accessibilityState?: AccessibilityState; /** * Whether an icon change is animated. */ animated?: boolean; /** * @deprecated Deprecated in v.5x - use prop size="small". * * Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified. */ small?: boolean; /** * Custom color for the icon and label of the `FAB`. */ color?: string; /** * Color of the ripple effect. */ rippleColor?: ColorValue; /** * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch. */ disabled?: boolean; /** * Whether `FAB` is currently visible. */ visible?: boolean; /** * Whether to show a loading indicator. */ loading?: boolean; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * Function to execute on long press. */ onLongPress?: (e: GestureResponderEvent) => void; /** * The number of milliseconds a user must touch the element before executing `onLongPress`. */ delayLongPress?: number; /** * @supported Available in v5.x with theme version 3 * * Size of the `FAB`. * - `small` - FAB with small height (40). * - `medium` - FAB with default medium height (56). * - `large` - FAB with large height (96). */ size?: FABSize; /** * Custom size for the `FAB`. This prop takes precedence over size prop */ customSize?: number; /** * @supported Available in v5.x with theme version 3 * * Mode of the `FAB`. You can change the mode to adjust the the shadow: * - `flat` - button without a shadow. * - `elevated` - button with a shadow. */ mode?: FABMode; /** * @supported Available in v5.x with theme version 3 * * Color mappings variant for combinations of container and icon colors. */ variant?: 'primary' | 'secondary' | 'tertiary' | 'surface'; /** * Specifies the largest possible scale a label font can reach. */ labelMaxFontSizeMultiplier?: number; style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; /** * @optional */ theme?: ThemeProp; /** * TestID used for testing purposes */ testID?: string; ref?: React.RefObject<View>;} & IconOrLabel;
type HeadlineProps
type Props = React.ComponentProps<typeof Text> & { style?: StyleProp<TextStyle>; children: React.ReactNode;};
type HelperTextProps
type Props = $Omit< $Omit<React.ComponentPropsWithRef<typeof AnimatedText>, 'padding'>, 'type'> & { /** * Type of the helper text. */ type: 'error' | 'info'; /** * Text content of the HelperText. */ children: React.ReactNode; /** * Whether to display the helper text. */ visible?: boolean; /** * Whether to apply padding to the helper text. */ padding?: 'none' | 'normal'; /** * Whether the text input tied with helper text is disabled. */ disabled?: boolean; style?: StyleProp<TextStyle>; /** * @optional */ theme?: ThemeProp; /** * TestID used for testing purposes */ testID?: string;};
type IconButtonProps
type Props = $RemoveChildren<typeof TouchableRipple> & { /** * Icon to display. */ icon: IconSource; /** * @supported Available in v5.x with theme version 3 * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered. */ mode?: IconButtonMode; /** * @renamed Renamed from 'color' to 'iconColor' in v5.x * Color of the icon. */ iconColor?: string; /** * Background color of the icon container. */ containerColor?: string; /** * Color of the ripple effect. */ rippleColor?: ColorValue; /** * @supported Available in v5.x with theme version 3 * Whether icon button is selected. A selected button receives alternative combination of icon and container colors. */ selected?: boolean; /** * Size of the icon. */ size?: number; /** * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch. */ disabled?: boolean; /** * Whether an icon change is animated. */ animated?: boolean; /** * Accessibility label for the button. This is read by the screen reader when the user taps the button. */ accessibilityLabel?: string; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; ref?: React.RefObject<View>; /** * TestID used for testing purposes */ testID?: string; /** * @optional */ theme?: ThemeProp; /** * Whether to show a loading indicator. */ loading?: boolean;};
type ListAccordionGroupProps
type Props = { /** * Function to execute on selection change. */ onAccordionPress?: (expandedId: string | number) => void; /** * Id of the currently expanded list accordion */ expandedId?: string | number; /** * React elements containing list accordions */ children: React.ReactNode;};
type ListAccordionProps
type Props = { /** * Title text for the list accordion. */ title: React.ReactNode; /** * Description text for the list accordion. */ description?: React.ReactNode; /** * Callback which returns a React element to display on the left side. */ left?: (props: { color: string; style: Style }) => React.ReactNode; /** * Callback which returns a React element to display on the right side. */ right?: (props: { isExpanded: boolean }) => React.ReactNode; /** * Whether the accordion is expanded * If this prop is provided, the accordion will behave as a "controlled component". * You'll need to update this prop when you want to toggle the component or on `onPress`. */ expanded?: boolean; /** * Function to execute on press. */ onPress?: (e: GestureResponderEvent) => void; /** * Function to execute on long press. */ onLongPress?: (e: GestureResponderEvent) => void; /** * The number of milliseconds a user must touch the element before executing `onLongPress`. */ delayLongPress?: number; /** * Content of the section. */ children: React.ReactNode; /** * @optional */ theme?: ThemeProp; /** * Type of background drawabale to display the feedback (Android). * https://reactnative.dev/docs/pressable#rippleconfig */ background?: PressableAndroidRippleConfig; /** * Style that is passed to the wrapping TouchableRipple element. */ style?: StyleProp<ViewStyle>; /** * Style that is passed to Title element. */ titleStyle?: StyleProp<TextStyle>; /** * Style that is passed to Description element. */ descriptionStyle?: StyleProp<TextStyle>; /** * Color of the ripple effect. */ rippleColor?: ColorValue; /** * Truncate Title text such that the total number of lines does not * exceed this number. */ titleNumberOfLines?: number; /** * Truncate Description text such that the total number of lines does not * exceed this number. */ descriptionNumberOfLines?: number; /** * Specifies the largest possible scale a title font can reach. */ titleMaxFontSizeMultiplier?: number; /** * Specifies the largest possible scale a description font can reach. */ descriptionMaxFontSizeMultiplier?: number; /** * Id is used for distinguishing specific accordion when using List.AccordionGroup. Property is required when using List.AccordionGroup and has no impact on behavior when using standalone List.Accordion. */ id?: string | number; /** * TestID used for testing purposes */ testID?: string; /** * Accessibility label for the TouchableRipple. This is read by the screen reader when the user taps the touchable. */ accessibilityLabel?: string; /** * `pointerEvents` passed to the `View` container */ pointerEvents?: ViewProps['pointerEvents'];};
type ListIconProps
type Props = { /** * Icon to show. */ icon: IconSource; /** * Color for the icon. */ color?: string; style?: StyleProp<ViewStyle>; /** * @optional */ theme?: ThemeProp;};
type ListImageProps
type Props = { source: ImageSourcePropType; variant?: 'image' | 'video'; style?: StyleProp<ImageStyle>; /** * @optional */ theme?: ThemeProp;};
type ListItemProps
type Props = $RemoveChildren<typeof TouchableRipple> & { /** * Title text for the list item. */ 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 wrapping TouchableRipple element. */ style?: StyleProp<ViewStyle>; /** * Style that is passed to the container wrapping title and descripton. */ 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; /** * @optional */ style?: StyleProp<ViewStyle>; contentStyle?: StyleProp<ViewStyle>; titleStyle?: StyleProp<TextStyle>; /** * Color of the ripple effect. */ rippleColor?: ColorValue; /** * @optional */ theme?: ThemeProp; /** * 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; /** * @optional */ theme: InternalTheme; /** * Inner ScrollView prop */ keyboardShouldPersistTaps?: ScrollViewProps['keyboardShouldPersistTaps']; /** * testID to be used on tests. */ testID?: string;};
type ModalProps
type Props = { /** * Determines whether clicking outside the modal dismiss it. */ dismissable?: boolean; /** * Determines whether clicking Android hardware back button dismiss 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>>; /** * @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';};
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 = { /** * 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: string; 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;
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?: 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 = React.ComponentPropsWithRef<typeof View> & { /** * 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>;};
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'; left?: React.ReactNode; 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.CollapsedItemfocusedIcon="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, ...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.Itemstyle={{ 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.Itemlabel="First Item"active={active === 'first'}onPress={() => setActive('first')}/><Drawer.Itemlabel="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, id, testID, background, onPress, onLongPress, delayLongPress, expanded: expandedProp, accessibilityLabel, pointerEvents, titleMaxFontSizeMultiplier, descriptionMaxFontSizeMultiplier, }: 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.Accordiontitle="Uncontrolled Accordion"left={props => <List.Icon {...props} icon="folder" />}><List.Item title="First item" /><List.Item title="Second item" /></List.Accordion><List.Accordiontitle="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.Itemtitle="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)
- lib/typescript/components/ActivityIndicator.d.ts
- lib/typescript/components/Appbar/Appbar.d.ts
- lib/typescript/components/Appbar/AppbarAction.d.ts
- lib/typescript/components/Appbar/AppbarBackAction.d.ts
- lib/typescript/components/Appbar/AppbarContent.d.ts
- lib/typescript/components/Appbar/AppbarHeader.d.ts
- lib/typescript/components/Appbar/index.d.ts
- lib/typescript/components/Avatar/Avatar.d.ts
- lib/typescript/components/Avatar/AvatarIcon.d.ts
- lib/typescript/components/Avatar/AvatarImage.d.ts
- lib/typescript/components/Avatar/AvatarText.d.ts
- lib/typescript/components/Badge.d.ts
- lib/typescript/components/Banner.d.ts
- lib/typescript/components/BottomNavigation/BottomNavigation.d.ts
- lib/typescript/components/Button/Button.d.ts
- lib/typescript/components/Card/Card.d.ts
- lib/typescript/components/Card/CardActions.d.ts
- lib/typescript/components/Card/CardContent.d.ts
- lib/typescript/components/Card/CardCover.d.ts
- lib/typescript/components/Card/CardTitle.d.ts
- lib/typescript/components/Checkbox/Checkbox.d.ts
- lib/typescript/components/Checkbox/CheckboxAndroid.d.ts
- lib/typescript/components/Checkbox/CheckboxIOS.d.ts
- lib/typescript/components/Checkbox/CheckboxItem.d.ts
- lib/typescript/components/Checkbox/index.d.ts
- lib/typescript/components/Chip/Chip.d.ts
- lib/typescript/components/DataTable/DataTable.d.ts
- lib/typescript/components/DataTable/DataTableCell.d.ts
- lib/typescript/components/DataTable/DataTableHeader.d.ts
- lib/typescript/components/DataTable/DataTablePagination.d.ts
- lib/typescript/components/DataTable/DataTableRow.d.ts
- lib/typescript/components/DataTable/DataTableTitle.d.ts
- lib/typescript/components/Dialog/Dialog.d.ts
- lib/typescript/components/Dialog/DialogActions.d.ts
- lib/typescript/components/Dialog/DialogContent.d.ts
- lib/typescript/components/Dialog/DialogIcon.d.ts
- lib/typescript/components/Dialog/DialogScrollArea.d.ts
- lib/typescript/components/Dialog/DialogTitle.d.ts
- lib/typescript/components/Divider.d.ts
- lib/typescript/components/Drawer/Drawer.d.ts
- lib/typescript/components/Drawer/DrawerCollapsedItem.d.ts
- lib/typescript/components/Drawer/DrawerItem.d.ts
- lib/typescript/components/Drawer/DrawerSection.d.ts
- lib/typescript/components/FAB/AnimatedFAB.d.ts
- lib/typescript/components/FAB/FAB.d.ts
- lib/typescript/components/FAB/FABGroup.d.ts
- lib/typescript/components/FAB/index.d.ts
- lib/typescript/components/HelperText/HelperText.d.ts
- lib/typescript/components/Icon.d.ts
- lib/typescript/components/IconButton/IconButton.d.ts
- lib/typescript/components/List/List.d.ts
- lib/typescript/components/List/ListAccordion.d.ts
- lib/typescript/components/List/ListAccordionGroup.d.ts
- lib/typescript/components/List/ListIcon.d.ts
- lib/typescript/components/List/ListImage.d.ts
- lib/typescript/components/List/ListItem.d.ts
- lib/typescript/components/List/ListSection.d.ts
- lib/typescript/components/List/ListSubheader.d.ts
- lib/typescript/components/Menu/Menu.d.ts
- lib/typescript/components/Menu/MenuItem.d.ts
- lib/typescript/components/Modal.d.ts
- lib/typescript/components/Portal/Portal.d.ts
- lib/typescript/components/Portal/PortalHost.d.ts
- lib/typescript/components/ProgressBar.d.ts
- lib/typescript/components/RadioButton/RadioButton.d.ts
- lib/typescript/components/RadioButton/RadioButtonAndroid.d.ts
- lib/typescript/components/RadioButton/RadioButtonGroup.d.ts
- lib/typescript/components/RadioButton/RadioButtonIOS.d.ts
- lib/typescript/components/RadioButton/RadioButtonItem.d.ts
- lib/typescript/components/RadioButton/index.d.ts
- lib/typescript/components/Searchbar.d.ts
- lib/typescript/components/SegmentedButtons/SegmentedButtons.d.ts
- lib/typescript/components/Snackbar.d.ts
- lib/typescript/components/Surface.d.ts
- lib/typescript/components/Switch/Switch.d.ts
- lib/typescript/components/TextInput/Adornment/TextInputAffix.d.ts
- lib/typescript/components/TextInput/Adornment/TextInputIcon.d.ts
- lib/typescript/components/TextInput/TextInput.d.ts
- lib/typescript/components/ToggleButton/ToggleButton.d.ts
- lib/typescript/components/ToggleButton/ToggleButtonGroup.d.ts
- lib/typescript/components/ToggleButton/ToggleButtonRow.d.ts
- lib/typescript/components/ToggleButton/index.d.ts
- lib/typescript/components/Tooltip/Tooltip.d.ts
- lib/typescript/components/TouchableRipple/TouchableRipple.d.ts
- lib/typescript/components/Typography/Text.d.ts
- lib/typescript/components/Typography/v2/Caption.d.ts
- lib/typescript/components/Typography/v2/Headline.d.ts
- lib/typescript/components/Typography/v2/Paragraph.d.ts
- lib/typescript/components/Typography/v2/Subheading.d.ts
- lib/typescript/components/Typography/v2/Title.d.ts
- lib/typescript/core/PaperProvider.d.ts
- lib/typescript/core/theming.d.ts
- lib/typescript/index.d.ts
- lib/typescript/react-navigation/types.d.ts
- lib/typescript/styles/fonts.d.ts
- lib/typescript/styles/overlay.d.ts
- lib/typescript/styles/shadow.d.ts
- lib/typescript/styles/themes/v2/DarkTheme.d.ts
- lib/typescript/styles/themes/v2/LightTheme.d.ts
- lib/typescript/styles/themes/v2/colors.d.ts
- lib/typescript/styles/themes/v3/DarkTheme.d.ts
- lib/typescript/styles/themes/v3/LightTheme.d.ts
- lib/typescript/styles/themes/v3/tokens.d.ts
- lib/typescript/types.d.ts
Dependencies (3)
Dev Dependencies (46)
- @babel/core
- @babel/plugin-proposal-export-namespace-from
- @babel/runtime
- @callstack/eslint-config
- @commitlint/config-conventional
- @react-navigation/native
- @release-it/conventional-changelog
- @testing-library/jest-native
- @testing-library/react-native
- @types/color
- @types/jest
- @types/node
- @types/react-dom
- @types/react-native-vector-icons
- @types/react-test-renderer
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- all-contributors-cli
- babel-cli
- babel-core
- babel-jest
- babel-loader
- babel-test
- chalk
- commitlint
- conventional-changelog-cli
- dedent
- eslint
- eslint-plugin-flowtype
- eslint-plugin-local-rules
- expo-constants
- glob
- husky
- jest
- jest-file-snapshot
- metro-react-native-babel-preset
- react
- react-dom
- react-native
- react-native-builder-bob
- react-native-safe-area-context
- react-native-vector-icons
- react-test-renderer
- release-it
- rimraf
- typescript
Peer Dependencies (4)
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 .
Package analyzed in 8737 ms. - Missing or incorrect documentation? Open an issue for this package.