Tabs

Tab Component is used to switch between different views in your application. Generally a Tabs should have 2-4 tab pane, the title of each tab pane should be concise, normally has 2-4 words.

import React from 'react'
import { View } from 'react-native'
import { Tabs } from 'antd-mobile-rn'

var view = function () {
    const {tabs} = this.props
    return (
        <Tabs
            {...this.props}
            tabs={tabs.map((item, index) => {return {title: item.title, key: index}})}>
            {
                tabs.map((item, index) => {
                    return (
                        <View key={index}>{item.content}</View>
                    )
                })
            }
        </Tabs>
    )
}
module.exports = view

 

Above code block is the representation of Tab Component in Arivaa. You can see how we are receiving tab's data as props, which gets rendered via map function and give us complete tab view in the application.

Usage

In order to use Tabs component in your application, simply import Arivaa Tab Component (like we did at line no. 3) and pass tabs data as shown below.

import React from 'react'
import { View, Text } from 'react-native'
import Tabs from '../index'

var view = function () {
    const tabs = [
        {
            title: 'First Tab',
            content: <View><Text>First Tab Content</Text></View>
        },
        {
            title: 'Second Tab',
            content: <Text>Second Tab Content</Text>
        },
        {
            title: 'Third Tab',
            content: <Text>Third Tab Content</Text>
        }
    ]
    return (
        <View>
            <Tabs
                tabs={tabs}
                tabBarBackgroundColor="#fff"
                tabBarUnderlineStyle={{backgroundColor: Colors.primaryColor}}
                tabBarActiveTextColor={Colors.primaryColor}
            />
        </View>
    )
}
module.exports = view

 

Supported properties

Properties Descrition Type Default Required

 

tabs

 

It is a array of objects featuring title (title of Tab) and content (renderable content of that specific tab).

array   true
tabBarPosition TabBar's position 'top', 'bottom', 'left', 'right' top false
initialPage the tab when inital, index or key number | string   false

 

tabBarbackgroundColor

 

color of the default tab bar's background

string   false

 

tabBarunderlineStyle

style of the default tab bar's underline string   false

 

tabBarActiveTextColor

color of the default tab bar's text when active string   false
tabBarInactiveTextColor color of the default tab bar's text when inactive string   false
tabBarTextStyle styles to the tab bar's text React.CSSProperties |any   false

Published On June 6, 2020 6:25 PM

Last Updated October 9, 2020 6:41 AM