platform-code
Platform-specific code patterns for web vs native (.native.tsx files). Use when creating React components that need different implementations for web and React Native.
When & Why to Use This Skill
This Claude skill provides a standardized architectural pattern for managing platform-specific code in cross-platform React and React Native applications. It streamlines the development process by utilizing file extension conventions (.native.tsx) to separate web and native implementations, ensuring a clean codebase, optimized performance, and a unified API surface across different environments.
Use Cases
- Case 1: Optimizing UI performance by using platform-specific components, such as React Native's FlatList for mobile and virtualized recycler lists for web browsers.
- Case 2: Implementing platform-specific hardware interactions, such as accessing the camera, file system, or biometric authentication, where APIs differ between web and native platforms.
- Case 3: Managing platform-specific hooks and logic, such as using AsyncStorage for native data persistence and localStorage for web-based storage.
- Case 4: Designing responsive UX patterns that require distinct implementations for touch-based mobile gestures versus mouse-based web interactions while maintaining a shared business logic layer.
| name | platform-code |
|---|---|
| description | Platform-specific code patterns for web vs native (.native.tsx files). Use when creating React components that need different implementations for web and React Native. |
Platform-Specific Code Pattern
Send uses file extension conventions to handle web vs. native differences.
File Naming
| File | Purpose |
|---|---|
ComponentName.tsx |
Shared logic OR web-specific implementation |
ComponentName.native.tsx |
React Native specific implementation |
The bundler automatically resolves the correct file based on platform.
When to Create Platform Files
Create .native.tsx variants when:
- UI needs different native implementation
- Using platform-specific APIs or components
- Optimizing for platform performance characteristics
- Handling platform-specific UX patterns
Example: TokenActivityFeed
TokenActivityFeed.tsx # Web: uses RecyclerList (virtualized)
TokenActivityFeed.native.tsx # Native: uses FlatList (RN optimized)
Both files export the same API - platform bundler picks the right one.
Guidelines
- Keep APIs identical between platform variants
- Share types/interfaces in a separate file when needed
- Platform-specific hooks:
useX.ts/useX.native.ts - Prefer shared code; only split when necessary