expotesting2 4.1.0

package/packages/examples/src/experiments/network-storage/NetworkStorageScreen.jsx

@@ -0,0 +1,367 @@
+/**
+ * Experiment 05 — Networking & Storage
+ * Module 2: Fetch · Axios · AsyncStorage · SQLite
+ *
+ * Demonstrates:
+ * ✓ Fetch API with async/await
+ * ✓ Axios via @expotesting/network apiClient
+ * ✓ useFetch hook
+ * ✓ AsyncStorage CRUD (wrapped via @expotesting/storage)
+ * ✓ SQLite CRUD operations
+ * ✓ FlatList with real data
+ * ✓ Loading / error states
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View } from 'react-native';
+import { apiClient } from '@expotesting/network';
+import { appStorage, useSQLite } from '@expotesting/storage';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+// ── Sub-section: Fetch API demo ───────────────────────────────────────────────
+function FetchSection(){
+  const [posts, setPosts] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchWithNative = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // Native Fetch API — async/await pattern
+      const response = await fetch(
+        'https://jsonplaceholder.typicode.com/posts?_limit=5',
+      );
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const data = (await response.json());
+      setPosts(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fetch failed');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return (
+    <View style={styles.widget}>
+      <Text style={styles.widgetTitle}>Native fetch() + async/await</Text>
+      <Pressable
+        style={[styles.btn, loading && styles.btnDisabled]}
+        onPress={() => void fetchWithNative()}
+        disabled={loading}
+      >
+        <Text style={styles.btnText}>{loading ? 'Fetching…' : 'Fetch Posts'}</Text>
+      </Pressable>
+      {loading && <ActivityIndicator color="#6200EE" style={{ marginTop: 8 }} />}
+      {error && <Text style={styles.errorText}>{error}</Text>}
+      <FlatList
+        data={posts}
+        scrollEnabled={false}
+        keyExtractor={(item) => String(item.id)}
+        renderItem={({ item }) => (
+          <View style={styles.postRow}>
+            <Text style={styles.postId}>#{item.id}</Text>
+            <Text style={styles.postTitle} numberOfLines={1}>{item.title}</Text>
+          </View>
+        )}
+      />
+    </View>
+  );
+}
+
+// ── Sub-section: Axios client demo ────────────────────────────────────────────
+function AxiosSection(){
+  const [post, setPost] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchWithAxios = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // Axios instance from @expotesting/network
+      const response = await apiClient.get<Post>('/posts/1');
+      setPost(response.data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Axios error');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return (
+    <View style={styles.widget}>
+      <Text style={styles.widgetTitle}>Axios client — GET /posts/1</Text>
+      <Pressable
+        style={[styles.btn, loading && styles.btnDisabled]}
+        onPress={() => void fetchWithAxios()}
+        disabled={loading}
+      >
+        <Text style={styles.btnText}>{loading ? 'Loading…' : 'Fetch via Axios'}</Text>
+      </Pressable>
+      {loading && <ActivityIndicator color="#6200EE" style={{ marginTop: 8 }} />}
+      {error && <Text style={styles.errorText}>{error}</Text>}
+      {post && (
+        <View style={styles.detailCard}>
+          <Text style={styles.detailTitle}>{post.title}</Text>
+          <Text style={styles.detailBody}>{post.body}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+// ── Sub-section: AsyncStorage CRUD ───────────────────────────────────────────
+const STORAGE_KEY = 'exp05:savedNote';
+
+function AsyncStorageSection(){
+  const [note, setNote] = useState('');
+  const [saved, setSaved] = useState(null);
+  const [status, setStatus] = useState('idle');
+
+  // Load on mount
+  useEffect(() => {
+    void (async () => {
+      setStatus('loading');
+      const value = await appStorage.getItem<string>(STORAGE_KEY);
+      setSaved(value);
+      setStatus('idle');
+    })();
+  }, []);
+
+  const save = useCallback(async () => {
+    setStatus('saving');
+    await appStorage.setItem(STORAGE_KEY, note.trim());
+    setSaved(note.trim());
+    setNote('');
+    setStatus('idle');
+  }, [note]);
+
+  const clear = useCallback(async () => {
+    await appStorage.removeItem(STORAGE_KEY);
+    setSaved(null);
+  }, []);
+
+  return (
+    <View style={styles.widget}>
+      <Text style={styles.widgetTitle}>AsyncStorage</Text>
+      {status === 'loading' ? (
+        <ActivityIndicator color="#6200EE" />
+      ) : (
+        <>
+          <Text style={styles.noteSmall}>Persisted across app restarts.</Text>
+          {saved && (
+            <View style={styles.savedBox}>
+              <Text style={styles.savedLabel}>Saved value:</Text>
+              <Text style={styles.savedValue}>{saved}</Text>
+            </View>
+          )}
+          <TextInput
+            style={styles.input}
+            value={note}
+            onChangeText={setNote}
+            placeholder="Type something to save…"
+            placeholderTextColor="#aaa"
+          />
+          <View style={styles.row}>
+            <Pressable
+              style={[styles.btn, { flex: 1 }, status === 'saving' && styles.btnDisabled]}
+              onPress={() => void save()}
+              disabled={status === 'saving' || !note.trim()}
+            >
+              <Text style={styles.btnText}>{status === 'saving' ? 'Saving…' : 'Save'}</Text>
+            </Pressable>
+            {saved && (
+              <Pressable
+                style={[styles.btn, { flex: 1, backgroundColor: '#B00020', marginLeft: 8 }]}
+                onPress={() => void clear()}
+              >
+                <Text style={styles.btnText}>Clear</Text>
+              </Pressable>
+            )}
+          </View>
+        </>
+      )}
+    </View>
+  );
+}
+
+// ── Sub-section: SQLite CRUD ──────────────────────────────────────────────────
+function SQLiteSection(){
+  const { db, ready, error: dbError } = useSQLite('exp05.db');
+  const [notes, setNotes] = useState([]);
+  const [input, setInput] = useState('');
+
+  // Initialise table and load
+  useEffect(() => {
+    if (!ready || !db) return;
+    void db
+      .runAsync(
+        `CREATE TABLE IF NOT EXISTS notes (
+           id INTEGER PRIMARY KEY AUTOINCREMENT,
+           content TEXT NOT NULL,
+           createdAt TEXT NOT NULL
+         )`,
+      )
+      .then(() => loadNotes());
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ready, db]);
+
+  const loadNotes = useCallback(async () => {
+    if (!db) return;
+    const rows = await db.getAllAsync<Note>('SELECT * FROM notes ORDER BY id DESC LIMIT 10');
+    setNotes(rows);
+  }, [db]);
+
+  const addNote = useCallback(async () => {
+    if (!db || !input.trim()) return;
+    await db.runAsync('INSERT INTO notes (content, createdAt) VALUES (?, ?)', [
+      input.trim(),
+      new Date().toISOString(),
+    ]);
+    setInput('');
+    await loadNotes();
+  }, [db, input, loadNotes]);
+
+  const deleteNote = useCallback(async (id) => {
+    if (!db) return;
+    await db.runAsync('DELETE FROM notes WHERE id = ?', [id]);
+    await loadNotes();
+  }, [db, loadNotes]);
+
+  if (dbError) return <Text style={styles.errorText}>SQLite: {dbError}</Text>;
+  if (!ready) return <ActivityIndicator color="#6200EE" />;
+
+  return (
+    <View style={styles.widget}>
+      <Text style={styles.widgetTitle}>SQLite — Notes CRUD</Text>
+      <Text style={styles.noteSmall}>
+        CREATE TABLE · INSERT · SELECT · DELETE
+      </Text>
+      <View style={styles.row}>
+        <TextInput
+          style={[styles.input, { flex: 1 }]}
+          value={input}
+          onChangeText={setInput}
+          placeholder="New note…"
+          placeholderTextColor="#aaa"
+          onSubmitEditing={() => void addNote()}
+          returnKeyType="done"
+        />
+        <Pressable
+          style={[styles.btn, { marginLeft: 8 }]}
+          onPress={() => void addNote()}
+          disabled={!input.trim()}
+        >
+          <Text style={styles.btnText}>Add</Text>
+        </Pressable>
+      </View>
+      {notes.map((n) => (
+        <View key={n.id} style={styles.sqliteRow}>
+          <Text style={styles.sqliteId}>#{n.id}</Text>
+          <Text style={styles.sqliteContent}>{n.content}</Text>
+          <Pressable onPress={() => void deleteNote(n.id)} style={styles.deleteBtn}>
+            <Text style={styles.deleteBtnText}>✕</Text>
+          </Pressable>
+        </View>
+      ))}
+      {notes.length === 0 && (
+        <Text style={styles.emptyMsg}>No notes yet. Add one above.</Text>
+      )}
+    </View>
+  );
+}
+
+// ── Main screen ───────────────────────────────────────────────────────────────
+export function NetworkStorageScreen(){
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <View style={styles.header}>
+        <Text style={styles.heading}>Experiment 05</Text>
+        <Text style={styles.subheading}>Networking & Storage</Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Networking</Text>
+        <FetchSection />
+        <AxiosSection />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Storage</Text>
+        <AsyncStorageSection />
+        <SQLiteSection />
+      </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: 12 },
+  widget: { backgroundColor: '#f9f9f9', borderRadius: 12, padding: 14, marginBottom: 12 },
+  widgetTitle: { fontSize: 15, fontWeight: '700', color: '#333', marginBottom: 8 },
+  noteSmall: { fontSize: 12, color: '#888', marginBottom: 8 },
+  btn: {
+    backgroundColor: '#6200EE',
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center' },
+  btnDisabled: { opacity: 0.5 },
+  btnText: { color: '#fff', fontWeight: '700', fontSize: 14 },
+  errorText: { color: '#B00020', fontSize: 13, marginVertical: 4 },
+  postRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 6,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    gap: 8 },
+  postId: { fontSize: 12, color: '#aaa', width: 28 },
+  postTitle: { flex: 1, fontSize: 13, color: '#333' },
+  detailCard: { backgroundColor: '#fff', borderRadius: 8, padding: 10, marginTop: 8, borderWidth: 1, borderColor: '#eee' },
+  detailTitle: { fontSize: 14, fontWeight: '600', color: '#333', marginBottom: 4 },
+  detailBody: { fontSize: 13, color: '#777', lineHeight: 18 },
+  savedBox: { backgroundColor: '#e8f5e9', borderRadius: 6, padding: 10, marginBottom: 8 },
+  savedLabel: { fontSize: 11, color: '#555', marginBottom: 2 },
+  savedValue: { fontSize: 14, fontWeight: '600', color: '#2E7D32' },
+  input: {
+    height: 44,
+    borderWidth: 1.5,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    fontSize: 14,
+    color: '#212121',
+    marginBottom: 8,
+    backgroundColor: '#fff' },
+  row: { flexDirection: 'row', gap: 8 },
+  sqliteRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    gap: 8 },
+  sqliteId: { fontSize: 11, color: '#aaa', width: 28 },
+  sqliteContent: { flex: 1, fontSize: 13, color: '#333' },
+  deleteBtn: { padding: 4 },
+  deleteBtnText: { color: '#D32F2F', fontSize: 15 },
+  emptyMsg: { color: '#aaa', textAlign: 'center', paddingVertical: 12 } });

package/packages/examples/src/experiments/state-management/StateManagementScreen.jsx

@@ -0,0 +1,255 @@
+/**
+ * Experiment 04 — State Management
+ * Module 2: useState · useReducer · Context API · Redux Toolkit
+ *
+ * Demonstrates:
+ * ✓ Context API (ThemeContext + AuthContext) from @expotesting/state
+ * ✓ Redux Toolkit counter slice (sync actions)
+ * ✓ Redux Toolkit posts slice (async thunk)
+ * ✓ useAppSelector + useAppDispatch typed hooks
+ * ✓ Provider wiring
+ */
+
+import React, { useState } from 'react';
+import { ActivityIndicator, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
+import { Provider } from 'react-redux';
+
+import {
+  store,
+  useAppDispatch,
+  useAppSelector,
+  increment,
+  decrement,
+  reset as resetCounter,
+  selectCount,
+  fetchPosts,
+  selectAllPosts,
+  selectPostsStatus,
+  selectPostsError,
+  ThemeProvider,
+  useTheme,
+  AuthProvider,
+  useAuth } from '@expotesting/state';
+
+// ── Redux Counter widget ─────────────────────────────────────────────────────
+function ReduxCounterWidget(){
+  const dispatch = useAppDispatch();
+  const count = useAppSelector(selectCount);
+
+  return (
+    <View style={styles.widget}>
+      <Text style={styles.widgetTitle}>Redux Counter</Text>
+      <Text style={styles.bigNumber}>{count}</Text>
+      <View style={styles.row}>
+        <Pressable style={styles.btn} onPress={() => dispatch(decrement())}>
+          <Text style={styles.btnText}>−</Text>
+        </Pressable>
+        <Pressable style={styles.btn} onPress={() => dispatch(increment())}>
+          <Text style={styles.btnText}>+</Text>
+        </Pressable>
+        <Pressable style={[styles.btn, styles.btnGhost]} onPress={() => dispatch(resetCounter())}>
+          <Text style={[styles.btnText, { color: '#6200EE' }]}>Reset</Text>
+        </Pressable>
+      </View>
+      <Text style={styles.noteSmall}>
+        Actions dispatched: increment · decrement · reset (counterSlice)
+      </Text>
+    </View>
+  );
+}
+
+// ── Redux async posts widget ──────────────────────────────────────────────────
+function ReduxPostsWidget(){
+  const dispatch = useAppDispatch();
+  const posts = useAppSelector(selectAllPosts);
+  const status = useAppSelector(selectPostsStatus);
+  const error = useAppSelector(selectPostsError);
+
+  return (
+    <View style={styles.widget}>
+      <Text style={styles.widgetTitle}>Redux Async Thunk — Posts</Text>
+      <Pressable
+        style={[styles.btn, styles.btnFull, status === 'loading' && { opacity: 0.6 }]}
+        onPress={() => void dispatch(fetchPosts({ page: 1, limit: 5 }))}
+        disabled={status === 'loading'}
+      >
+        <Text style={styles.btnText}>
+          {status === 'loading' ? 'Loading…' : 'Fetch Posts (page 1)'}
+        </Text>
+      </Pressable>
+
+      {status === 'loading' && <ActivityIndicator color="#6200EE" style={{ marginTop: 8 }} />}
+      {error && <Text style={styles.errorText}>{error}</Text>}
+      {posts.slice(0, 3).map((p) => (
+        <View key={p.id} style={styles.postCard}>
+          <Text style={styles.postTitle} numberOfLines={1}>{p.title}</Text>
+          <Text style={styles.postBody} numberOfLines={2}>{p.body}</Text>
+        </View>
+      ))}
+      {posts.length > 3 && (
+        <Text style={styles.noteSmall}>…and {posts.length - 3} more</Text>
+      )}
+    </View>
+  );
+}
+
+// ── Context theme widget ───────────────────────────────────────────────────────
+function ThemeWidget(){
+  const { colorScheme, isDark, toggleTheme, colors } = useTheme();
+
+  return (
+    <View style={[styles.widget, { backgroundColor: colors.surface }]}>
+      <Text style={[styles.widgetTitle, { color: colors.text }]}>Context API — Theme</Text>
+      <Text style={[styles.noteSmall, { color: colors.subtext }]}>
+        Current scheme: <Text style={{ fontWeight: '700' }}>{colorScheme}</Text>
+      </Text>
+      <Pressable
+        style={[styles.btn, styles.btnFull, { backgroundColor: colors.primary }]}
+        onPress={toggleTheme}
+      >
+        <Text style={styles.btnText}>
+          Switch to {isDark ? 'Light' : 'Dark'} Mode
+        </Text>
+      </Pressable>
+      <View style={[styles.colorSwatch, { backgroundColor: colors.background }]}>
+        <Text style={{ color: colors.text, fontSize: 12 }}>background: {colors.background}</Text>
+      </View>
+      <View style={[styles.colorSwatch, { backgroundColor: colors.primary }]}>
+        <Text style={{ color: '#fff', fontSize: 12 }}>primary: {colors.primary}</Text>
+      </View>
+    </View>
+  );
+}
+
+// ── Context auth widget ───────────────────────────────────────────────────────
+function AuthWidget(){
+  const { user, isAuthenticated, loading, error, login, logout } = useAuth();
+  const [email, setEmail] = useState('alice@example.com');
+  const [password, setPassword] = useState('secret123');
+
+  if (isAuthenticated && user) {
+    return (
+      <View style={styles.widget}>
+        <Text style={styles.widgetTitle}>Context API — Auth (Logged In)</Text>
+        <Text style={styles.noteSmall}>Welcome, <Text style={{ fontWeight: '700' }}>{user.name}</Text></Text>
+        <Text style={styles.noteSmall}>{user.email}</Text>
+        <Pressable style={[styles.btn, styles.btnFull, { backgroundColor: '#B00020' }]} onPress={logout}>
+          <Text style={styles.btnText}>Logout</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.widget}>
+      <Text style={styles.widgetTitle}>Context API — Auth</Text>
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={setEmail}
+        placeholder="Email"
+        placeholderTextColor="#aaa"
+        keyboardType="email-address"
+        autoCapitalize="none"
+      />
+      <TextInput
+        style={styles.input}
+        value={password}
+        onChangeText={setPassword}
+        placeholder="Password (min 6 chars)"
+        placeholderTextColor="#aaa"
+        secureTextEntry
+      />
+      {error && <Text style={styles.errorText}>{error}</Text>}
+      <Pressable
+        style={[styles.btn, styles.btnFull, loading && { opacity: 0.6 }]}
+        onPress={() => void login(email, password)}
+        disabled={loading}
+      >
+        <Text style={styles.btnText}>{loading ? 'Logging in…' : 'Login'}</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+// ── Root — wraps both Providers ───────────────────────────────────────────────
+export function StateManagementScreen(){
+  return (
+    <Provider store={store}>
+      <ThemeProvider>
+        <AuthProvider>
+          <StateManagementInner />
+        </AuthProvider>
+      </ThemeProvider>
+    </Provider>
+  );
+}
+
+function StateManagementInner(){
+  const { colors } = useTheme();
+
+  return (
+    <ScrollView style={[styles.container, { backgroundColor: colors.background }]} contentContainerStyle={styles.content}>
+      <View style={styles.header}>
+        <Text style={styles.heading}>Experiment 04</Text>
+        <Text style={styles.subheading}>State Management</Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Redux Toolkit</Text>
+        <ReduxCounterWidget />
+        <ReduxPostsWidget />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Context API</Text>
+        <ThemeWidget />
+        <AuthWidget />
+      </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: 12 },
+  widget: { backgroundColor: '#f9f9f9', borderRadius: 12, padding: 16, marginBottom: 12 },
+  widgetTitle: { fontSize: 15, fontWeight: '700', color: '#333', marginBottom: 8 },
+  bigNumber: { fontSize: 56, fontWeight: '800', color: '#6200EE', textAlign: 'center', marginVertical: 4 },
+  row: { flexDirection: 'row', gap: 8, justifyContent: 'center', marginBottom: 8 },
+  btn: {
+    backgroundColor: '#6200EE',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 60 },
+  btnGhost: { backgroundColor: '#f0e6ff', borderWidth: 1, borderColor: '#6200EE' },
+  btnFull: { width: '100%', marginBottom: 8 },
+  btnText: { color: '#fff', fontWeight: '700', fontSize: 14 },
+  noteSmall: { fontSize: 12, color: '#888', textAlign: 'center', marginBottom: 4 },
+  errorText: { color: '#B00020', fontSize: 13, marginBottom: 8 },
+  postCard: { backgroundColor: '#fff', borderRadius: 8, padding: 10, marginTop: 6, borderWidth: 1, borderColor: '#eee' },
+  postTitle: { fontSize: 13, fontWeight: '600', color: '#333', marginBottom: 2 },
+  postBody: { fontSize: 12, color: '#777', lineHeight: 18 },
+  input: {
+    height: 44,
+    borderWidth: 1.5,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    fontSize: 14,
+    color: '#212121',
+    marginBottom: 8,
+    backgroundColor: '#fff' },
+  colorSwatch: {
+    borderRadius: 6,
+    padding: 8,
+    marginTop: 4 } });

package/packages/examples/src/index.js

@@ -0,0 +1,76 @@
+// Experiment 01 — React Native Core Components
+export { BasicAppScreen } from './experiments/basic-app/BasicAppScreen';
+
+// Experiment 02 — Components, Props & State
+export { ComponentsStateScreen } from './experiments/components-props-state/ComponentsStateScreen';
+
+// Experiment 03 — Navigation
+export {
+  NavHomeScreen,
+  NavDetailsScreen,
+  NavProfileScreen } from './experiments/navigation/NavigationScreen';
+
+// Experiment 04 — State Management (Redux + Context)
+export { StateManagementScreen } from './experiments/state-management/StateManagementScreen';
+
+// Experiment 05 — Networking & Storage
+export { NetworkStorageScreen } from './experiments/network-storage/NetworkStorageScreen';
+
+// Experiment 06 — Animations & Device Features
+export { AnimationsDeviceScreen } from './experiments/animations-device/AnimationsDeviceScreen';
+
+/**
+ * EXPERIMENT_REGISTRY — ordered list for the demo app to auto-generate
+ * the experiment catalogue screen.
+ */
+export const EXPERIMENT_REGISTRY = [
+  {
+    id: 'exp-01',
+    title: 'Basic App',
+    subtitle: 'Core Components · JSX · StyleSheet · Flexbox',
+    module: 1,
+    experiment: 1,
+    color: '#6200EE',
+    route: 'Exp01' },
+  {
+    id: 'exp-02',
+    title: 'Components, Props & State',
+    subtitle: 'useState · useReducer · Event Handling',
+    module: 1,
+    experiment: 2,
+    color: '#3700B3',
+    route: 'Exp02' },
+  {
+    id: 'exp-03',
+    title: 'Navigation',
+    subtitle: 'Stack · Tabs · Drawer · Typed Params',
+    module: 1,
+    experiment: 3,
+    color: '#018786',
+    route: 'Exp03' },
+  {
+    id: 'exp-04',
+    title: 'State Management',
+    subtitle: 'Context API · Redux Toolkit · Async Thunks',
+    module: 2,
+    experiment: 4,
+    color: '#B00020',
+    route: 'Exp04' },
+  {
+    id: 'exp-05',
+    title: 'Networking & Storage',
+    subtitle: 'Fetch · Axios · AsyncStorage · SQLite',
+    module: 2,
+    experiment: 5,
+    color: '#1565C0',
+    route: 'Exp05' },
+  {
+    id: 'exp-06',
+    title: 'Animations & Device',
+    subtitle: 'Animated API · Reanimated · Camera · GPS',
+    module: 3,
+    experiment: 6,
+    color: '#2E7D32',
+    route: 'Exp06' },
+];
+