3.2.0 • Published 7 years ago

@davidyaha/rnmt v3.2.0

Weekly downloads
1
License
MIT
Repository
github
Last release
7 years ago

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

propdefaulttypedescription
barColor#13897bstringColor of the tab bar
indicatorColor#fffstringColor of the indicator
activeTextColor#fffstringColor of the text for the selected tab
inactiveTextColorrgba(255, 255, 255, 0.7)stringColor of the text for inactive tabs
itemsnonearray(string)The headers for the individual tabs
selectedIndex0numberThe index of currrent tab selected. Indexes are mapped to the items prop
scrollablefalsebooleanOption between having fixed tabs or scrollable tabs
textStylenullobject(style)Text style for tab titles
onChangenoneFunctionHandler that's emitted every time the user presses a tab. You can use this to change the selected index

Example

Alt Text

/**
 * 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);