Skip to main content

TopBarButton

<TopBarButton
  key={\`\${badgePresetsIndex}\`}
  buttonProps={{
iconSource: Assets.icons.navigation.notificationsFill,
onPress: onPress,
throttleTime: 0
  }}
  badgeProps={{
    ...defaultBadgeProps,
    ...badgePresets[badgePresetsIndex]
  }}
/>
TIP
This component extends the Button props.
APIThis is the list of additional props for the component

accessibilityLabel
string
​

Overrides the text that's read by the screen reader when the user interacts with the element.\By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.

addButtonPadding
boolean
​

Use in Navigation: Predefined paddingRight for Android. Mandatory only when button is farthest to the right, or found with another custom component wrapped in a View component, otherwise the button will be pushed all the way right because of Navigation default behavior.Android only.

animationProps
LottieAnimationProps
​

Animation props passed to the lottie animation

animationValue
Animated.AnimatedSubtraction
​

Animation value to control the fade animation of the top bar button overlay (circle)

badgeProps
BadgeProps
​

Badge props passed to the Badge component

buttonProps
ButtonProps
​

Button props passed to the Button component

containerStyle
ViewStyle
​

Custom container style

hideBadge
boolean
​

Hide badge shown on button

isDarkTheme
boolean
​

Pass when rendered in the context of a dark theme

isModal
boolean
​

Button's color override when rendering inside a modal

onPress
ButtonProps['onPress']
​

Button's action handler

showCircle
boolean
​

Add a circle as a background for the button (default according to app)

testID
string
​

Component Test id

themeId
string
​

Theme Id used for the Button's color

topBarColorType
'primary' | 'background'
​

The top bar color type - will determine the color kit value to use for TopBar