# React Native Quick Reference

## Core Components

| Component | Use For |
|-----------|---------|
| `View` | Containers, layout |
| `Text` | All text content |
| `ScrollView` | Scrollable content (finite) |
| `FlatList` | Long lists (virtualized) |
| `Image` | Images (source: `{uri}` or `require()`) |
| `TextInput` | User input |
| `TouchableOpacity` | Pressable with opacity feedback |

## StyleSheet

```jsx
const styles = StyleSheet.create({
  box: { flex: 1, padding: 16 },
});
<View style={styles.box} />
```

- Flexbox default: `flexDirection: 'column'`
- `flex: 1` fills available space
- No units for numbers (density-independent pixels)

## Navigation

| Method | Purpose |
|--------|---------|
| `navigation.navigate('Screen', { id: 1 })` | Go to screen with params |
| `navigation.goBack()` | Go back |
| `route.params` | Access params in destination |

## Platform

```jsx
import { Platform } from 'react-native';
Platform.OS // 'ios' | 'android'
Platform.select({ ios: 20, android: 16 })
```

## FlatList Props

| Prop | Purpose |
|------|---------|
| `data` | Array of items |
| `keyExtractor` | (item) => item.id |
| `renderItem` | ({ item }) => <Row item={item} /> |
| `ListHeaderComponent` | Header content |
| `refreshControl` | Pull-to-refresh |

## Decision: ScrollView vs FlatList

| Use ScrollView when | Use FlatList when |
|---------------------|-------------------|
| Few items (< 20) | Many items (20+) |
| Content is mixed (not just list) | Homogeneous list |
| Need nested scroll (careful) | Standard list UI |