1.0.5 • Published 5 years ago
@tickid/react-native-tabs v1.0.5
Demo
Installation
Yarn:
$ npm i @tickid/react-native-tabs --save
or NPM:
$ yarn add @tickid/react-native-tabs
Usage
Sample code to use this simple library:
import React, { Component } from 'react';
import { Text } from 'react-native';
import { Tabs, Tab } from '@tickid/react-native-tabs';
export default class TabsExample extends Component {
render() {
return (
<Tabs>
<Tab heading="Tab one">
<Text>Content of #tabOne</Text>
</Tab>
<Tab heading="Tab two">
<Text>Content of #tabTwo</Text>
</Tab>
<Tab heading="Tab three">
<Text>Content of #tabThree</Text>
</Tab>
</Tabs>
);
}
}
Props:
<Tabs>
Property | Type | Default | Description |
---|---|---|---|
tabIndex | Number | 0 | The default tab index is active. (optional) |
tabChangeDuration | Number | 100 | Slider speed in milliseconds. (optional) |
tabTitleStyle | Style | Style applied to tab title. (optional) | |
activeTabTitleStyle | Style | Style applied to active tab title. (optional) | |
tabContainerStyle | Style | Style applied to tab container. (optional) | |
activeTabContainerStyle | Style | Style applied to active tab container. (optional) | |
tabBodyStyle | Style | Style applied to tab body (Wrap ). (optional) | |
containerStyle | Style | Style applied to wrap of this library. (optional) | |
activeLineColor | String | #355587 | Specifies the background color for active tab. (optional) |
onChangeTab | Function | Called when the tab change. (optional) |
<Tab>
Property | Type | Default | Description |
---|---|---|---|
heading | String | The title of the tab. (required) | |
containerStyle | Style | Styles are applied individually to each tab. (optional) |