React-native-tabify NPM

react-native-tabify

Easy to create multi-style tabs for React Native

Installation

$ npm install --save react-native-tabify

Usage

import Tabify from 'react-native-tabify'

const NewTabify = Tabify.create({ ... })

function Component() {
  return (
    <NewTabify.Tabs>
      <NewTabify.Tab name="tab1" title="Tab 1">
        <View style={{ backgroundColor: '#f00', flex: 1 }} />
      </NewTabify.Tab>
      <NewTabify.Tab name="tab2" title="Tab 2">
        <View style={{ backgroundColor: '#0f0', flex: 1 }} />
      </NewTabify.Tab>
      <NewTabify.Tab name="tab3" title="Tab 3">
        <View style={{ backgroundColor: '#00f', flex: 1 }} />
      </NewTabify.Tab>
    </NewTabify.Tabs>
  )
}

Properties

BarItem

Prop	Description	Default
`TouchableItem`	A touchable component for bar item.	`TouchableOpacity`
`styles`	A styles object or function which return styles object, styles object has `container`、`content`、`title`、`subTitle`、`activeTitle`、`badgeWrapper`、`badge`、`badgeTxt` keys.
`isNeedContainerLayout`	Whether need barItem container layout.	computed
`isNeedContentLayout`	Whether need barItem content layout.	computed
`isIgnoreLayoutChange`	Whether ignore layout change.	computed

BarIndicator

Prop	Description	Default
`styles`	A styles object or function which return styles object, styles object has `container` keys.
`getWidth`	A function that is called when get interpolate outputRange of `indicator width`. The function is called with a `layouts` argument.	`layouts => layouts.map(d => d.container.width)`
`getOffset`	A function that is called when get interpolate outputRange of `indicator offset`. The function is called with `layouts` and `widths` arguments.	`(layouts, widths) => layouts.map((d, i) => (d.container.x + (d.container.width - widths[i]) / 2))`
`render`	The indicator render function.	`props => <Animated.View pointerEvents="none" {...props} />`

Bar

Prop	Description	Default
`BarItem`	The bar item component.	`Tabify.BarItem`
`BarIndicator`	The bar indicator component.	`Tabify.BarIndicator`
`styles`	A styles object or function which return styles object, styles object has `scroller`、`container` keys.
`isScrollable`	Whether bar scrollable.
`isShowIndicator`	Whether show bar indicator.

Tab

Prop	Description	Default

Scene

Prop	Description	Default

Pager

Prop	Description	Default
`ViewPagerAndroid`	The ViewPager for android.	`ViewPagerAndroid`
`styles`	A styles object or function which return styles object, styles object has `container`、`content`、`scene` keys.

Tabs

Prop	Description	Default
`Bar`	The bar component.	`Tabify.Bar`
`Pager`	The pager component.	`Tabify.Pager`
`Scene`	The scene component.	`Tabify.Scene`
`styles`	A styles object or function which return styles object, styles object has `container` keys.