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

Interactive CLI for creating modular React Native apps with Expo

// template/src/components/Header/styles.ts
import { StyleSheet } from 'react-native';
import { ProcessedTheme } from '../../theme/tokenProcessor';

export const createHeaderStyles = (theme: ProcessedTheme) =>
  StyleSheet.create({
    header: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: theme.spacing.md,
      paddingVertical: theme.spacing.sm,
      backgroundColor: theme.colors.background,
    },
    headerLeft: {
      flex: 1,
      alignItems: 'flex-start',
    },
    headerCenter: {
      flex: 2,
      alignItems: 'center',
    },
    headerRight: {
      flex: 1,
      alignItems: 'flex-end',
    },
    notificationBadge: {
      backgroundColor: theme.colors.primary[500],
      borderRadius: 12,
      paddingHorizontal: 8,
      paddingVertical: 4,
      minWidth: 24,
      alignItems: 'center',
      justifyContent: 'center',
    },
    notificationCount: {
      color: '#FFFFFF',
      fontSize: theme.fontSize.sm,
      fontWeight: 'bold',
    },
    greeting: {
      fontSize: theme.fontSize.lg,
      fontWeight: '600',
      color: theme.colors.text,
      textAlign: 'center',
    },
    logoutButton: {
      paddingHorizontal: theme.spacing.sm,
      paddingVertical: theme.spacing.xs,
    },
    logoutText: {
      color: theme.colors.primary[500],
      fontSize: theme.fontSize.sm,
      fontWeight: '500',
    },
    rightIcons: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: theme.spacing.sm,  // Space between the icons
    },
  });