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