4.2.0 • Published 3 years ago

react-native-material-tabs v4.2.0

Weekly downloads
1,132
License
MIT
Repository
github
Last release
3 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';

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

propdefaulttypedescription
barColor#13897bstringColor of the tab bar
barHeight48numberHeight of the tab bar
indicatorColor#fffstringColor of the indicator
indicatorHeight2numberHeight 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(stringelement)The headers for the individual tabs
selectedIndex0numberThe index of current tab selected. Indexes are mapped to the items prop
scrollablefalsebooleanOption between having fixed tabs or scrollable tabs
textStylenullobject(style)Text style for tab titles
activeTextStyle{}object(style)Optional text style for the selected tab
onChangenoneFunctionHandler that's emitted every time the user presses a tab. You can use this to change the selected index
allowFontScalingtruebooleanSpecifies whether fonts should scale to respect Text Size accessibility settings
uppercasetruebooleanSpecifies whether to uppercase the tab labels
keyboardShouldPersistTapsneverstringSpecifies how the ScrollView should respond to taps while keyboard is open
4.2.0

3 years ago

4.1.2

5 years ago

4.1.1

5 years ago

4.1.0

5 years ago

4.0.0

5 years ago

3.8.1

5 years ago

3.8.0

6 years ago

3.7.0

6 years ago

3.6.2

6 years ago

3.6.1

6 years ago

3.6.0

6 years ago

3.5.0

6 years ago

3.4.0

6 years ago

3.3.0

6 years ago

3.2.0

6 years ago

3.1.1

6 years ago

3.1.0

6 years ago

3.0.3

7 years ago

3.0.2

7 years ago

3.0.2-0

7 years ago

3.0.1

7 years ago

3.0.0

7 years ago

2.1.2-1

7 years ago

2.1.2-0

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

2.0.8

7 years ago

2.0.7

7 years ago

2.0.6

7 years ago

2.0.5

7 years ago

2.0.4

7 years ago

2.0.3

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.1.0

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.0.0

7 years ago