UI System (Tamagui)

Relevant source files

The following files were used as context for generating this wiki page:

• TAMAGUI_MIGRATION.md
• BUGS_FIXED_AND_IMPROVEMENTS.md
• tamagui.config.ts
• App.js
• src/config/constants.js
• README.md
• TASK_3_SUMMARY.md

The eefashiondesign application has undergone a significant UI framework migration to Tamagui. This was done to address critical performance bottlenecks, inconsistent styling, and a cumbersome developer experience associated with the previous stack, which included react-native-paper and over 800 individual StyleSheet.create instances. Tamagui was chosen as a modern, lightweight, and performant UI library that provides a centralized design system, type-safe components, and improved cross-platform compatibility, particularly for web.

The migration establishes a robust foundation for a consistent, maintainable, and scalable user interface. It introduces a design token system, reusable component variants, and CSS-like shorthands to accelerate development. The primary goals of this migration are to enhance rendering performance, reduce bundle size, and streamline the process of building and maintaining UI components across the application.

Sources: TAMAGUI_MIGRATION.md, BUGS_FIXED_AND_IMPROVEMENTS.md

Rationale for Migration

The decision to migrate from react-native-paper and manual StyleSheet objects to Tamagui was driven by several key issues impacting both user and developer experience.

• Performance: The old system suffered from slow rendering (~16ms per frame) and janky animations due to many animations running on the JavaScript thread (useNativeDriver: false).
• Bundle Size: react-native-paper contributed significantly to the application's bundle size. The migration to Tamagui resulted in an estimated 28% reduction (~700KB).
• Styling Inconsistency: With over 800 StyleSheet.create instances, the application had hardcoded colors and spacing values scattered across the codebase, making it difficult to maintain a consistent UI.
• Developer Experience: The lack of a centralized theme, no TypeScript support, and verbose styling definitions slowed down development and introduced more bugs.

Sources: BUGS_FIXED_AND_IMPROVEMENTS.md, TAMAGUI_MIGRATION.md

Performance & Bundle Size Comparison

The following table summarizes the expected improvements from migrating to Tamagui.

Metric	Before (react-native-paper / StyleSheet)	After (Tamagui)	Improvement
Rendering Performance	~16ms per frame	~8ms per frame	2x faster
Bundle Size	~2.5MB	~1.8MB	28% reduction
Animation Performance	Janky (JS thread)	Smooth (Native thread)	60fps animations

Sources: BUGS_FIXED_AND_IMPROVEMENTS.md, TAMAGUI_MIGRATION.md

Core Configuration (tamagui.config.ts)

The heart of the new UI system is the tamagui.config.ts file. It centralizes all design-related definitions, including colors, spacing, themes, and styling shorthands.

Sources: tamagui.config.ts

Design Tokens

Design tokens are the primitive values of the design system. They replace hardcoded values with named variables, ensuring consistency. The configuration defines tokens for colors, spacing, sizing, border radius, and z-index.

The diagram below shows how design tokens are defined in the configuration and then used by themes.

Color Tokens

A custom color palette is defined to match the app's branding.

Category	Token Name	Value
Primary	primary	#6C63FF
Accent	accent	#FF6B6B
Background	bgPrimary	#0F0F1E
Background	bgCard	#1E1E3F
Text	textPrimary	#FFFFFF
Text	textSecondary	#B0B0C0
Semantic	success	#00D9C0
Semantic	error	#FF6B6B

Sources: tamagui.config.ts:6-46

Spacing and Sizing Tokens

A consistent scale for spacing and sizing is used for margins, padding, and component dimensions.

Token	space Value	size Value	radius Value
xs	4	24	4
sm	8	32	8
md	12	40	12
lg	16	48	16
xl	20	56	20

Sources: tamagui.config.ts:47-80

Theming

The configuration defines light and dark themes. Each theme maps abstract style properties (e.g., background, color, borderColor) to specific color tokens. The application defaults to the dark theme.

// tamagui.config.ts:93-118
themes: {
  dark: {
    background: customTokens.color.bgPrimary,
    backgroundHover: customTokens.color.bgHover,
    color: customTokens.color.textPrimary,
    borderColor: customTokens.color.border,
    primary: customTokens.color.primary,
    // ... more theme properties
  },
  light: {
    background: '#FFFFFF',
    backgroundHover: '#F5F5F5',
    color: '#1A1A1A',
    borderColor: '#E0E0E0',
    primary: customTokens.color.primary,
    // ... more theme properties
  },
},

Sources: tamagui.config.ts:92-147

Shorthands

To accelerate development, a set of CSS-like shorthand properties are defined. These allow developers to write styles more concisely.

Shorthand	CSS Property
bg	backgroundColor
bc	borderColor
br	borderRadius
m, mx, my, mt, mb, ml, mr	margin properties
p, px, py, pt, pb, pl, pr	padding properties
w, h	width, height
f, ai, jc, fd	flex properties
fs, lh, ta, c	fontSize, lineHeight, textAlign, color

Sources: tamagui.config.ts:148-179

System Integration

Tamagui is integrated at the root of the application in App.js. The TamaguiProvider component wraps the entire app, making the configuration and themes available to all child components.

This diagram illustrates the provider hierarchy in App.js.

The TamaguiProvider is configured with the custom tamaguiConfig, and the Theme component sets the default theme to "dark".

// App.js:352-360
export default function App() {
  // ...
  return (
    <ErrorBoundary>
      <TamaguiProvider config={tamaguiConfig} defaultTheme="dark">
        <Theme name="dark">
          <AuthProvider>
            <ThemeProvider>
              <StatusBar barStyle="light-content" backgroundColor="#1A1A2E" />
              <AppContent />
            </ThemeProvider>
          </AuthProvider>
        </Theme>
      </TamaguiProvider>
    </ErrorBoundary>
  );
}

Sources: App.js:348-361

Custom Components

As part of the migration, a new set of reusable, Tamagui-based components are being created in the src/components/tamagui/ directory. These components are designed to be building blocks for the application's UI.

The following components have been defined in the migration plan:

• Button.tsx
• Card.tsx
• Text.tsx
• Container.tsx
• Input.tsx

Sources: TAMAGUI_MIGRATION.md

Example: Button Component

The Button.tsx component is designed with multiple variants and sizes to cover most use cases in the app.

This class diagram shows the structure of the planned Button component.

Migration Strategy

The migration from StyleSheet to Tamagui is an ongoing process. The strategy involves replacing old components with their new Tamagui-based counterparts one by one.

Component Migration Flow

The following flowchart outlines the process for migrating a single component.

Code Example: Before and After

Here is a practical example of what the migration looks like in code.

Before (StyleSheet):

import { View, Text, StyleSheet } from 'react-native';

const MyComponent = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Hello</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#1A1A2E', // Hardcoded value
    padding: 16, // Hardcoded value
    borderRadius: 12, // Hardcoded value
  },
  title: {
    color: '#FFFFFF',
    fontSize: 24,
    fontWeight: 'bold',
  },
});

Sources: TAMAGUI_MIGRATION.md, BUGS_FIXED_AND_IMPROVEMENTS.md

After (Tamagui):

import { Container, Text } from '@/components/tamagui';

const MyComponent = () => (
  <Container bg="$bgCard" p="$lg" br="$md">
    <Text variant="h3" color="primary">Hello</Text>
  </Container>
);

Sources: TAMAGUI_MIGRATION.md, BUGS_FIXED_AND_IMPROVEMENTS.md

Conclusion

The adoption of Tamagui represents a significant architectural improvement for the eefashiondesign project. It addresses fundamental issues of performance, maintainability, and developer experience. By establishing a centralized design system with tokens, themes, and reusable components, the new UI system ensures a more consistent and higher-quality user experience. The migration strategy allows for a gradual but steady transition, ultimately leading to a smaller, faster, and more robust application.

Sources: TAMAGUI_MIGRATION.md, BUGS_FIXED_AND_IMPROVEMENTS.md