UI Component Library
Relevant source files
The following files were used as context for generating this wiki page:
The UI Component Library for the Strategic Legal Analyzer AI mobile app provides a set of reusable, themeable, and consistent components for building the application's user interface. It is built upon React Native, with styling powered by NativeWind, enabling a utility-first CSS approach. The library includes foundational components for screen layout, navigation, iconography, and interactive elements, all designed to support both light and dark color schemes seamlessly.
The core of the library is designed for one-handed usage in portrait orientation, adhering to modern mobile design guidelines. Key components like ScreenContainer ensure consistent layout and safe area handling across all screens, while elements like IconSymbol and HapticTab enhance the user experience with high-quality visuals and tactile feedback.
Layout Components
The library provides foundational components for structuring screens and content.
ScreenContainer
ScreenContainer is a fundamental wrapper component used for every screen in the application. Its primary responsibility is to provide a consistent layout foundation.
- Purpose: To apply a standard background color, padding, and handle safe area insets.
- Usage: It wraps the entire content of a screen component.
- Implementation: It is used across all tab screens, such as
AnalyzeScreen,DocumentsScreen, andHomeScreen.
The following diagram shows how ScreenContainer is used as a base for application screens.
ThemedView
ThemedView is a simple View component that automatically applies theme-aware background and border colors. It is demonstrated in the theme-lab.tsx screen to build containers that respond to theme changes.
Sources: app/dev/theme-lab.tsx:87-128
Theming System
The application features a robust theming system that supports both light and dark modes. This system is built by combining a theme configuration file, a custom React hook, and integration with Tailwind CSS.
The flow of theme data is as follows:
This diagram illustrates how theme colors are defined, processed, and made available to components through both Tailwind classes and the useColors hook.
Sources: lib/_core/theme.ts, tailwind.config.js, app/_layout.tsx:21, app/dev/theme-lab.tsx:25
Key Theming Files
| File | Purpose |
|---|---|
lib/_core/theme.ts | Defines the ThemeColors object with light and dark values for each semantic color name (e.g., primary, background). It also builds and exports runtime palettes. |
tailwind.config.js | Consumes the themeColors from theme.config.js and configures them as Tailwind CSS utility classes, making them available via classes like bg-primary and text-foreground. |
app/_layout.tsx | Wraps the entire application in a ThemeProvider to make the theme context available to all child components. |
hooks/use-colors.ts | (Inferred from usage) A custom hook that provides access to the current color scheme's palette (e.g., colors.background, colors.tint). |
Sources: lib/_core/theme.ts:5-24, tailwind.config.js:4-13, app/_layout.tsx:21, app/(tabs)/_layout.tsx:8
Core UI Components
These are the basic building blocks for creating interactive and visually consistent user interfaces.
IconSymbol
The IconSymbol component is a wrapper around Expo's SymbolView (expo-symbols), providing access to Apple's SF Symbols. It simplifies the process of rendering high-quality, configurable vector icons.
| Prop | Type | Description |
|---|---|---|
name | string | The name of the SF Symbol to display (e.g., house.fill). |
size | number | The size of the icon. |
color | string | The color of the icon. |
It is used extensively in the TabLayout to render icons for each tab.
Sources: app/(tabs)/_layout.tsx:28, app/dev/theme-lab.tsx:132-133
HapticTab
HapticTab is a custom tab bar button component that enhances the default tab behavior by adding haptic feedback upon being pressed. It is used as a drop-in replacement for the default button in the Tabs navigator.
- Functionality: Triggers a haptic feedback effect when a user taps on a tab.
- Integration: It is passed to the
tabBarButtonprop in theTabsscreen options.
Sources: app/(tabs)/_layout.tsx:13
Navigation Components
Navigation is primarily handled by expo-router. The UI library provides custom components and configurations to style the navigation elements according to the app's design system.
TabLayout
The main tab-based navigation is defined in app/(tabs)/_layout.tsx. This component configures the bottom tab bar for the application.
- Structure: Uses
Tabsfromexpo-router. - Customization:
- The
tabBarButtonis set toHapticTabfor tactile feedback. - Tab icons are rendered using the
IconSymbolcomponent. - The active tint color, background color, and border color are all sourced from the
useColorshook, making the tab bar fully theme-aware. - Safe area insets are used to calculate appropriate bottom padding, ensuring the tab bar does not conflict with system UI elements.
- The
The composition of the TabLayout is shown below:
Sources: app/(tabs)/_layout.tsx:7-51
This setup ensures that the application's primary navigation is not only functional but also fully integrated with the visual and interactive standards of the UI library.