expotesting1 4.1.0

package/packages/examples/src/experiments/basic-app/BasicAppScreen.jsx

@@ -0,0 +1,162 @@
+/**
+ * Experiment 01 — Basic App
+ * Module 1: React Native Core Components
+ *
+ * Demonstrates:
+ * ✓ View, Text, Image — core RN components
+ * ✓ StyleSheet + Flexbox layouts
+ * ✓ JSX fundamentals
+ * ✓ ScrollView
+ * ✓ Basic component composition
+ */
+
+import React from 'react';
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View } from 'react-native';
+
+// ── 1. Functional component with typed props ─────────────────────────────────
+
+function ProfileCard({ name, role, avatarUrl }){
+  return (
+    <View style={styles.card}>
+      <Image
+        source={{ uri: avatarUrl }}
+        style={styles.avatar}
+        accessibilityLabel={`${name}'s avatar`}
+      />
+      <View style={styles.cardText}>
+        <Text style={styles.name}>{name}</Text>
+        <Text style={styles.role}>{role}</Text>
+      </View>
+    </View>
+  );
+}
+
+// ── 2. Simple stateless component ────────────────────────────────────────────
+
+function Section({ title, children }){
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>{title}</Text>
+      {children}
+    </View>
+  );
+}
+
+// ── 3. Main experiment screen ─────────────────────────────────────────────────
+export function BasicAppScreen(){
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Text style={styles.heading}>Experiment 01</Text>
+        <Text style={styles.subheading}>Basic App — Core Components</Text>
+      </View>
+
+      {/* Section: Core Components */}
+      <Section title="Core Components">
+        <Text style={styles.bodyText}>
+          React Native provides <Text style={styles.code}>View</Text>,{' '}
+          <Text style={styles.code}>Text</Text>, and{' '}
+          <Text style={styles.code}>Image</Text> as foundational building blocks.
+          Everything in the UI is composed from these primitives.
+        </Text>
+      </Section>
+
+      {/* Section: Flexbox */}
+      <Section title="Flexbox Layout">
+        <View style={styles.flexRow}>
+          {['flex-start', 'center', 'flex-end'].map((align) => (
+            <View key={align} style={styles.flexBox}>
+              <Text style={styles.flexLabel}>{align}</Text>
+            </View>
+          ))}
+        </View>
+        <View style={styles.flexColumn}>
+          {[1, 2, 3].map((n) => (
+            <View key={n} style={[styles.flexBox, { flex: n }]}>
+              <Text style={styles.flexLabel}>flex: {n}</Text>
+            </View>
+          ))}
+        </View>
+      </Section>
+
+      {/* Section: ProfileCard component */}
+      <Section title="Component Composition">
+        <ProfileCard
+          name="Alice Johnson"
+          role="Software Engineer"
+          avatarUrl="https://api.dicebear.com/7.x/personas/svg?seed=alice"
+        />
+        <ProfileCard
+          name="Bob Smith"
+          role="Product Designer"
+          avatarUrl="https://api.dicebear.com/7.x/personas/svg?seed=bob"
+        />
+      </Section>
+
+      {/* Section: Text variants */}
+      <Section title="Text Styles">
+        <Text style={styles.h1}>Heading 1</Text>
+        <Text style={styles.h2}>Heading 2</Text>
+        <Text style={styles.bodyText}>Body text — readable and accessible.</Text>
+        <Text style={styles.caption}>Caption — smaller supporting text</Text>
+        <Text style={[styles.bodyText, styles.bold]}>Bold text</Text>
+        <Text style={[styles.bodyText, styles.italic]}>Italic text</Text>
+      </Section>
+    </ScrollView>
+  );
+}
+
+// ── 4. Styles — demonstrating StyleSheet.create patterns ─────────────────────
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#fff' },
+  content: { paddingBottom: 40 },
+  header: {
+    backgroundColor: '#6200EE',
+    padding: 24,
+    paddingTop: 40 },
+  heading: { fontSize: 28, fontWeight: '700', color: '#fff' },
+  subheading: { fontSize: 16, color: 'rgba(255,255,255,0.8)', marginTop: 4 },
+  section: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0' },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#333',
+    marginBottom: 12 },
+  bodyText: { fontSize: 15, color: '#555', lineHeight: 22 },
+  caption: { fontSize: 12, color: '#888', marginTop: 4 },
+  h1: { fontSize: 28, fontWeight: '700', color: '#212121', marginBottom: 4 },
+  h2: { fontSize: 22, fontWeight: '600', color: '#212121', marginBottom: 4 },
+  bold: { fontWeight: '700' },
+  italic: { fontStyle: 'italic' },
+  code: { fontFamily: 'monospace', backgroundColor: '#f5f5f5', color: '#6200EE' },
+  // Flexbox demo
+  flexRow: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 },
+  flexColumn: { flexDirection: 'row', height: 60, gap: 4, marginTop: 8 },
+  flexBox: {
+    backgroundColor: '#e8d5ff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 6,
+    padding: 8 },
+  flexLabel: { fontSize: 10, color: '#6200EE', textAlign: 'center' },
+  // ProfileCard
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    backgroundColor: '#f9f9f9',
+    borderRadius: 10,
+    marginBottom: 8 },
+  avatar: { width: 52, height: 52, borderRadius: 26, backgroundColor: '#ddd' },
+  cardText: { marginLeft: 12 },
+  name: { fontSize: 16, fontWeight: '600', color: '#212121' },
+  role: { fontSize: 13, color: '#757575', marginTop: 2 } });

package/packages/examples/src/experiments/components-props-state/ComponentsStateScreen.jsx

@@ -0,0 +1,280 @@
+/**
+ * Experiment 02 — Components, Props & State
+ * Module 1: React Basics
+ *
+ * Demonstrates:
+ * ✓ useState + useReducer
+ * ✓ Event handling (Pressable, TextInput)
+ * ✓ Props drilling  vs lifted state
+ * ✓ Component lifecycle via useEffect
+ * ✓ Controlled inputs
+ * ✓ Conditional rendering
+ */
+
+import React, { useCallback, useEffect, useReducer, useState } from 'react';
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View } from 'react-native';
+
+// ── 1. useReducer — canonical todo pattern ────────────────────────────────────
+
+function todoReducer(state, action){
+  switch (action.type) {
+    case 'ADD':
+      return [...state, { id: Date.now(), text: action.text, done: false }];
+    case 'TOGGLE':
+      return state.map((t) => (t.id === action.id ? { ...t, done: !t.done } : t));
+    case 'REMOVE':
+      return state.filter((t) => t.id !== action.id);
+    default:
+      return state;
+  }
+}
+
+// ── 2. Controlled TextInput component ────────────────────────────────────────
+
+function AddTodoInput({ onAdd }){
+  const [text, setText] = useState('');
+
+  const handleSubmit = useCallback(() => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    onAdd(trimmed);
+    setText('');
+  }, [text, onAdd]);
+
+  return (
+    <View style={styles.inputRow}>
+      <TextInput
+        style={styles.textInput}
+        value={text}
+        onChangeText={setText}
+        placeholder="Add a task…"
+        placeholderTextColor="#aaa"
+        onSubmitEditing={handleSubmit}
+        returnKeyType="done"
+        accessibilityLabel="New task input"
+      />
+      <Pressable
+        onPress={handleSubmit}
+        style={({ pressed }) => [styles.addBtn, pressed && { opacity: 0.7 }]}
+        accessibilityRole="button"
+        accessibilityLabel="Add task"
+      >
+        <Text style={styles.addBtnText}>Add</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+// ── 3. TodoItem — demonstrates receiving + using props ────────────────────────
+
+function TodoItem({ todo, onToggle, onRemove }){
+  return (
+    <View style={styles.todoRow}>
+      <Pressable
+        onPress={() => onToggle(todo.id)}
+        style={styles.todoMain}
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked: todo.done }}
+      >
+        <View style={[styles.checkbox, todo.done && styles.checkboxDone]}>
+          {todo.done && <Text style={styles.checkmark}>✓</Text>}
+        </View>
+        <Text style={[styles.todoText, todo.done && styles.todoTextDone]}>
+          {todo.text}
+        </Text>
+      </Pressable>
+      <Pressable
+        onPress={() => onRemove(todo.id)}
+        style={styles.removeBtn}
+        accessibilityRole="button"
+        accessibilityLabel={`Remove ${todo.text}`}
+      >
+        <Text style={styles.removeBtnText}>✕</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+// ── 4. Counter — pure useState + lifted state example ────────────────────────
+
+function Counter({ count, onIncrement, onDecrement, onReset }){
+  return (
+    <View style={styles.counter}>
+      <Pressable onPress={onDecrement} style={styles.counterBtn}>
+        <Text style={styles.counterBtnText}>−</Text>
+      </Pressable>
+      <View style={styles.countDisplay}>
+        <Text style={styles.countValue}>{count}</Text>
+        <Text style={styles.countLabel}>count</Text>
+      </View>
+      <Pressable onPress={onIncrement} style={styles.counterBtn}>
+        <Text style={styles.counterBtnText}>+</Text>
+      </Pressable>
+      <Pressable onPress={onReset} style={[styles.counterBtn, styles.resetBtn]}>
+        <Text style={styles.counterBtnText}>↺</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+// ── 5. Main experiment screen ─────────────────────────────────────────────────
+export function ComponentsStateScreen(){
+  const [count, setCount] = useState(0);
+  const [todos, dispatch] = useReducer(todoReducer, [
+    { id: 1, text: 'Learn React Native', done: true },
+    { id: 2, text: 'Build a component', done: false },
+  ]);
+
+  // useEffect — demonstrates lifecycle: runs after each render when count changes
+  useEffect(() => {
+    // In a real app, you might sync to analytics, local storage, etc.
+    // console.log('Count changed to', count);
+  }, [count]);
+
+  const doneTodos = todos.filter((t) => t.done).length;
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Text style={styles.heading}>Experiment 02</Text>
+        <Text style={styles.subheading}>Components · Props · State</Text>
+      </View>
+
+      {/* useState Counter */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>useState — Counter</Text>
+        <Text style={styles.note}>
+          State is local to this component and lifted to props for Counter.
+        </Text>
+        <Counter
+          count={count}
+          onIncrement={() => setCount((c) => c + 1)}
+          onDecrement={() => setCount((c) => c - 1)}
+          onReset={() => setCount(0)}
+        />
+      </View>
+
+      {/* useReducer TodoList */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>
+          useReducer — Todo List ({doneTodos}/{todos.length} done)
+        </Text>
+        <Text style={styles.note}>
+          useReducer manages complex state with explicit action types.
+        </Text>
+        <AddTodoInput onAdd={(text) => dispatch({ type: 'ADD', text })} />
+        {todos.length === 0 ? (
+          <Text style={styles.emptyMsg}>No tasks. Add one above!</Text>
+        ) : (
+          todos.map((todo) => (
+            <TodoItem
+              key={todo.id}
+              todo={todo}
+              onToggle={(id) => dispatch({ type: 'TOGGLE', id })}
+              onRemove={(id) => dispatch({ type: 'REMOVE', id })}
+            />
+          ))
+        )}
+      </View>
+
+      {/* Conditional rendering demo */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Conditional Rendering</Text>
+        {count > 0 ? (
+          <Text style={[styles.note, { color: '#388E3C' }]}>
+            ✓ Count is positive: {count}
+          </Text>
+        ) : count < 0 ? (
+          <Text style={[styles.note, { color: '#D32F2F' }]}>
+            ✗ Count is negative: {count}
+          </Text>
+        ) : (
+          <Text style={styles.note}>Count is zero. Use the counter above.</Text>
+        )}
+      </View>
+    </ScrollView>
+  );
+}
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#fff' },
+  content: { paddingBottom: 40 },
+  header: { backgroundColor: '#6200EE', padding: 24, paddingTop: 40 },
+  heading: { fontSize: 28, fontWeight: '700', color: '#fff' },
+  subheading: { fontSize: 16, color: 'rgba(255,255,255,0.8)', marginTop: 4 },
+  section: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0' },
+  sectionTitle: { fontSize: 18, fontWeight: '700', color: '#333', marginBottom: 8 },
+  note: { fontSize: 13, color: '#666', lineHeight: 20, marginBottom: 12 },
+  emptyMsg: { color: '#aaa', textAlign: 'center', paddingVertical: 16 },
+  // Counter
+  counter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    paddingVertical: 8 },
+  counterBtn: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: '#f0e6ff',
+    alignItems: 'center',
+    justifyContent: 'center' },
+  counterBtnText: { fontSize: 22, color: '#6200EE', fontWeight: '700' },
+  resetBtn: { backgroundColor: '#e8f5e9' },
+  countDisplay: { alignItems: 'center', minWidth: 64 },
+  countValue: { fontSize: 36, fontWeight: '800', color: '#6200EE' },
+  countLabel: { fontSize: 11, color: '#888', textTransform: 'uppercase' },
+  // Input
+  inputRow: { flexDirection: 'row', gap: 8, marginBottom: 12 },
+  textInput: {
+    flex: 1,
+    height: 44,
+    borderWidth: 1.5,
+    borderColor: '#ccc',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    fontSize: 15,
+    color: '#212121',
+    backgroundColor: '#fafafa' },
+  addBtn: {
+    paddingHorizontal: 20,
+    height: 44,
+    backgroundColor: '#6200EE',
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center' },
+  addBtnText: { color: '#fff', fontWeight: '700', fontSize: 14 },
+  // Todo
+  todoRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0' },
+  todoMain: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 12 },
+  checkbox: {
+    width: 22,
+    height: 22,
+    borderRadius: 4,
+    borderWidth: 2,
+    borderColor: '#ccc',
+    alignItems: 'center',
+    justifyContent: 'center' },
+  checkboxDone: { backgroundColor: '#6200EE', borderColor: '#6200EE' },
+  checkmark: { color: '#fff', fontSize: 13, fontWeight: '700' },
+  todoText: { fontSize: 15, color: '#212121' },
+  todoTextDone: { textDecorationLine: 'line-through', color: '#aaa' },
+  removeBtn: { padding: 8 },
+  removeBtnText: { color: '#D32F2F', fontSize: 16 } });

package/packages/examples/src/experiments/navigation/NavigationScreen.jsx

@@ -0,0 +1,202 @@
+/**
+ * Experiment 03 — Navigation
+ * Module 1: Navigation (Stack · Tabs · Drawer · Params)
+ *
+ * Demonstrates:
+ * ✓ Stack navigation with typed params
+ * ✓ Bottom tab navigation
+ * ✓ Drawer navigation
+ * ✓ Navigating with params
+ * ✓ useNavigation + useRoute hooks
+ * ✓ NavigationContainer setup
+ *
+ * NOTE: This file exports composable screen components.
+ * The full navigator wiring is done in apps/expo-app.
+ * Each sub-screen can be run standalone for unit testing.
+ */
+
+import React from 'react';
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View } from 'react-native';
+
+// ── Param list type ──────────────────────────────────────────────────────────
+
+// ── NavHomeScreen ─────────────────────────────────────────────────────────────
+
+const SAMPLE_ITEMS = [
+  { id: 1, title: 'Purple Widget', color: '#6200EE' },
+  { id: 2, title: 'Teal Widget', color: '#03DAC6' },
+  { id: 3, title: 'Red Widget', color: '#B00020' },
+];
+
+export function NavHomeScreen({ navigation }){
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <View style={styles.header}>
+        <Text style={styles.heading}>Experiment 03</Text>
+        <Text style={styles.subheading}>Navigation Patterns</Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Stack with Params</Text>
+        <Text style={styles.note}>
+          Tap an item to push a Details screen, passing typed route params.
+        </Text>
+        {SAMPLE_ITEMS.map((item) => (
+          <Pressable
+            key={item.id}
+            style={({ pressed }) => [styles.itemRow, pressed && { opacity: 0.7 }]}
+            onPress={() =>
+              navigation.navigate('NavDetails', {
+                itemId: item.id,
+                title: item.title,
+                color: item.color })
+            }
+            accessibilityRole="button"
+          >
+            <View style={[styles.colorDot, { backgroundColor: item.color }]} />
+            <Text style={styles.itemText}>{item.title}</Text>
+            <Text style={styles.chevron}>›</Text>
+          </Pressable>
+        ))}
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Concepts Covered</Text>
+        {[
+          'Stack Navigator — push/pop screens',
+          'Bottom Tabs — switchable views',
+          'Drawer — side panel navigation',
+          'Typed params — navigate<Screen>(params)',
+          'useNavigation + useRoute hooks',
+        ].map((concept) => (
+          <Text key={concept} style={styles.bullet}>
+            • {concept}
+          </Text>
+        ))}
+      </View>
+    </ScrollView>
+  );
+}
+
+// ── NavDetailsScreen ──────────────────────────────────────────────────────────
+
+export function NavDetailsScreen({ route, navigation }){
+  const { itemId, title, color } = route.params;
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <View style={[styles.header, { backgroundColor: color }]}>
+        <Text style={styles.heading}>{title}</Text>
+        <Text style={styles.subheading}>Item ID: {itemId}</Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Route Params Received</Text>
+        <View style={styles.paramsBox}>
+          <ParamRow label="itemId" value={String(itemId)} />
+          <ParamRow label="title" value={title} />
+          <ParamRow label="color" value={color} />
+        </View>
+
+        <Text style={styles.note}>
+          Params are passed via {' '}
+          <Text style={styles.code}>navigation.navigate('NavDetails', {'{ itemId, title, color }'})</Text>
+          {' '} and read via {' '}
+          <Text style={styles.code}>route.params</Text>.
+        </Text>
+
+        <Pressable
+          style={[styles.backBtn, { backgroundColor: '#03DAC6', marginBottom: 8 }]}
+          onPress={() => navigation.navigate('NavProfile', { userId: String(itemId) })}
+        >
+          <Text style={styles.backBtnText}>View Profile →</Text>
+        </Pressable>
+        <Pressable
+          style={[styles.backBtn, { backgroundColor: color }]}
+          onPress={() => navigation.goBack()}
+        >
+          <Text style={styles.backBtnText}>← Go Back</Text>
+        </Pressable>
+      </View>
+    </ScrollView>
+  );
+}
+
+function ParamRow({ label, value }){
+  return (
+    <View style={styles.paramRow}>
+      <Text style={styles.paramLabel}>{label}</Text>
+      <Text style={styles.paramValue}>{value}</Text>
+    </View>
+  );
+}
+
+// ── NavProfileScreen — demonstrates useNavigation/useRoute ───────────────────
+
+export function NavProfileScreen({ route }){
+  const { userId } = route.params;
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <View style={[styles.header, { backgroundColor: '#03DAC6' }]}>
+        <Text style={styles.heading}>Profile</Text>
+        <Text style={styles.subheading}>userId: {userId}</Text>
+      </View>
+      <View style={styles.section}>
+        <Text style={styles.note}>
+          This screen illustrates how to receive and display route params. In a
+          real app you would fetch user data using the userId from an API.
+        </Text>
+      </View>
+    </ScrollView>
+  );
+}
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#fff' },
+  content: { paddingBottom: 40 },
+  header: { backgroundColor: '#6200EE', padding: 24, paddingTop: 40 },
+  heading: { fontSize: 28, fontWeight: '700', color: '#fff' },
+  subheading: { fontSize: 16, color: 'rgba(255,255,255,0.8)', marginTop: 4 },
+  section: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0' },
+  sectionTitle: { fontSize: 18, fontWeight: '700', color: '#333', marginBottom: 8 },
+  note: { fontSize: 13, color: '#666', lineHeight: 20, marginBottom: 12 },
+  bullet: { fontSize: 14, color: '#444', lineHeight: 24, paddingLeft: 4 },
+  itemRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0',
+    gap: 12 },
+  colorDot: { width: 14, height: 14, borderRadius: 7 },
+  itemText: { flex: 1, fontSize: 15, color: '#212121' },
+  chevron: { fontSize: 22, color: '#bbb', fontWeight: '300' },
+  paramsBox: {
+    backgroundColor: '#f8f0ff',
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 12 },
+  paramRow: {
+    flexDirection: 'row',
+    paddingVertical: 4,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e8d5ff' },
+  paramLabel: { width: 80, fontFamily: 'monospace', fontSize: 13, color: '#555' },
+  paramValue: { flex: 1, fontFamily: 'monospace', fontSize: 13, color: '#6200EE', fontWeight: '600' },
+  code: { fontFamily: 'monospace', backgroundColor: '#f0f0f0', fontSize: 12, color: '#333' },
+  backBtn: {
+    borderRadius: 8,
+    padding: 14,
+    alignItems: 'center',
+    marginTop: 8 },
+  backBtnText: { color: '#fff', fontWeight: '700', fontSize: 15 } });