Skip to main content

​
Component Library Overview

Rippler’s component library provides a collection of reusable, theme-aware UI components built with React Native and Expo. All components are designed to work seamlessly across iOS, Android, and web platforms.

​
Component Categories

​
Core Components

The foundation of Rippler’s UI system:
  • Button - Animated pressable button with primary and secondary variants
  • Card - Flexible container component with elevation system
  • ThemedText & ThemedView - Theme-aware text and view primitives

​
Workout Components

Specialized components for workout tracking:
  • ExerciseCard - Displays exercise information with tier badges and progress tracking
  • SetRow - Interactive row for logging weight, reps, and set completion

​
Design Principles

​
Theme Integration

All components integrate with Rippler’s theme system using the useTheme hook: 
import { useTheme } from "@/hooks/useTheme";

function MyComponent() {
  const { theme } = useTheme();
  return <View style={{ backgroundColor: theme.backgroundRoot }} />;
}

​
Animation

Components use react-native-reanimated for performant animations:
  • Spring animations for natural, physics-based motion
  • Scale effects on press interactions
  • Shared values for optimal performance

​
Accessibility

All interactive components include:
  • Proper touch targets (minimum 40x40 points)
  • Visual feedback on press
  • Haptic feedback on supported platforms
  • Test IDs for automated testing

​
Common Patterns

​
Spring Configuration

Most components use a consistent spring configuration: 
const springConfig: WithSpringConfig = {
  damping: 15,
  mass: 0.3,
  stiffness: 150,
  overshootClamping: true,
  energyThreshold: 0.001,
};

​
Press Animations

Standard press animation pattern: 
const scale = useSharedValue(1);

const handlePressIn = () => {
  scale.value = withSpring(0.98, springConfig);
};

const handlePressOut = () => {
  scale.value = withSpring(1, springConfig);
};

​
Theme Constants

Components use centralized theme constants: 
import { Spacing, BorderRadius } from "@/constants/theme";

const styles = StyleSheet.create({
  container: {
    padding: Spacing.lg,
    borderRadius: BorderRadius.sm,
  },
});

​
Component Architecture

​
File Structure

All components are located in /client/components/: 
components/
├── Button.tsx
├── Card.tsx
├── ThemedText.tsx
├── ThemedView.tsx
├── ExerciseCard.tsx
├── SetRow.tsx
└── TierBadge.tsx

​
Import Pattern

Components use path aliases for clean imports: 
import { Button } from "@/components/Button";
import { ThemedText } from "@/components/ThemedText";
import { useTheme } from "@/hooks/useTheme";

​
Next Steps

Button Component

Learn about the animated button component

Card Component

Explore the flexible card container

Themed Components

Understand theme-aware primitives

Exercise Components

Discover workout-specific components

Build docs developers (and LLMs) love

Get started for freeTalk to us