React Native FlashList Timeline ⚡

A high-performance timeline component built with React Native and Shopify's FlashList, demonstrating optimized rendering for large datasets with smooth scrolling and efficient memory usage.

🏗️ Architecture

The app showcases a clean, component-based architecture:

• Timeline Component: Main container using FlashList for optimal performance
• Timeline Items: Individual event cards with status indicators and icons
• Section Headers: Date grouping with smart "Today/Yesterday" labels
• Mock Data: Realistic sample data spanning multiple days
• Theming System: Consistent color scheme across light/dark modes

📸 Demo

Screen.Recording.2026-02-05.at.5.46.37.pm.mov

🚀 Getting Started

1. Install dependencies

   bun install

2. Start the development server

   bun start

3. Run on your preferred platform

   • iOS: Press i to open in iOS Simulator
   • Android: Press a to open in Android Emulator
   • Scan QR code with Expo Go app on your device

📱 Usage

The timeline displays activity events with:

• Event Title: Clear, descriptive labels
• Description: Additional context when available
• Timestamp: Precise time information
• Status Icons: Visual indicators using SF Symbols
• Interactive Elements: Tap any event to see more details

🛠️ Tech Stack

• React Native: Cross-platform mobile framework
• Expo: Development platform and tooling
• TypeScript: Type-safe JavaScript
• FlashList: High-performance list component
• React Navigation: Navigation and routing
• Expo Symbols: Native icon support

📁 Project Structure

├── components/
│   ├── timeline/
│   │   ├── timeline.tsx          # Main timeline component
│   │   ├── timeline-item.tsx    # Individual event items
│   │   └── timeline-section-header.tsx
│   ├── ui/
│   │   └── icon-symbol.tsx       # Icon component
│   ├── haptic-tab.tsx            # Haptic tab component
│   └── themed-*.tsx              # Reusable themed components
├── data/
│   └── mock-timeline-events.ts   # Sample data
├── types/
│   └── timeline.ts               # TypeScript definitions
├── constants/
│   └── theme.ts                  # Color scheme definitions
├── hooks/
│   ├── use-color-scheme.ts      # Color scheme hook
│   └── use-theme-color.ts       # Theme color hook
└── app/
    ├── _layout.tsx               # Root layout
    └── (tabs)/
        ├── _layout.tsx           # Tab layout
        └── index.tsx             # Timeline screen (main screen)

🎯 Key Concepts Demonstrated

1. Performance Optimization: FlashList implementation for handling large datasets
2. Component Composition: Reusable, composable React components
3. State Management: Efficient data grouping and rendering
4. TypeScript Integration: Strong typing for better development experience
5. Theming: Dynamic theming support for multiple color schemes
6. Responsive Design: Adaptive layouts for different screen sizes

🔧 Customization

The timeline component is highly customizable:

interface TimelineProps {
  events: TimelineEvent[];
  onEventPress?: (event: TimelineEvent) => void;
}

Add your own data by providing an array of TimelineEvent objects with the required fields.

🤝 Contributing

This project serves as a demonstration of React Native best practices with FlashList. Feel free to fork and adapt for your own use cases!

📚 Learn More

• FlashList Documentation
• Expo Documentation
• React Native Documentation

📄 License

This project is open source and available under the MIT License.