# Build React Native Features with Proven Patterns

React Native features can become difficult to maintain when component and state patterns are inconsistent. This skill provides focused examples for building, refactoring, and reviewing mobile application code.

## Install

```bash
npx skillstore add babakbar/code-patterns-practices
```

## Metadata

- Status: approved
- Slug: babakbar-code-patterns-practices
- Skillstore revision: r3
- Version status: missing
- Tree hash: 6fce73ba72e7d05c6706d705030a3547c0f17160595604dc597a129dd4e6ce66
- Author: BabakBar
- GitHub username: BabakBar
- License: MIT
- Repository: https://github.com/BabakBar/VibeKeeper/tree/main/.claude/skills/code-patterns
- Ref: 80999bf530a7874d7bedf8ce202001ecb4c4f5e0
- 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: scripts, external\_commands, network
- Quality score: 76
- Public page: https://skillstore.pages.dev/skills/babakbar-code-patterns-practices
- Manifest: https://skillstore.pages.dev/api/skills/babakbar-code-patterns-practices/manifest

## Capabilities

- Shows custom hook, compound component, and render prop patterns.
- Explains local, context-based, and Zustand state management examples.
- Provides an async data-loading hook with loading, error, and cleanup handling.
- Demonstrates memoization and lazy-loading patterns for React components.
- Covers error boundaries, typed error handling, safe areas, and keyboard avoidance.

## Use Cases

- Build a reusable screen feature: Choose component, state, and data-loading patterns for a new React Native screen.
- Refactor a large component: Split a complex component into custom hooks, focused children, and shared state boundaries.
- Review application reliability: Check loading states, error handling, cleanup, safe-area handling, and keyboard behavior.

## Prompt Templates

### Choose a simple state pattern

```
I am building a React Native counter and settings screen. Recommend the simplest state pattern and explain why.
```

### Create a data-loading hook

```
Create a React Native hook that loads a user by ID and handles loading, errors, cancellation, and cleanup.
```

### Refactor a feature screen

```
Review this React Native screen design. Propose component boundaries, custom hooks, and a state management approach that reduces prop drilling.
```

### Improve performance deliberately

```
Assess this React Native list screen for measurable performance issues. Recommend memoization or lazy loading only where the expected benefit is clear.
```

## Limitations

- It provides examples and guidance, not a complete application architecture.
- It does not install dependencies or run tests.
- It does not cover platform-specific native module implementation.
- Examples may need adaptation for your React Native version and project conventions.

## Best Practices

- Start with local state and add shared state only when multiple components need it.
- Handle loading, error, and cleanup paths for every asynchronous operation.
- Measure performance before adding memoization or lazy loading.

## Anti Patterns

- Do not create large components with unrelated responsibilities.
- Do not mutate React state directly.
- Do not omit cleanup for effects that can update state after unmounting.

## Security Audit

- Audited at: 2026-07-18T10:14:24.826\+00:00
- Summary: All 31 static findings are false positives caused by Markdown fences, TypeScript template literals, an illustrative relative API request, public documentation links, and a section heading. The skill is documentation-only and contains no prompt injection, command execution, credential access, or data-exfiltration intent.

## Stats

- Views: 201
- Downloads: 8
- Favorites: 0
- Popularity score: 0