Tabs.md

Tabs

Tabs are a horizontal region of buttons or links that allow for a consistent navigation experience between screens. It can contain any combination of text and icons, and is a popular method for enabling mobile navigation.
Replacing Component: react-native-scrollable-tab-view <ScrollableTabView>

iOS	Android

Syntax

{% codetabs name="Basic", type="js" -%} import React, { Component } from 'react'; import { Container, Content, Text } from 'native-base/ui'; import { Tabs, TabContent } from 'native-base'; ​ export default class TabsExample extends Component { render() { return ( This is Tab One This is Tab Two ); } } {%- language name="Advanced", type="js" -%} import React, { Component } from 'react'; import { Container, Content, Tabs } from 'native-base/ui';

import TabOne from './tabOne'; import TabTwo from './tabTwo'; ​ export default class TabsExample extends Component { render() { return ( ); } } {%- endcodetabs %}

Tabs with TabIcon

iOS	Android

Syntax

{% codetabs name="Basic", type="js" -%} import React, { Component } from 'react'; import { Container, Content, Text } from 'native-base/ui'; import { Tabs, TabContent } from 'native-base'; ​ export default class TabsExample extends Component { render() { return ( Content of Tab Profile Content of Tab Message ); } } {%- endcodetabs %}

Tabs with TabIcon and TabLabel (Horizontal)

iOS	Android

Syntax

{% codetabs name="Basic", type="js" -%} import React, { Component } from 'react'; import { Container, Content, Text } from 'native-base/ui'; import { Tabs, TabContent } from 'native-base'; ​ export default class TabsExample extends Component { render() { return ( Content of Tab Profile Content of Tab Message ); } } {%- endcodetabs %}

Tabs with TabIcon and TabLabel (Vertical)

iOS	Android

Syntax

{% codetabs name="Basic", type="js" -%} import React, { Component } from 'react'; import { Container, Content, Text } from 'native-base/ui'; import { Tabs, TabContent } from 'native-base'; ​ export default class TabsExample extends Component { render() { return ( Content of Tab Profile Content of Tab Message ); } } {%- endcodetabs %}

Custom Tabs

iOS	Android

Syntax

{% codetabs name="Basic", type="js" -%} {% raw %} import React, { Component } from 'react'; import { Container, Content, Text } from 'native-base/ui'; import { Tabs, TabContent } from 'native-base'; ​ export default class TabsExample extends Component { render() { return ( <Tabs tabBarStyle={{backgroundColor:'#DCF3FB'}} underlineStyle={{backgroundColor:'#00AADF'}} tabBarTextStyle={{color: '#00AADF'}}> Content of Tab One Content of Tab Two ); } } {% endraw %} {%- endcodetabs %}

Tabs at the Bottom

IOS	Android

Syntax

{% codetabs name="Basic", type="js" -%} {% raw %} import React, { Component } from 'react'; import { Container, Content, Text } from 'native-base/ui'; import { Tabs, TabContent } from 'native-base'; ​ export default class TabsExample extends Component { render() { return ( <Tabs tabBarPosition="bottom" underlineStyle={{color:'transparent'}}> Content of Tab One Content of Tab Two ); } } {% endraw %} {%- endcodetabs %} Configuration

	Property	Default	Option	Description
Basic	initialPage	1	-	Index of initially selected Tab
	tabBarPosition	top	top bottom	Position of Tabs in the Screen
	tabLabel	-	-	Name for each tab(TabContent prop)
	tabIcon	-	-	Icon for each tab(TabContent prop)
	vertical	false	true false	Aligns tabLabel and tabIcon in column
	tabBarIconStyle tabBarTextStyle tabBarStyle underlineStyle	-	-	Styles for tabIcon, tabLabel, Tabs, and underline of Tabs respectively
Both Basic and Advanced	tabLabel	-	-	Name for each tab