react-native-basics

# React Native Basics Skill

> Learn production-ready React Native fundamentals including core components, StyleSheet, Flexbox, and Expo SDK.

## Prerequisites

- JavaScript/TypeScript fundamentals
- React basics (components, props, state, hooks)
- Node.js and npm/yarn installed
- Xcode (iOS) or Android Studio (Android)

## Learning Objectives

After completing this skill, you will be able to:
- [ ] Create and compose React Native components
- [ ] Apply styles using StyleSheet API
- [ ] Build responsive layouts with Flexbox
- [ ] Use platform-specific code (iOS/Android)
- [ ] Set up and use Expo for development

---

## Topics Covered

### 1. Core Components
```
View          - Container component (like div)
Text          - Text display (required for strings)
Image         - Image rendering
ScrollView    - Scrollable container
FlatList      - Optimized list rendering
TextInput     - User input
Pressable     - Touch handling
```

### 2. Styling System
```typescript
// StyleSheet.create for performance
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1a1a1a',
  },
});
```

### 3. Flexbox Layout
```typescript
// Common patterns
flexDirection: 'row' | 'column'     // Main axis
justifyContent: 'center' | 'space-between'  // Main axis alignment
alignItems: 'center' | 'stretch'    // Cross axis alignment
flex: 1                              // Grow to fill
```

### 4. Platform-Specific Code
```typescript
import { Platform } from 'react-native';

// Method 1: Platform.select
const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: { shadowColor: '#000', shadowOpacity: 0.1 },
    android: { elevation: 4 },
  }),
});

// Method 2: Platform.OS
if (Platform.OS === 'ios') {
  // iOS specific code
}
```

### 5. Expo Setup
```bash
# Create new project
npx create-expo-app MyApp
cd MyApp

# Start development
npx expo start

# Build for pro