React Native R3f

--- name: react-native-r3f description: 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 ```tsx 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 ( ) } export { Scene } ```