---

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.