@buoy-gg/react-query 1.7.2

package/lib/module/react-query/components/modals/QueryBrowserModal.js

@@ -0,0 +1,233 @@
+"use strict";
+
+import { JsModal, ModalHeader, TabSelector } from "@buoy-gg/shared-ui";
+import { useGetQueryByQueryKey } from "../../hooks/useSelectedQuery";
+import { ReactQueryModalHeader } from "./ReactQueryModalHeader";
+import { QueryBrowserMode } from "../QueryBrowserMode";
+import { QueryBrowserFooter } from "./QueryBrowserFooter";
+import { QueryFilterViewV3 } from "../QueryFilterViewV3";
+import { useState, useCallback, useEffect } from "react";
+import { View, StyleSheet } from "react-native";
+import { devToolsStorageKeys, useSafeAsyncStorage, buoyColors } from "@buoy-gg/shared-ui";
+import useAllQueries from "../../hooks/useAllQueries";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Specialized modal for query browsing following "Decompose by Responsibility"
+ * Single purpose: Display query browser when no query is selected
+ */
+export function QueryBrowserModal({
+  visible,
+  selectedQueryKey,
+  onQuerySelect,
+  onClose,
+  onMinimize,
+  activeFilter: externalActiveFilter,
+  onFilterChange: externalOnFilterChange,
+  enableSharedModalDimensions = false,
+  onTabChange,
+  searchText = "",
+  onSearchChange
+}) {
+  const selectedQuery = useGetQueryByQueryKey(selectedQueryKey);
+  const allQueries = useAllQueries();
+
+  // Use external filter state if provided (for persistence), otherwise use internal state
+  const [internalActiveFilter, setInternalActiveFilter] = useState(null);
+  const activeFilter = externalActiveFilter ?? internalActiveFilter;
+  const setActiveFilter = externalOnFilterChange ?? setInternalActiveFilter;
+
+  // Filter modal state
+  const [showFilterView, setShowFilterView] = useState(false);
+  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
+  const [includedPatterns, setIncludedPatterns] = useState(new Set());
+
+  // AsyncStorage for persisting ignored patterns
+  const {
+    getItem: safeGetItem,
+    setItem: safeSetItem
+  } = useSafeAsyncStorage();
+
+  // Load ignored patterns from storage on mount
+  useEffect(() => {
+    const loadFilters = async () => {
+      try {
+        const stored = await safeGetItem(devToolsStorageKeys.reactQuery.ignoredPatterns());
+        if (stored) {
+          const patterns = JSON.parse(stored);
+          if (Array.isArray(patterns)) {
+            setIgnoredPatterns(new Set(patterns));
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load ignored patterns:", error);
+      }
+    };
+    loadFilters();
+  }, [safeGetItem]);
+
+  // Load included patterns from storage on mount
+  useEffect(() => {
+    const loadFilters = async () => {
+      try {
+        const stored = await safeGetItem(devToolsStorageKeys.reactQuery.includedPatterns());
+        if (stored) {
+          const patterns = JSON.parse(stored);
+          if (Array.isArray(patterns)) {
+            setIncludedPatterns(new Set(patterns));
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load included patterns:", error);
+      }
+    };
+    loadFilters();
+  }, [safeGetItem]);
+
+  // Save ignored patterns to storage when they change
+  useEffect(() => {
+    const saveFilters = async () => {
+      try {
+        const patterns = Array.from(ignoredPatterns);
+        await safeSetItem(devToolsStorageKeys.reactQuery.ignoredPatterns(), JSON.stringify(patterns));
+      } catch (error) {
+        console.error("Failed to save ignored patterns:", error);
+      }
+    };
+    saveFilters();
+  }, [ignoredPatterns, safeSetItem]);
+
+  // Save included patterns to storage when they change
+  useEffect(() => {
+    const saveFilters = async () => {
+      try {
+        const patterns = Array.from(includedPatterns);
+        await safeSetItem(devToolsStorageKeys.reactQuery.includedPatterns(), JSON.stringify(patterns));
+      } catch (error) {
+        console.error("Failed to save included patterns:", error);
+      }
+    };
+    saveFilters();
+  }, [includedPatterns, safeSetItem]);
+
+  // Toggle pattern in ignored set
+  const handlePatternToggle = useCallback(pattern => {
+    setIgnoredPatterns(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(pattern)) {
+        newSet.delete(pattern);
+      } else {
+        newSet.add(pattern);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // Toggle pattern in included set
+  const handleIncludedPatternToggle = useCallback(pattern => {
+    setIncludedPatterns(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(pattern)) {
+        newSet.delete(pattern);
+      } else {
+        newSet.add(pattern);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // Track modal mode for conditional styling
+  const [modalMode, setModalMode] = useState("bottomSheet");
+  const storagePrefix = enableSharedModalDimensions ? devToolsStorageKeys.reactQuery.modal() : devToolsStorageKeys.reactQuery.browserModal();
+  const handleModeChange = useCallback(mode => {
+    setModalMode(mode);
+  }, []);
+  if (!visible) return null;
+  const renderHeaderContent = () => {
+    // Filter view header with back button
+    if (showFilterView) {
+      const tabs = [{
+        key: "filters",
+        label: "Filters"
+      }];
+      return /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: () => setShowFilterView(false)
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "",
+          noMargin: true,
+          children: /*#__PURE__*/_jsx(TabSelector, {
+            tabs: tabs,
+            activeTab: "filters",
+            onTabChange: () => {}
+          })
+        })]
+      });
+    }
+
+    // Normal query browser header
+    return /*#__PURE__*/_jsx(ReactQueryModalHeader, {
+      selectedQuery: selectedQuery,
+      activeTab: "queries",
+      onTabChange: onTabChange,
+      onBack: () => onQuerySelect(undefined),
+      searchText: searchText,
+      onSearchChange: onSearchChange,
+      onFilterPress: () => setShowFilterView(true),
+      hasActiveFilters: activeFilter !== null || ignoredPatterns.size > 0 || includedPatterns.size > 0
+    });
+  };
+  const footerNode = /*#__PURE__*/_jsx(QueryBrowserFooter, {
+    activeFilter: activeFilter,
+    onFilterChange: setActiveFilter,
+    isFloatingMode: modalMode === "floating"
+  });
+  return /*#__PURE__*/_jsx(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onMinimize: onMinimize,
+    persistenceKey: storagePrefix,
+    header: {
+      customContent: renderHeaderContent(),
+      showToggleButton: true
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    styles: {},
+    footer: !showFilterView ? footerNode : undefined,
+    footerHeight: !showFilterView ? 56 : undefined,
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.container,
+      children: showFilterView ?
+      /*#__PURE__*/
+      /* Show filter view */
+      _jsx(QueryFilterViewV3, {
+        queries: allQueries,
+        activeFilter: activeFilter,
+        onFilterChange: setActiveFilter,
+        ignoredPatterns: ignoredPatterns,
+        onPatternToggle: handlePatternToggle,
+        includedPatterns: includedPatterns,
+        onIncludedPatternToggle: handleIncludedPatternToggle
+      }) :
+      /*#__PURE__*/
+      /* Show query browser */
+      _jsx(QueryBrowserMode, {
+        selectedQuery: selectedQuery,
+        onQuerySelect: onQuerySelect,
+        activeFilter: activeFilter,
+        searchText: searchText,
+        ignoredPatterns: ignoredPatterns,
+        includedPatterns: includedPatterns,
+        onFilterPress: () => setShowFilterView(true)
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  }
+});

package/lib/module/react-query/components/modals/ReactQueryModal.js

@@ -0,0 +1,79 @@
+"use strict";
+
+import { QueryBrowserModal } from "./QueryBrowserModal";
+import { DataEditorModal } from "./DataEditorModal";
+import { MutationBrowserModal } from "./MutationBrowserModal";
+import { MutationEditorModal } from "./MutationEditorModal";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Refactored ReactQueryModal following composition principles
+ *
+ * Applied principles:
+ * - Decompose by Responsibility: Separated query browser and data editor modals
+ * - Prefer Composition over Configuration: Uses specialized modal components
+ * - Extract Reusable Logic: Modal routing logic based on query selection
+ * - Utilize Render Props: Each modal handles its own rendering responsibility
+ */
+export function ReactQueryModal({
+  visible,
+  selectedQueryKey,
+  selectedMutationId,
+  onQuerySelect,
+  onMutationSelect,
+  onClose,
+  onMinimize,
+  activeFilter,
+  onFilterChange,
+  activeTab,
+  onTabChange,
+  enableSharedModalDimensions = false,
+  searchText = "",
+  onSearchChange
+}) {
+  // Check if we have a key/id even if the query/mutation hasn't been found yet
+  const inDetail = !!selectedQueryKey || !!selectedMutationId;
+  const isQueryMode = activeTab === "queries";
+  const isMutationMode = activeTab === "mutations";
+  const commonProps = {
+    onClose,
+    onMinimize,
+    activeFilter,
+    onFilterChange,
+    enableSharedModalDimensions
+  };
+  const showQueryBrowserModal = visible && !inDetail && isQueryMode;
+  const showMutationBrowserModal = visible && !inDetail && isMutationMode;
+  const showDataEditorModal = visible && inDetail && isQueryMode && !!selectedQueryKey;
+  const showMutationEditorModal = visible && inDetail && isMutationMode && !!selectedMutationId;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(QueryBrowserModal, {
+      visible: showQueryBrowserModal,
+      selectedQueryKey: selectedQueryKey,
+      onQuerySelect: onQuerySelect,
+      onTabChange: onTabChange,
+      searchText: searchText,
+      onSearchChange: onSearchChange,
+      ...commonProps
+    }), /*#__PURE__*/_jsx(MutationBrowserModal, {
+      visible: showMutationBrowserModal,
+      selectedMutationId: selectedMutationId,
+      onMutationSelect: onMutationSelect,
+      onTabChange: onTabChange,
+      searchText: searchText,
+      onSearchChange: onSearchChange,
+      ...commonProps
+    }), /*#__PURE__*/_jsx(DataEditorModal, {
+      visible: showDataEditorModal,
+      selectedQueryKey: selectedQueryKey,
+      onQuerySelect: onQuerySelect,
+      onTabChange: onTabChange,
+      ...commonProps
+    }), /*#__PURE__*/_jsx(MutationEditorModal, {
+      visible: showMutationEditorModal,
+      selectedMutationId: selectedMutationId,
+      onMutationSelect: onMutationSelect,
+      onTabChange: onTabChange,
+      ...commonProps
+    })]
+  });
+}

package/lib/module/react-query/components/modals/ReactQueryModalHeader.js

@@ -0,0 +1,167 @@
+"use strict";
+
+import { ModalHeader, TabSelector, Search, X, Filter, buoyColors } from "@buoy-gg/shared-ui";
+import { useState, useRef, useEffect } from "react";
+import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shared header for all React Query modals. Handles tab switching when browsing and presents
+ * breadcrumbs when a specific query or mutation is selected.
+ */
+export function ReactQueryModalHeader({
+  selectedQuery,
+  selectedMutation,
+  activeTab,
+  onTabChange,
+  onBack,
+  searchText = "",
+  onSearchChange,
+  onFilterPress,
+  hasActiveFilters = false
+}) {
+  const [isSearchActive, setIsSearchActive] = useState(false);
+  const searchInputRef = useRef(null);
+
+  // Auto-focus search input when search becomes active
+  useEffect(() => {
+    if (isSearchActive && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isSearchActive]);
+  const handleSearchToggle = () => {
+    setIsSearchActive(!isSearchActive);
+    if (isSearchActive && onSearchChange) {
+      onSearchChange("");
+    }
+  };
+  const handleSearch = text => {
+    if (onSearchChange) {
+      onSearchChange(text);
+    }
+  };
+  // Simple function to get query display text
+  const getQueryText = query => {
+    if (!query?.queryKey) return "Unknown Query";
+    const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+    return keys.filter(k => k != null).map(k => String(k)).join(" › ") || "Unknown Query";
+  };
+  const getItemText = item => {
+    if ("queryKey" in item) {
+      return getQueryText(item);
+    } else {
+      return item.options.mutationKey ? (Array.isArray(item.options.mutationKey) ? item.options.mutationKey : [item.options.mutationKey]).filter(k => k != null).map(k => String(k)).join(" › ") || `Mutation #${item.mutationId}` : `Mutation #${item.mutationId}`;
+    }
+  };
+  const tabs = [{
+    key: "queries",
+    label: "Queries"
+  }, {
+    key: "mutations",
+    label: "Mutations"
+  }];
+
+  // Show details view when an item is selected
+  if (selectedQuery || selectedMutation) {
+    return /*#__PURE__*/_jsxs(ModalHeader, {
+      children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+        onBack: onBack
+      }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+        title: getItemText(selectedQuery ?? selectedMutation)
+      })]
+    });
+  }
+
+  // Show browser view with tabs when no item is selected
+  return /*#__PURE__*/_jsxs(ModalHeader, {
+    children: [/*#__PURE__*/_jsx(ModalHeader.Content, {
+      title: "",
+      noMargin: true,
+      children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
+        style: styles.headerSearchContainer,
+        children: [/*#__PURE__*/_jsx(Search, {
+          size: 14,
+          color: buoyColors.textSecondary
+        }), /*#__PURE__*/_jsx(TextInput, {
+          ref: searchInputRef,
+          style: styles.headerSearchInput,
+          placeholder: "Search query keys...",
+          placeholderTextColor: buoyColors.textMuted,
+          value: searchText,
+          onChangeText: handleSearch,
+          onSubmitEditing: () => setIsSearchActive(false),
+          onBlur: () => setIsSearchActive(false),
+          "sentry-label": "ignore react query search header",
+          accessibilityLabel: "Search queries and mutations",
+          autoCapitalize: "none",
+          autoCorrect: false,
+          returnKeyType: "search"
+        }), searchText.length > 0 ? /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => {
+            handleSearch("");
+            setIsSearchActive(false);
+          },
+          "sentry-label": "ignore clear search header",
+          style: styles.headerSearchClear,
+          children: /*#__PURE__*/_jsx(X, {
+            size: 14,
+            color: buoyColors.textSecondary
+          })
+        }) : null]
+      }) : /*#__PURE__*/_jsx(TabSelector, {
+        tabs: tabs,
+        activeTab: activeTab,
+        onTabChange: tab => onTabChange(tab)
+      })
+    }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        "sentry-label": "ignore open search",
+        onPress: handleSearchToggle,
+        style: styles.headerActionButton,
+        children: /*#__PURE__*/_jsx(Search, {
+          size: 14,
+          color: buoyColors.textSecondary
+        })
+      }), onFilterPress && /*#__PURE__*/_jsx(TouchableOpacity, {
+        "sentry-label": "ignore open filter",
+        onPress: onFilterPress,
+        style: [styles.headerActionButton, hasActiveFilters && styles.activeFilterButton],
+        children: /*#__PURE__*/_jsx(Filter, {
+          size: 14,
+          color: hasActiveFilters ? buoyColors.primary : buoyColors.textSecondary
+        })
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  headerSearchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: buoyColors.input,
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    gap: 6,
+    marginHorizontal: 12,
+    marginVertical: 8
+  },
+  headerSearchInput: {
+    flex: 1,
+    color: buoyColors.text,
+    fontSize: 13,
+    fontFamily: "monospace",
+    padding: 0,
+    margin: 0,
+    minHeight: 18
+  },
+  headerSearchClear: {
+    padding: 2
+  },
+  headerActionButton: {
+    padding: 6,
+    borderRadius: 4
+  },
+  activeFilterButton: {
+    backgroundColor: buoyColors.primary + "33"
+  }
+});

package/lib/module/react-query/components/modals/SwipeIndicator.js

@@ -0,0 +1,200 @@
+"use strict";
+
+import { View, StyleSheet, Animated } from "react-native";
+import { useMemo } from "react";
+import { ChevronLeft, ChevronRight, buoyColors } from "@buoy-gg/shared-ui";
+
+/**
+ * Morphing swipe indicator – thin line ➜ pill ➜ circle with a pop-out cue at
+ * full commit.  Visual-only; gesture logic lives upstream.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* -------------------------------------------------------------------------- */
+// VISUAL CONSTANTS – tuned for typical back-gesture UX
+/* -------------------------------------------------------------------------- */
+const INDICATOR_HEIGHT = 32; // ⬆️ bigger circle (line height)
+const MIN_WIDTH = 6; // hairline start
+const MAX_WIDTH = INDICATOR_HEIGHT; // circle when width == height
+const DEFAULT_MAX_TRANSLATION = 120;
+const POP_OUT_START = 0.95; // progress at which pop-out begins
+const POP_OUT_SCALE = 1.15; // final scale factor when fully committed
+
+export function SwipeIndicator({
+  translationX,
+  maxTranslation = DEFAULT_MAX_TRANSLATION,
+  canSwipeLeft = true,
+  canSwipeRight = true
+}) {
+  /* ---------------- LEFT EDGE (Back) ---------------- */
+  const leftProgress = useMemo(() => {
+    return translationX.interpolate({
+      inputRange: [0, maxTranslation],
+      outputRange: [0, 1],
+      extrapolate: "clamp"
+    });
+  }, [translationX, maxTranslation]);
+  const leftIndicatorWidth = useMemo(() => {
+    return leftProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [MIN_WIDTH, MAX_WIDTH]
+    });
+  }, [leftProgress]);
+  const leftIndicatorScale = useMemo(() => {
+    return leftProgress.interpolate({
+      inputRange: [0, POP_OUT_START, 1],
+      outputRange: [1, 1, POP_OUT_SCALE]
+    });
+  }, [leftProgress]);
+  const leftIndicatorTranslateX = useMemo(() => {
+    return leftProgress.interpolate({
+      inputRange: [0, 0.99, 1],
+      outputRange: [0, 0, 16]
+    });
+  }, [leftProgress]);
+  const leftIndicatorOpacity = useMemo(() => {
+    return leftProgress.interpolate({
+      inputRange: [0, 0.01],
+      outputRange: [0, 1],
+      extrapolate: "clamp"
+    });
+  }, [leftProgress]);
+  const leftArrowOpacity = useMemo(() => {
+    return leftProgress.interpolate({
+      inputRange: [0, 0.5, 1],
+      outputRange: [0, 0, 1],
+      extrapolate: "clamp"
+    });
+  }, [leftProgress]);
+  const leftArrowScale = useMemo(() => {
+    return leftProgress.interpolate({
+      inputRange: [0, 0.5, POP_OUT_START, 1],
+      outputRange: [0.8, 0.8, 1, 1.2]
+    });
+  }, [leftProgress]);
+
+  /* ---------------- RIGHT EDGE ---------------- */
+  const rightProgress = useMemo(() => {
+    return translationX.interpolate({
+      inputRange: [-maxTranslation, 0],
+      outputRange: [1, 0],
+      extrapolate: "clamp"
+    });
+  }, [translationX, maxTranslation]);
+  const rightIndicatorWidth = useMemo(() => {
+    return rightProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [MIN_WIDTH, MAX_WIDTH]
+    });
+  }, [rightProgress]);
+  const rightIndicatorScale = useMemo(() => {
+    return rightProgress.interpolate({
+      inputRange: [0, POP_OUT_START, 1],
+      outputRange: [1, 1, POP_OUT_SCALE]
+    });
+  }, [rightProgress]);
+  const rightIndicatorTranslateX = useMemo(() => {
+    return rightProgress.interpolate({
+      inputRange: [0, 0.99, 1],
+      outputRange: [0, 0, -16]
+    });
+  }, [rightProgress]);
+  const rightIndicatorOpacity = useMemo(() => {
+    return rightProgress.interpolate({
+      inputRange: [0, 0.01],
+      outputRange: [0, 1],
+      extrapolate: "clamp"
+    });
+  }, [rightProgress]);
+  const rightArrowOpacity = useMemo(() => {
+    return rightProgress.interpolate({
+      inputRange: [0, 0.5, 1],
+      outputRange: [0, 0, 1],
+      extrapolate: "clamp"
+    });
+  }, [rightProgress]);
+  const rightArrowScale = useMemo(() => {
+    return rightProgress.interpolate({
+      inputRange: [0, 0.5, POP_OUT_START, 1],
+      outputRange: [0.8, 0.8, 1, 1.2]
+    });
+  }, [rightProgress]);
+
+  /* ---------------- Render ---------------- */
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    pointerEvents: "none",
+    children: [canSwipeRight && /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.leftWrapper, {
+        width: leftIndicatorWidth,
+        height: INDICATOR_HEIGHT,
+        borderRadius: INDICATOR_HEIGHT / 2,
+        backgroundColor: buoyColors.text + "E6",
+        justifyContent: "center",
+        alignItems: "center",
+        opacity: leftIndicatorOpacity,
+        transform: [{
+          scale: leftIndicatorScale
+        }, {
+          translateX: leftIndicatorTranslateX
+        }]
+      }],
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: {
+          opacity: leftArrowOpacity,
+          transform: [{
+            scale: leftArrowScale
+          }]
+        },
+        children: /*#__PURE__*/_jsx(ChevronLeft, {
+          size: INDICATOR_HEIGHT * 0.6,
+          color: buoyColors.primary,
+          strokeWidth: 3
+        })
+      })
+    }), canSwipeLeft && /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.rightWrapper, {
+        width: rightIndicatorWidth,
+        height: INDICATOR_HEIGHT,
+        borderRadius: INDICATOR_HEIGHT / 2,
+        backgroundColor: buoyColors.text + "E6",
+        justifyContent: "center",
+        alignItems: "center",
+        opacity: rightIndicatorOpacity,
+        transform: [{
+          scale: rightIndicatorScale
+        }, {
+          translateX: rightIndicatorTranslateX
+        }]
+      }],
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: {
+          opacity: rightArrowOpacity,
+          transform: [{
+            scale: rightArrowScale
+          }]
+        },
+        children: /*#__PURE__*/_jsx(ChevronRight, {
+          size: INDICATOR_HEIGHT * 0.6,
+          color: buoyColors.primary,
+          strokeWidth: 3
+        })
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1000,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  leftWrapper: {
+    position: "absolute",
+    left: 16
+  },
+  rightWrapper: {
+    position: "absolute",
+    right: 16
+  }
+});