expotesting2 4.1.0

package/apps/expo-app/src/screens/HomeScreen.jsx

@@ -0,0 +1,178 @@
+/**
+ * HomeScreen — experiment catalogue.
+ *
+ * Lists all 6 experiments grouped by module.
+ * Tapping an experiment navigates to its dedicated screen.
+ */
+
+import React from 'react';
+import {
+  Pressable,
+  SectionList,
+  StyleSheet,
+  Text,
+  View } from 'react-native';
+import { EXPERIMENT_REGISTRY } from '@expotesting/examples';
+
+// Group experiments by module number
+function buildSections(){
+  const map = new Map();
+  for (const exp of EXPERIMENT_REGISTRY) {
+    const existing = map.get(exp.module) ?? [];
+    existing.push(exp);
+    map.set(exp.module, existing);
+  }
+
+  const MODULE_LABELS= {
+    1: 'Module 1 — React Basics',
+    2: 'Module 2 — State, Networking & Data',
+    3: 'Module 3 — Advanced' };
+
+  return Array.from(map.entries()).map(([mod, data]) => ({
+    title: MODULE_LABELS[mod] ?? `Module ${mod}`,
+    data }));
+}
+
+const SECTIONS = buildSections();
+
+export function HomeScreen({ navigation }){
+  function navigateTo(route){
+    switch (route) {
+      case 'Exp01':
+        navigation.navigate('Exp01');
+        break;
+      case 'Exp02':
+        navigation.navigate('Exp02');
+        break;
+      case 'Exp03':
+        navigation.navigate('Exp03Home');
+        break;
+      case 'Exp04':
+        navigation.navigate('Exp04');
+        break;
+      case 'Exp05':
+        navigation.navigate('Exp05');
+        break;
+      case 'Exp06':
+        navigation.navigate('Exp06');
+        break;
+      default:
+        break;
+    }
+  }
+
+  return (
+    <SectionList
+      style={styles.container}
+      contentContainerStyle={styles.content}
+      sections={SECTIONS}
+      keyExtractor={(item) => item.id}
+      stickySectionHeadersEnabled={false}
+      ListHeaderComponent={
+        <View style={styles.header}>
+          <Text style={styles.logo}>expotesting</Text>
+          <Text style={styles.tagline}>React Native (Expo) Curriculum Platform</Text>
+          <Text style={styles.badge}>
+            {EXPERIMENT_REGISTRY.length} experiments · 3 modules
+          </Text>
+        </View>
+      }
+      renderSectionHeader={({ section }) => (
+        <View style={styles.sectionHeader}>
+          <Text style={styles.sectionHeaderText}>{section.title}</Text>
+        </View>
+      )}
+      renderItem={({ item, index }) => (
+        <Pressable
+          style={({ pressed }) => [
+            styles.experimentCard,
+            { borderLeftColor: item.color },
+            pressed && styles.cardPressed,
+          ]}
+          onPress={() => navigateTo(item.route)}
+          accessibilityRole="button"
+          accessibilityLabel={`Open ${item.title} experiment`}
+        >
+          <View style={[styles.expBadge, { backgroundColor: item.color }]}>
+            <Text style={styles.expBadgeText}>
+              {String(index + 1).padStart(2, '0')}
+            </Text>
+          </View>
+          <View style={styles.expInfo}>
+            <Text style={styles.expTitle}>{item.title}</Text>
+            <Text style={styles.expSubtitle}>{item.subtitle}</Text>
+          </View>
+          <Text style={styles.chevron}>›</Text>
+        </Pressable>
+      )}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#fafafa' },
+  content: { paddingBottom: 48 },
+  header: {
+    backgroundColor: '#6200EE',
+    paddingTop: 48,
+    paddingBottom: 28,
+    paddingHorizontal: 20 },
+  logo: {
+    fontSize: 28,
+    fontWeight: '800',
+    color: '#fff',
+    letterSpacing: -0.5 },
+  tagline: {
+    fontSize: 14,
+    color: 'rgba(255,255,255,0.75)',
+    marginTop: 4 },
+  badge: {
+    marginTop: 12,
+    fontSize: 12,
+    color: '#fff',
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    alignSelf: 'flex-start',
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    borderRadius: 20,
+    overflow: 'hidden' },
+  sectionHeader: {
+    paddingHorizontal: 16,
+    paddingTop: 20,
+    paddingBottom: 8 },
+  sectionHeaderText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#888',
+    textTransform: 'uppercase',
+    letterSpacing: 0.8 },
+  experimentCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    marginHorizontal: 16,
+    marginBottom: 8,
+    borderRadius: 12,
+    borderLeftWidth: 4,
+    padding: 14,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.06,
+    shadowRadius: 3,
+    elevation: 2 },
+  cardPressed: { opacity: 0.8 },
+  expBadge: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12 },
+  expBadgeText: {
+    fontSize: 14,
+    fontWeight: '800',
+    color: '#fff' },
+  expInfo: { flex: 1 },
+  expTitle: { fontSize: 15, fontWeight: '700', color: '#212121' },
+  expSubtitle: { fontSize: 12, color: '#888', marginTop: 2 },
+  chevron: { fontSize: 22, color: '#ccc', fontWeight: '300' } });

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "expotesting2",
+  "version": "4.1.0",
+  "description": "React Native (Expo) learning library",
+  "license": "MIT",
+  "files": [
+    "packages/",
+    "apps/",
+    "README.md"
+  ],
+  "keywords": [
+    "expo",
+    "react-native",
+    "react",
+    "learning",
+    "syllabus",
+    "experiments",
+    "monorepo"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/omlanke/newexpo"
+  }
+}

package/packages/animations/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@expotesting/animations",
+  "version": "1.0.0",
+  "description": "Animation hooks and components (Animated API + Reanimated) for expotesting",
+  "main": "src/index.js",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {},
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73",
+    "react-native-reanimated": ">=3"
+  },
+  "devDependencies": {
+    "react-native-reanimated": "*"
+  },
+  "license": "MIT"
+}

package/packages/animations/src/components/FadeView.jsx

@@ -0,0 +1,42 @@
+/**
+ * FadeView — an Animated.View that fades in on mount.
+ *
+ * A convenience wrapper around useFade for the most common case.
+ *
+ * @example
+ * <FadeView duration={500}>
+ *   <Text>I fade in automatically</Text>
+ * </FadeView>
+ */
+
+import React, { useEffect } from 'react';
+import { Animated } from 'react-native';
+import { useFade } from '../hooks/useFade';
+
+export function FadeView({
+  children,
+  duration = 400,
+  delay = 0,
+  style,
+  fadeOut: startFadeOut = false }){
+  const { fadeAnim, fadeIn, fadeOut } = useFade({
+    initialValue: startFadeOut ? 1 : 0,
+    duration });
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (startFadeOut) {
+        fadeOut();
+      } else {
+        fadeIn();
+      }
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [delay, fadeIn, fadeOut, startFadeOut]);
+
+  return (
+    <Animated.View style={[style, { opacity: fadeAnim }]}>
+      {children}
+    </Animated.View>
+  );
+}

package/packages/animations/src/components/ScaleView.jsx

@@ -0,0 +1,28 @@
+/**
+ * ScaleView — a pressable view that scales down on press using Animated API.
+ *
+ * @example
+ * <ScaleView onPress={() => console.log('pressed')} style={styles.card}>
+ *   <Text>Press me</Text>
+ * </ScaleView>
+ */
+
+import React from 'react';
+import { Animated, Pressable } from 'react-native';
+import { useScale } from '../hooks/useScale';
+
+export function ScaleView({
+  children,
+  onPress,
+  pressedScale = 0.95,
+  style }){
+  const { style: scaleStyle, pressIn, pressOut } = useScale({ to: pressedScale });
+
+  return (
+    <Pressable onPress={onPress} onPressIn={pressIn} onPressOut={pressOut}>
+      <Animated.View style={[style, scaleStyle]}>
+        {children}
+      </Animated.View>
+    </Pressable>
+  );
+}

package/packages/animations/src/components/SlideView.jsx

@@ -0,0 +1,32 @@
+/**
+ * SlideView — slides its children in from offscreen on mount.
+ *
+ * @example
+ * <SlideView axis="x" from={-300}>
+ *   <SidebarContent />
+ * </SlideView>
+ */
+
+import React, { useEffect } from 'react';
+import { Animated } from 'react-native';
+import { useSlide } from '../hooks/useSlide';
+
+export function SlideView({
+  children,
+  axis = 'y',
+  from = 100,
+  delay = 0,
+  style }){
+  const { slideAnim, slideIn, style: slideStyle } = useSlide({ axis, from });
+
+  useEffect(() => {
+    const timer = setTimeout(slideIn, delay);
+    return () => clearTimeout(timer);
+  }, [slideIn, delay]);
+
+  return (
+    <Animated.View style={[style, slideStyle]}>
+      {children}
+    </Animated.View>
+  );
+}

package/packages/animations/src/hooks/useFade.js

@@ -0,0 +1,50 @@
+/**
+ * useFade — controls opacity with smooth enter/exit transitions.
+ * Uses React Native's built-in Animated API (no extra dependencies).
+ *
+ * @example
+ * const { fadeAnim, fadeIn, fadeOut, style } = useFade({ duration: 400 });
+ *
+ * <Animated.View style={style}>
+ *   <Text>Fading content</Text>
+ * </Animated.View>
+ *
+ * <Button onPress={fadeIn}>Show</Button>
+ * <Button onPress={fadeOut}>Hide</Button>
+ */
+
+import { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
+
+export function useFade(options = {}){
+  const { initialValue = 0, duration = 300, useNativeDriver = true } = options;
+
+  const fadeAnim = useRef(new Animated.Value(initialValue)).current;
+
+  const fadeTo = useCallback(
+    (toValue, callback) => {
+      Animated.timing(fadeAnim, {
+        toValue,
+        duration,
+        useNativeDriver }).start(callback);
+    },
+    [fadeAnim, duration, useNativeDriver],
+  );
+
+  const fadeIn = useCallback(
+    (callback) => fadeTo(1, callback),
+    [fadeTo],
+  );
+
+  const fadeOut = useCallback(
+    (callback) => fadeTo(0, callback),
+    [fadeTo],
+  );
+
+  return {
+    fadeAnim,
+    fadeIn,
+    fadeOut,
+    fadeTo,
+    style: { opacity: fadeAnim } };
+}

package/packages/animations/src/hooks/useScale.js

@@ -0,0 +1,59 @@
+/**
+ * useScale — press-to-scale interaction via React Native Animated API.
+ * Great for card tap effects, button feedback, etc.
+ *
+ * @example
+ * const { scaleAnim, pressIn, pressOut, style } = useScale({ to: 0.95 });
+ *
+ * <Animated.View style={[cardStyle, style]}>
+ *   <Pressable onPressIn={pressIn} onPressOut={pressOut}>
+ *     <Text>Tap me</Text>
+ *   </Pressable>
+ * </Animated.View>
+ */
+
+import { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
+
+export function useScale(options = {}){
+  const {
+    from = 1,
+    to = 0.95,
+    duration = 100,
+    useNativeDriver = true } = options;
+
+  const scaleAnim = useRef(new Animated.Value(from)).current;
+
+  const scaleTo = useCallback(
+    (value) => {
+      Animated.spring(scaleAnim, {
+        toValue: value,
+        useNativeDriver,
+        speed: 50,
+        bounciness: 0 }).start();
+    },
+    [scaleAnim, useNativeDriver],
+  );
+
+  const pressIn = useCallback(() => {
+    Animated.timing(scaleAnim, {
+      toValue: to,
+      duration,
+      useNativeDriver }).start();
+  }, [scaleAnim, to, duration, useNativeDriver]);
+
+  const pressOut = useCallback(() => {
+    Animated.spring(scaleAnim, {
+      toValue: from,
+      useNativeDriver,
+      speed: 50,
+      bounciness: 4 }).start();
+  }, [scaleAnim, from, useNativeDriver]);
+
+  return {
+    scaleAnim,
+    pressIn,
+    pressOut,
+    scaleTo,
+    style: { transform: [{ scale: scaleAnim }] } };
+}

package/packages/animations/src/hooks/useSlide.js

@@ -0,0 +1,53 @@
+/**
+ * useSlide — translates a component in/out along X or Y axis.
+ *
+ * @example
+ * const { slideAnim, slideIn, slideOut, style } = useSlide({ axis: 'x', from: -300 });
+ *
+ * // Slide a sidebar in from the left:
+ * <Animated.View style={[drawerStyle, style]}>
+ *   <DrawerContent />
+ * </Animated.View>
+ */
+
+import { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
+
+export function useSlide(options = {}){
+  const {
+    axis = 'y',
+    from = 300,
+    to = 0,
+    duration = 350,
+    useNativeDriver = true } = options;
+
+  const slideAnim = useRef(new Animated.Value(from)).current;
+
+  const slideIn = useCallback(
+    (callback) => {
+      Animated.spring(slideAnim, {
+        toValue: to,
+        useNativeDriver,
+        damping: 20,
+        stiffness: 120 }).start(callback);
+    },
+    [slideAnim, to, useNativeDriver],
+  );
+
+  const slideOut = useCallback(
+    (callback) => {
+      Animated.timing(slideAnim, {
+        toValue: from,
+        duration,
+        useNativeDriver }).start(callback);
+    },
+    [slideAnim, from, duration, useNativeDriver],
+  );
+
+  const transform =
+    axis === 'x'
+      ? [{ translateX: slideAnim }]
+      : [{ translateY: slideAnim }];
+
+  return { slideAnim, slideIn, slideOut, style: { transform } };
+}

package/packages/animations/src/index.js

@@ -0,0 +1,21 @@
+// Animated API hooks
+export { useFade } from './hooks/useFade';
+
+export { useScale } from './hooks/useScale';
+
+export { useSlide } from './hooks/useSlide';
+
+// Animated API components
+export { FadeView } from './components/FadeView';
+
+export { ScaleView } from './components/ScaleView';
+
+export { SlideView } from './components/SlideView';
+
+// Reanimated utilities
+export {
+  reanimatedFadeIn,
+  reanimatedFadeOut,
+  reanimatedSpringScale,
+  reanimatedBounce,
+  reanimatedShake } from './reanimated';

package/packages/animations/src/reanimated.js

@@ -0,0 +1,83 @@
+/**
+ * Reanimated utilities — worklet-based animations using react-native-reanimated v3.
+ *
+ * These offer superior performance by running entirely on the UI thread.
+ *
+ * @example
+ * import { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+ * import { reanimatedFadeIn, reanimatedBounce } from '@expotesting/animations';
+ *
+ * const opacity = useSharedValue(0);
+ * const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+ * reanimatedFadeIn(opacity); // triggers on UI thread
+ */
+
+import {
+  withTiming,
+  withSpring,
+  withSequence,
+  withDelay,
+  Easing } from 'react-native-reanimated';
+
+/**
+ * Fades an opacity shared value to 1.
+ * Must be called from a worklet or useEffect (not from a button press directly).
+ */
+export function reanimatedFadeIn(
+  opacity,
+  config = {},
+){
+  const { duration = 300, delay = 0 } = config;
+  if (delay > 0) {
+    opacity.value = withDelay(delay, withTiming(1, { duration }));
+  } else {
+    opacity.value = withTiming(1, { duration });
+  }
+}
+
+/**
+ * Fades an opacity shared value to 0.
+ */
+export function reanimatedFadeOut(
+  opacity,
+  config = {},
+){
+  const { duration = 300 } = config;
+  opacity.value = withTiming(0, { duration });
+}
+
+/**
+ * Spring-scales a shared value to a target.
+ */
+export function reanimatedSpringScale(
+  scale,
+  to,
+){
+  scale.value = withSpring(to, {
+    damping: 15,
+    stiffness: 150 });
+}
+
+/**
+ * Bounce effect — scales up then back to normal.
+ * Great for "success" confirmations.
+ */
+export function reanimatedBounce(scale){
+  scale.value = withSequence(
+    withSpring(1.2, { damping: 8 }),
+    withSpring(1, { damping: 10 }),
+  );
+}
+
+/**
+ * Shake effect — rapid horizontal translation for input errors.
+ */
+export function reanimatedShake(translateX){
+  translateX.value = withSequence(
+    withTiming(-10, { duration: 50 }),
+    withTiming(10, { duration: 50 }),
+    withTiming(-8, { duration: 50 }),
+    withTiming(8, { duration: 50 }),
+    withTiming(0, { duration: 50 }),
+  );
+}

package/packages/core/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@expotesting/core",
+  "version": "1.0.0",
+  "description": "Core hooks, utilities, and base components for expotesting",
+  "main": "src/index.js",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./hooks": "./src/hooks/index.ts",
+    "./components": "./src/components/index.ts",
+    "./utils": "./src/utils/index.ts",
+    "./theme": "./src/theme/index.ts"
+  },
+  "scripts": {
+    "lint": "echo 'lint ok'"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73"
+  },
+  "license": "MIT"
+}