expotesting2 4.1.0

package/packages/device/src/hooks/useCamera.js

@@ -0,0 +1,45 @@
+/**
+ * useCamera — manages Camera permission and provides a ref for expo-camera.
+ *
+ * The camera component itself is rendered by the consumer (useCamera only
+ * manages permissions and state), so this hook is fully decoupled from
+ * the camera UI.
+ *
+ * @example
+ * function CameraScreen() {
+ *   const { permission, requestPermission, hasPermission } = useCamera();
+ *
+ *   if (!hasPermission) {
+ *     return (
+ *       <View>
+ *         <Text>Camera access needed</Text>
+ *         <Button onPress={requestPermission}>Grant Permission</Button>
+ *       </View>
+ *     );
+ *   }
+ *
+ *   return <CameraView style={{ flex: 1 }} />;
+ * }
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import { Camera } from 'expo-camera';
+
+export function useCamera(){
+  const [permission, setPermission] = useState(null);
+
+  useEffect(() => {
+    void Camera.getCameraPermissionsAsync().then((p) => setPermission(p.status));
+  }, []);
+
+  const requestPermission = useCallback(async () => {
+    const result = await Camera.requestCameraPermissionsAsync();
+    setPermission(result.status);
+  }, []);
+
+  return {
+    permission,
+    hasPermission: permission === 'granted',
+    isDenied: permission === 'denied',
+    requestPermission };
+}

package/packages/device/src/hooks/useGallery.js

@@ -0,0 +1,70 @@
+/**
+ * useGallery — picks images/videos from the device gallery using expo-image-picker.
+ *
+ * @example
+ * function ImagePicker() {
+ *   const { pickImage, asset, isLoading } = useGallery({ aspect: [4, 3] });
+ *
+ *   return (
+ *     <View>
+ *       {asset && <Image source={{ uri: asset.uri }} style={{ width: 200, height: 150 }} />}
+ *       <Button onPress={pickImage} loading={isLoading}>Pick from Gallery</Button>
+ *     </View>
+ *   );
+ * }
+ */
+
+import { useCallback, useState } from 'react';
+import * as ImagePicker from 'expo-image-picker';
+
+export function useGallery(options = {}){
+  const {
+    aspect,
+    allowsEditing = false,
+    quality = 0.8,
+    mediaTypes = ImagePicker.MediaTypeOptions.Images,
+    allowsMultipleSelection = false } = options;
+
+  const [asset, setAsset] = useState(null);
+  const [assets, setAssets] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const pickImage = useCallback(async () => {
+    setError(null);
+    setIsLoading(true);
+
+    try {
+      // Request permission if not already granted
+      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (status !== 'granted') {
+        setError('Gallery permission denied. Please allow access in Settings.');
+        return;
+      }
+
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes,
+        allowsEditing,
+        aspect,
+        quality,
+        allowsMultipleSelection });
+
+      if (!result.canceled && result.assets.length > 0) {
+        setAssets(result.assets);
+        setAsset(result.assets[0] ?? null);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to pick image');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [aspect, allowsEditing, quality, mediaTypes, allowsMultipleSelection]);
+
+  const clear = useCallback(() => {
+    setAsset(null);
+    setAssets([]);
+    setError(null);
+  }, []);
+
+  return { asset, assets, isLoading, error, pickImage, clear };
+}

package/packages/device/src/hooks/useLocation.js

@@ -0,0 +1,99 @@
+/**
+ * useLocation — fetches and optionally watches the device's GPS location.
+ *
+ * @example
+ * function MapScreen() {
+ *   const { location, loading, error, getLocation } = useLocation({ watch: false });
+ *
+ *   if (loading) return <ActivityIndicator />;
+ *   if (error) return <Text>{error}</Text>;
+ *
+ *   return (
+ *     <Text>
+ *       Lat: {location?.coords.latitude}, Lon: {location?.coords.longitude}
+ *     </Text>
+ *   );
+ * }
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import * as Location from 'expo-location';
+
+export function useLocation(options = {}){
+  const {
+    watch = false,
+    distanceInterval = 10,
+    accuracy = Location.Accuracy.Balanced } = options;
+
+  const [location, setLocation] = useState(null);
+  const [address, setAddress] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const subscriptionRef = useRef(null);
+
+  const requestPermission = async ()=> {
+    const { status } = await Location.requestForegroundPermissionsAsync();
+    if (status !== 'granted') {
+      setError('Location permission denied. Please allow access in Settings.');
+      return false;
+    }
+    return true;
+  };
+
+  const getLocation = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const granted = await requestPermission();
+      if (!granted) return;
+
+      const loc = await Location.getCurrentPositionAsync({ accuracy });
+      setLocation(loc);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to get location');
+    } finally {
+      setLoading(false);
+    }
+  }, [accuracy]);
+
+  const reverseGeocode = useCallback(async () => {
+    if (!location) {
+      setError('No location available to reverse geocode');
+      return;
+    }
+    try {
+      const results = await Location.reverseGeocodeAsync({
+        latitude: location.coords.latitude,
+        longitude: location.coords.longitude });
+      setAddress(results[0] ?? null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Reverse geocoding failed');
+    }
+  }, [location]);
+
+  // Set up watcher if watch=true
+  useEffect(() => {
+    if (!watch) return;
+
+    void (async () => {
+      const granted = await requestPermission();
+      if (!granted) return;
+
+      setLoading(true);
+      subscriptionRef.current = await Location.watchPositionAsync(
+        { accuracy, distanceInterval },
+        (loc) => {
+          setLocation(loc);
+          setLoading(false);
+        },
+      );
+    })();
+
+    return () => {
+      subscriptionRef.current?.remove();
+      subscriptionRef.current = null;
+    };
+  }, [watch, accuracy, distanceInterval]);
+
+  return { location, address, loading, error, getLocation, reverseGeocode };
+}

package/packages/device/src/index.js

@@ -0,0 +1,5 @@
+export { useCamera } from './hooks/useCamera';
+
+export { useGallery } from './hooks/useGallery';
+
+export { useLocation } from './hooks/useLocation';

package/packages/examples/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@expotesting/examples",
+  "version": "1.0.0",
+  "description": "Runnable experiment modules mapping to the university syllabus",
+  "main": "src/index.js",
+  "types": "src/index.ts",
+  "scripts": {},
+  "dependencies": {
+    "@expotesting/core": "workspace:*",
+    "@expotesting/navigation": "workspace:*",
+    "@expotesting/state": "workspace:*",
+    "@expotesting/network": "workspace:*",
+    "@expotesting/storage": "workspace:*",
+    "@expotesting/animations": "workspace:*",
+    "@expotesting/device": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73",
+    "expo": ">=51",
+    "@react-navigation/native": "^6",
+    "@react-navigation/native-stack": "^6",
+    "@react-navigation/bottom-tabs": "^6",
+    "@react-navigation/drawer": "^6",
+    "@reduxjs/toolkit": "^2",
+    "react-redux": "^9",
+    "axios": "^1",
+    "@react-native-async-storage/async-storage": ">=1",
+    "expo-sqlite": ">=14",
+    "react-native-reanimated": ">=3",
+    "expo-camera": ">=15",
+    "expo-image-picker": ">=15",
+    "expo-location": ">=17"
+  },
+  "license": "MIT"
+}

package/packages/examples/src/experiments/animations-device/AnimationsDeviceScreen.jsx

@@ -0,0 +1,291 @@
+/**
+ * Experiment 06 — Animations & Device Features
+ * Module 3: Animated API · Reanimated · Camera · Gallery · GPS
+ *
+ * Demonstrates:
+ * ✓ Fade animation (Animated API)
+ * ✓ Scale animation (spring)
+ * ✓ Slide animation
+ * ✓ Reanimated entering/exiting animations
+ * ✓ Camera capture (Expo Camera)
+ * ✓ Image gallery picker (Expo ImagePicker)
+ * ✓ GPS location (Expo Location)
+ */
+
+import React, { useState } from 'react';
+import {
+  Image,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View } from 'react-native';
+import Animated, { FadeIn, FadeOut, ZoomIn, SlideInLeft } from 'react-native-reanimated';
+
+import { FadeView, ScaleView, SlideView } from '@expotesting/animations';
+import { useCamera, useGallery, useLocation } from '@expotesting/device';
+
+// ── Animations Section ────────────────────────────────────────────────────────
+function AnimationsSection(){
+  const [showFade, setShowFade] = useState(true);
+  const [showScale, setShowScale] = useState(true);
+  const [showSlide, setShowSlide] = useState(true);
+  const [showReanimated, setShowReanimated] = useState(false);
+
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>Animations</Text>
+
+      {/* Fade */}
+      <View style={styles.widget}>
+        <Text style={styles.widgetTitle}>FadeView — Animated API</Text>
+        <FadeView visible={showFade} duration={400}>
+          <View style={[styles.animBox, { backgroundColor: '#E1BEE7' }]}>
+            <Text style={styles.animLabel}>Fading content</Text>
+          </View>
+        </FadeView>
+        <Pressable style={styles.btn} onPress={() => setShowFade((v) => !v)}>
+          <Text style={styles.btnText}>{showFade ? 'Fade Out' : 'Fade In'}</Text>
+        </Pressable>
+      </View>
+
+      {/* Scale */}
+      <View style={styles.widget}>
+        <Text style={styles.widgetTitle}>ScaleView — Spring animation</Text>
+        <ScaleView visible={showScale}>
+          <View style={[styles.animBox, { backgroundColor: '#B2EBF2' }]}>
+            <Text style={styles.animLabel}>Scaling content</Text>
+          </View>
+        </ScaleView>
+        <Pressable style={styles.btn} onPress={() => setShowScale((v) => !v)}>
+          <Text style={styles.btnText}>{showScale ? 'Scale Out' : 'Scale In'}</Text>
+        </Pressable>
+      </View>
+
+      {/* Slide */}
+      <View style={styles.widget}>
+        <Text style={styles.widgetTitle}>SlideView — Slide from top</Text>
+        <SlideView visible={showSlide} direction="top">
+          <View style={[styles.animBox, { backgroundColor: '#C8E6C9' }]}>
+            <Text style={styles.animLabel}>Sliding content</Text>
+          </View>
+        </SlideView>
+        <Pressable style={styles.btn} onPress={() => setShowSlide((v) => !v)}>
+          <Text style={styles.btnText}>{showSlide ? 'Slide Out' : 'Slide In'}</Text>
+        </Pressable>
+      </View>
+
+      {/* Reanimated entering / exiting */}
+      <View style={styles.widget}>
+        <Text style={styles.widgetTitle}>Reanimated — Entering / Exiting</Text>
+        <Text style={styles.noteSmall}>
+          Uses entering={'{'}FadeIn{'}'} / exiting={'{'}FadeOut{'}'} / ZoomIn / SlideInLeft
+        </Text>
+        <Pressable style={styles.btn} onPress={() => setShowReanimated((v) => !v)}>
+          <Text style={styles.btnText}>{showReanimated ? 'Hide' : 'Show'} Animated Views</Text>
+        </Pressable>
+        {showReanimated && (
+          <View style={styles.row}>
+            <Animated.View entering={FadeIn.duration(500)} exiting={FadeOut.duration(300)} style={[styles.reaBox, { backgroundColor: '#F8BBD9' }]}>
+              <Text style={styles.reaLabel}>FadeIn</Text>
+            </Animated.View>
+            <Animated.View entering={ZoomIn.springify()} exiting={FadeOut} style={[styles.reaBox, { backgroundColor: '#DCEDC8' }]}>
+              <Text style={styles.reaLabel}>ZoomIn</Text>
+            </Animated.View>
+            <Animated.View entering={SlideInLeft.duration(400)} exiting={FadeOut} style={[styles.reaBox, { backgroundColor: '#B3E5FC' }]}>
+              <Text style={styles.reaLabel}>SlideLeft</Text>
+            </Animated.View>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+// ── Camera Section ────────────────────────────────────────────────────────────
+function CameraSection(){
+  const { hasPermission, requestPermission, capturePhoto, lastPhoto, isCapturing } = useCamera();
+
+  return (
+    <View style={styles.widget}>
+      <Text style={styles.widgetTitle}>Camera (Expo Camera)</Text>
+      {!hasPermission ? (
+        <Pressable style={styles.btn} onPress={() => void requestPermission()}>
+          <Text style={styles.btnText}>Grant Camera Permission</Text>
+        </Pressable>
+      ) : (
+        <Pressable
+          style={[styles.btn, isCapturing && styles.btnDisabled]}
+          onPress={() => void capturePhoto()}
+          disabled={isCapturing}
+        >
+          <Text style={styles.btnText}>{isCapturing ? 'Capturing…' : '📷 Capture Photo'}</Text>
+        </Pressable>
+      )}
+      {lastPhoto && (
+        <Image
+          source={{ uri: lastPhoto.uri }}
+          style={styles.previewImage}
+          accessibilityLabel="Captured photo preview"
+        />
+      )}
+    </View>
+  );
+}
+
+// ── Gallery Section ───────────────────────────────────────────────────────────
+function GallerySection(){
+  const { hasPermission, requestPermission, pickImage, selectedAsset, isPicking } = useGallery({
+    allowsEditing: true,
+    aspect: [4, 3] });
+
+  return (
+    <View style={styles.widget}>
+      <Text style={styles.widgetTitle}>Gallery (Expo ImagePicker)</Text>
+      {!hasPermission ? (
+        <Pressable style={styles.btn} onPress={() => void requestPermission()}>
+          <Text style={styles.btnText}>Grant Gallery Permission</Text>
+        </Pressable>
+      ) : (
+        <Pressable
+          style={[styles.btn, isPicking && styles.btnDisabled]}
+          onPress={() => void pickImage()}
+          disabled={isPicking}
+        >
+          <Text style={styles.btnText}>{isPicking ? 'Picking…' : '🖼 Pick from Gallery'}</Text>
+        </Pressable>
+      )}
+      {selectedAsset && (
+        <Image
+          source={{ uri: selectedAsset.uri }}
+          style={styles.previewImage}
+          accessibilityLabel="Selected image preview"
+        />
+      )}
+    </View>
+  );
+}
+
+// ── Location Section ──────────────────────────────────────────────────────────
+function LocationSection(){
+  const { location, hasPermission, requestPermission, getLocation, loading, error } = useLocation({
+    accuracy: 'balanced' });
+
+  return (
+    <View style={styles.widget}>
+      <Text style={styles.widgetTitle}>GPS Location (Expo Location)</Text>
+      {!hasPermission ? (
+        <Pressable style={styles.btn} onPress={() => void requestPermission()}>
+          <Text style={styles.btnText}>Grant Location Permission</Text>
+        </Pressable>
+      ) : (
+        <Pressable
+          style={[styles.btn, loading && styles.btnDisabled]}
+          onPress={() => void getLocation()}
+          disabled={loading}
+        >
+          <Text style={styles.btnText}>{loading ? 'Getting location…' : '📍 Get My Location'}</Text>
+        </Pressable>
+      )}
+      {error && <Text style={styles.errorText}>{error}</Text>}
+      {location && (
+        <View style={styles.locationBox}>
+          <LocationRow label="Latitude" value={location.coords.latitude.toFixed(6)} />
+          <LocationRow label="Longitude" value={location.coords.longitude.toFixed(6)} />
+          <LocationRow label="Accuracy" value={`${(location.coords.accuracy ?? 0).toFixed(0)}m`} />
+          <LocationRow label="Altitude" value={`${(location.coords.altitude ?? 0).toFixed(1)}m`} />
+        </View>
+      )}
+    </View>
+  );
+}
+
+function LocationRow({ label, value }){
+  return (
+    <View style={styles.locationRow}>
+      <Text style={styles.locationLabel}>{label}</Text>
+      <Text style={styles.locationValue}>{value}</Text>
+    </View>
+  );
+}
+
+// ── Main screen ───────────────────────────────────────────────────────────────
+export function AnimationsDeviceScreen(){
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <View style={styles.header}>
+        <Text style={styles.heading}>Experiment 06</Text>
+        <Text style={styles.subheading}>Animations & Device Features</Text>
+      </View>
+
+      <AnimationsSection />
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Device Features</Text>
+        <CameraSection />
+        <GallerySection />
+        <LocationSection />
+      </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 },
+  animBox: {
+    height: 64,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 8 },
+  animLabel: { fontSize: 14, fontWeight: '600', color: '#333' },
+  row: { flexDirection: 'row', gap: 8, marginTop: 8, flexWrap: 'wrap' },
+  reaBox: {
+    flex: 1,
+    height: 60,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 80 },
+  reaLabel: { fontSize: 11, fontWeight: '700', color: '#333' },
+  previewImage: {
+    width: '100%',
+    height: 200,
+    borderRadius: 8,
+    marginTop: 10,
+    backgroundColor: '#eee' },
+  locationBox: {
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    padding: 10,
+    marginTop: 8,
+    borderWidth: 1,
+    borderColor: '#e0e0e0' },
+  locationRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 4,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0' },
+  locationLabel: { fontSize: 13, color: '#666' },
+  locationValue: { fontSize: 13, fontWeight: '700', color: '#333' } });