0.3.0 • Published 6 years ago
@farbod_/react-native-tab v0.3.0
React Native Tab
[
Tab Component for React-Native (android & ios)
Installation
$ npm install --save @farbod_/react-native-tab
Usage
Add Tab and pass children to it.
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
import Tab from '@farbod_/react-native-tab';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Tab>
<View
name="First"
style={{ flex: 1, backgroundColor: '#0f0' }}
>
<Text>Tab 1</Text>
</View>
<View
name="Second"
style={{ flex: 1, backgroundColor: '#f00' }}
>
<Text>Tab 2</Text>
</View>
<View
name="Third"
style={{ flex: 1, backgroundColor: '#00f' }}
>
<Text>Tab 3</Text>
</View>
<View
name="Fourth"
style={{ flex: 1, backgroundColor: '#f0f' }}
>
<Text>Tab 4</Text>
</View>
</Tab>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
By default tab buttons scrolling. For Change, Pass 'mode' prop to component.
mode="scroll"
mode="normal"
Tab Props
Prop | Values | Action |
---|---|---|
style | style object | extra styles for tab component container |
tabBarStyle | style object | extra styles for tab bar |
buttonTextStyle | style object | extra styles for tab buttons text |
rollStyle | style object | extra styles for tab buttons roll |
mode | normal, scroll | make tab buttons static or scrollable |
reverse | true, false | direction of tab Buttons and Views |
View Props
Prop | Values | Action |
---|---|---|
name | string | show name of tab |
onPress | function | action we need accur when click on tab (body not render for this view) |