@atom-design-mog/tabs

A customizable and flexible Tabs Component for React Native with multiple variants like radius tabs, underline tabs, and rounded styles.

This package helps you easily implement switchable tab UIs with clean design and multiple appearance options.

📦 Installation

Install with npm:

npm install @atom-design-mog/tabs

Or with yarn:

yarn add @atom-design-mog/tabs

📲 Import

import Tabs from '@atom-design-mog/tabs';

🚀 Usage Example

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Tabs from '@atom-design-mog/tabs';

export default function App() {
  const [activeTab, setActiveTab] = useState('0');

  const TabNames = [
    { id: '0', name: 'Tab 1' },
    { id: '1', name: 'Tab 2' },
    { id: '2', name: 'Tab 3' },
  ];

  return (
    <View style={{ padding: 20 }}>
      <Tabs
        tabs={TabNames}
        activeTab={activeTab}
        onTabChange={setActiveTab}
        variant="allRadius"
      />

      <Text style={{ marginTop: 20 }}>Selected Tab: {activeTab}</Text>
    </View>
  );
}

🎨 Available Variants

| Variant | Description | | -------------------------- | ----------------------------------------------- | | allRadius | All tabs have border-radius applied (default). | | leftRightRadius | Only first and last tab have rounded corners. | | noRadius | No border-radius on tabs. | | roundedRadius | Fully rounded pill-shaped tabs. | | dualLineTopRadius | Top radius for all tabs, good for card headers. | | underLineTabBackground | Underline-style tabs with bottom indicator. |

🧪 Full Demo (as used in testing)

import React, { useState } from 'react';
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import Tabs from '@atom-design-mog/tabs';

export default function TestTabsScreen() {
  const [activeTab1, setActiveTab1] = useState('0');
  const [activeTab2, setActiveTab2] = useState('0');
  const [activeTab3, setActiveTab3] = useState('0');
  const [activeTab4, setActiveTab4] = useState('0');
  const [activeTab5, setActiveTab5] = useState('0');
  const [activeTab6, setActiveTab6] = useState('0');

  const TabNames = [
    { id: '0', name: 'Tab 1' },
    { id: '1', name: 'Tab 2' },
    { id: '2', name: 'Tab 3' },
  ];

  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={styles.wrapper}>
        <Text style={styles.title}>All Radius Tabs</Text>
        <Tabs tabs={TabNames} activeTab={activeTab1} onTabChange={setActiveTab1} variant="allRadius" />

        <Text style={styles.title}>Left Right Radius Tabs</Text>
        <Tabs tabs={TabNames} activeTab={activeTab2} onTabChange={setActiveTab2} variant="leftRightRadius" />

        <Text style={styles.title}>No Radius Tabs</Text>
        <Tabs tabs={TabNames} activeTab={activeTab3} onTabChange={setActiveTab3} variant="noRadius" />

        <Text style={styles.title}>Rounded Radius Tabs</Text>
        <Tabs tabs={TabNames} activeTab={activeTab4} onTabChange={setActiveTab4} variant="roundedRadius" />

        <Text style={styles.title}>Dual Line Top Radius Tabs</Text>
        <Tabs tabs={TabNames} activeTab={activeTab5} onTabChange={setActiveTab5} variant="dualLineTopRadius" />

        <Text style={styles.title}>Underline Tab Background</Text>
        <Tabs tabs={TabNames} activeTab={activeTab6} onTabChange={setActiveTab6} variant="underLineTabBackground" />
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  wrapper: { padding: 20, gap: 20 },
  title: { fontSize: 16, fontWeight: '600', marginBottom: 6 },
});

📘 Props

| Prop | Type | Required | Description | | --------------- | ------------------- | -------- | ------------------------------------------------------------- | | tabs | Array<{id, name}> | ✔️ Yes | Array of tabs with ID and display name. | | activeTab | string | ✔️ Yes | Currently selected tab ID. | | onTabChange | (id) → void | ✔️ Yes | Callback when tab changes. | | variant | string | ✖️ No | Apply any of the variants listed above. Default: allRadius. |

🎯 Features

• Multiple customizable styles
• Clean, responsive design
• Easy integration and fully controlled behavior
• Works with any React Native project

👤 Author

Avi Gupta