@shaykec/bridge 0.4.25 → 0.4.27

package/modules/react-native-fundamentals/walkthrough.md

@@ -0,0 +1,84 @@
+# 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.