Wondering what’s next for npm?Check out our public roadmap! »

    react-native-material-tabs
    TypeScript icon, indicating that this package has built-in type declarations

    4.2.0 • Public • Published

    React Native Material Tabs

    Material Design implementation of Tabs

    Travis npm version npm downloads code style: prettier style: styled-components

    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';

    Usage

    Demo

    import React, { useState } from 'react';
    import { StyleSheet, SafeAreaView } from 'react-native';
    import MaterialTabs from 'react-native-material-tabs';
    
    const Example = () => {
      const [selectedTab, setSelectedTab] = useState(0);
    
      return (
        <SafeAreaView style={styles.container}>
          <MaterialTabs
            items={['One', 'Two', 'Three', 'Four', 'Five']}
            selectedIndex={selectedTab}
            onChange={setSelectedTab}
            barColor="#1fbcd2"
            indicatorColor="#fffe94"
            activeTextColor="white"
          />
        </SafeAreaView>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
    });

    Available Props

    prop default type description
    barColor #13897b string Color of the tab bar
    barHeight 48 number Height of the tab bar
    indicatorColor #fff string Color of the indicator
    indicatorHeight 2 number Height 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 element)
    selectedIndex 0 number The index of current 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
    activeTextStyle {} object(style) Optional text style for the selected tab
    onChange none Function Handler that's emitted every time the user presses a tab. You can use this to change the selected index
    allowFontScaling true boolean Specifies whether fonts should scale to respect Text Size accessibility settings
    uppercase true boolean Specifies whether to uppercase the tab labels
    keyboardShouldPersistTaps never string Specifies how the ScrollView should respond to taps while keyboard is open

    Install

    npm i react-native-material-tabs

    DownloadsWeekly Downloads

    1,278

    Version

    4.2.0

    License

    MIT

    Unpacked Size

    52 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar