# Apply React Native Styling Patterns

React Native styling can become inconsistent across themes, screens, and platforms. This skill gives practical NativeWind and BrandColors patterns for Expo apps.

## Install

```bash
npx skillstore add cjharmath/rn-styling
```

## Metadata

- Status: approved
- Slug: cjharmath-rn-styling
- Skillstore revision: r1
- Version status: missing
- Tree hash: 6cd99f550d57609d3bdd4bd695ca64368a5316cdaf5a01b3dd2d091fd0260d0e
- Author: CJHarmath
- GitHub username: CJHarmath
- License: MIT
- Repository: https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/rn-styling
- Ref: dd4a3ef9f20ddf38830950b4bb713df96b431fd6
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/cjharmath-rn-styling
- Manifest: https://skillstore.pages.dev/api/skills/cjharmath-rn-styling/manifest

## Capabilities

- Choose when to use BrandColors versus NativeWind utility classes.
- Show theme-aware color patterns with light and dark color constants.
- Explain NativeWind class ordering and override behavior.
- Provide React Native patterns for safe areas, keyboard avoiding, and platform-specific styles.
- Guide responsive layout, animated styles, and StyleSheet usage.

## Use Cases

- Standardize Mobile Components: Apply consistent color, spacing, and layout choices when building React Native UI components.
- Review Styling Pull Requests: Check whether component changes follow NativeWind, BrandColors, safe area, and platform style patterns.
- Plan Theme Support: Design light and dark theme usage with shared color constants and clear component responsibilities.

## Prompt Templates

### Improve a Component Style

```
Review this React Native component style. Suggest where to use BrandColors, NativeWind classes, and StyleSheet rules.
```

### Check Class Overrides

```
Inspect these NativeWind class names for conflicting spacing, layout, and platform utilities. Explain which styles win and how to simplify them.
```

### Add Theme and Platform Support

```
Update this screen plan for light mode, dark mode, safe areas, keyboard behavior, iOS shadows, and Android elevation.
```

### Create a Styling Migration Plan

```
Audit this React Native styling approach and create a migration plan from hardcoded colors to BrandColors and NativeWind layout utilities.
```

## Limitations

- Does not include a runnable scanner or enforcement script.
- Does not define project-specific color values or Tailwind configuration.
- Does not replace testing on iOS, Android, and different screen sizes.
- Focused on React Native and Expo, not web CSS frameworks.

## Best Practices

- Use BrandColors for semantic colors and NativeWind for layout, spacing, borders, and radius.
- Keep platform-specific shadows explicit with iOS shadow properties and Android elevation.
- Test theme, keyboard, safe area, and screen width behavior on target devices.

## Anti Patterns

- Hardcoding hex colors inside component classes when semantic color constants exist.
- Relying on web Tailwind behavior where NativeWind support differs.
- Merging style objects with spreads inside render paths for animated or reused styles.

## Security Audit

- Audited at: 2026-07-06T05:48:13.603\+00:00
- Summary: I found no evidence that the flagged backtick patterns execute commands. The references are Markdown code fences, inline code, JSX snippets, and prose in SKILL.md, so all static findings are false positives. No prompt injection, data exfiltration intent, or system reconnaissance instruction was found.

## Stats

- Views: 195
- Downloads: 12
- Favorites: 0
- Popularity score: 0