HoangNguyen0403 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.selectfor 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.