mobile-anti-patterns

Reviews React Native and Expo code for common anti-patterns during debugging and code review.

3|1|Updated Jan 12, 2026
One-click install
npx skills add https://github.com/nghyane/VSTEP --skill mobile-anti-patterns-nghyane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-anti-patterns
Source: https://github.com/nghyane/VSTEP/tree/main/apps/mobile-v2/.agents/skills/mobile-anti-patterns
Command: npx skills add https://github.com/nghyane/VSTEP --skill mobile-anti-patterns-nghyane

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React Native and Expo codebases accumulate subtle mistakes—unsafe type casts, auth redirects in render, scattered error handling, hardcoded values—that pass review and cause bugs later. This Skill provides a concrete checklist of wrong-versus-right patterns so reviewers and debuggers catch these issues consistently. ## Core Features & Use Cases - Type Safety Rules: Replaces as casts and non-null assertions with discriminated unions, nullish coalescing, and shared API response types. - Architecture Patterns: Enforces auth redirects in useEffect, mutations via TanStack Query useMutation, and token access only through the auth store with expo-secure-store. - UI & Styling Conventions: Flags hardcoded colors/spacing, inline maps for fixed UI sets, oversized route pages, and mock data in components. - Use Case: During a pull request review of a new exam screen, load this Skill to verify the route page stays under 80 lines, API calls use useMutation, and audio uses hidden controls per VSTEP exam rules. ## Quick Start Review this React Native screen component against the mobile anti-patterns checklist and list every violation with the corrected code.

Frequently Asked Questions about mobile-anti-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle auth redirects in React Native Expo Router?▼

Auth redirects belong in useEffect, not in the render body. Call router.replace inside a useEffect watching isAuthenticated, then return null from render while unauthenticated to avoid side effects during rendering.

How to handle API errors globally with TanStack Query?▼

Configure a global QueryClient onError handler that catches errors from queries and mutations, such as triggering logout on 401 responses. Components should only show Alert messages for user-facing feedback, not duplicate try/catch logic.

Should I use AsyncStorage or expo-secure-store for auth tokens?▼

Use expo-secure-store for auth tokens and other sensitive data since it encrypts values at rest. Reserve AsyncStorage only for non-sensitive cached data, and centralize all SecureStore calls inside the auth store.

Why avoid async API calls outside useMutation in React Native?▼

Plain async calls bypass the QueryClient onError handler, so global error handling like 401 logout never fires. Wrapping calls in useMutation ensures errors flow through the centralized handler and gives you loading states for free.

When should route pages delegate logic to hooks and components?▼

Route pages should stay under roughly 80 lines and only compose UI. Move data fetching and handlers into src/hooks and presentation into src/components once a page accumulates multiple hooks, handlers, or inline sub-components.