Skip to Content
ComponentsTabs

Tabs

The Tabs component is an animated component that displays a list of tabs that can be used to switch between different sections of content. It can have icons (optional) and labels for each tab.

Paywall NormalPaywall Trial

Basic Usage

import { IconLayoutGrid, IconNews, IconTrendingUp, IconHeart, IconUserPlus, IconStar } from "@tabler/icons-react-native";
 
<Tabs
  tabs={[
    { id: "All", label: "All", icon: <IconLayoutGrid /> },
    { id: "News", label: "News", icon: <IconNews /> },
    { id: "Trending", label: "Trending", icon: <IconTrendingUp /> },
    { id: "For You", label: "For you", icon: <IconHeart /> },
    { id: "Following", label: "Following", icon: <IconUserPlus /> },
    { id: "Subscribed", label: "Subscribed", icon: <IconStar /> },
  ]}
  activeTabId={activeTabId}
  onTabChange={(tabId) => {
    setActiveTabId(tabId);
  }}
  scrollable={true}
  indicatorColor={Colors.white}
/>

Import

import Tabs from "../components/Tabs";

Props

  • tabs (array)
    • id (string)
    • label (string)
    • icon (React.Component)
  • activeTabId (string)
  • onTabChange (function)
  • scrollable (boolean)
  • indicatorColor (string)
SwitchWelcomeCard