reactnatively

Tabs

A composable tab system with TabList, Tab, and TabPanel sub-components. Four visual variants, horizontal and vertical orientation, and optional glass rendering.

Import

typescript

import { Tabs, TabList, Tab, TabPanel } from 'reactnatively';

Interactive preview

Your personalized activity feed

FeedScreen.tsx

1import { useState } from 'react';2import { View, StyleSheet } from 'react-native';3import { Tabs } from 'reactnatively';45export function FeedScreen() {6  const [active, setActive] = useState('feed');78  return (9    <View style={styles.root}>10      <Tabs value={active} onChange={setActive} variant="line">11        <Tabs.List>12          <Tabs.Tab value="feed" label="Feed" />13          <Tabs.Tab value="explore" label="Explore" />14          <Tabs.Tab value="saved" label="Saved" />15        </Tabs.List>16        <Tabs.Panel value="feed"><FeedContent /></Tabs.Panel>17        <Tabs.Panel value="explore"><ExploreContent /></Tabs.Panel>18        <Tabs.Panel value="saved"><SavedContent /></Tabs.Panel>19      </Tabs>20    </View>21  );22}2324const styles = StyleSheet.create({25  root: { flex: 1 },26});

Profile screen tabs

ProfileScreen.tsx

1import { View, StyleSheet } from 'react-native';2import { Ionicons } from '@expo/vector-icons';3import { Tabs, TabList, Tab, TabPanel, Text } from 'reactnatively';45export function ProfileScreen() {6  return (7    <View style={styles.root}>8      <Tabs defaultValue="posts" variant="line">9        <TabList>10          <Tab11            value="posts"12            label="Posts"13            icon={<Ionicons name="grid-outline" size={16} color="currentColor" />}14          />15          <Tab16            value="reels"17            label="Reels"18            icon={<Ionicons name="film-outline" size={16} color="currentColor" />}19          />20          <Tab21            value="saved"22            label="Saved"23            icon={<Ionicons name="bookmark-outline" size={16} color="currentColor" />}24          />25        </TabList>26        <TabPanel value="posts">27          <Text variant="sm" color="rgba(255,255,255,0.5)" style={{ padding: 20 }}>28            User posts grid29          </Text>30        </TabPanel>31        <TabPanel value="reels">32          <Text variant="sm" color="rgba(255,255,255,0.5)" style={{ padding: 20 }}>33            User reels feed34          </Text>35        </TabPanel>36        <TabPanel value="saved">37          <Text variant="sm" color="rgba(255,255,255,0.5)" style={{ padding: 20 }}>38            Saved items39          </Text>40        </TabPanel>41      </Tabs>42    </View>43  );44}4546const styles = StyleSheet.create({47  root: { flex: 1 },48});

Glass pills variant

FilterTabs.tsx

1import { View, StyleSheet } from 'react-native';2import { Tabs, TabList, Tab, TabPanel, Text } from 'reactnatively';34export function FilterTabs() {5  return (6    <View style={styles.root}>7      <Tabs defaultValue="all" variant="glass">8        <TabList style={styles.list}>9          <Tab value="all" label="All" />10          <Tab value="active" label="Active" />11          <Tab value="draft" label="Draft" />12          <Tab value="archived" label="Archived" isDisabled />13        </TabList>14        <TabPanel value="all">15          <Text variant="sm" color="rgba(255,255,255,0.5)" style={{ padding: 20 }}>16            All items17          </Text>18        </TabPanel>19        <TabPanel value="active">20          <Text variant="sm" color="rgba(255,255,255,0.5)" style={{ padding: 20 }}>21            Active items only22          </Text>23        </TabPanel>24        <TabPanel value="draft">25          <Text variant="sm" color="rgba(255,255,255,0.5)" style={{ padding: 20 }}>26            Drafts27          </Text>28        </TabPanel>29      </Tabs>30    </View>31  );32}3334const styles = StyleSheet.create({35  root: { flex: 1, padding: 16 },36  list: { marginBottom: 12 },37});

Tabs props

Prop	Type	Default	Description
value	string	undefined	Controlled active tab value.
defaultValue	string	undefined	Initial active tab for uncontrolled usage.
onChange	(value: string) => void	undefined	Called when the active tab changes.
variant	'line' \| 'enclosed' \| 'pills' \| 'glass'	"line"	Visual style of the tab strip.
orientation	'horizontal' \| 'vertical'	"horizontal"	Layout direction of the tab list.
glass	boolean	false	Shorthand for variant="glass".
children	ReactNode	—	Should contain TabList and TabPanel components.
style	StyleProp<ViewStyle>	undefined	Style applied to the outer container.

Tab props

Prop	Type	Default	Description
value	string	—	Unique identifier for this tab.
label	string	—	Display text for the tab.
icon	ReactNode	undefined	Icon shown beside the label.
isDisabled	boolean	false	Prevents the tab from being selected.