Expo UI Playground

The playground showcases a variety of Expo UI components through a productivity app interface. Key components available for inspection include:

• Buttons: 7 different variants (default, bordered, plain, glass, etc.).
• Gauges: 6 types including circular, capacity, and linear.
• Pickers: Segmented and menu variants, including ColorPicker with opacity support.
• Date & Time: DateTimePicker with multiple display modes (compact, graphical, wheel) and modes (date, time, date+time).
• Layout & Containers: VStack, HStack, Section, DisclosureGroup, and ContentUnavailableView for empty states.
• Interactivity: Slider with real-time updates, Switch configurations, and ContextMenu with nested submenus.

The project uses a centralized state management pattern leveraging React 19's use() hook and React Context.

• AppContext.tsx: Acts as the single source of truth for the application state.
• use() hook: Components consume the context using the new React 19 use() pattern rather than useContext.
• Real-time synchronization: All modular UI sections (Profile, Dashboard, Task Management, etc.) share and update this common state, ensuring that interactions in one component (e.g., a theme change in the Profile section) immediately reflect across the entire app.
• Type Safety: The state is fully integrated with TypeScript, using comprehensive interfaces for all state properties and updater functions.

// React 19 use() hook pattern
const { profile, updateProfile } = use(AppContext) as AppState;

The playground utilizes modern React and TypeScript patterns to demonstrate Expo UI capabilities:

• State Management: Uses React Context combined with the React 19 use() hook for managing shared state across components.
• Type Safety: Comprehensive TypeScript integration with interface definitions for all components and data structures.
• Architecture: A modular approach where components interact via a shared state, enabling realistic data flow (e.g., changing a setting in the SettingsSection affects the ProfileSection).

The application implements a Swift-like modifier pattern for styling Expo UI components. Instead of traditional style objects, components accept a modifiers prop containing a list of modifier functions.

Common modifiers include:

• frame({ width, height })
• background(color/theme)
• cornerRadius(value)

This pattern is optimized for the Expo UI Swift components (Buttons, Gauges, Sliders, etc.) and provides a declarative way to apply layout and visual properties.

// Modifiers pattern for styling
modifiers={[
  frame({ width: 100, height: 100 }),
  background(profile.theme),
  cornerRadius(100)
]}

When contributing to or developing within this repository, adhere to these specific implementation rules:

• Styling: Do not use legacy shadow styles; use box shadow instead. Always implement dark mode support.
• Layout: Do not use SafeAreaView (it is deprecated). Instead, use contentInsetAdjustmentBehavior="automatic" with ScrollView components.
• Containers: Each screen should use a ScrollView as its primary container.
• Platform Priority: Prioritize iOS development and testing (iOS 16+) as many Expo UI components and glass effects are designed with an iOS-first approach.
• Architecture: Maintain the modular, section-based architecture where components are interactive and connected to the shared AppContext.

To set up the playground locally, install the project dependencies and start the Expo development server.

Note: Some Expo UI components require iOS 16+ and work best on iOS simulators or physical iOS devices.

npm install
npx expo start

To set up the development environment and start the application, use the following commands:

1. Install dependencies: Run npm install to install all required packages.
2. Start the development server: Use npx expo start or expo start.
3. Run on specific platforms:
   • iOS: expo run:ios (Recommended for best Expo UI support; requires iOS 16+)
   • Android: expo run:android
   • Web: expo start --web
4. Linting: Run expo lint to check code quality.

# Install dependencies
npm install

# Start development server
npx expo start

# Run on specific platforms
expo run:ios
expo run:android
expo start --web

# Linting
expo lint

This project uses the ESLint Flat Config format. To ensure compatibility with Expo's environment and rules, it utilizes eslint-config-expo/flat. The configuration is wrapped in defineConfig from eslint/config to provide type safety and structure.

By default, the configuration ignores the dist/* directory to prevent linting build artifacts.

const { defineConfig } = require('eslint/config');
const expoConfig = require('eslint-config-expo/flat');

module.exports = defineConfig([
  expoConfig,
  {
    ignores: ['dist/*'],
  },
]);

The project is configured with the following technical specifications:

The app/home/index.tsx file serves as the primary entry point for the home route in the Expo router. Currently, it is configured to export the liquid-glass-example screen as the default component, redirecting users from the home path to the Liquid Glass UI demonstration.

export { default } from "@/components/screens/liquid-glass-example";