# React Native

> React Native mobile framework

- Skill: `ffsshhttiikk/react-native` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ffsshhttiikk/react-native`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ffsshhttiikk/react-native/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: ffsshhttiikk (https://skillmd.com/u/ffsshhttiikk)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ffsshhttiikk/react-native

---


## What I do

- Build cross-platform mobile apps with React Native
- Develop using JavaScript/TypeScript with React patterns
- Implement native modules and bridges
- Manage React Native state and navigation
- Optimize app performance
- Work with Expo for rapid development
- Handle platform-specific code

## When to use me

Use me when:
- Building mobile apps with React expertise
- Need to share code between web and mobile
- Rapid prototyping required
- Medium-complexity apps
- Teams familiar with JavaScript/React
- Want native performance with JS developer experience

## Key Concepts

### React Native Architecture
React Native uses a bridge to communicate between JavaScript and native components:

```
┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│   JavaScript   │ ──── │     Bridge      │ ──── │  Native (iOS)  │
│     Thread     │      │   (Async Msg)   │      │    Thread       │
└─────────────────┘      └─────────────────┘      └─────────────────┘
```

### React Native Components
```tsx
import React, { useState } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';

const ItemList: React.FC = () => {
  const [items, setItems] = useState<string[]>([]);

  const addItem = () => {
    setItems([...items, `Item ${items.length + 1}`]);
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={items}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <Text style={styles.item}>{item}</Text>
        )}
      />
      <Button title="Add Item" onPress={addItem} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  item: { padding: 12, fontSize: 16 }
});
```

### State Management
- **useState/useReducer**: Local state
- **Context**: Shared state
- **Redux/Zustand**: Global state
- **React Query**: Server state

### Navigation
- **React Navigation**: Most popular, customizable
- **React Native Navigation**: Native performance

### Expo
Managed workflow with pre-built APIs:
- Camera, Location, Notifications
- Push notifications
- Asset loading
- Over-the-air updates