Profile My skills Saved My plugins Edit profile Submit a skill

React Native Styling

StyleSheet API, Flexbox, theming, and responsive design. Use when implementing React Native styles, theming, Flexbox layouts, or responsive design. (triggers: **/*.tsx, **/*.ts, StyleSheet, style, theme, responsive, flexbox)

ComeOnOliver Updated 61 repo stars
Web & Frontend

File contents

React Native Styling

Priority: P1 (OPERATIONAL)

Implementation Guidelines

  • StyleSheet.create: Always use over 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.

ComeOnOliver/skillshub/tree/main/skills/HoangNguyen0403/agent-skills-standard/react-native-styling commit 7d6b4d4c3f

Browse category

Frequently asked questions

npx skillmds@latest add comeonoliver/react-native-styling