yaver-feedback-react-native 0.8.12 → 0.8.13

package/src/DeployPanel.tsx

@@ -0,0 +1,403 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { YaverFeedback } from './YaverFeedback';
+
+/**
+ * Inline Deploy panel — third-party RN apps using yaver-feedback can deploy
+ * to TestFlight / Play Store from a phone shake without leaving their app.
+ *
+ * Flow:
+ *   1. GET /fleet/deploy-options?app=<slug> on the SDK's selected machine.
+ *      The agent fans out doctor probes to the user's other reachable
+ *      devices (LAN > Tailscale > relay) and returns merged capabilities.
+ *   2. User picks a target (TestFlight / Play / Both) — disables machines
+ *      whose doctor reports a blocker for any picked target. Linux boxes
+ *      grey out for TestFlight ("xcodebuild: only on darwin"). macOS
+ *      machines without Xcode grey out for the same reason.
+ *   3. Tap a machine row → POST /deploy/ship {app, target/targets, machine}.
+ *      Toast + auto-collapse the panel. Live SSE log viewing is the
+ *      desktop / web Deploy tab's job — this surface stays minimal.
+ *
+ * App slug resolution: prefer config.deployAppSlug → bundleId tail →
+ * literal "main". Documented on FeedbackConfig.deployAppSlug.
+ */
+
+interface FleetDeployTargetCap {
+  target: string;
+  ok: boolean;
+  reason?: string;
+}
+
+interface FleetDeployDevice {
+  deviceId: string;
+  name: string;
+  alias?: string;
+  platform: string;
+  isLocal: boolean;
+  isOnline: boolean;
+  probed: boolean;
+  probeError?: string;
+  capabilities: FleetDeployTargetCap[];
+}
+
+interface FleetDeployOptions {
+  app: string;
+  stack?: string;
+  targets: string[];
+  devices: FleetDeployDevice[];
+  warnings?: string[];
+}
+
+const TARGET_LABELS: Record<string, string> = {
+  testflight: 'TestFlight',
+  playstore: 'Play Store',
+};
+
+interface DeployPanelProps {
+  /** Called when the user taps Cancel or after a successful deploy starts. */
+  onClose: () => void;
+}
+
+type SelectedTarget = 'testflight' | 'playstore' | 'both';
+
+export const DeployPanel: React.FC<DeployPanelProps> = ({ onClose }) => {
+  const [options, setOptions] = useState<FleetDeployOptions | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [status, setStatus] = useState<string | null>(null);
+  const [statusTone, setStatusTone] = useState<'progress' | 'success' | 'error'>('progress');
+  const [selected, setSelected] = useState<SelectedTarget>('both');
+  const [shipping, setShipping] = useState(false);
+
+  const resolveAppSlug = useCallback((): string => {
+    const cfg = YaverFeedback.getConfig();
+    const explicit = (cfg as { deployAppSlug?: string } | null | undefined)?.deployAppSlug;
+    if (explicit && explicit.trim().length > 0) return explicit.trim();
+    // Best-effort fallback: bundleId's last dot-segment. iOS gives us
+    // `io.yaver.sfmg`; Android gives the same shape. The agent's
+    // workspace manifest typically names apps after the project basename
+    // which is usually the same word, but the user can override via
+    // config.deployAppSlug if it isn't.
+    const bundleId = (cfg as { bundleId?: string } | null | undefined)?.bundleId;
+    if (bundleId) {
+      const tail = bundleId.split('.').pop();
+      if (tail) return tail;
+    }
+    return 'main';
+  }, []);
+
+  const baseAuthHeaders = useCallback((): Record<string, string> => {
+    const cfg = YaverFeedback.getConfig();
+    const headers: Record<string, string> = {};
+    if (cfg?.authToken) headers.Authorization = `Bearer ${cfg.authToken}`;
+    const relay = YaverFeedback.getRelayPassword();
+    if (relay) headers['X-Relay-Password'] = relay;
+    return headers;
+  }, []);
+
+  const fetchOptions = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    const cfg = YaverFeedback.getConfig();
+    if (!cfg?.agentUrl) {
+      setError('Not connected to a Yaver agent yet.');
+      setLoading(false);
+      return;
+    }
+    const app = resolveAppSlug();
+    const url = `${cfg.agentUrl.replace(/\/$/, '')}/fleet/deploy-options?app=${encodeURIComponent(app)}`;
+    try {
+      const resp = await fetch(url, { headers: baseAuthHeaders() });
+      if (!resp.ok) {
+        const text = await resp.text().catch(() => '');
+        throw new Error(`fetch failed (${resp.status}): ${text || resp.statusText}`);
+      }
+      const json = (await resp.json()) as FleetDeployOptions;
+      setOptions(json);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [baseAuthHeaders, resolveAppSlug]);
+
+  useEffect(() => {
+    void fetchOptions();
+  }, [fetchOptions]);
+
+  const pickedTargets = (): string[] => {
+    switch (selected) {
+      case 'testflight':
+        return ['testflight'];
+      case 'playstore':
+        return ['playstore'];
+      default:
+        return ['testflight', 'playstore'];
+    }
+  };
+
+  const machineRow = (d: FleetDeployDevice) => {
+    const targets = pickedTargets();
+    const blockers: string[] = [];
+    let allOK = true;
+    for (const t of targets) {
+      const cap = d.capabilities.find((c) => c.target === t);
+      if (!cap) {
+        allOK = false;
+        blockers.push(`${TARGET_LABELS[t] ?? t}: no capability data`);
+        continue;
+      }
+      if (!cap.ok) {
+        allOK = false;
+        if (cap.reason) blockers.push(`${TARGET_LABELS[t] ?? t}: ${cap.reason}`);
+      }
+    }
+    if (!d.probed && allOK) {
+      allOK = false;
+      blockers.push(d.probeError || "couldn't reach this machine");
+    }
+    const label = (d.alias && d.alias.length > 0 ? d.alias : d.name) +
+      (d.isLocal ? ' (this phone’s primary)' : '');
+    return (
+      <Pressable
+        key={d.deviceId}
+        disabled={!allOK || shipping}
+        onPress={() => triggerDeploy(d.deviceId)}
+        style={({ pressed }) => [
+          styles.row,
+          !allOK && styles.rowDisabled,
+          pressed && allOK && styles.rowPressed,
+        ]}
+      >
+        <Text style={styles.rowName}>{label}</Text>
+        <Text style={[styles.rowMeta, !allOK && styles.rowMetaWarning]}>
+          {d.platform} {'·'} {allOK ? 'ready' : blockers.join(' · ')}
+        </Text>
+      </Pressable>
+    );
+  };
+
+  const triggerDeploy = async (machine: string) => {
+    if (!options) return;
+    setShipping(true);
+    setStatus(`starting deploy on ${prettyMachineName(machine)}…`);
+    setStatusTone('progress');
+    const cfg = YaverFeedback.getConfig();
+    if (!cfg?.agentUrl) {
+      setStatus('Not connected to a Yaver agent yet.');
+      setStatusTone('error');
+      setShipping(false);
+      return;
+    }
+    const targets = pickedTargets();
+    const body: Record<string, unknown> = {
+      app: options.app,
+      machine,
+    };
+    if (targets.length === 1) {
+      body.target = targets[0];
+    } else {
+      body.targets = targets;
+    }
+    try {
+      const resp = await fetch(`${cfg.agentUrl.replace(/\/$/, '')}/deploy/ship`, {
+        method: 'POST',
+        headers: { ...baseAuthHeaders(), 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      if (!resp.ok) {
+        const text = await resp.text().catch(() => '');
+        throw new Error(`ship failed (${resp.status}): ${text || resp.statusText}`);
+      }
+      setStatus('deploy started — track progress in the desktop / web tab');
+      setStatusTone('success');
+      // Auto-close shortly so the user can keep using their app. Keep
+      // this in sync with the iOS / Android pane delays.
+      setTimeout(() => onClose(), 1600);
+    } catch (err: unknown) {
+      setStatus(err instanceof Error ? err.message : String(err));
+      setStatusTone('error');
+    } finally {
+      setShipping(false);
+    }
+  };
+
+  const prettyMachineName = (id: string): string => {
+    const d = options?.devices.find((x) => x.deviceId === id);
+    if (!d) return id;
+    return d.alias && d.alias.length > 0 ? d.alias : d.name;
+  };
+
+  const targetButton = (value: SelectedTarget, label: string) => (
+    <Pressable
+      key={value}
+      onPress={() => setSelected(value)}
+      style={[styles.segBtn, selected === value && styles.segBtnSelected]}
+    >
+      <Text style={[styles.segText, selected === value && styles.segTextSelected]}>{label}</Text>
+    </Pressable>
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerRow}>
+        <Text style={styles.title}>Deploy</Text>
+        <Pressable onPress={onClose} hitSlop={10}>
+          <Text style={styles.closeIcon}>✕</Text>
+        </Pressable>
+      </View>
+      <Text style={styles.subtitle}>
+        {loading
+          ? 'loading machines…'
+          : options
+            ? `${options.devices.length} machine${options.devices.length === 1 ? '' : 's'} — pick a target, then tap to deploy`
+            : 'no data yet'}
+      </Text>
+
+      <View style={styles.segment}>
+        {targetButton('testflight', 'TestFlight')}
+        {targetButton('playstore', 'Play Store')}
+        {targetButton('both', 'Both')}
+      </View>
+
+      {loading ? (
+        <View style={styles.loading}>
+          <ActivityIndicator color="rgba(255,255,255,0.6)" />
+        </View>
+      ) : error ? (
+        <Text style={styles.error}>{error}</Text>
+      ) : options ? (
+        <ScrollView style={styles.list}>{options.devices.map(machineRow)}</ScrollView>
+      ) : null}
+
+      {status && (
+        <Text
+          style={[
+            styles.status,
+            statusTone === 'success' && styles.statusSuccess,
+            statusTone === 'error' && styles.statusError,
+          ]}
+        >
+          {status}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'rgba(14,12,28,0.92)',
+    borderRadius: 16,
+    paddingHorizontal: 16,
+    paddingTop: 14,
+    paddingBottom: 18,
+    marginVertical: 8,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  title: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  closeIcon: {
+    color: 'rgba(255,255,255,0.55)',
+    fontSize: 18,
+    paddingHorizontal: 4,
+  },
+  subtitle: {
+    color: 'rgba(255,255,255,0.55)',
+    fontSize: 12,
+    marginTop: 2,
+  },
+  segment: {
+    flexDirection: 'row',
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    borderRadius: 10,
+    padding: 3,
+    marginTop: 14,
+  },
+  segBtn: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 7,
+    borderRadius: 8,
+  },
+  segBtnSelected: {
+    backgroundColor: 'rgba(127,140,247,0.65)',
+  },
+  segText: {
+    color: 'rgba(255,255,255,0.65)',
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  segTextSelected: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+  loading: {
+    paddingVertical: 32,
+    alignItems: 'center',
+  },
+  error: {
+    color: 'rgb(255,115,115)',
+    fontSize: 12,
+    marginTop: 14,
+  },
+  list: {
+    marginTop: 14,
+    maxHeight: 260,
+  },
+  row: {
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    marginBottom: 8,
+  },
+  rowPressed: {
+    backgroundColor: 'rgba(255,255,255,0.10)',
+  },
+  rowDisabled: {
+    opacity: 0.55,
+    backgroundColor: 'rgba(255,255,255,0.03)',
+  },
+  rowName: {
+    color: '#fff',
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  rowMeta: {
+    color: 'rgba(255,255,255,0.55)',
+    fontSize: 12,
+    marginTop: 2,
+  },
+  rowMetaWarning: {
+    color: 'rgb(255,178,115)',
+  },
+  status: {
+    color: 'rgba(255,255,255,0.55)',
+    fontSize: 12,
+    marginTop: 12,
+    textAlign: 'center',
+  },
+  statusSuccess: {
+    color: 'rgb(34,197,94)',
+  },
+  statusError: {
+    color: 'rgb(255,115,115)',
+  },
+});

package/src/FeedbackModal.tsx

@@ -12,6 +12,7 @@ import {
   Text,
   TextInput,
   View,
+  useWindowDimensions,
 } from 'react-native';
 import { YaverFeedback } from './YaverFeedback';
 import {
@@ -27,6 +28,8 @@ import { uploadFeedback } from './upload';
 import { DeviceInfo, FeedbackBundle } from './types';
 import { AuthOverlay } from './AuthOverlay';
 import { QuickActionIcon } from './QuickActionIcon';
+import { VibeChatScreen } from './VibeChatScreen';
+import { DeployPanel } from './DeployPanel';
 import { listReachableDevices, RemoteDevice } from './auth';
 import {
   QUICK_ICON_COLOR_PRESETS,
@@ -62,6 +65,11 @@ type MachineCardState = {
 };
 
 export const FeedbackModal: React.FC = () => {
+  const { width: winW, height: winH } = useWindowDimensions();
+  const isTablet = Math.min(winW, winH) >= 600;
+  // Tablet color/icon picker fans out to 5/6 cols — 31% (3-col)
+  // looks empty on a 1024pt iPad. Mobile keeps 3-col.
+  const iconOptionWidthOverride = isTablet ? '18%' : undefined;
   const [visible, setVisible] = useState(false);
   const [action, setAction] = useState<ActionState>('idle');
   const [error, setError] = useState<string | null>(null);
@@ -79,6 +87,7 @@ export const FeedbackModal: React.FC = () => {
   // "pick something for me" prompt (which in 0.7.13 pointed Claude at
   // the wrong project because the matcher grepped the prompt itself).
   const [showVibeInput, setShowVibeInput] = useState(false);
+  const [showDeploy, setShowDeploy] = useState(false);
   const [vibePrompt, setVibePrompt] = useState('');
   const [lastVibeTaskId, setLastVibeTaskId] = useState<string | null>(null);
   const [quickIconColorPreset, setQuickIconColorPreset] =
@@ -535,6 +544,17 @@ export const FeedbackModal: React.FC = () => {
     }
   }, [showVibeInput, vibePrompt]);
 
+  // Hold the active vibe-chat session — set when handleVibingSubmit
+  // returns a fresh taskId. Renders <VibeChatScreen> which streams the
+  // SSE transcript, supports multi-turn follow-ups via /tasks/{id}/
+  // resume, and exposes a Reload button. Mirrors the in-Yaver native
+  // pane's transcript-mode behaviour, just rendered in RN here.
+  const [activeVibe, setActiveVibe] = useState<{
+    taskId: string;
+    initialPrompt: string;
+  } | null>(null);
+  const [includeScreenshot, setIncludeScreenshot] = useState<boolean>(true);
+
   const handleVibingSubmit = useCallback(async () => {
     const client = YaverFeedback.getP2PClient();
     if (!client) {
@@ -554,13 +574,47 @@ export const FeedbackModal: React.FC = () => {
               .join('\n')
           : '';
       const userPrompt = vibePrompt.trim();
-      const prompt = userPrompt
+      const promptText = userPrompt
         ? userPrompt + errNote
         : 'Pick the next small improvement or fix for this app based on recent activity and the current screen.' +
           errNote;
-      const result = await client.vibing(prompt);
+
+      // Optional screenshot — captured from the host app's window.
+      // captureScreenshotBase64 returns null when react-native-view-
+      // shot isn't installed; we skip the screenshot rather than
+      // abort the whole feedback in that case.
+      let screenshotBase64: string | undefined;
+      if (includeScreenshot) {
+        const cap = await import('./capture');
+        const captured = await cap.captureScreenshotBase64();
+        if (captured?.base64) {
+          screenshotBase64 = captured.base64;
+        }
+      }
+
+      // Resolve project context the same way reloadApp / vibing did.
+      const { resolveAppIdentity } = await import('./P2PClient');
+      const identity = resolveAppIdentity();
+
+      // Pull the user's preferred runner / model from local prefs.
+      // Both are optional — the agent falls back to whatever runner
+      // is signed in if neither is provided.
+      const prefs = await import('./preferences');
+      const preferredRunner = (await prefs.getPreferredRunner?.()) ?? null;
+      const preferredModel = (await prefs.getPreferredModel?.()) ?? null;
+
+      const result = await client.createFeedbackTask({
+        userPrompt: promptText,
+        projectName: identity.projectName,
+        projectPath: identity.projectPath,
+        runner: preferredRunner ?? undefined,
+        model: preferredModel ?? undefined,
+        screenshotBase64,
+      });
       setLastVibeTaskId(result.taskId);
-      setToast(`Vibing task ${result.taskId.slice(0, 8)} created`);
+      // Hand off to VibeChatScreen — it streams the SSE transcript,
+      // accepts follow-ups, and surfaces a Reload button.
+      setActiveVibe({ taskId: result.taskId, initialPrompt: promptText });
       setVibePrompt('');
       setShowVibeInput(false);
     } catch (err: unknown) {
@@ -568,7 +622,7 @@ export const FeedbackModal: React.FC = () => {
     } finally {
       if (mountedRef.current) setAction('idle');
     }
-  }, [vibePrompt]);
+  }, [vibePrompt, includeScreenshot]);
 
   /*
   const handleScreenRecording = useCallback(async () => {
@@ -578,6 +632,40 @@ export const FeedbackModal: React.FC = () => {
 
   const busy = action !== 'idle';
 
+  // Once the user fires off a vibe task, swap the entire modal body
+  // for the live chat screen. The chat manages its own SSE
+  // subscription, multi-turn follow-ups, and Reload button. Closing
+  // the chat returns to idle and clears the active vibe.
+  if (visible && activeVibe) {
+    const client = YaverFeedback.getP2PClient();
+    return (
+      <>
+        <AuthOverlay />
+        <QuickActionIcon />
+        <Modal
+          visible={visible}
+          animationType="slide"
+          transparent
+          onRequestClose={() => setActiveVibe(null)}
+        >
+          {client ? (
+            <VibeChatScreen
+              client={client}
+              initialTaskId={activeVibe.taskId}
+              initialUserPrompt={activeVibe.initialPrompt}
+              onClose={() => setActiveVibe(null)}
+              onReload={async () => {
+                const c = YaverFeedback.getP2PClient();
+                if (!c) throw new Error('Not connected');
+                await c.reloadApp();
+              }}
+            />
+          ) : null}
+        </Modal>
+      </>
+    );
+  }
+
   return (
     <>
       <AuthOverlay />
@@ -597,7 +685,21 @@ export const FeedbackModal: React.FC = () => {
               pointerEvents="box-none"
             >
             <Pressable
-              style={styles.modal}
+              // Tablet: cap modal width and center as a card-style
+              // sheet rather than a phone bottom sheet that stretches
+              // across a 12.9" iPad. Phone behaviour unchanged.
+              style={[
+                styles.modal,
+                isTablet
+                  ? {
+                      width: '100%',
+                      maxWidth: 640,
+                      alignSelf: 'center',
+                      borderTopLeftRadius: 22,
+                      borderTopRightRadius: 22,
+                    }
+                  : null,
+              ]}
               onPress={(e) => {
                 e.stopPropagation();
                 Keyboard.dismiss();
@@ -703,6 +805,7 @@ export const FeedbackModal: React.FC = () => {
                         }}
                         style={[
                           styles.iconOption,
+                          iconOptionWidthOverride ? { width: iconOptionWidthOverride } : null,
                           selected && styles.iconOptionSelected,
                         ]}
                       >
@@ -811,6 +914,23 @@ export const FeedbackModal: React.FC = () => {
                 busy={action === 'capturing'}
               />
 
+              {/* Deploy — opens an inline panel that talks to
+                  /fleet/deploy-options on the agent and lets the user
+                  pick TestFlight / Play / Both, then a machine to run
+                  it on. Capabilities (e.g. "Linux can't TestFlight")
+                  come from the agent's doctor probes — no client-side
+                  platform smarts here. */}
+              {!showDeploy ? (
+                <ActionRow
+                  label="Deploy"
+                  tint="#7f8cf7"
+                  onPress={() => setShowDeploy(true)}
+                  disabled={busy}
+                />
+              ) : (
+                <DeployPanel onClose={() => setShowDeploy(false)} />
+              )}
+
               {/* Remote sign-in buttons — trigger codex/claude device-auth
                   on the selected agent without leaving the app. Opens a
                   small native modal showing the verification URL + 8-char

package/src/FloatingButton.tsx

@@ -11,6 +11,7 @@ import {
   TextInput,
   TouchableOpacity,
   View,
+  useWindowDimensions,
 } from 'react-native';
 import { YaverFeedback } from './YaverFeedback';
 import { FixReport } from './FixReport';
@@ -58,6 +59,15 @@ export interface FloatingButtonProps {
 
 const DEFAULT_SIZE = 40;
 const DEFAULT_COLOR = '#6366f1';
+
+// Tablet detection — short-edge dp >= 600 means iPad / 7"+ Android
+// tablet / Z Fold open. The SDK has no app-side responsive context
+// to lean on (it's a guest in third-party apps), so we infer
+// locally and bump the button + panel to tablet sizes.
+const TABLET_SHORT_EDGE = 600;
+function isTabletWindow(width: number, height: number): boolean {
+  return Math.min(width, height) >= TABLET_SHORT_EDGE;
+}
 const DEFAULT_PANEL_BG = '#2d2d2d';
 
 /**
@@ -101,7 +111,16 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   healthCheckInterval = 5000,
   panelBackgroundColor,
 }) => {
-  const { width: screenWidth } = Dimensions.get('window');
+  // Read window size live so the SDK overlay re-pins itself when
+  // the host app rotates or splits. The legacy snapshot via
+  // Dimensions.get only ran once and parked the button off-screen
+  // after orientation changes on iPad.
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const isTablet = isTabletWindow(screenWidth, screenHeight);
+  // Tablets get a larger touch target and a wider panel — phones
+  // keep the existing 40 / 280 defaults so guest apps aren't
+  // disrupted on small screens.
+  const effectiveSize = isTablet ? Math.max(size, 52) : size;
   const defaultX = initialPosition?.x ?? 10;
   const defaultY = initialPosition?.y ?? 90;
 
@@ -535,7 +554,12 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const buttonIcon = icon ?? 'y';
   const btnBg = isConnected ? color : `${color}88`;
 
-  const panelWidth = fullSize ? screenWidth - 24 : 280;
+  // Panel sizing — tablets get a wider compact panel (420) and a
+  // capped full-size panel (max 720 instead of full window) so the
+  // overlay doesn't dwarf the host app on a 12.9" iPad.
+  const compactPanelWidth = isTablet ? 420 : 280;
+  const fullPanelWidth = isTablet ? Math.min(screenWidth - 24, 720) : screenWidth - 24;
+  const panelWidth = fullSize ? fullPanelWidth : compactPanelWidth;
 
   return (
     <Animated.View
@@ -730,7 +754,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
         style={[
           s.button,
           isTerminal ? s.buttonTerminal : s.buttonMinimal,
-          { backgroundColor: btnBg, width: size, height: size },
+          { backgroundColor: btnBg, width: effectiveSize, height: effectiveSize },
           !isTerminal && { borderRadius: size / 2 },
         ]}
         activeOpacity={0.7}