create-rn-starter-kit/template/src/components/BottomTabs/styles.ts

Interactive CLI for creating modular React Native apps with Expo

// template/src/modules/core/combined-auth/components/BottomTabs/styles.ts
import { StyleSheet } from 'react-native';
import { ProcessedTheme } from 'theme/tokenProcessor';

export const bottomTabsStyles = (theme: ProcessedTheme) =>
  StyleSheet.create({
    container: {
      flexDirection: 'row',
      backgroundColor: theme.colors.surface,
      borderTopWidth: 0,
      borderTopColor: '#333',
      paddingBottom: 5,
      paddingTop: 0,  // Change from 8 to 0
    },

    tabItem: {
      flex: 1,
      alignItems: 'center',
      paddingVertical: theme.spacing.sm,
      paddingHorizontal: theme.spacing.xs,
      borderTopWidth: 3,
      borderTopColor: 'transparent',
    },

    tabItemActive: {
      borderTopColor: theme.colors.accent,
    },

    tabIcon: {
      width: 24,
      height: 24,
      borderRadius: 4,
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: 4,
    },

    tabIconActive: {
      color: 'green',
    },

    tabIconText: {
      color: 'white',
      fontSize: 10,
      fontWeight: 'bold',
    },

    tabLabel: {
      fontSize: theme.fontSize.sm,
      color: theme.colors.textSecondary,  // Change from '#666' to theme color
      textAlign: 'center',
    },

    tabLabelActive: {
      color: theme.colors.accent,  // Change from 'green' to theme accent
      fontWeight: '600',
    },
  });