# React Native Styling

> StyleSheet API, Flexbox, theming, and responsive design.

- Skill: `fierzone/react-native-styling` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add fierzone/react-native-styling`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fierzone/react-native-styling/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: fierzone (https://skillmd.com/u/fierzone)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/fierzone/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

```tsx
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

```tsx
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](references/theming.md) for Design Tokens, Theme Systems, Responsive Scaling, and Shadow Helpers.

## Related Topics

common/best-practices | components