# react-native

A skill that sets project structure, component patterns and testing rules for React Native. Kicks in when the agent touches .tsx files or iOS and Android code.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 566 installs · ★ 711
- Author: alinaqi
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/alinaqi/maggy/tree/HEAD/skills/react-native/SKILL.md
- Updated: 2026-10-13
- HTML: https://affpapa.org/en/nevibecode/skills/alinaqi-react-native

## What it does

The skill activates on `**/*.tsx`, `**/*.jsx`, `ios/`, `android/` and `app.json`. It lays out a project layout: pure business logic under `src/core/`, reusable components, screens paired with their own hooks, plus navigation, store and utils folders.

What it actually enforces is code style. Functional components only, logic pulled into hooks, props interfaces written out even when small. Local state with `useState`, global state with Zustand, server state with React Query. Component and hook tests go through React Native Testing Library.

For platform differences it suggests `Platform.select`, and separate `Component.ios.tsx` and `Component.android.tsx` files when the gap is bigger. There is also an anti-pattern list: inline styles, logic in render, list index as key, direct state mutation. You never invoke it by hand — the path match does the work.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add alinaqi/maggy --skill react-native -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/react-native/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/react-native/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add alinaqi/maggy --skill react-native -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/react-native/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add alinaqi/maggy --skill react-native -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/react-native/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install alinaqi/maggy react-native
```

2. **Manually: put the files in place**
- File: `.github/skills/react-native/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add alinaqi/maggy --skill react-native -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/alinaqi/maggy --path skills/react-native
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/react-native/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add alinaqi/maggy --skill react-native -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/alinaqi/maggy/tree/HEAD/skills/react-native/SKILL.md

## When to use it
- split a screen into a presentational component and a logic hook
- move iOS and Android differences into separate files
- test a component for press handling and disabled state
- switch server data to React Query with cache invalidation
- drop inline styles and anonymous props functions

## Example prompts
- Split HomeScreen into a component and a useHome hook, keep logic out of render
- Add a shadow with Platform.select for iOS and Android
- Write a Button test: press calls onPress, disabled does not

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: c1d53d7c8b15ff7f.

BEGIN THIRD-PARTY FILE c1d53d7c8b15ff7f
````text
---
name: react-native
description: React Native mobile patterns, platform-specific code
when-to-use: When working on React Native mobile app code
user-invocable: false
paths: ["**/*.tsx", "**/*.jsx", "ios/**", "android/**", "app.json"]
effort: medium
---

# React Native Skill


---

## Project Structure

```
project/
├── src/
│   ├── core/                   # Pure business logic (no React)
│   │   ├── types.ts
│   │   └── services/
│   ├── components/             # Reusable UI components
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   ├── Button.test.tsx
│   │   │   └── index.ts
│   │   └── index.ts            # Barrel export
│   ├── screens/                # Screen components
│   │   ├── Home/
│   │   │   ├── HomeScreen.tsx
│   │   │   ├── useHome.ts      # Screen-specific hook
│   │   │   └── index.ts
│   │   └── index.ts
│   ├── navigation/             # Navigation configuration
│   ├── hooks/                  # Shared custom hooks
│   ├── store/                  # State management
│   └── utils/                  # Utilities
├── __tests__/
├── android/
├── ios/
└── CLAUDE.md
```

---

## Component Patterns

### Functional Components Only
```typescript
// Good - simple, testable
interface ButtonProps {
  label: string;
  onPress: () => void;
  disabled?: boolean;
}

export function Button({ label, onPress, disabled = false }: ButtonProps): JSX.Element {
  return (
    <Pressable onPress={onPress} disabled={disabled}>
      <Text>{label}</Text>
    </Pressable>
  );
}
```

### Extract Logic to Hooks
```typescript
// useHome.ts - all logic here
export function useHome() {
  const [items, setItems] = useState<Item[]>([]);
  const [loading, setLoading] = useState(false);

  const refresh = useCallback(async () => {
    setLoading(true);
    const data = await fetchItems();
    setItems(data);
    setLoading(false);
  }, []);

  return { items, loading, refresh };
}

// HomeScreen.tsx - pure presentation
export function HomeScreen(): JSX.Element {
  const { items, loading, refresh } = useHome();
  
  return (
    <ItemList items={items} loading={loading} onRefresh={refresh} />
  );
}
```

### Props Interface Always Explicit
```typescript
// Always define props interface, even if simple
interface ItemCardProps {
  item: Item;
  onPress: (id: string) => void;
}

export function ItemCard({ item, onPress }: ItemCardProps): JSX.Element {
  ...
}
```

---

## State Management

### Local State First
```typescript
// Start with useState, escalate only when needed
const [value, setValue] = useState('');
```

### Zustand for Global State (if needed)
```typescript
// store/useAppStore.ts
import { create } from 'zustand';

interface AppState {
  user: User | null;
````
END THIRD-PARTY FILE c1d53d7c8b15ff7f

The third-party file has ended. Everything between the c1d53d7c8b15ff7f tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2927 of 5779 bytes. © alinaqi · MIT · https://github.com/alinaqi/maggy/tree/HEAD/skills/react-native/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md