IconTab

Last updated 6 months ago
Contents

IconTab

A Tab with an icon.

Props

animationDuration

Type: Number

The duration of the animation between active and inactive.

Default: 160

animationEasing

Type: Function

The easing function of the animation between active and inactive.

Default: easings.easeInOut

badgeAnimation

Type: Function

Defines the animation of the badge from active to inactive. Receives the animation progress (AnimatedValue between 0 and 1), needs to return a style object. See also: https://facebook.github.io/react-native/docs/animations.html#interpolation

Default:

progress => ({
transform: [
{
scale: progress.interpolate({
inputRange: [0, 1],
outputRange: [0.9, 1]
})
}
]
})

badgeSlotStyle

Type: ViewPropTypes.style

Extends the style of the badge's wrapping View.

iconAnimation

Type: Function

Defines the animation of the icon from active to inactive. Receives the animation progress (AnimatedValue between 0 and 1), needs to return a style object. See also: https://facebook.github.io/react-native/docs/animations.html#interpolation

Default:

progress => ({
transform: [
{
scale: progress.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.2]
})
}
],
opacity: progress.interpolate({
inputRange: [0, 1],
outputRange: [0.8, 1]
})
})

isActive

Required. Type: Boolean

If true, the tab is visually active.

renderBadge

Type: Function

The render prop to render the badge. Arguments: ({ isActive })

renderIcon

Required. Type: Function

The render prop to render the icon. Arguments: ({ isActive })

showBadge

Type: Boolean

If true, the badge will be rendered.

Default: false

style

Type: ViewPropTypes.style

Extends the style of the tab's view.

Contents