React Native Component Template

This template helps you create well-structured React Native components with platform-specific optimizations, performance considerations, and mobile-first design patterns.

Sample Prompt

Create a React Native photo gallery component:
- TouchableOpacity grid layout with lazy loading for performance
- Platform-specific styling for iOS and Android differences
- Image caching and compression for efficient memory usage
- Pull-to-refresh functionality with ActivityIndicator
- Modal view for full-screen image viewing with gestures
- Integration with device camera and photo library permissions

What This Template Covers

Cross-platform compatibility with iOS and Android specific considerations
Performance optimization including lazy loading and memory management
Native module integration for accessing device features and APIs
Responsive design for different screen sizes and orientations
Gesture handling and touch interactions optimized for mobile
State management with hooks and context for component communication

Best Practices

Use FlatList or VirtualizedList for large data sets to improve performance
Implement platform-specific styling when necessary for native feel
Optimize images with appropriate compression and caching strategies
Handle device orientation and different screen densities properly
Use React.memo and useMemo for performance optimization
Test on real devices rather than just simulators for accurate performance
Handle permissions gracefully with proper error messaging
Follow accessibility guidelines for inclusive mobile experiences

When to Use This Template

Building reusable UI components for React Native applications
Creating mobile-optimized interfaces with native performance
Implementing device-specific features like camera or location services
Developing cross-platform mobile apps with platform-specific adaptations
Optimizing mobile app performance and user experience

The Script

peep react-native-component