4.2.0 • Published 3 years ago
react-native-material-tabs v4.2.0
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
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) | The headers for the individual tabs |
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 |
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