# Build Better React Native Interfaces

React Native teams need consistent styling, navigation, and animation patterns. This skill gives Claude, Codex, and Claude Code practical examples for polished mobile UI.

## Install

```bash
npx skillstore add wshobson/react-native-design
```

## Metadata

- Status: approved
- Slug: wshobson-react-native-design
- Skillstore revision: r1
- Version status: missing
- Tree hash: a0e19f359f87f4a9f10c2d38f05c68a3459663b75f12670e81b2bde8ec605c71
- Author: wshobson
- GitHub username: wshobson
- License: MIT
- Repository: https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/react-native-design/
- Ref: 64ca8af0f54a325752f08bd54e52151061ea659a
- 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, network
- Quality score: 75
- Public page: https://skillstore.pages.dev/skills/wshobson-react-native-design
- Manifest: https://skillstore.pages.dev/api/skills/wshobson-react-native-design/manifest

## Capabilities

- Explains StyleSheet, dynamic styles, flexbox layouts, and platform-specific styling patterns.
- Provides typed React Navigation examples for stack, tab, drawer, deep link, and auth flows.
- Shows Reanimated 3 patterns for shared values, animated styles, gestures, interpolation, and layout animations.
- Demonstrates reusable mobile UI components such as cards, buttons, inputs, lists, headers, and bottom sheets.
- Covers performance practices for memoization, FlatList usage, safe areas, real device testing, and UI-thread animations.
- References official React Native, React Navigation, Reanimated, Gesture Handler, and Expo documentation.

## Use Cases

- Design a Mobile Feature: Create a styled React Native screen with responsive layout, safe areas, and reusable components.
- Plan Navigation Architecture: Define stack, tab, drawer, deep link, and auth navigation patterns for a growing app.
- Improve Motion Quality: Add gestures, transitions, bottom sheets, and UI-thread animations with Reanimated 3.

## Prompt Templates

### Style a Basic Screen

```
Use this skill to design a React Native profile screen with StyleSheet, safe areas, and responsive spacing.
```

### Create Navigation Flow

```
Use this skill to plan typed React Navigation routes for home, details, settings, and authentication screens.
```

### Add Gesture Animation

```
Use this skill to add a Reanimated gesture interaction for a swipeable card with smooth visual feedback.
```

### Review Mobile UI System

```
Use this skill to review my React Native UI patterns for performance, platform differences, navigation typing, and animation quality.
```

## Limitations

- It provides guidance and examples, not a complete application scaffold.
- It does not replace testing on real iOS and Android devices.
- It assumes familiarity with React, TypeScript, and common React Native tooling.
- It does not audit app security, accessibility, or store compliance by itself.

## Best Practices

- Start with typed navigation and stable route parameters before adding complex screen transitions.
- Keep visual styles reusable through StyleSheet, theme tokens, and platform-aware layout helpers.
- Test animations and gestures on real devices because simulator timing can hide performance issues.

## Anti Patterns

- Do not use ScrollView with mapped items for long lists when FlatList is more suitable.
- Do not run frequent animation updates on the JavaScript thread when Reanimated worklets fit the task.
- Do not hard-code one platform layout without checking safe areas, font differences, and Android elevation behavior.

## Security Audit

- Audited at: 2026-07-08T13:24:56.072\+00:00
- Summary: All static findings were adjudicated as false positives after reviewing the cited markdown and TypeScript examples. The suspicious patterns are documentation fences, JavaScript template literals, React Navigation route keys, official documentation links, and ordinary mobile UI guidance. No prompt injection, secret handling, command execution, or data exfiltration intent was found.

## Stats

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