react-native-vertical-tab-view
An extension to react-native-tab-view which provides a vertical tab bar (great for landscape and tablet layouts). This work is largely derived from the excellent work that @satya164 has done on react-native-tab-view, including many of his suggestions for extracting this into a stand alone library.
This library is API compatible with react-native-tab-view and can be used as a drop in replacement as it re-exports all of the named exports from react-native-tab-view.
Installation
yarn add react-native-vertical-tab-view
Quick Start
See the docs at react-native-tab-view
A quick overview, first you need the TabView setup:
<TabViewVertical initialLayout=initialLayout renderTabBar=this_renderTabs style=stylescontainer navigationState=thisstate renderScene=this_renderScene onIndexChange=this_handleIndexChange />
and then you need the TabBar:
_renderTabs = landscape: boolean otherProps: SceneRendererProps: Element<*> const SelectedTabBar = landscape ? TabBarVertical : TabBar; return <SelectedTabBar ...otherProps renderLabel=this renderIcon=this style=stylestabbar tabStyle=stylestab indicatorStyle=stylesindicator scrollEnabled /> ; ;
Tab Style
This is IMPORTANT: make sure you pass in HEIGHT with your tab style:
const styles = StyleSheet;
Using with Orientation
One of the best use cases for the vertical tabs is when the device is used in landscape mode, you shift the tabs from the bottom to the left. Check out react-native-orientation for help getting the orientation setup, then look at an implementation like this:
<PropsType StateType> static defaultProps = orientation: 'PORTRAIT' ; { superprops; thisstate = index: 0 routes: key: '1' title: 'DASHBOARD' icon: 'tachometer' path: 'dashboard' key: '2' title: 'EMERGENCY' icon: 'phone' path: 'emergency' key: '3' title: 'FINANCE' icon: 'pie-chart' path: 'finance' key: '4' title: 'PERFORMANCE' icon: 'line-chart' path: 'performance' key: '5' title: 'FACILITIES' icon: 'building' path: 'facilities' key: '6' title: 'HUMAN RESOURCES' icon: 'users' path: 'human_resources' ; } { this; }; _renderLabelFactory = props: TabScreenSceneRenderPropsType: route : TabScreenSceneType: Element<*> const index = propsnavigationStateroutes; const inputRange = propsnavigationStateroutes; const outputRange = inputRange; const color = propsposition; return <AnimatedText style=styleslabel color >routetitle</AnimatedText>; ; _renderIconFactory = props: TabScreenSceneRenderPropsType: route : TabScreenSceneType: Element<*> const index = propsnavigationStateroutes; const inputRange = propsnavigationStateroutes; const outputRange = inputRange; const color = propsposition; const AnimatedIcon = Animated; return <AnimatedIcon name=routeicon size=30 style=stylesicon color />; ; _renderTabs = landscape: boolean otherProps: SceneRendererProps: Element<*> const SelectedTabBar = landscape ? TabBarVertical : TabBar; return <SelectedTabBar ...otherProps renderLabel=this renderIcon=this style=stylestabbar tabStyle=stylestab indicatorStyle=stylesindicator scrollEnabled /> ; ; _renderScene = ; : Element<*> // Orientation coming in from react-native-orientation const landscape = thispropsorientation0 === 'LANDSCAPE'; const SelectedTabView = landscape ? TabViewVertical : TabView; const initialLayout = width: 600 height: 400 ; return <SelectedTabView initialLayout=initialLayout renderTabBar= this style=stylescontainer navigationState=thisstate renderScene=this_renderScene onIndexChange=this_handleIndexChange swipeEnabled /> ;