Tabs

Tabs organize content across different screens, data sets, and other interactions.

Usage

import { Tab } from 'react-native-elements';

<Tab value={index} onChange={setIndex}>
  <Tab.Item title="recent" />
  <Tab.Item title="favorite" />
  <Tab.Item title="cart" />
</Tab>

 <TabView value={index} onChange={setIndex} >
  <TabView.Item style={{ backgroundColor: 'red', width: '100%' }}>
    <Text h1>Recent</Text>
  </TabView.Item>
  <TabView.Item style={{ backgroundColor: 'blue', width: '100%' }}>
    <Text h1>Favorite</Text>
  </TabView.Item>
  <TabView.Item style={{ backgroundColor: 'green', width: '100%' }}>
    <Text h1>Cart</Text>
  </TabView.Item>
</TabView>

---

Props

• value
• onChange
• disableIndicator
• indicatorStyle
• variant

Also receives all View props

Child Component

Tab.Item

Props

Receives all Button props

---

TabView

Props

• value
• onChange
• animationType
• animationConfig

---

TabViewItem

Props

Receives all View props

---

Reference

value

Child position index value.

Type	Default
number	0

---

onChange

On Index Change Callback

Type	Default
function	none

---

disableIndicator

Disable the indicator below

Type	Default
boolean	false

---

indicatorStyle

Additional styling for tab indicator (optional)

Type	Default
View style (object)	Internal Style

---

variant

Background Variant

Type	Default
'primary' or 'default'	default

---

animationtype

Type	Default
'spring' or 'timing'	spring

---

animationconfig

Type	Default
'Object'	none

---

---