react-native-debug-toolkit/lib/views/TabView.js

A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development

import React from 'react'
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Animated,
} from 'react-native'
import { DebugColors } from '../utils/DebugConst'

const TabView = ({ tabs, activeTab, onTabChange, children }) => {
  return (
    <View style={styles.container}>
      <View style={styles.tabBar}>
        {tabs.map((tab, index) => (
          <TouchableOpacity
            key={index}
            style={[styles.tab, activeTab === index && styles.activeTab]}
            onPress={() => onTabChange(index)}>
            <Text
              style={[
                styles.tabText,
                activeTab === index && styles.activeTabText,
              ]}>
              {tab.label}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      <View style={styles.content}>{children}</View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tabBar: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: DebugColors.border,
    backgroundColor: DebugColors.background,
  },
  tab: {
    flex: 1,
    paddingVertical: 12,
    alignItems: 'center',
  },
  activeTab: {
    borderBottomWidth: 2,
    borderBottomColor: DebugColors.blue,
  },
  tabText: {
    color: DebugColors.textLight,
    fontWeight: '500',
  },
  activeTabText: {
    color: DebugColors.blue,
  },
  content: {
    flex: 1,
  },
})

export default TabView