React Native Material Tabs
Material Design implementation of Tabs
Getting Started
Step 1
Install the dependency
npm i --save react-native-material-tabs
Or if you use yarn
yarn add react-native-material-tabs
Step 2
Start using the component
import MaterialTabs from 'react-native-material-tabs';
<MaterialTabs
items={['One', 'Two', 'Three']}
selectedIndex={this.state.selectedTab}
onChange={index => this.setState({ selectedTab: index })}
/>;
Available Props
prop | default | type | description |
---|---|---|---|
barColor | #13897b | string | Color of the tab bar |
indicatorColor | #fff | string | Color of the indicator |
activeTextColor | #fff | string | Color of the text for the selected tab |
inactiveTextColor | rgba(255, 255, 255, 0.7) | string | Color of the text for inactive tabs |
items | none | array(string) | The headers for the individual tabs |
selectedIndex | 0 | number | The index of currrent tab selected. Indexes are mapped to the items prop |
scrollable | false | boolean | Option between having fixed tabs or scrollable tabs |
textStyle | null | object(style) | Text style for tab titles |
onChange | none | Function | Handler that's emitted every time the user presses a tab. You can use this to change the selected index |
Example
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import MaterialTabs from 'react-native-material-tabs';
export default class Example extends Component {
state = {
selectedTab: 0,
};
setTab(tab) {
this.setState({ selectedTab: tab });
}
render() {
return (
<View style={styles.container}>
<MaterialTabs
items={['One', 'Two', 'Three', 'Four', 'Five']}
selectedIndex={this.state.selectedTab}
onChange={this.setTab.bind(this)}
barColor="#1fbcd2"
indicatorColor="#fffe94"
activeTextColor="white"
textStyle={{ fontFamily: 'Papyrus' }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
AppRegistry.registerComponent('Example', () => Example);