Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@tickid/react-native-tabs

mycvvn22ISC1.0.5

A small library that uniquely handles simple tab operations

react native tab view, react native tab, tabs react native, react native tabs

readme

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 <Tab>). (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)