- \n
- Present multiple options \n
- Represent attributes active or chosen \n
- Present filter options \n
- Trigger actions related to primary content \n
- \n
- Present multiple options \n
- Represent attributes active or chosen \n
- Present filter options \n
- Trigger actions related to primary content \n
+
+### animating
+
+
+
+
+
+### color
+
+
+
+
+
+### size
+
+
+
+
+
+### hidesWhenStopped
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### dark
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+### elevated Available in v5.x with theme version 3
+
+
+
+
+
+### safeAreaInsets
+
+
+
+
+
+### theme
+
+
+
+
+
+### style
+
+
+
+
+
+### color
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### size
+
+
+
+
+
+### disabled
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### onPress
+
+
+
+
+
+### isLeading Available in v5.x with theme version 3
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### theme
+
+
+
+
+
+### color
+
+
+
+
+
+### size
+
+
+
+
+
+### disabled
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### onPress
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### title (required)
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+### titleRef
+
+
+
+
+
+### subtitle Deprecated in v5.x
+
+
+
+
+
+### subtitleStyle Deprecated in v5.x
+
+
+
+
+
+### onPress
+
+
+
+
+
+### disabled
+
+
+
+
+
+### color
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### dark
+
+
+
+
+
+### statusBarHeight
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+### elevated Available in v5.x with theme version 3
+
+
+
+
+
+### theme
+
+
+
+
+
+### style
+
+
+
+
+
+### testID
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### size
+
+
+
+
+
+### color
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### source (required)
+
+
+
+
+
+### size
+
+
+
+
+
+### style
+
+
+
+
+
+### onError
+
+
+
+
+
+### onLayout
+
+
+
+
+
+### onLoad
+
+
+
+
+
+### onLoadEnd
+
+
+
+
+
+### onLoadStart
+
+
+
+
+
+### onProgress
+
+
+
+
+
+### theme
+
+
+
+
+
+### label (required)
+
+
+
+
+
+### size
+
+
+
+
+
+### color
+
+
+
+
+
+### style
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### theme
+
+
+
+
+
+### visible
+
+
+
+
+
+### children
+
+
+
+
+
+### size
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### theme
+
+
+
+
+
+### visible (required)
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### icon
+
+
+
+
+
+### actions
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### theme
+
+
+
+
+
+### onShowAnimationFinished
+
+
+
+
+
+### onHideAnimationFinished
+
+
+
+
+
+### shifting
+
+
+
+
+
+### labeled
+
+
+
+
+
+### compact
+
+
+
+
+
+### navigationState (required)
+
+
+
+
+
+### onIndexChange (required)
+
+
+
+
+
+### renderScene (required)
+
+
+
+
+
+### renderIcon
+
+
+
+
+
+### renderLabel
+
+
+
+
+
+### renderTouchable
+
+
+
+
+
+### getAccessibilityLabel
+
+
+
+
+
+### getBadge
+
+
+
+
+
+### getColor
+
+
+
+
+
+### getLabelText
+
+
+
+
+
+### getLazy
+
+
+
+
+
+### getTestID
+
+
+
+
+
+### onTabPress
+
+
+
+
+
+### onTabLongPress
+
+
+
+
+
+### activeColor
+
+
+
+
+
+### inactiveColor
+
+
+
+
+
+### sceneAnimationEnabled
+
+
+
+
+
+### sceneAnimationType
+
+
+
+
+
+### sceneAnimationEasing
+
+
+
+
+
+### keyboardHidesNavigationBar
+
+
+
+
+
+### safeAreaInsets
+
+
+
+
+
+### barStyle
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### activeIndicatorStyle
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### shifting
+
+
+
+
+
+### labeled
+
+
+
+
+
+### compact
+
+
+
+
+
+### navigationState (required)
+
+
+
+
+
+### renderIcon
+
+
+
+
+
+### renderLabel
+
+
+
+
+
+### renderTouchable
+
+
+
+
+
+### getAccessibilityLabel
+
+
+
+
+
+### getBadge
+
+
+
+
+
+### getColor
+
+
+
+
+
+### getLabelText
+
+
+
+
+
+### getTestID
+
+
+
+
+
+### onTabPress (required)
+
+
+
+
+
+### onTabLongPress
+
+
+
+
+
+### activeColor
+
+
+
+
+
+### inactiveColor
+
+
+
+
+
+### animationEasing
+
+
+
+
+
+### keyboardHidesNavigationBar
+
+
+
+
+
+### safeAreaInsets
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### activeIndicatorStyle
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### mode
+
+
+
+
+
+### dark
+
+
+
+
+
+### compact
+
+
+
+
+
+### color Deprecated in v5.x - use `buttonColor` or `textColor` instead.
+
+
+
+
+
+### buttonColor
+
+
+
+
+
+### textColor
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### loading
+
+
+
+
+
+### icon
+
+
+
+
+
+### disabled
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### uppercase
+
+
+
+
+
+### background
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### accessibilityHint
+
+
+
+
+
+### accessibilityRole
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### style
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+### theme
+
+
+
+
+
+### touchableRef
+
+
+
+
+
+### testID
+
+
+
+
+
+### mode
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+### disabled
+
+
+
+
+
+### elevation
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### accessible
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### title (required)
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+### titleNumberOfLines
+
+
+
+
+
+### titleVariant Available in v5.x with theme version 3
+
+
+
+
+
+### subtitle
+
+
+
+
+
+### subtitleStyle
+
+
+
+
+
+### subtitleNumberOfLines
+
+
+
+
+
+### subtitleVariant Available in v5.x with theme version 3
+
+
+
+
+
+### left
+
+
+
+
+
+### leftStyle
+
+
+
+
+
+### right
+
+
+
+
+
+### rightStyle
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### subtitleMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### status (required)
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+### color
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### status (required)
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+### color
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### status (required)
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### color
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### status (required)
+
+
+
+
+
+### disabled
+
+
+
+
+
+### label (required)
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### background
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+### color
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### style
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+### labelVariant Available in v5.x with theme version 3
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### position
+
+
+
+
+
+### mode
+
+
+
+
+
+### hitSlop
+
+
+
+ -
+
- Present multiple options +
- Represent attributes active or chosen +
- Present filter options +
- Trigger actions related to primary content +
+
+### mode
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### icon
+
+
+
+
+
+### avatar
+
+
+
+
+
+### closeIcon
+
+
+
+
+
+### selected
+
+
+
+
+
+### selectedColor
+
+
+
+
+
+### showSelectedOverlay Available in v5.x with theme version 3
+
+
+
+
+
+### showSelectedCheck
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### disabled
+
+
+
+
+
+### background
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### closeIconAccessibilityLabel
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+### onClose
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+### compact Available in v5.x with theme version 3
+
+
+
+
+
+### elevated Available in v5.x with theme version 3
+
+
+
+
+
+### textStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### ellipsizeMode
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### accessibilityRole
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### numeric
+
+
+
+
+
+### onPress
+
+
+
+
+
+### style
+
+
+
+
+
+### textStyle
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### testID
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### page (required)
+
+
+
+
+
+### numberOfPages (required)
+
+
+
+
+
+### onPageChange (required)
+
+
+
+
+
+### showFastPaginationControls
+
+
+
+
+
+### paginationControlRippleColor
+
+
+
+
+
+### theme
+
+
+
+
+
+### numberOfItemsPerPage
+
+
+
+
+
+### numberOfItemsPerPageList
+
+
+
+
+
+### onItemsPerPageChange
+
+
+
+
+
+### dropdownItemRippleColor
+
+
+
+
+
+### selectPageDropdownRippleColor
+
+
+
+
+
+### selectPageDropdownLabel
+
+
+
+
+
+### selectPageDropdownAccessibilityLabel
+
+
+
+
+
+### label
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### style
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### onPress
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### pointerEvents
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### numeric
+
+
+
+
+
+### sortDirection
+
+
+
+
+
+### numberOfLines
+
+
+
+
+
+### onPress
+
+
+
+
+
+### style
+
+
+
+
+
+### textStyle
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### theme
+
+
+
+
+
+### dismissable
+
+
+
+
+
+### dismissableBackButton
+
+
+
+
+
+### onDismiss
+
+
+
+
+
+### visible
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### color
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### size
+
+
+
+
+
+### theme
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### leftInset Renamed from 'inset' to 'leftInset` in v5.x
+
+
+
+
+
+### horizontalInset Available in v5.x with theme version 3
+
+
+
+
+
+### bold Available in v5.x with theme version 3
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### label
+
+
+
+
+
+### badge
+
+
+
+
+
+### disabled
+
+
+
+
+
+### focusedIcon Renamed from 'icon' to 'focusedIcon' in v5.x
+
+
+
+
+
+### unfocusedIcon Renamed from 'icon' to 'focusedIcon' in v5.x
+
+
+
+
+
+### active
+
+
+
+
+
+### onPress
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### label (required)
+
+
+
+
+
+### icon
+
+
+
+
+
+### active
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### background
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### right
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### title
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### showDivider
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### label (required)
+
+
+
+
+
+### uppercase
+
+
+
+
+
+### background
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### accessibilityState
+
+
+
+
+
+### color
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### disabled
+
+
+
+
+
+### visible
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+### iconMode
+
+
+
+
+
+### animateFrom
+
+
+
+
+
+### extended
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### variant Available in v5.x with theme version 3
+
+
+
+
+
+### style
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### icon
+
+
+
+
+
+### label
+
+
+
+
+
+### uppercase
+
+
+
+
+
+### background
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### accessibilityState
+
+
+
+
+
+### animated
+
+
+
+
+
+### small Deprecated in v.5x - use prop size="small".
+
+
+
+
+
+### color
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### disabled
+
+
+
+
+
+### visible
+
+
+
+
+
+### loading
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+### size Available in v5.x with theme version 3
+
+
+
+
+
+### customSize
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+### variant Available in v5.x with theme version 3
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### ref
+
+
+
+
+
+### actions (required)
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### color
+
+
+
+
+
+### backdropColor
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### toggleStackOnLongPress
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+### enableLongPressWhenStackOpened
+
+
+
+
+
+### open (required)
+
+
+
+
+
+### onStateChange (required)
+
+
+
+
+
+### visible (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### fabStyle
+
+
+
+
+
+### variant Available in v5.x with theme version 3
+
+
+
+
+
+### theme
+
+
+
+
+
+### label
+
+
+
+
+
+### testID
+
+
+
+
+
+### type
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### visible
+
+
+
+
+
+### padding
+
+
+
+
+
+### disabled
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### size (required)
+
+
+
+
+
+### allowFontScaling
+
+
+
+
+
+### source (required)
+
+
+
+
+
+### color
+
+
+
+
+
+### testID
+
+
+
+
+
+### theme
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+### iconColor Renamed from 'color' to 'iconColor' in v5.x
+
+
+
+
+
+### containerColor
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### selected Available in v5.x with theme version 3
+
+
+
+
+
+### size
+
+
+
+
+
+### disabled
+
+
+
+
+
+### animated
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### onPress
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### testID
+
+
+
+
+
+### theme
+
+
+
+
+
+### loading
+
+
+
+
+
+### title (required)
+
+
+
+
+
+### description
+
+
+
+
+
+### left
+
+
+
+
+
+### right
+
+
+
+
+
+### expanded
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### theme
+
+
+
+
+
+### background
+
+
+
+
+
+### style
+
+
+
+
+
+### containerStyle
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+### descriptionStyle
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### titleNumberOfLines
+
+
+
+
+
+### descriptionNumberOfLines
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### descriptionMaxFontSizeMultiplier
+
+
+
+
+
+### id
+
+
+
+
+
+### testID
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### pointerEvents
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### onAccordionPress
+
+
+
+
+
+### expandedId
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### color
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### title (required)
+
+
+
+
+
+### description
+
+
+
+
+
+### left
+
+
+
+
+
+### right
+
+
+
+
+
+### onPress
+
+
+
+
+
+### theme
+
+
+
+
+
+### style
+
+
+
+
+
+### containerStyle
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+### descriptionStyle
+
+
+
+
+
+### titleNumberOfLines
+
+
+
+
+
+### descriptionNumberOfLines
+
+
+
+
+
+### titleEllipsizeMode
+
+
+
+
+
+### descriptionEllipsizeMode
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### descriptionMaxFontSizeMultiplier
+
+
+
+
+
+### testID
+
+
+
+
+
+### title
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### theme
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### style
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### visible (required)
+
+
+
+
+
+### anchor (required)
+
+
+
+
+
+### anchorPosition
+
+
+
+
+
+### statusBarHeight
+
+
+
+
+
+### onDismiss
+
+
+
+
+
+### overlayAccessibilityLabel
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### elevation
+
+
+
+
+
+### mode
+
+
+
+
+
+### theme
+
+
+
+
+
+### keyboardShouldPersistTaps
+
+
+
+
+
+### testID
+
+
+
+
+
+### title (required)
+
+
+
+
+
+### leadingIcon Renamed from 'icon' to 'leadingIcon' in v5.x
+
+
+
+
+
+### trailingIcon Available in v5.x with theme version 3
+
+
+
+
+
+### disabled
+
+
+
+
+
+### dense Available in v5.x with theme version 3
+
+
+
+
+
+### background
+
+
+
+
+
+### onPress
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### containerStyle
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### theme
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### testID
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### accessibilityState
+
+
+
+
+
+### dismissable
+
+
+
+
+
+### dismissableBackButton
+
+
+
+
+
+### onDismiss
+
+
+
+
+
+### overlayAccessibilityLabel
+
+
+
+
+
+### visible
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### contentContainerStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### theme (required)
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/versioned_docs/version-5.x/components/Portal/PortalHost.mdx b/docs/versioned_docs/version-5.x/components/Portal/PortalHost.mdx
new file mode 100644
index 0000000000..f54c0b8609
--- /dev/null
+++ b/docs/versioned_docs/version-5.x/components/Portal/PortalHost.mdx
@@ -0,0 +1,56 @@
+---
+title: Portal.Host
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Portal host renders all of its children `Portal` elements.
+For example, you can wrap a screen in `Portal.Host` to render items above the screen.
+If you're using the `Provider` component, it already includes `Portal.Host`.
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Text } from 'react-native';
+import { Portal } from 'react-native-paper';
+
+const MyComponent = () => (
+ Toggle to grab more examples
+-
+
+
- + Comprehensive Portal example + + +
+
+### children (required)
+
+
+
+
+
+### animatedValue
+
+
+
+
+
+### progress
+
+
+
+
+
+### color
+
+
+
+
+
+### indeterminate
+
+
+
+
+
+### visible
+
+
+
+
+
+### fillStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### status
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+### color
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### status
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+### color
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### onValueChange (required)
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### status
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### color
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### label (required)
+
+
+
+
+
+### disabled
+
+
+
+
+
+### background
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+### color
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### status
+
+
+
+
+
+### style
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+### labelVariant Available in v5.x with theme version 3
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### mode
+
+
+
+
+
+### position
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### placeholder
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### onChangeText
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+### icon
+
+
+
+
+
+### iconColor
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### onIconPress
+
+
+
+
+
+### onClearIconPress
+
+
+
+
+
+### searchAccessibilityLabel
+
+
+
+
+
+### clearIcon
+
+
+
+
+
+### clearAccessibilityLabel
+
+
+
+
+
+### traileringIcon Available in v5.x with theme version 3
+
+
+
+
+
+### traileringIconColor Available in v5.x with theme version 3
+
+
+
+
+
+### traileringRippleColor Available in v5.x with theme version 3
+
+
+
+
+
+### onTraileringIconPress Available in v5.x with theme version 3
+
+
+
+
+
+### traileringIconAccessibilityLabel
+
+
+
+
+
+### right Available in v5.x with theme version 3
+
+
+
+
+
+### showDivider Available in v5.x with theme version 3
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+### inputStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### loading
+
+
+
+
+
+### testID
+
+
+
+
+
+### theme
+
+
+
+
+
+### buttons (required)
+
+
+
+
+
+### density
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### visible (required)
+
+
+
+
+
+### action
+
+
+
+
+
+### icon Available in v5.x with theme version 3
+
+
+
+
+
+### rippleColor Available in v5.x with theme version 3
+
+
+
+
+
+### onIconPress Available in v5.x with theme version 3
+
+
+
+
+
+### iconAccessibilityLabel Available in v5.x with theme version 3
+
+
+
+
+
+### duration
+
+
+
+
+
+### onDismiss (required)
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### wrapperStyle
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+ Toggle to grab more examples
+ +
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### ref
+
+
+
+
+
+### disabled
+
+
+
+
+
+### value
+
+
+
+
+
+### color
+
+
+
+
+
+### onValueChange
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### variant Available in v5.x with theme version 3
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### theme
+
+
+
+
+
+### style
+
+
+
+
+
+### mode
+
+
+
+
+
+### left
+
+
+
+
+
+### right
+
+
+
+
+
+### disabled
+
+
+
+
+
+### label
+
+
+
+
+
+### placeholder
+
+
+
+
+
+### error
+
+
+
+
+
+### onChangeText
+
+
+
+
+
+### selectionColor
+
+
+
+
+
+### cursorColor Android only
+
+
+
+
+
+### underlineColor
+
+
+
+
+
+### activeUnderlineColor
+
+
+
+
+
+### outlineColor
+
+
+
+
+
+### activeOutlineColor
+
+
+
+
+
+### textColor
+
+
+
+
+
+### dense
+
+
+
+
+
+### multiline
+
+
+
+
+
+### numberOfLines Android only
+
+
+
+
+
+### onFocus
+
+
+
+
+
+### onBlur
+
+
+
+
+
+### render
+
+
+
+
+
+### value
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### outlineStyle
+
+
+
+
+
+### underlineStyle
+
+
+
+
+
+### editable
+
+
+
+
+
+
diff --git a/docs/versioned_docs/version-5.x/components/TextInput/TextInputAffix.mdx b/docs/versioned_docs/version-5.x/components/TextInput/TextInputAffix.mdx
new file mode 100644
index 0000000000..74f1fc0434
--- /dev/null
+++ b/docs/versioned_docs/version-5.x/components/TextInput/TextInputAffix.mdx
@@ -0,0 +1,100 @@
+---
+title: TextInput.Affix
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to render a leading / trailing text in the TextInput
+
+
+
+
+ -
+
+
- + Outline overlaps label + + +
- + Long text wraps to a second line + + +
+
+### text (required)
+
+
+
+
+
+### onLayout
+
+
+
+
+
+### onPress
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### textStyle
+
+
+
+
+
+### theme
+
+
+
+
+
+### icon (required) Renamed from 'name' to 'icon` in v5.x
+
+
+
+
+
+### onPress
+
+
+
+
+
+### forceTextInputFocus
+
+
+
+
+
+### color
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### size
+
+
+
+
+
+### iconColor
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### disabled
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### onPress
+
+
+
+
+
+### value
+
+
+
+
+
+### status
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### ref
+
+
+
+
+
+### testID
+
+
+
+
+
+### onValueChange (required)
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### onValueChange (required)
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### enterTouchDelay
+
+
+
+
+
+### leaveTouchDelay
+
+
+
+
+
+### title (required)
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### theme
+
+
+
+
+
+### borderless
+
+
+
+
+
+### background
+
+
+
+
+
+### centered
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### underlayColor
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+ + +Passed source color into the util is translated into tones to automatically provide the range of tones that map to color roles. + + + +_Source: [Material You Color System](https://m3.material.io/styles/color/the-color-system/custom-colors)_ + +### Using schemes + +Once we have copied the color schemes from the generated JSON above, we can use by passing it to the colors in `theme` object as below: + +```jsx +import * as React from 'react'; +import { + MD3LightTheme as DefaultTheme, + PaperProvider, +} from 'react-native-paper'; +import App from './src/App'; + +const theme = { + ...DefaultTheme, + colors: yourGeneratedLightOrDarkScheme.colors, // Copy it from the color codes scheme and then use it here +}; + +export default function Main() { + return ( +
+In contrast to light theme, dark theme by default uses `surface` colour instead of `primary` on large components like `AppBar` or `BottomNavigation`.
+The dark theme adds a white overlay with opacity depending on elevation of surfaces. It uses it for the better accentuation of surface elevation. Using only shadow is highly imperceptible on dark surfaces. + +We are aware that users often use dark theme in their own ways and may not want to use the default dark theme features from the guidelines.
+That's why if you are using dark theme you can switch between two dark theme `mode`s: + +- `exact` where everything is like it was before. `Appbar` and `BottomNavigation` will still use primary colour by default.
+- `adaptive` where we follow [Material design guidelines](https://material.io/design/color/dark-theme.html), the surface will use white overlay with opacity to show elevation, `Appbar` and `BottomNavigation` will use surface colour as a background. + +If you don't use a custom theme, Paper will automatically change between the default theme and the default dark theme, depending on device settings. + +Otherwise, your custom theme will need to handle it manually, using React Native's [Appearance API](https://reactnative.dev/docs/appearance). + +## Gotchas + +The `PaperProvider` exposes the theme to the components via [React's context API](https://reactjs.org/docs/context.html), which means that the component must be in the same tree as the `PaperProvider`. Some React Native components will render a different tree such as a `Modal`, in which case the components inside the `Modal` won't be able to access the theme. The work around is to get the theme using the `withTheme` HOC and pass it down to the components as props, or expose it again with the exported `ThemeProvider` component. + +The `Modal` component from the library already handles this edge case, so you won't need to do anything. diff --git a/docs/versioned_docs/version-5.x/guides/03-icons.mdx b/docs/versioned_docs/version-5.x/guides/03-icons.mdx new file mode 100644 index 0000000000..015a1bee1b --- /dev/null +++ b/docs/versioned_docs/version-5.x/guides/03-icons.mdx @@ -0,0 +1,169 @@ +--- +title: Icons +--- + +import TabItem from '@theme/TabItem'; +import Tabs from '@theme/Tabs'; +import IconsList from '@site/src/components/IconsList.tsx'; + +# Icons + +## Configuring icons + +Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's a vanilla React Native project, you need to link the library as described in the [getting started guide](./01-getting-started.md). + +:::note +If you opted out of vector icons support using [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require), you won't be able to use icon names for the icon prop. Some components may not look correct without vector icons and might need extra configuration. +::: + +## Using the `icon` prop + +Many components such as `Button` accept an `icon` prop which is used to display an icon. The `icon` prop supports the following types of values: + +### 1. An icon name + +You can pass the name of an icon from [`MaterialDesignIcons`](https://pictogrammers.com/library/mdi/). This will use the [`@react-native-vector-icons/material-design-icons`](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons) library to display the icon. + +Example: + +```js + +``` + +:::note +Choose the correct tab below based on your `react-native-vector-icons` version: + +- Use **latest** tab if you're using the latest version of `@react-native-vector-icons/material-design-icons` +- Use **10.x** tab if you're still using the old single package `react-native-vector-icons`, version `10.x` + +If you are using `@expo/vector-icons`, please check their [searchable list of icons](https://icons.expo.fyi/). +::: + +
+
+ See the list of supported icons
+
+
+ See the list of supported icons
+
+
+
+* #### Headline
+
+
+
+ ```json
+ "displaySmall": {
+ "fontFamily": "Font",
+ "fontSize": 36,
+ "fontWeight": "400",
+ "letterSpacing": 0,
+ "lineHeight": 44,
+ }
+ ```
+
+
+
+
+
+ ```json
+ "displayMedium": {
+ "fontFamily": "Font",
+ "fontSize": 45,
+ "fontWeight": "400",
+ "letterSpacing": 0,
+ "lineHeight": 52,
+ }
+ ```
+
+
+
+
+
+ ```json
+ "displayLarge": {
+ "fontFamily": "Font",
+ "fontSize": 57,
+ "fontWeight": "400",
+ "letterSpacing": 0,
+ "lineHeight": 64,
+ }
+ ```
+
+
+
+
+
+* #### Title
+
+
+
+ ```json
+ "headlineSmall": {
+ "fontFamily": "Font",
+ "fontSize": 24,
+ "fontWeight": "400",
+ "letterSpacing": 0,
+ "lineHeight": 32,
+ }
+ ```
+
+
+
+
+
+ ```json
+ "headlineMedium": {
+ "fontFamily": "Font",
+ "fontSize": 28,
+ "fontWeight": "400",
+ "letterSpacing": 0,
+ "lineHeight": 36,
+ }
+ ```
+
+
+
+
+
+ ```json
+ "headlineLarge": {
+ "fontFamily": "Font",
+ "fontSize": 32,
+ "fontWeight": "400",
+ "letterSpacing": 0,
+ "lineHeight": 40,
+ }
+ ```
+
+
+
+
+
+* #### Label
+
+
+
+ ```json
+ "titleSmall": {
+ "fontFamily": "Font",
+ "fontSize": 14,
+ "fontWeight": "500",
+ "letterSpacing": 0.1,
+ "lineHeight": 20,
+ }
+ ```
+
+
+
+
+
+ ```json
+ "titleMedium": {
+ "fontFamily": "Font",
+ "fontSize": 16,
+ "fontWeight": "500",
+ "letterSpacing": 0.15,
+ "lineHeight": 24,
+ }
+ ```
+
+
+
+
+
+ ```json
+ "titleLarge": {
+ "fontFamily": "Font",
+ "fontSize": 22,
+ "fontWeight": "400",
+ "letterSpacing": 0,
+ "lineHeight": 28,
+ }
+ ```
+
+
+
+
+
+* #### Body
+
+
+
+ ```json
+ "labelSmall": {
+ "fontFamily": "Font",
+ "fontSize": 11,
+ "fontWeight": "500",
+ "letterSpacing": 0.5,
+ "lineHeight": 16,
+ }
+ ```
+
+
+
+
+
+ ```json
+ "labelMedium": {
+ "fontFamily": "Font",
+ "fontSize": 12,
+ "fontWeight": "500",
+ "letterSpacing": 0.5,
+ "lineHeight": 16,
+ }
+ ```
+
+
+
+
+
+ ```json
+ "labelLarge": {
+ "fontFamily": "Font",
+ "fontSize": 14,
+ "fontWeight": "500",
+ "letterSpacing": 0.1,
+ "lineHeight": 20,
+ }
+ ```
+
+
+
+
+
+:::info
+If any component uses Paper's `Text` component, without specified variant, then `default` variant is applied:
+
+```json
+"default": {
+ "fontFamily": "FontFamily",
+ "fontWeight": "400",
+ "letterSpacing": 0,
+},
+```
+:::
+
+#### Using `configureFonts` helper
+
+* If there is a need to create a custom font variant, prepare its config object including required all fonts properties. After that, defined `fontConfig` has to be passed under the `variant` name as `config` into the params object:
+
+```js
+import * as React from 'react';
+import { configureFonts, MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const fontConfig = {
+ customVariant: {
+ fontFamily: Platform.select({
+ web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+ ios: 'System',
+ default: 'sans-serif',
+ }),
+ fontWeight: '400',
+ letterSpacing: 0.5,
+ lineHeight: 22,
+ fontSize: 20,
+ }
+};
+
+const theme = {
+ ...MD3LightTheme,
+ fonts: configureFonts({config: fontConfig}),
+};
+
+export default function Main() {
+ return (
+
+
+ ```json
+ "bodySmall": {
+ "fontFamily": "Font",
+ "fontSize": 12,
+ "fontWeight": "400",
+ "letterSpacing": 0.4,
+ "lineHeight": 16,
+ }
+ ```
+
+
+
+
+
+ ```json
+ "bodyMedium": {
+ "fontFamily": "Font",
+ "fontSize": 14,
+ "fontWeight": "400",
+ "letterSpacing": 0.25,
+ "lineHeight": 20,
+ }
+ ```
+
+
+
+
+
+ ```json
+ "bodyLarge": {
+ "fontFamily": "Font",
+ "fontSize": 16,
+ "fontWeight": "400",
+ "letterSpacing": 0.15,
+ "lineHeight": 24,
+ }
+ ```
+
+
+
+
diff --git a/docs/versioned_docs/version-5.x/guides/05-react-native-web.md b/docs/versioned_docs/version-5.x/guides/05-react-native-web.md
new file mode 100644
index 0000000000..af0331a7d9
--- /dev/null
+++ b/docs/versioned_docs/version-5.x/guides/05-react-native-web.md
@@ -0,0 +1,282 @@
+---
+title: Using on the Web
+---
+
+# Using on the Web
+
+## Pre-requisites
+
+Make sure that you have followed the getting started guide and have `react-native-paper` installed and configured before following this guide.
+
+We're going to use [react-native-web](https://github.com/necolas/react-native-web) and [webpack](https://webpack.js.org/) to use React Native Paper on the web, so let's install them as well.
+
+To install `react-native-web`, run:
+
+```bash npm2yarn
+npm install react-native-web react-dom react-art
+```
+
+### Using CRA ([Create React App](https://github.com/facebook/create-react-app))
+
+Install [`react-app-rewired`](https://github.com/timarney/react-app-rewired) to override `webpack` configuration:
+
+```bash npm2yarn
+npm install --save-dev react-app-rewired
+```
+
+[Configure `babel-loader`](#2-configure-babel-loader) using a new file called `config-overrides.js`:
+
+```js
+module.exports = function override(config, env) {
+ config.module.rules.push({
+ test: /\.js$/,
+ exclude: /node_modules[/\\](?!react-native-vector-icons)/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ // Disable reading babel configuration
+ babelrc: false,
+ configFile: false,
+
+ // The configuration for compilation
+ presets: [
+ ['@babel/preset-env', { useBuiltIns: 'usage' }],
+ '@babel/preset-react',
+ '@babel/preset-flow',
+ '@babel/preset-typescript',
+ ],
+ plugins: [
+ '@babel/plugin-proposal-class-properties',
+ '@babel/plugin-proposal-object-rest-spread',
+ ],
+ },
+ },
+ });
+
+ return config;
+};
+```
+
+Change your script in `package.json`:
+
+```diff
+/* package.json */
+
+ "scripts": {
+- "start": "react-scripts start",
++ "start": "react-app-rewired start",
+- "build": "react-scripts build",
++ "build": "react-app-rewired build",
+- "test": "react-scripts test --env=jsdom",
++ "test": "react-app-rewired test --env=jsdom"
+}
+```
+
+### Custom webpack setup
+
+To install `webpack`, run:
+
+```bash npm2yarn
+npm install --save-dev webpack webpack-cli webpack-dev-server
+```
+
+If you don't have a webpack config in your project, copy the following to `webpack.config.js` get started:
+
+```js
+const path = require('path');
+
+module.exports = {
+ mode: 'development',
+
+ // Path to the entry file, change it according to the path you have
+ entry: path.join(__dirname, 'App.js'),
+
+ // Path for the output files
+ output: {
+ path: path.join(__dirname, 'dist'),
+ filename: 'app.bundle.js',
+ },
+
+ // Enable source map support
+ devtool: 'source-map',
+
+ // Loaders and resolver config
+ module: {
+ rules: [],
+ },
+ resolve: {},
+
+ // Development server config
+ devServer: {
+ contentBase: [path.join(__dirname, 'public')],
+ historyApiFallback: true,
+ },
+};
+```
+
+Also create a folder named `public` and add the following file named `index.html`:
+
+```html
+
+
+
+
+
+
+
+ Variable fonts examples
+ +
+
+:::info
+To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](https://reactnavigation.org/docs/getting-started):
+:::
+
+> 👉 For a complete example please visit `createMaterialBottomTabNavigator` [snack](https://snack.expo.dev/@react-native-paper/creatematerialbottomtabnavigator)
+
+## API Definition
+
+To use this tab navigator, import it from `react-native-paper/react-navigation`:
+
+```js
+import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
+
+const Tab = createMaterialBottomTabNavigator();
+
+function MyTabs() {
+ return (
+ In v5.x works only with theme version 2.
+
+Color for the tab bar when the tab corresponding to the screen is active. Used for the ripple effect. This is only supported when `shifting` is `true`.
+
+#### `tabBarLabel`
+
+Title string of a tab displayed in the tab bar. When undefined, scene `title` is used. To hide, see `labeled` option in the previous section.
+
+#### `tabBarBadge`
+
+Badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
+
+#### `tabBarAccessibilityLabel`
+
+Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab.
+
+#### `tabBarTestID`
+
+ID to locate this tab button in tests.
+
+### Events
+
+The navigator can [emit events](https://reactnavigation.org/docs/navigation-events) on certain actions. Supported events are:
+
+#### `tabPress`
+
+This event is fired when the user presses the tab button for the current screen in the tab bar. By default a tab press does several things:
+
+- If the tab is not focused, tab press will focus that tab
+- If the tab is already focused:
+ - If the screen for the tab renders a scroll view, you can use [`useScrollToTop`](https://reactnavigation.org/docs/use-scroll-to-top) to scroll it to top
+ - If the screen for the tab renders a stack navigator, a `popToTop` action is performed on the stack
+
+To prevent the default behavior, you can call `event.preventDefault`:
+
+```js
+React.useEffect(() => {
+ const unsubscribe = navigation.addListener('tabPress', (e) => {
+ // Prevent default behavior
+
+ e.preventDefault();
+ // Do something manually
+ // ...
+ });
+
+ return unsubscribe;
+}, [navigation]);
+```
+
+### Helpers
+
+The tab navigator adds the following methods to the navigation prop:
+
+#### `jumpTo`
+
+Navigates to an existing screen in the tab navigator. The method accepts following arguments:
+
+- `name` - _string_ - Name of the route to jump to.
+- `params` - _object_ - Screen params to pass to the destination route.
+
+
+
+```js
+navigation.jumpTo('Profile', { name: 'Michaś' });
+```
+
+## Example
+
+```js
+import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
+
+const Tab = createMaterialBottomTabNavigator();
+
+function MyTabs() {
+ return (
+ 
+
+To navigate from `HomeScreen` to `DetailsScreen` we can use the navigation object provided by `Stack.Screen` component. Every component rendered by `Stack.Screen` has an access to the navigation object via props. Let's modify our `HomeScreen` component:
+
+```js
+import { Button } from 'react-native-paper';
+
+function HomeScreen({ navigation }) {
+ return (
+ 
+
+As you can see, we can already navigate between two screens. In the next steps, we will show you how to use Paper's `AppBar` instead of the default header.
+
+### Adding `AppBar`
+
+We can customize Stack's header by passing custom component:
+
+```js
+export default function App() {
+ return (
+ 
+
+### Adding more items to `Appbar`
+
+Another interesting pattern that can be implemented with `react-native-paper` and `react-navigation` is a "menu" button. Thanks to the `Menu` component we can add a nice looking pop-up to our `Appbar`. To implement this feature we need to make a couple of changes in `CustomNavigationBar`:
+- Render a `Menu` component
+- Pass `Appbar.Action` to the anchor prop
+- Add a state to control `Menu` visibility
+
+:::note
+To have properly working `Menu` component, remember to wrap your root component with the `PaperProvider`:
+
+```js
+import { PaperProvider } from 'react-native-paper';
+
+// ...
+
+
+
+That's all we need! We have app bar that contains everything we need to navigate through screens and access an additional menu on the main screen. As you can see, with Material design `Appbar` provided by `react-native-paper` used together with `react-navigation` we can easily create an app that looks and works great.
+
+Grab the Expo [snack](https://snack.expo.dev/@react-native-paper/integrate-appbar-with-react-navigation) if you want to check the whole code!
diff --git a/docs/versioned_docs/version-5.x/guides/10-migration-guide-to-5.0.md b/docs/versioned_docs/version-5.x/guides/10-migration-guide-to-5.0.md
new file mode 100644
index 0000000000..670b9f7ab5
--- /dev/null
+++ b/docs/versioned_docs/version-5.x/guides/10-migration-guide-to-5.0.md
@@ -0,0 +1,656 @@
+---
+title: Introducing v5 with Material You
+---
+
+React Native Paper v5 is all about adopting the new Material Design 3 aka Material You. It was released in October 2021 after intense work and effort to make Material You follow a more expressive approach to design.
+
+Paper now supports both Material Design 2 and 3 through the configuration described in [Versioning](#versioning) and is compatible with a handful of API changes.
+
+# Migration guide to Material You 5.0
+
+Version 5.0 brings support for the next Material Design iteration branded as Material You (in fact being Material Design v3 or in short MD3) into the `react-native-paper` library. All the components were refined according to the official [design kit on figma](https://www.figma.com/community/file/1035203688168086460) and adjusted in terms of visuals by changes in colors, typography and animations.
+
+Below you can find the most important information about the components whose API may have changed API has been changed due to supporting new props, renaming existing ones or some deprecations. Hopefully, based on the presented required changes, migration to the latest version should be smooth. Enjoy!
+
+### Installation
+
+* The `v5` has been oficially released as a stable version, which means it will be installed by default from the `npm`. In order to do that, open a Terminal in your project's folder and run:
+
+```bash npm2yarn
+npm install react-native-paper
+```
+
+* From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area.
+
+```bash npm2yarn
+npm install react-native-safe-area-context
+```
+
+Additionaly for `iOS` platform there is a requirement to link the native parts of the library:
+
+```bash
+npx pod-install
+```
+
+## Theming
+
+### Versioning
+
+Introducing Material You (MD3) into `react-native-paper` doesn't mean dropping previous Material Design (MD2)! On the contrary, both of them will be supported, however, not simultaneously. To specify which design system components should follow in the app, there is a newly created property in [the theme](https://callstack.github.io/react-native-paper/docs/guides/theming#theme-properties) named `version` that accepts one of two values:
+
+* 3 – (default) new Material You (MD3),
+* 2 - previous Material Design (MD2).
+
+```js
+theme: {
+ /* ... */
+ version: 3 | 2
+}
+```
+
+Read more about using Material Design 2 in our [Material Design 2 theming guide](https://callstack.github.io/react-native-paper/docs/guides/theming#material-design-2)
+
+### Colors
+
+New theme introduces a new color palette along with new namings reflecting design color tokens, but written in camel case. Palette contains a set of five key colors, where primary, secondary and tertiary are classified into accent colors. The second group of colors is neutral and neutral variant colors used for defining surface or background roles as well as specifying high and medium emphasis text and icons. Additionally, the color system includes a semantic color role for error.
+
+Each accent and error colors has a group of related tones. The tones are mapped to roles that create contrast and visual interest when applied to elements in the UI.
+
+:::note
+Dynamic colors are not supported yet
+:::
+
+
+
+Colors theme structure should follow the default palette and contain the following properties:
+
+```js
+theme: {
+ /* ... */
+ colors: {
+ primary,
+ primaryContainer,
+ secondary,
+ secondaryContainer,
+ tertiary,
+ tertiaryContainer,
+ surface,
+ surfaceVariant,
+ surfaceDisabled,
+ background,
+ error,
+ errorContainer,
+ onPrimary,
+ onPrimaryContainer,
+ onSecondary,
+ onSecondaryContainer,
+ onTertiary,
+ onTertiaryContainer,
+ onSurface,
+ onSurfaceVariant,
+ onSurfaceDisabled,
+ onError,
+ onErrorContainer,
+ onBackground,
+ outline,
+ shadow,
+ inverseOnSurface,
+ inverseSurface,
+ inversePrimary,
+ backdrop,
+ elevation: {
+ level0,
+ level1,
+ level2,
+ level3,
+ level4,
+ level5
+ }
+ }
+}
+```
+
+👉 You can find more about color on the [Material You website](https://m3.material.io/styles/color/the-color-system/key-colors-tones)
+
+## Typography
+
+A new way of approaching typography introduces one component `
+
+### animating
+
+
+
+
+
+### color
+
+
+
+
+
+### size
+
+
+
+
+
+### hidesWhenStopped
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### dark
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+### elevated Available in v5.x with theme version 3
+
+
+
+
+
+### safeAreaInsets
+
+
+
+
+
+### theme
+
+
+
+
+
+### style
+
+
+
+
+
+### color
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### size
+
+
+
+
+
+### disabled
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### onPress
+
+
+
+
+
+### isLeading Available in v5.x with theme version 3
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### theme
+
+
+
+
+
+### color
+
+
+
+
+
+### size
+
+
+
+
+
+### disabled
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### onPress
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### title (required)
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+### titleRef
+
+
+
+
+
+### onPress
+
+
+
+
+
+### disabled
+
+
+
+
+
+### color
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### dark
+
+
+
+
+
+### statusBarHeight
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+### elevated Available in v5.x with theme version 3
+
+
+
+
+
+### theme
+
+
+
+
+
+### style
+
+
+
+
+
+### testID
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### size
+
+
+
+
+
+### color
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### source (required)
+
+
+
+
+
+### size
+
+
+
+
+
+### style
+
+
+
+
+
+### onError
+
+
+
+
+
+### onLayout
+
+
+
+
+
+### onLoad
+
+
+
+
+
+### onLoadEnd
+
+
+
+
+
+### onLoadStart
+
+
+
+
+
+### onProgress
+
+
+
+
+
+### theme
+
+
+
+
+
+### label (required)
+
+
+
+
+
+### size
+
+
+
+
+
+### color
+
+
+
+
+
+### style
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### theme
+
+
+
+
+
+### visible
+
+
+
+
+
+### children
+
+
+
+
+
+### size
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### theme
+
+
+
+
+
+### visible (required)
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### icon
+
+
+
+
+
+### actions
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### theme
+
+
+
+
+
+### onShowAnimationFinished
+
+
+
+
+
+### onHideAnimationFinished
+
+
+
+
+
+### shifting
+
+
+
+
+
+### labeled
+
+
+
+
+
+### compact
+
+
+
+
+
+### navigationState (required)
+
+
+
+
+
+### onIndexChange (required)
+
+
+
+
+
+### renderScene (required)
+
+
+
+
+
+### renderIcon
+
+
+
+
+
+### renderLabel
+
+
+
+
+
+### renderTouchable
+
+
+
+
+
+### getAccessibilityLabel
+
+
+
+
+
+### getBadge
+
+
+
+
+
+### getLabelText
+
+
+
+
+
+### getLazy
+
+
+
+
+
+### getTestID
+
+
+
+
+
+### onTabPress
+
+
+
+
+
+### onTabLongPress
+
+
+
+
+
+### activeColor
+
+
+
+
+
+### inactiveColor
+
+
+
+
+
+### sceneAnimationEnabled
+
+
+
+
+
+### sceneAnimationType
+
+
+
+
+
+### sceneAnimationEasing
+
+
+
+
+
+### keyboardHidesNavigationBar
+
+
+
+
+
+### safeAreaInsets
+
+
+
+
+
+### barStyle
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### activeIndicatorStyle
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### shifting
+
+
+
+
+
+### labeled
+
+
+
+
+
+### compact
+
+
+
+
+
+### navigationState (required)
+
+
+
+
+
+### renderIcon
+
+
+
+
+
+### renderLabel
+
+
+
+
+
+### renderTouchable
+
+
+
+
+
+### getAccessibilityLabel
+
+
+
+
+
+### getBadge
+
+
+
+
+
+### getLabelText
+
+
+
+
+
+### getTestID
+
+
+
+
+
+### onTabPress (required)
+
+
+
+
+
+### onTabLongPress
+
+
+
+
+
+### activeColor
+
+
+
+
+
+### inactiveColor
+
+
+
+
+
+### animationEasing
+
+
+
+
+
+### keyboardHidesNavigationBar
+
+
+
+
+
+### safeAreaInsets
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### activeIndicatorStyle
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### mode
+
+
+
+
+
+### dark
+
+
+
+
+
+### compact
+
+
+
+
+
+### buttonColor
+
+
+
+
+
+### textColor
+
+
+
+
+
+### loading
+
+
+
+
+
+### icon
+
+
+
+
+
+### disabled
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### uppercase
+
+
+
+
+
+### background
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### accessibilityHint
+
+
+
+
+
+### accessibilityRole
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### style
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+### theme
+
+
+
+
+
+### touchableRef
+
+
+
+
+
+### ref
+
+
+
+
+
+### testID
+
+
+
+
+
+### mode
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+### disabled
+
+
+
+
+
+### elevation
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### accessible
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### title (required)
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+### titleNumberOfLines
+
+
+
+
+
+### titleVariant Available in v5.x with theme version 3
+
+
+
+
+
+### subtitle
+
+
+
+
+
+### subtitleStyle
+
+
+
+
+
+### subtitleNumberOfLines
+
+
+
+
+
+### subtitleVariant Available in v5.x with theme version 3
+
+
+
+
+
+### left
+
+
+
+
+
+### leftStyle
+
+
+
+
+
+### right
+
+
+
+
+
+### rightStyle
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### subtitleMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### status (required)
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+### color
+
+
+
+
+
+### error
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### style
+
+
+
+
+
+### status (required)
+
+
+
+
+
+### disabled
+
+
+
+
+
+### label (required)
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### background
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+### color
+
+
+
+
+
+### style
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+### labelVariant Available in v5.x with theme version 3
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### position
+
+
+
+
+
+### hitSlop
+
+
+
+ -
+
- Present multiple options +
- Represent attributes active or chosen +
- Present filter options +
- Trigger actions related to primary content +
+
+### mode
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### icon
+
+
+
+
+
+### avatar
+
+
+
+
+
+### closeIcon
+
+
+
+
+
+### selected
+
+
+
+
+
+### selectedColor
+
+
+
+
+
+### showSelectedOverlay Available in v5.x with theme version 3
+
+
+
+
+
+### showSelectedCheck
+
+
+
+
+
+### disabled
+
+
+
+
+
+### background
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### closeIconAccessibilityLabel
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+### onClose
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+### compact Available in v5.x with theme version 3
+
+
+
+
+
+### elevated Available in v5.x with theme version 3
+
+
+
+
+
+### textStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### ellipsizeMode
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### accessibilityRole
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### numeric
+
+
+
+
+
+### onPress
+
+
+
+
+
+### style
+
+
+
+
+
+### textStyle
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### testID
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### page (required)
+
+
+
+
+
+### numberOfPages (required)
+
+
+
+
+
+### onPageChange (required)
+
+
+
+
+
+### showFastPaginationControls
+
+
+
+
+
+### theme
+
+
+
+
+
+### numberOfItemsPerPage
+
+
+
+
+
+### numberOfItemsPerPageList
+
+
+
+
+
+### onItemsPerPageChange
+
+
+
+
+
+### selectPageDropdownLabel
+
+
+
+
+
+### selectPageDropdownAccessibilityLabel
+
+
+
+
+
+### label
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### style
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### onPress
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### pointerEvents
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### numeric
+
+
+
+
+
+### sortDirection
+
+
+
+
+
+### numberOfLines
+
+
+
+
+
+### onPress
+
+
+
+
+
+### style
+
+
+
+
+
+### textStyle
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### theme
+
+
+
+
+
+### dismissable
+
+
+
+
+
+### dismissableBackButton
+
+
+
+
+
+### onDismiss
+
+
+
+
+
+### visible
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### color
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### size
+
+
+
+
+
+### theme
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### leftInset Renamed from 'inset' to 'leftInset` in v5.x
+
+
+
+
+
+### horizontalInset Available in v5.x with theme version 3
+
+
+
+
+
+### bold Available in v5.x with theme version 3
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### label
+
+
+
+
+
+### badge
+
+
+
+
+
+### disabled
+
+
+
+
+
+### focusedIcon Renamed from 'icon' to 'focusedIcon' in v5.x
+
+
+
+
+
+### unfocusedIcon Renamed from 'icon' to 'focusedIcon' in v5.x
+
+
+
+
+
+### active
+
+
+
+
+
+### onPress
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### label (required)
+
+
+
+
+
+### icon
+
+
+
+
+
+### active
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### background
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### right
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### title
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### showDivider
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### variant
+
+
+
+
+
+### containerColor
+
+
+
+
+
+### contentColor
+
+
+
+
+
+### size
+
+
+
+
+
+### visible
+
+
+
+
+
+### onPress
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### accessibilityState
+
+
+
+
+
+### background
+
+
+
+
+
+### style
+
+
+
+
+
+### testID
+
+
+
+
+
+### theme
+
+
+
+
+
+### ref
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### label (required)
+
+
+
+
+
+### variant
+
+
+
+
+
+### containerColor
+
+
+
+
+
+### contentColor
+
+
+
+
+
+### size
+
+
+
+
+
+### expanded (required)
+
+
+
+
+
+### visible
+
+
+
+
+
+### onPress
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### accessibilityState
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### background
+
+
+
+
+
+### style
+
+
+
+
+
+### testID
+
+
+
+
+
+### theme
+
+
+
+
+
+### ref
+
+
+
+
+
+### expanded (required)
+
+
+
+
+
+### onDismiss (required)
+
+
+
+
+
+### trigger (required)
+
+
+
+
+
+### alignment
+
+
+
+
+
+### closeIcon
+
+
+
+
+
+### items (required)
+
+
+
+
+
+### testID
+
+
+
+
+
+### theme
+
+
+
+
+
+### size (required)
+
+
+
+
+
+### allowFontScaling
+
+
+
+
+
+### source (required)
+
+
+
+
+
+### color
+
+
+
+
+
+### testID
+
+
+
+
+
+### theme
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+### iconColor Renamed from 'color' to 'iconColor' in v5.x
+
+
+
+
+
+### containerColor
+
+
+
+
+
+### selected
+
+
+
+
+
+### size
+
+
+
+
+
+### disabled
+
+
+
+
+
+### animated
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### onPress
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### testID
+
+
+
+
+
+### theme
+
+
+
+
+
+### loading
+
+
+
+
+
+### title (required)
+
+
+
+
+
+### description
+
+
+
+
+
+### left
+
+
+
+
+
+### right
+
+
+
+
+
+### expanded
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### delayLongPress
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### theme
+
+
+
+
+
+### background
+
+
+
+
+
+### style
+
+
+
+
+
+### containerStyle
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+### descriptionStyle
+
+
+
+
+
+### titleNumberOfLines
+
+
+
+
+
+### descriptionNumberOfLines
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### descriptionMaxFontSizeMultiplier
+
+
+
+
+
+### id
+
+
+
+
+
+### testID
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### pointerEvents
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### onAccordionPress
+
+
+
+
+
+### expandedId
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### color
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### title (required)
+
+
+
+
+
+### description
+
+
+
+
+
+### left
+
+
+
+
+
+### right
+
+
+
+
+
+### onPress
+
+
+
+
+
+### theme
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### containerStyle
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+### descriptionStyle
+
+
+
+
+
+### titleNumberOfLines
+
+
+
+
+
+### descriptionNumberOfLines
+
+
+
+
+
+### titleEllipsizeMode
+
+
+
+
+
+### descriptionEllipsizeMode
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### descriptionMaxFontSizeMultiplier
+
+
+
+
+
+### testID
+
+
+
+
+
+### title
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### theme
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### style
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### visible (required)
+
+
+
+
+
+### anchor (required)
+
+
+
+
+
+### anchorPosition
+
+
+
+
+
+### statusBarHeight
+
+
+
+
+
+### onDismiss
+
+
+
+
+
+### overlayAccessibilityLabel
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### elevation
+
+
+
+
+
+### mode
+
+
+
+
+
+### theme
+
+
+
+
+
+### keyboardShouldPersistTaps
+
+
+
+
+
+### testID
+
+
+
+
+
+### title (required)
+
+
+
+
+
+### leadingIcon Renamed from 'icon' to 'leadingIcon' in v5.x
+
+
+
+
+
+### trailingIcon Available in v5.x with theme version 3
+
+
+
+
+
+### disabled
+
+
+
+
+
+### dense Available in v5.x with theme version 3
+
+
+
+
+
+### background
+
+
+
+
+
+### onPress
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### style
+
+
+
+
+
+### containerStyle
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### titleStyle
+
+
+
+
+
+### theme
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### testID
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### accessibilityState
+
+
+
+
+
+### dismissable
+
+
+
+
+
+### dismissableBackButton
+
+
+
+
+
+### onDismiss
+
+
+
+
+
+### overlayAccessibilityLabel
+
+
+
+
+
+### visible
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### contentContainerStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### theme (required)
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/versioned_docs/version-6.x/components/Portal/PortalHost.mdx b/docs/versioned_docs/version-6.x/components/Portal/PortalHost.mdx
new file mode 100644
index 0000000000..f54c0b8609
--- /dev/null
+++ b/docs/versioned_docs/version-6.x/components/Portal/PortalHost.mdx
@@ -0,0 +1,56 @@
+---
+title: Portal.Host
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Portal host renders all of its children `Portal` elements.
+For example, you can wrap a screen in `Portal.Host` to render items above the screen.
+If you're using the `Provider` component, it already includes `Portal.Host`.
+
+
+
+
+
+## Usage
+```js
+import * as React from 'react';
+import { Text } from 'react-native';
+import { Portal } from 'react-native-paper';
+
+const MyComponent = () => (
+ Toggle to grab more examples
+-
+
+
- + Comprehensive Portal example + + +
+
+### children (required)
+
+
+
+
+
+### animatedValue
+
+
+
+
+
+### progress
+
+
+
+
+
+### color
+
+
+
+
+
+### indeterminate
+
+
+
+
+
+### visible
+
+
+
+
+
+### fillStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### status
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+### color
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### status
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+### color
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### onValueChange (required)
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### status
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### color
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### label (required)
+
+
+
+
+
+### disabled
+
+
+
+
+
+### background
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### uncheckedColor
+
+
+
+
+
+### color
+
+
+
+
+
+### status
+
+
+
+
+
+### style
+
+
+
+
+
+### labelStyle
+
+
+
+
+
+### labelVariant Available in v5.x with theme version 3
+
+
+
+
+
+### labelMaxFontSizeMultiplier
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### mode
+
+
+
+
+
+### position
+
+
+
+
+
+### hitSlop
+
+
+
+
+
+### placeholder
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### onChangeText
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+### icon
+
+
+
+
+
+### iconColor
+
+
+
+
+
+### onIconPress
+
+
+
+
+
+### onClearIconPress
+
+
+
+
+
+### searchAccessibilityLabel
+
+
+
+
+
+### clearIcon
+
+
+
+
+
+### clearAccessibilityLabel
+
+
+
+
+
+### traileringIcon Available in v5.x with theme version 3
+
+
+
+
+
+### traileringIconColor Available in v5.x with theme version 3
+
+
+
+
+
+### onTraileringIconPress
+
+
+
+
+
+### traileringIconAccessibilityLabel
+
+
+
+
+
+### right Available in v5.x with theme version 3
+
+
+
+
+
+### showDivider Available in v5.x with theme version 3
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+### inputStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### loading
+
+
+
+
+
+### testID
+
+
+
+
+
+### theme
+
+
+
+
+
+### ref
+
+
+
+
+
+### buttons (required)
+
+
+
+
+
+### density
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### visible (required)
+
+
+
+
+
+### action
+
+
+
+
+
+### icon Available in v5.x with theme version 3
+
+
+
+
+
+### onIconPress
+
+
+
+
+
+### iconAccessibilityLabel Available in v5.x with theme version 3
+
+
+
+
+
+### duration
+
+
+
+
+
+### onDismiss (required)
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+### maxFontSizeMultiplier
+
+
+
+
+
+### wrapperStyle
+
+
+
+
+
+### contentStyle
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+
+
+
+ ## Theme colors
+
+ Toggle to grab more examples
+ +
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### elevation Available in v5.x with theme version 3
+
+
+
+
+
+### mode Available in v5.x with theme version 3
+
+
+
+
+
+### theme
+
+
+
+
+
+### testID
+
+
+
+
+
+### ref
+
+
+
+
+
+### value
+
+
+
+
+
+### onValueChange
+
+
+
+
+
+### disabled
+
+
+
+
+
+### checkedIcon
+
+
+
+
+
+### uncheckedIcon
+
+
+
+
+
+### style
+
+
+
+
+
+### testID
+
+
+
+
+
+### theme
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### variant Available in v5.x with theme version 3
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### theme
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### ref
+
+
+
+
+
+### variant
+
+
+
+
+
+### error
+
+
+
+
+
+### label
+
+
+
+
+
+### supportingText
+
+
+
+
+
+### counter
+
+
+
+
+
+### disabled
+
+
+
+
+
+### prefix
+
+
+
+
+
+### suffix
+
+
+
+
+
+### theme
+
+
+
+
+
+### startAccessory
+
+
+
+
+
+### endAccessory
+
+
+
+
+
+### render
+
+
+
+
+
+### style (required)
+
+
+
+
+
+### multiline (required)
+
+
+
+
+
+### disabled (required)
+
+
+
+
+
+### error (required)
+
+
+
+
+
+### icon (required)
+
+
+
+
+
+### size
+
+
+
+
+
+### iconColor
+
+
+
+
+
+### disabled
+
+
+
+
+
+### accessibilityLabel
+
+
+
+
+
+### onPress
+
+
+
+
+
+### value
+
+
+
+
+
+### status
+
+
+
+
+
+### style
+
+
+
+
+
+### theme
+
+
+
+
+
+### ref
+
+
+
+
+
+### testID
+
+
+
+
+
+### onValueChange (required)
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### onValueChange (required)
+
+
+
+
+
+### value (required)
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### enterTouchDelay
+
+
+
+
+
+### leaveTouchDelay
+
+
+
+
+
+### title (required)
+
+
+
+
+
+### titleMaxFontSizeMultiplier
+
+
+
+
+
+### theme
+
+
+
+
+
+### borderless
+
+
+
+
+
+### background
+
+
+
+
+
+### centered
+
+
+
+
+
+### disabled
+
+
+
+
+
+### onPress
+
+
+
+
+
+### onLongPress
+
+
+
+
+
+### onPressIn
+
+
+
+
+
+### onPressOut
+
+
+
+
+
+### rippleColor
+
+
+
+
+
+### underlayColor
+
+
+
+
+
+### children (required)
+
+
+
+
+
+### style
+
+
+
+
+
+### ref
+
+
+
+
+
+### theme
+
+
+
+