Responsive Design
Comprehensive skill for building responsive layouts in React Native/Expo mobile apps.
Overview
Mobile responsive design requires:
- Safe area handling (notch, home indicator)
- Screen size adaptation
- Platform-specific styling (iOS vs Android)
- Orientation changes
- Tablet support
Use When
This skill is automatically invoked when:
- Building responsive layouts
- Handling safe areas
- Supporting multiple screen sizes
- Implementing platform-specific UI
Available Templates
| Template | Description |
|---|---|
templates/responsive.ts | Responsive dimension utilities |
templates/safe-view.tsx | Safe area wrapper component |
templates/typography.tsx | Responsive text components |
templates/platform-styles.ts | Platform-specific styles |
Key Utilities
// From templates/responsive.ts
wp(50); // 50% of screen width
hp(25); // 25% of screen height
moderateScale(16); // Scaled font size
isTablet; // Device type detection
Best Practices
- Always wrap root with SafeAreaProvider
- Use percentages and flex for layout
- Follow platform conventions (iOS/Android)
- Test on both small and large devices