A cross-platform Tab View component for React Native.
npm install --save react-native-tab-view
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { TabViewAnimated, TabViewPage, TabBarTop } from 'react-native-tab-view';
const styles = StyleSheet.create({
container: {
flex: 1,
},
page: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
export default class TabViewExample extends Component {
state = {
navigation: {
index: 0,
routes: [
{ key: '1', title: 'First' },
{ key: '2', title: 'Second' },
],
},
};
_handleChangeTab = (index) => {
this.setState({
navigation: { ...this.state.navigation, index },
});
};
_renderHeader = (props) => {
return <TabBarTop {...props} />;
};
_renderScene = ({ route }) => {
switch (route.key) {
case '1':
return <View style={[ styles.page, { backgroundColor: '#ff4081' } ]} />;
case '2':
return <View style={[ styles.page, { backgroundColor: '#673ab7' } ]} />;
default:
return null;
}
};
_renderPage = (props) => {
return <TabViewPage {...props} renderScene={this._renderScene} />;
};
render() {
return (
<TabViewAnimated
style={styles.container}
navigationState={this.state.navigation}
renderScene={this._renderPage}
renderHeader={this._renderHeader}
onRequestChangeTab={this._handleChangeTab}
/>
);
}
}
The package exposes the following components,
-
<TabViewTransitioner />
- container component responsible for managing tab transitionsIt accepts the following props,
navigationState
- the current navigation stateonRequestChangeTab
- callback for when the current tab changes, should do thesetState
render
- callback which renders the tab view, gets a special set of props as argument
-
<TabViewAnimated />
- a convenience wrapper around<TabViewTransitioner />
It accepts the following props in addition to
navigationState
andonRequestChangeTab
,renderHeader
- callback which renders a header, useful for a top tab barrenderFooter
- callback which renders a footer, useful for a bottom tab barrenderScene
- callback which renders a single scene
-
<TabViewPage />
- container component for individual pagesIt accepts the following props,
renderScene
- callback which receives the current scene and returns a React ElementpanHandlers
- pan handlers used for gesture (default isTabViewPage.PanResponder.forSwipe(props)
), pass null to disable gesturesstyle
- style object (default isTabViewPage.StyleInterpolator.forSwipe(props)
), passTabViewPage.StyleInterpolator.forStatic(props)
to disable animations
-
<TabBarTop />
- material design themed tab barIt accepts the following props,
pressColor
- color for material ripple (Android > 5.0 only)renderLabel
- callback which receives the current scene and returns a string or React Element to be used as a labellabelStyle
- style object for labellabelActiveStyle
- style object for active tab labellabelInactiveStyle
- style object for inactive tab labelindicatorStyle
- style object for the tab indicator