React Native Animation with Expo

An interactive React Native application demonstrating smooth, high-performance animations using Expo, React Navigation, and Shopify's Skia rendering library.

Features

• Animated Line Charts: Custom components for rendering animated lines with coordinates
  • AnimatedLineCoordinates - Draw smooth animated lines between specific coordinates
  • AnimatedDotsCoordinates - Render animated dots at specified positions with staggered animations
• Advanced Graphics: Uses Shopify React Native Skia for GPU-accelerated canvas rendering
• Smooth Animations: Powered by React Native Reanimated for performant 60fps animations
• TypeScript Support: Full TypeScript configuration and type safety
• Cross-Platform: Runs on iOS, Android, and Web
• Navigation: React Navigation with Native Stack Navigator

Project Structure

src/
├── components/
│   ├── AnimatedLineCoordinates.tsx    # Lines animated from coordinates
│   ├── AnimatedDotsCoordinates.tsx    # Animated dots at coordinates
│   ├── TrendLine.tsx                  # Trend line component
│   └── GreenLines.tsx                 # Green lines visualization
├── screens/
│   ├── HomeScreen.tsx                 # Home screen with navigation
│   └── ChartScreen.tsx                # Interactive chart visualization
├── navigation/
│   └── index.tsx                      # Navigation configuration
└── App.tsx                            # Root component

Getting Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

3. Build and run on device/simulator:

   npm run ios
   # or
   npm run android

4. For web:

   npm run web

Key Technologies

• Expo 54.0.7 - Framework for React Native development
• React Native 0.81.4 - Native app framework
• React Native Reanimated 4.1.5 - High-performance animation library
• Shopify React Native Skia 2.3.12 - GPU-accelerated drawing API
• React Navigation 7.x - Navigation library
• TypeScript 5.9.2 - Type-safe development

Component Usage

AnimatedLineCoordinates

Renders an animated line between coordinates with smooth transitions:

<AnimatedLineCoordinates
  coordinates={[
    { x: 50, y: 100 },
    { x: 150, y: 50 },
    { x: 250, y: 100 },
  ]}
  strokeColor="#00FF00"
  strokeWidth={3}
  duration={1200}
/>

AnimatedDotsCoordinates

Renders animated dots at specified positions:

<AnimatedDotsCoordinates
  coordinates={[
    { x: 50, y: 100 },
    { x: 150, y: 50 },
  ]}
  dotColor="#007AFF"
  dotRadius={6}
  hasOpacity={true}
/>

Notes

This project uses Expo Development Build and requires the expo-dev-client package. To use with Expo Go, remove the expo-dev-client package and the --dev-client flag from the start script in package.json.

The ios and android folders are auto-generated by Continuous Native Generation and are excluded from version control.

Resources

• React Navigation Documentation
• Expo Documentation
• React Native Reanimated
• React Native Skia