# React Native

React Native mobile patterns, platform-specific code

- Repository: https://github.com/alinaqi/maggy (710 stars)
- Category: Mobile
- License: MIT
- Last updated: 2026-10-13
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add alinaqi/maggy --skill react-native -g -a claude-code -y`
Codex: `npx skills add alinaqi/maggy --skill react-native -g -a codex -y`
Cursor: `npx skills add alinaqi/maggy --skill react-native -g -a cursor -y`
Gemini CLI: `npx skills add alinaqi/maggy --skill react-native -g -a gemini-cli -y`

## Description

React Native mobile patterns, platform-specific code

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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} />
  );
}
```

The rest: https://github.com/alinaqi/maggy/blob/HEAD/skills/react-native/SKILL.md