>_SkillsHub▋

> 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)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/react-native-styling?format=md"
SKILL.md•react-native-styling

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().

Code

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: 16, // Use consistent spacing (8, 12, 16, 24)
  },
  title: {
    fontSize: 20,
    fontWeight: '600',
    ...Platform.select({
      ios: { fontFamily: 'SF Pro' },
      android: { fontFamily: 'Roboto' },
    }),
  },
});

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.

Reference & Examples

See references/theming.md for Design Tokens, Theme Systems, Responsive Scaling, and Shadow Helpers.

Related Topics

common/best-practices | components

> related_skills --same-repo

> typescript-tooling

Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)

> typescript-security

Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)

> typescript-language

Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)

> typescript-best-practices

Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)

┌ stats

installs/wk0
░░░░░░░░░░
github stars341
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#design#frontend#mobile#react
└────────────