Feature Request: Implement React Native Renderer for @react/two.js

Summary

Create a React Native renderer for the @react/two.js library to enable Two.js graphics in React Native applications. This will provide native performance while maintaining API compatibility with the existing web version.

Background

The current @react/two.js library wraps Two.js for React web applications, supporting SVG, Canvas, and WebGL renderers through DOM elements. We need a React Native version that provides similar functionality using native rendering capabilities.

Current Architecture Analysis

• Provider (lib/Provider.tsx): Creates Two.js instance, mounts to DOM, handles context
• Context (lib/Context.ts): Provides useTwo() and useFrame() hooks
• Components: 15+ shape components (Circle, Rectangle, Path, etc.) that create Two.js objects
• Renderer Integration: Two.js handles rendering through its internal renderer system

Implementation Plan

Phase 1: Core Native Infrastructure

1.1 Create Native Provider Component

File: lib/native/Provider.tsx

• Replace HTMLDivElement with React Native View
• Integrate with react-native-skia for rendering
• Handle React Native dimensions and scaling
• Implement touch event handling
• Manage native animation loops

1.2 Implement Native Two.js Renderer

File: lib/native/renderer/SkiaRenderer.ts

• Create custom Two.js renderer class extending Two.js base renderer
• Map Two.js drawing commands to react-native-skia operations
• Handle coordinate system differences (web vs mobile)
• Implement shape primitives (Circle, Rectangle, Path, etc.)
• Support gradients, textures, and effects

1.3 Adapt Context System

File: lib/native/Context.ts

• Replace DOM dimension handling with Dimensions API
• Implement native-specific frame loop using requestAnimationFrame
• Handle screen density and scaling factors
• Maintain same hook API (useTwo, useFrame)

Phase 2: Component Implementation

2.1 Shape Components

Files: lib/native/components/[Shape].tsx

• Adapt existing components for native rendering
• Replace DOM refs with native refs
• Maintain same prop interfaces and TypeScript types
• Handle touch interactions and gestures
• Support all current shapes: Circle, Rectangle, Path, Text, etc.

2.2 Advanced Components

• Group: Container component for organizing shapes
• Gradients: LinearGradient, RadialGradient
• Textures: Image and sprite support
• Text: Native text rendering with styling

Phase 3: Platform Integration

3.1 Utilities and Helpers

File: lib/native/utils/

• Coordinate system conversion utilities
• Touch event handling helpers
• Performance optimization utilities
• Platform-specific feature detection

3.2 Export Strategy

File: lib/native/main.ts

• Export all components with same API as web version
• Add React Native-specific exports
• Maintain full TypeScript compatibility
• Platform-specific type definitions

Phase 4: Testing and Documentation

4.1 Example Application

• Create React Native example app demonstrating all features
• Include performance benchmarks
• Test on iOS and Android devices
• Animation and interaction examples

4.2 Testing Suite

• Unit tests for native components
• Integration tests with Two.js
• Performance tests comparing to web version
• Platform-specific test cases

Technical Requirements

Dependencies

{
  "peerDependencies": {
    "react": "^18.3.1",
    "react-native": "^0.72.0",
    "@shopify/react-native-skia": "^0.1.0",
    "two.js": "github:jonobr1/two.js#dev"
  }
}

Key Implementation Details

1. Renderer Architecture: Custom Two.js renderer that outputs to react-native-skia
2. API Compatibility: Maintain exact same component API as web version
3. Performance: Target 60fps animations with efficient native rendering
4. Platform Support: iOS and Android with platform-specific optimizations
5. TypeScript: Full type safety with shared interfaces

File Structure

lib/
├── native/
│   ├── Provider.tsx          # Native canvas provider
│   ├── Context.ts            # Native context system
│   ├── renderer/
│   │   └── SkiaRenderer.ts   # Custom Two.js renderer
│   ├── components/
│   │   ├── Circle.tsx        # Native shape components
│   │   ├── Rectangle.tsx
│   │   └── ...
│   ├── utils/
│   │   ├── coordinates.ts    # Coordinate utilities
│   │   ├── gestures.ts       # Touch handling
│   │   └── platform.ts      # Platform detection
│   └── main.ts               # Native exports

Success Criteria

• All existing web components work in React Native
• Performance matches or exceeds web version
• Full TypeScript support maintained
• Touch interactions and gestures supported
• Works on both iOS and Android
• Comprehensive documentation and examples
• Test coverage equivalent to web version

Claude Code Implementation Notes

When implementing this:

1. Use TodoWrite tool to track progress across all phases
2. Read existing components first to understand patterns
3. Test incrementally - start with basic shapes before complex features
4. Maintain TypeScript strict mode compliance
5. Follow existing code conventions and patterns
6. Run tests after each component implementation
7. Document any platform-specific considerations

Questions for Implementation

1. Should we create a monorepo structure or separate packages?
2. Do we need separate entry points for web vs native?
3. Should we support Expo managed workflow?
4. What's the strategy for handling platform-specific features?

This issue provides a comprehensive roadmap for implementing React Native support while maintaining the library's existing architecture and API design.

Start by reading the existing Provider in lib/Provider.tsx, Context in lib/Context.ts, and current shape components to understand the web patterns. Then review the proposed native files, especially lib/native/Provider.tsx and lib/native/renderer/SkiaRenderer.ts, and determine the entry point and testing approach. Done would require the listed native components, rendering, platform support, interactions, tests, and documentation.