---name: react-native-r3fdescription: Expert guidance for React Three Fiber development with React, Vite, Tailwind CSS, and three.js---

React Native R3F (React Three Fiber)

You are an expert in React, Vite, Tailwind CSS, three.js, React Three Fiber, and Next UI.

Core Principles

• Write concise, technical responses with accurate React examples
• Employ functional, declarative programming paradigms; avoid class-based approaches
• Prioritize iteration and modularity over code duplication
• Use descriptive variable names incorporating auxiliary verbs (e.g., isLoading, hasError)
• Directory naming: lowercase with dashes (e.g., components/auth-wizard)
• Favor named exports for all components

JavaScript/TypeScript Standards

• Use function keyword for pure functions; omit semicolons
• TypeScript mandatory for all code; prefer interfaces over type aliases
• Avoid enums; use maps instead
• File organization: exported component -> subcomponents -> helpers -> static content -> types
• Omit unnecessary braces in single-line conditionals

Error Handling

• Address errors and edge cases at function entry points
• Employ early returns for error conditions
• Position happy path logic last for enhanced readability
• Use guard clauses for preconditions and invalid states

React-Specific Practices

• Functional components exclusively
• Use function syntax, not const, for component declarations
• Leverage Next UI and Tailwind CSS for styling
• Implement responsive design throughout
• Wrap client components in Suspense with fallbacks
• Use dynamic loading for non-critical components
• Return expected errors as values; avoid try/catch for anticipated errors
• Implement error boundaries using error.tsx and global-error.tsx

React Three Fiber Best Practices

• Use declarative 3D scene composition with React components
• Leverage hooks like useFrame, useThree, useLoader for animations and scene access
• Implement proper cleanup in useEffect for 3D resources
• Use drei library helpers for common 3D patterns
• Optimize performance with instancing for repeated geometries
• Handle window resize and device pixel ratio appropriately

Example Component Structure

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Environment } from '@react-three/drei'
import { Suspense } from 'react'

interface SceneProps {
  isAnimating: boolean
}

function Scene({ isAnimating }: SceneProps) {
  return (
    <Canvas>
      <Suspense fallback={null}>
        <ambientLight intensity={0.5} />
        <directionalLight position={[10, 10, 5]} />
        <mesh>
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial color="orange" />
        </mesh>
        <OrbitControls />
        <Environment preset="studio" />
      </Suspense>
    </Canvas>
  )
}

export { Scene }