name: react-native-styling
description: Style React Native apps with StyleSheet API, Flexbox, theming, and responsive design. Use when implementing React Native styles, theming, Flexbox layouts, or responsive design.
metadata:
triggers:
files:
- '/*.tsx'
- '/*.ts'
keywords:
- StyleSheet
- style
- theme
- responsive
- flexbox
React Native Styling
Priority: P1 (HIGH)
Implementation Guidelines
- StyleSheet.create: Prefer this to inline objects (optimized, validated).
- Flexbox: Default layout. No CSS Grid.
- Responsive: Use
Dimensions, useWindowDimensions, or percentage widths.
- Theming: Centralize colors, fonts in
theme/ folder.
- Platform Styles: Use
Platform.select for conditional styles.
- Dark Mode: Use React Context +
useColorScheme().
Responsive Design
const { width } = useWindowDimensions();
const isSmall = width < 375;
Anti-Patterns
- No Inline Styles: Use
StyleSheet.create.
- No Magic Numbers: Use theme constants.
- No Absolute Positioning: Avoid unless necessary.
- No Fixed Widths: Use flex or percentages.
References
See references/theming.md for StyleSheet examples, Design Tokens, Theme Systems, Responsive Scaling, and Shadow Helpers.