# React Native Walkthrough — Learn by Doing

**Before We Begin:** This walkthrough assumes familiarity with React (components, state, props). React Native uses the same concepts but renders to native iOS/Android views instead of the DOM. If you're new to React, consider starting with the React Fundamentals module first.

---

## Step 1: First Screen

Let's create a simple React Native screen.

<!-- hint:diagram mermaid-type="flowchart" topic="React Native architecture: JS bundle → bridge → native views" -->
<!-- hint:code language="jsx" highlight="1,5" -->

**Task:** Create a `HomeScreen` component that displays a `View` with a `Text` saying "Welcome to React Native". Add basic styling (padding, background color).

**Question:** Why must the text be inside a `Text` component? What would happen if you put a string directly inside a `View`?

**Checkpoint:** The user has a styled screen and understands that RN requires all text to be wrapped in `Text`.

---

## Step 2: Touchables and State

**Task:** Add a button using `TouchableOpacity` that toggles a boolean state (e.g., "Toggled: true/false"). Style it so it looks like a button.

**Question:** How does `TouchableOpacity` differ from a web button? What accessibility considerations might apply?

**Checkpoint:** The user can handle press events and update state in RN.

---

## Step 3: ScrollView

<!-- hint:card type="tip" title="Use FlatList for long lists — ScrollView mounts all items; FlatList virtualizes for performance" -->

**Task:** Wrap your content in a `ScrollView`. Add enough content (e.g., 10 paragraphs) so that scrolling is needed. Ensure it scrolls smoothly.

**Question:** When would you choose `ScrollView` over `FlatList`? What's the tradeoff?

**Checkpoint:** The user understands ScrollView for bounded, finite content vs FlatList for long lists.

---

## Step 4: FlatList

<!-- hint:code language="jsx" highlight="1,8" -->

**Task:** Replace the manually repeated content with a `FlatList`. Use an array of items (e.g., `[{id: 1, title: "Item 1"}, ...]`). Implement `keyExtractor` and `renderItem`.

**Question:** Why does FlatList need a `keyExtractor`? What happens if two items have the same key?

**Checkpoint:** The user has a working FlatList with stable keys.

---

## Step 5: Navigation Setup

**Task:** Add React Navigation. Create two screens: `Home` and `Details`. Set up a stack navigator. From Home, add a button that navigates to Details.

**Question:** Where does the navigation state live? What happens to the Home screen when you navigate away — is it unmounted or preserved?

**Checkpoint:** The user can navigate between screens.

---

## Step 6: Passing Data Between Screens

**Task:** Pass an item ID from Home to Details (e.g., when tapping a list item). In Details, display the passed ID. Use `navigation.navigate('Details', { id: item.id })` and `route.params`.

**Question:** What happens if you navigate to Details without params? How would you handle optional or missing params?

**Checkpoint:** The user passes and receives params correctly.

---

## Step 7: Platform-Specific Styling

<!-- hint:buttons type="single" prompt="Which platform are you targeting first?" options="A: iOS,B: Android,C: Both" -->

**Task:** Make the header padding different on iOS (e.g., 44) vs Android (e.g., 24) using `Platform.select`. Verify (or describe) how it would look on each platform.

**Question:** Besides padding, what other UI elements often need platform-specific tweaks? Think about safe areas, status bars, and navigation patterns.

**Checkpoint:** The user can use Platform APIs for conditional styling.