Skip to main content
GymApp uses a component-based architecture with a strong focus on theming and cross-platform compatibility. All components are built with React Native and TypeScript, providing type safety and excellent developer experience.

​
Component Categories

The app includes two main categories of components:

​
Themed Components

Core building blocks that automatically adapt to light and dark color schemes:
  • ThemedText: Text component with predefined typography variants
  • ThemedView: View component with automatic background color theming
These components use the useThemeColor hook to automatically apply the correct colors based on the current color scheme.

​
UI Components

Specialized components that provide specific functionality:
  • Collapsible: Expandable/collapsible content sections with animated icons
  • IconSymbol: Cross-platform icon component (SF Symbols on iOS, Material Icons on Android/web)
  • ParallaxScrollView: Scroll view with parallax header animation
  • HelloWave: Animated waving hand emoji
  • ExternalLink: Link component that opens URLs in an in-app browser
  • HapticTab: Tab bar button with haptic feedback on iOS

​
Design Principles

​
Theme-Aware

All components respect the user’s system color scheme preference. The theming system uses the useColorScheme hook from React Native to detect the current theme and applies appropriate colors automatically.

​
Cross-Platform

Components are designed to work consistently across iOS, Android, and web. Platform-specific functionality (like SF Symbols on iOS) degrades gracefully on other platforms.

​
Type-Safe

All components are built with TypeScript and export their prop types, providing excellent IntelliSense support and compile-time type checking.

​
Composable

Components follow React’s composition model and can be nested and combined to create complex UI layouts.

​
Usage Pattern

Most components follow this basic pattern: 
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';

export default function MyScreen() {
  return (
    <ThemedView style={{ padding: 16 }}>
      <ThemedText type="title">Welcome!</ThemedText>
      <ThemedText>This text adapts to the theme automatically.</ThemedText>
    </ThemedView>
  );
}

​
Next Steps

Themed Components

Learn about ThemedText and ThemedView

UI Components

Explore specialized UI components

Build docs developers (and LLMs) love

Get started for freeTalk to us