@peersahab/side-island 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,146 @@
+import React from 'react';
+import { FlatListProps, ViewStyle } from 'react-native';
+
+type TeamMember = {
+    id: string;
+    name: string;
+    avatar?: string;
+    role: string;
+    status?: "active" | "inactive";
+};
+type SideIslandHaptics = {
+    /**
+     * Called when the island opens (expanded becomes true).
+     * Implement this using your own haptics library (e.g. expo-haptics).
+     */
+    onOpen?: () => void | Promise<void>;
+    /**
+     * Called when the island closes (expanded becomes false).
+     * Implement this using your own haptics library (e.g. expo-haptics).
+     */
+    onClose?: () => void | Promise<void>;
+    /**
+     * Called when the focused item changes while scrolling.
+     * Use this to trigger a "rigid" (or other) haptic in your app.
+     */
+    onFocusChange?: (info: {
+        index: number;
+    } | null) => void | Promise<void>;
+};
+type SideIslandPosition = "left" | "right";
+type SideIslandConfig = {
+    /**
+     * Which side of the screen the island is pinned to.
+     * Default: "right"
+     */
+    position?: SideIslandPosition;
+    width?: number;
+    height?: number;
+    waveAmplitude?: number;
+    waveY1?: number;
+    waveY2?: number;
+    backgroundColor?: string;
+    handleWidth?: number;
+    topOffset?: number;
+    /**
+     * Optional haptics adapter. If provided, it will be used to trigger haptic feedback
+     * on island open/close without adding a hard dependency to any haptics library.
+     */
+    haptics?: SideIslandHaptics;
+};
+type SideIslandController = {
+    expanded: boolean;
+    setExpanded: (next: boolean) => void;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    config: SideIslandConfig;
+};
+type SideIslandProviderProps = {
+    children: React.ReactNode;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (next: boolean) => void;
+    config?: SideIslandConfig;
+    value?: {
+        expanded: boolean;
+        setExpanded: (next: boolean) => void;
+        config?: SideIslandConfig;
+    };
+};
+type SideIslandProps<ItemT> = {
+    items: readonly ItemT[];
+    renderItem: (info: {
+        item: ItemT;
+        index: number;
+    }) => React.ReactElement | null;
+    keyExtractor?: (item: ItemT, index: number) => string;
+    listProps?: Omit<FlatListProps<ItemT>, "data" | "renderItem" | "keyExtractor">;
+    /**
+     * Called whenever the "focused" item changes as the user scrolls.
+     * Focus is determined by the item closest to the vertical center of the island.
+     * On first open, the island scrolls to focus the first item (index 0) centered.
+     * On subsequent opens, the island scrolls back to the last focused item.
+     */
+    onFocusedItemChange?: (info: {
+        item: ItemT;
+        index: number;
+    } | null) => void;
+    /**
+     * Which side of the screen the island is pinned to.
+     * Default: "right"
+     */
+    position?: SideIslandPosition;
+    width?: number;
+    height?: number;
+    waveAmplitude?: number;
+    waveY1?: number;
+    waveY2?: number;
+    backgroundColor?: string;
+    handleWidth?: number;
+    topOffset?: number;
+    /**
+     * Optional haptics adapter. If provided, it will be used to trigger haptic feedback
+     * on island open/close without adding a hard dependency to any haptics library.
+     */
+    haptics?: SideIslandHaptics;
+    style?: ViewStyle;
+    expanded?: boolean;
+    onToggleExpanded?: (next: boolean) => void;
+    defaultExpanded?: boolean;
+    /**
+     * Fired when the handle area is pressed.
+     * The island will still toggle expansion via controlled/provider/internal state.
+     */
+    onPress?: () => void;
+    /**
+     * Optional backdrop component that will fade into view when the island expands.
+     * Should cover the full screen and be positioned behind the island.
+     */
+    backdropComponent?: React.ReactElement;
+    /**
+     * Optional component to render details of the currently focused item.
+     * Displayed on top of the backdrop, opposite of the island:
+     * - position="right" => detail is to the left of the island
+     * - position="left"  => detail is to the right of the island
+     * Receives the focused item info and can interact with the island.
+     */
+    renderFocusedItemDetail?: (info: {
+        item: ItemT;
+        index: number;
+        expanded: boolean;
+        setExpanded: (next: boolean) => void;
+    }) => React.ReactElement | null;
+    /**
+     * Horizontal gap between the focused item detail component and the island.
+     * Default: 16
+     */
+    focusedItemDetailGap?: number;
+};
+
+declare function SideIsland<ItemT>({ items, renderItem, keyExtractor, listProps, onFocusedItemChange, position, width, height, waveAmplitude, waveY1, waveY2, backgroundColor, handleWidth, topOffset, haptics, style, expanded, onToggleExpanded, defaultExpanded, onPress, backdropComponent, renderFocusedItemDetail, focusedItemDetailGap, }: SideIslandProps<ItemT>): React.JSX.Element;
+
+declare function SideIslandProvider({ children, defaultExpanded, onExpandedChange, config, value, }: SideIslandProviderProps): React.JSX.Element;
+
+declare function useSideIsland(): SideIslandController;
+
+export { SideIsland, type SideIslandConfig, type SideIslandController, type SideIslandPosition, type SideIslandProps, SideIslandProvider, type SideIslandProviderProps, type TeamMember, useSideIsland };

package/dist/index.js

@@ -0,0 +1,536 @@
+'use strict';
+
+var React2 = require('react');
+var reactNative = require('react-native');
+var Animated = require('react-native-reanimated');
+var reactNativeSkia = require('@shopify/react-native-skia');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+var Animated__default = /*#__PURE__*/_interopDefault(Animated);
+
+// src/side-island.tsx
+var SideIslandContext = React2.createContext(null);
+function SideIslandProvider({
+  children,
+  defaultExpanded = false,
+  onExpandedChange,
+  config,
+  value
+}) {
+  var _a;
+  const [internalExpanded, setInternalExpanded] = React2.useState(defaultExpanded);
+  const expanded = (_a = value == null ? void 0 : value.expanded) != null ? _a : internalExpanded;
+  const setExpanded = React2.useCallback(
+    (next) => {
+      if (value == null ? void 0 : value.setExpanded) {
+        value.setExpanded(next);
+      } else {
+        setInternalExpanded(next);
+      }
+      onExpandedChange == null ? void 0 : onExpandedChange(next);
+    },
+    [onExpandedChange, value]
+  );
+  const mergedConfig = React2.useMemo(() => {
+    var _a2;
+    return {
+      ...config != null ? config : {},
+      ...(_a2 = value == null ? void 0 : value.config) != null ? _a2 : {}
+    };
+  }, [config, value == null ? void 0 : value.config]);
+  const ctxValue = React2.useMemo(() => {
+    return { expanded, setExpanded, config: mergedConfig };
+  }, [expanded, mergedConfig, setExpanded]);
+  return /* @__PURE__ */ React2__default.default.createElement(SideIslandContext.Provider, { value: ctxValue }, children);
+}
+
+// src/side-island.tsx
+function clamp(n, min, max) {
+  "worklet";
+  return Math.max(min, Math.min(max, n));
+}
+function buildWaveIslandPath(w, h, position, amp = 34, y1 = 0.28, y2 = 0.72) {
+  const p = reactNativeSkia.Skia.Path.Make();
+  const pinnedRight = position === "right";
+  const xPinned = pinnedRight ? w : 0;
+  const xBulge = pinnedRight ? 0 : w;
+  const minGap = 0.22;
+  const Y1 = h * clamp(y1, 0.05, 0.45);
+  const Y2 = h * clamp(y2, 0.55, 0.95);
+  const gap = Y2 - Y1;
+  const fixGap = gap < h * minGap;
+  const Y1Fixed = fixGap ? h * 0.5 - h * minGap / 2 : Y1;
+  const Y2Fixed = fixGap ? h * 0.5 + h * minGap / 2 : Y2;
+  const curveSize = Math.max(1, Math.min(Y1Fixed, h - Y2Fixed, w * 0.8));
+  p.moveTo(xPinned, 0);
+  p.lineTo(xPinned, h);
+  p.cubicTo(
+    xPinned,
+    h - curveSize * 0.75,
+    xBulge,
+    Y2Fixed + curveSize * 0.75,
+    xBulge,
+    Y2Fixed
+  );
+  p.lineTo(xBulge, Y1Fixed);
+  p.cubicTo(xBulge, Y1Fixed - curveSize * 0.5, xPinned, curveSize * 0.5, xPinned, 0);
+  p.close();
+  return p;
+}
+function DefaultSeparator({ height = 12 }) {
+  return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: { height } });
+}
+function ScaledItem({
+  index,
+  scrollY,
+  itemHeight,
+  viewportHeight,
+  separatorHeight,
+  children
+}) {
+  const animatedStyle = Animated.useAnimatedStyle(() => {
+    const h = itemHeight.value;
+    if (h <= 0) return {};
+    const stride = h + separatorHeight;
+    const inset = Math.max(0, viewportHeight / 2 - h / 2);
+    const itemCenterY = inset + index * stride + h / 2;
+    const viewportCenterY = scrollY.value + viewportHeight / 2;
+    const dist = Math.abs(itemCenterY - viewportCenterY);
+    const scale = Animated.interpolate(dist, [0, stride, stride * 2, stride * 3], [1, 0.8, 0.5, 0], Animated.Extrapolation.CLAMP);
+    return { transform: [{ scale }] };
+  }, [index, separatorHeight, viewportHeight]);
+  return /* @__PURE__ */ React2__default.default.createElement(Animated__default.default.View, { style: [{ alignItems: "center", justifyContent: "center" }, animatedStyle] }, children);
+}
+function SideIsland({
+  items,
+  renderItem,
+  keyExtractor,
+  listProps,
+  onFocusedItemChange,
+  position,
+  width,
+  height,
+  waveAmplitude,
+  waveY1,
+  waveY2,
+  backgroundColor,
+  handleWidth,
+  topOffset,
+  haptics,
+  style,
+  expanded,
+  onToggleExpanded,
+  defaultExpanded = false,
+  onPress,
+  backdropComponent,
+  renderFocusedItemDetail,
+  focusedItemDetailGap = 16
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  const { height: screenHeight, width: screenWidth } = reactNative.useWindowDimensions();
+  reactNative.useColorScheme();
+  const ctx = React2__default.default.useContext(SideIslandContext);
+  const resolvedPosition = (_a = position != null ? position : ctx == null ? void 0 : ctx.config.position) != null ? _a : "right";
+  const resolvedWidth = (_b = width != null ? width : ctx == null ? void 0 : ctx.config.width) != null ? _b : 40;
+  const resolvedHeight = (_c = height != null ? height : ctx == null ? void 0 : ctx.config.height) != null ? _c : 250;
+  const resolvedWaveAmplitude = (_d = waveAmplitude != null ? waveAmplitude : ctx == null ? void 0 : ctx.config.waveAmplitude) != null ? _d : 18;
+  const resolvedWaveY1 = (_e = waveY1 != null ? waveY1 : ctx == null ? void 0 : ctx.config.waveY1) != null ? _e : 0.1;
+  const resolvedWaveY2 = (_f = waveY2 != null ? waveY2 : ctx == null ? void 0 : ctx.config.waveY2) != null ? _f : 0.9;
+  const resolvedHandleWidth = (_g = handleWidth != null ? handleWidth : ctx == null ? void 0 : ctx.config.handleWidth) != null ? _g : 16;
+  const resolvedTopOffset = (_h = topOffset != null ? topOffset : ctx == null ? void 0 : ctx.config.topOffset) != null ? _h : 0;
+  const resolvedHaptics = haptics != null ? haptics : ctx == null ? void 0 : ctx.config.haptics;
+  const defaultBg = "#000000";
+  const resolvedBackgroundColor = (_i = backgroundColor != null ? backgroundColor : ctx == null ? void 0 : ctx.config.backgroundColor) != null ? _i : defaultBg;
+  const [internalExpanded, setInternalExpanded] = React2.useState(defaultExpanded);
+  const isControlled = typeof expanded === "boolean";
+  const isUsingProvider = !!ctx && !isControlled;
+  const effectiveExpanded = isControlled ? expanded : isUsingProvider ? ctx.expanded : internalExpanded;
+  const prevExpandedRef = React2.useRef(effectiveExpanded);
+  React2.useEffect(() => {
+    var _a2, _b2;
+    const prev = prevExpandedRef.current;
+    if (prev === effectiveExpanded) return;
+    prevExpandedRef.current = effectiveExpanded;
+    if (!resolvedHaptics) return;
+    if (effectiveExpanded) {
+      try {
+        void ((_a2 = resolvedHaptics.onOpen) == null ? void 0 : _a2.call(resolvedHaptics));
+      } catch (e) {
+      }
+    } else {
+      try {
+        void ((_b2 = resolvedHaptics.onClose) == null ? void 0 : _b2.call(resolvedHaptics));
+      } catch (e) {
+      }
+    }
+  }, [effectiveExpanded, resolvedHaptics]);
+  const setExpanded = (next) => {
+    if (isControlled) {
+      onToggleExpanded == null ? void 0 : onToggleExpanded(next);
+      return;
+    }
+    if (isUsingProvider) {
+      ctx.setExpanded(next);
+      return;
+    }
+    setInternalExpanded(next);
+  };
+  const toggleExpanded = () => setExpanded(!effectiveExpanded);
+  const topPosition = Math.round((screenHeight - resolvedHeight) / 2) + resolvedTopOffset;
+  const collapsedMagnitude = Math.max(0, resolvedWidth - resolvedHandleWidth);
+  const collapsedTranslateX = resolvedPosition === "right" ? collapsedMagnitude : -collapsedMagnitude;
+  const translateXAnim = Animated.useSharedValue(collapsedTranslateX);
+  const backdropOpacity = Animated.useSharedValue(effectiveExpanded ? 1 : 0);
+  React2.useEffect(() => {
+    translateXAnim.value = Animated.withTiming(effectiveExpanded ? 0 : collapsedTranslateX, {
+      duration: 300,
+      easing: Animated.Easing.out(Animated.Easing.ease)
+    });
+    backdropOpacity.value = Animated.withTiming(effectiveExpanded ? 1 : 0, {
+      duration: 300,
+      easing: Animated.Easing.out(Animated.Easing.ease)
+    });
+  }, [collapsedTranslateX, effectiveExpanded, translateXAnim, backdropOpacity]);
+  const path = React2.useMemo(() => {
+    return buildWaveIslandPath(resolvedWidth, resolvedHeight, resolvedPosition, resolvedWaveAmplitude, resolvedWaveY1, resolvedWaveY2);
+  }, [resolvedHeight, resolvedPosition, resolvedWaveAmplitude, resolvedWaveY1, resolvedWaveY2, resolvedWidth]);
+  const animatedContainerStyle = Animated.useAnimatedStyle(() => {
+    return { transform: [{ translateX: translateXAnim.value }] };
+  });
+  const animatedBackdropStyle = Animated.useAnimatedStyle(() => {
+    return { opacity: backdropOpacity.value };
+  });
+  const resolvedKeyExtractor = React2.useMemo(() => {
+    return keyExtractor != null ? keyExtractor : ((_, index) => String(index));
+  }, [keyExtractor]);
+  const separator = (_j = listProps == null ? void 0 : listProps.ItemSeparatorComponent) != null ? _j : (() => /* @__PURE__ */ React2__default.default.createElement(DefaultSeparator, null));
+  const listViewportPaddingTop = 24;
+  const listViewportPaddingBottom = 24;
+  const lastFocusedKeyRef = React2.useRef(null);
+  const lastFocusedIndexRef = React2.useRef(null);
+  const hasOpenedOnceRef = React2.useRef(false);
+  const suppressFocusRef = React2.useRef(false);
+  const listRef = React2.useRef(null);
+  const scrollYRef = React2.useRef(0);
+  const rafScheduledRef = React2.useRef(false);
+  const [measuredItemHeight, setMeasuredItemHeight] = React2.useState(null);
+  const scrollYAnim = Animated.useSharedValue(0);
+  const itemHeightAnim = Animated.useSharedValue(0);
+  const [focusedItemInfo, setFocusedItemInfo] = React2.useState(null);
+  React2.useEffect(() => {
+    if (measuredItemHeight != null && measuredItemHeight > 0 && itemHeightAnim.value <= 0) {
+      itemHeightAnim.value = measuredItemHeight;
+    }
+  }, [measuredItemHeight, itemHeightAnim]);
+  const contentEdgeInset = React2.useMemo(() => {
+    const viewportHeight = Math.max(0, resolvedHeight - listViewportPaddingTop - listViewportPaddingBottom);
+    const approxItemHalfHeight = measuredItemHeight ? measuredItemHeight / 2 : 20;
+    return Math.max(0, Math.round(viewportHeight / 2 - approxItemHalfHeight));
+  }, [measuredItemHeight, resolvedHeight]);
+  const defaultViewabilityConfig = React2.useMemo(() => {
+    return {
+      // Lower threshold so focus transitions don't require "half an item" to leave the viewport.
+      itemVisiblePercentThreshold: 10,
+      minimumViewTime: 0,
+      waitForInteraction: false
+    };
+  }, []);
+  const emitFocus = (index) => {
+    var _a2;
+    if (items.length === 0) return;
+    const maxIndex = Math.max(0, items.length - 1);
+    const clampedIndex = clamp(index, 0, maxIndex);
+    const focusedKey = String(clampedIndex);
+    if (focusedKey === lastFocusedKeyRef.current) return;
+    lastFocusedKeyRef.current = focusedKey;
+    lastFocusedIndexRef.current = clampedIndex;
+    const focusInfo = { item: items[clampedIndex], index: clampedIndex };
+    setFocusedItemInfo(focusInfo);
+    onFocusedItemChange == null ? void 0 : onFocusedItemChange(focusInfo);
+    if (effectiveExpanded) {
+      try {
+        void ((_a2 = resolvedHaptics == null ? void 0 : resolvedHaptics.onFocusChange) == null ? void 0 : _a2.call(resolvedHaptics, { index: clampedIndex }));
+      } catch (e) {
+      }
+    }
+  };
+  const recomputeFocus = () => {
+    if (suppressFocusRef.current) return;
+    if (items.length === 0) return;
+    const itemH = measuredItemHeight != null ? measuredItemHeight : 0;
+    if (itemH <= 0) return;
+    const separatorEstimate = (listProps == null ? void 0 : listProps.ItemSeparatorComponent) ? 0 : 12;
+    const stride = itemH + separatorEstimate;
+    const viewportHeight = Math.max(0, resolvedHeight - listViewportPaddingTop - listViewportPaddingBottom);
+    const centerY = scrollYRef.current + viewportHeight / 2;
+    const firstCenterY = contentEdgeInset + itemH / 2;
+    const raw = (centerY - firstCenterY) / stride;
+    const idx = Math.round(raw);
+    emitFocus(idx);
+  };
+  const handleViewableItemsChanged = React2.useMemo(() => {
+    return (info) => {
+      var _a2, _b2;
+      const viewable = ((_a2 = info == null ? void 0 : info.viewableItems) != null ? _a2 : []).filter((v) => v && v.index != null);
+      (_b2 = listProps == null ? void 0 : listProps.onViewableItemsChanged) == null ? void 0 : _b2.call(listProps, info);
+      const shouldReportFocus = !!onFocusedItemChange || !!(resolvedHaptics == null ? void 0 : resolvedHaptics.onFocusChange);
+      if (!shouldReportFocus) return;
+      if (suppressFocusRef.current) return;
+      if (viewable.length > 0) {
+        recomputeFocus();
+      }
+    };
+  }, [effectiveExpanded, listProps, onFocusedItemChange, resolvedHaptics]);
+  const scrollToIndexCentered = (index, animated) => {
+    var _a2;
+    const maxIndex = Math.max(0, items.length - 1);
+    const clamped = clamp(index, 0, maxIndex);
+    (_a2 = listRef.current) == null ? void 0 : _a2.scrollToIndex({ index: clamped, animated, viewPosition: 0.5 });
+  };
+  React2.useEffect(() => {
+    if (!effectiveExpanded) return;
+    if (items.length === 0) return;
+    const target = hasOpenedOnceRef.current && lastFocusedIndexRef.current != null ? lastFocusedIndexRef.current : 0;
+    suppressFocusRef.current = true;
+    const t0 = setTimeout(() => {
+      scrollToIndexCentered(target, false);
+      emitFocus(target);
+      const t1 = setTimeout(() => {
+        suppressFocusRef.current = false;
+      }, 50);
+      return () => clearTimeout(t1);
+    }, 0);
+    hasOpenedOnceRef.current = true;
+    return () => clearTimeout(t0);
+  }, [effectiveExpanded, items.length]);
+  const panResponder = React2.useMemo(() => {
+    return reactNative.PanResponder.create({
+      onMoveShouldSetPanResponder: (_evt, gestureState) => {
+        if (!effectiveExpanded) return false;
+        const dx = gestureState.dx;
+        const dy = gestureState.dy;
+        const should = resolvedPosition === "right" ? dx > 10 && Math.abs(dx) > Math.abs(dy) : dx < -10 && Math.abs(dx) > Math.abs(dy);
+        return should;
+      },
+      onPanResponderRelease: (_evt, gestureState) => {
+        if (!effectiveExpanded) return;
+        const dx = gestureState.dx;
+        const vx = gestureState.vx;
+        const shouldClose = resolvedPosition === "right" ? dx > 60 && vx > 0 : dx < -60 && vx < 0;
+        if (shouldClose) {
+          setExpanded(false);
+        }
+      },
+      onPanResponderTerminate: () => {
+      }
+    });
+  }, [effectiveExpanded, setExpanded, resolvedPosition]);
+  const panHandlers = backdropComponent ? void 0 : panResponder.panHandlers;
+  const islandContent = /* @__PURE__ */ React2__default.default.createElement(
+    Animated__default.default.View,
+    {
+      ...panHandlers,
+      style: [
+        styles.container,
+        {
+          width: resolvedWidth,
+          height: resolvedHeight,
+          top: topPosition,
+          ...resolvedPosition === "right" ? { right: 0 } : { left: 0 }
+        },
+        animatedContainerStyle,
+        style
+      ]
+    },
+    /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: reactNative.StyleSheet.absoluteFill }, /* @__PURE__ */ React2__default.default.createElement(reactNativeSkia.Canvas, { style: reactNative.StyleSheet.absoluteFill, pointerEvents: "none" }, /* @__PURE__ */ React2__default.default.createElement(reactNativeSkia.Group, { clip: path }, /* @__PURE__ */ React2__default.default.createElement(reactNativeSkia.Path, { path, color: resolvedBackgroundColor }))), /* @__PURE__ */ React2__default.default.createElement(
+      reactNative.View,
+      {
+        style: [
+          reactNative.StyleSheet.absoluteFill,
+          resolvedPosition === "right" ? { paddingTop: listViewportPaddingTop, paddingBottom: listViewportPaddingBottom, paddingLeft: 6, paddingRight: 0, borderRadius: 50 } : { paddingTop: listViewportPaddingTop, paddingBottom: listViewportPaddingBottom, paddingLeft: 0, paddingRight: 6, borderRadius: 50 }
+        ],
+        pointerEvents: "box-none"
+      },
+      /* @__PURE__ */ React2__default.default.createElement(
+        reactNative.FlatList,
+        {
+          ...listProps,
+          ref: (r) => {
+            listRef.current = r;
+          },
+          data: items,
+          renderItem: ({ item, index }) => {
+            const viewportHeight = Math.max(0, resolvedHeight - listViewportPaddingTop - listViewportPaddingBottom);
+            const separatorHeight = (listProps == null ? void 0 : listProps.ItemSeparatorComponent) ? 0 : 12;
+            return /* @__PURE__ */ React2__default.default.createElement(
+              ScaledItem,
+              {
+                index,
+                scrollY: scrollYAnim,
+                itemHeight: itemHeightAnim,
+                viewportHeight,
+                separatorHeight
+              },
+              /* @__PURE__ */ React2__default.default.createElement(
+                reactNative.View,
+                {
+                  onLayout: (e) => {
+                    const { height: height2 } = e.nativeEvent.layout;
+                    if (height2 > 0 && itemHeightAnim.value <= 0) {
+                      itemHeightAnim.value = height2;
+                    }
+                    if (measuredItemHeight == null && height2 > 0) {
+                      setMeasuredItemHeight(height2);
+                    }
+                  }
+                },
+                renderItem({ item, index })
+              )
+            );
+          },
+          keyExtractor: resolvedKeyExtractor,
+          showsVerticalScrollIndicator: (_k = listProps == null ? void 0 : listProps.showsVerticalScrollIndicator) != null ? _k : false,
+          ItemSeparatorComponent: separator,
+          viewabilityConfig: (_l = listProps == null ? void 0 : listProps.viewabilityConfig) != null ? _l : defaultViewabilityConfig,
+          onViewableItemsChanged: handleViewableItemsChanged,
+          onScroll: (e) => {
+            var _a2;
+            scrollYRef.current = e.nativeEvent.contentOffset.y;
+            scrollYAnim.value = e.nativeEvent.contentOffset.y;
+            (_a2 = listProps == null ? void 0 : listProps.onScroll) == null ? void 0 : _a2.call(listProps, e);
+            if (!rafScheduledRef.current) {
+              rafScheduledRef.current = true;
+              requestAnimationFrame(() => {
+                rafScheduledRef.current = false;
+                recomputeFocus();
+              });
+            }
+          },
+          scrollEventThrottle: (_m = listProps == null ? void 0 : listProps.scrollEventThrottle) != null ? _m : 16,
+          onScrollToIndexFailed: (info) => {
+            var _a2;
+            (_a2 = listProps == null ? void 0 : listProps.onScrollToIndexFailed) == null ? void 0 : _a2.call(listProps, info);
+            setTimeout(() => {
+              scrollToIndexCentered(info.index, false);
+            }, 50);
+          },
+          contentContainerStyle: [
+            { alignItems: "center", paddingTop: contentEdgeInset, paddingBottom: contentEdgeInset },
+            listProps == null ? void 0 : listProps.contentContainerStyle
+          ]
+        }
+      )
+    ), resolvedHandleWidth > 0 && /* @__PURE__ */ React2__default.default.createElement(
+      reactNative.Pressable,
+      {
+        onPress: () => {
+          onPress == null ? void 0 : onPress();
+          toggleExpanded();
+        },
+        style: [
+          styles.handle,
+          { width: resolvedHandleWidth },
+          resolvedPosition === "right" ? styles.handleRight : styles.handleLeft
+        ],
+        hitSlop: 10
+      }
+    ))
+  );
+  const focusedItemDetailContent = React2.useMemo(() => {
+    if (!renderFocusedItemDetail || !focusedItemInfo) return null;
+    return renderFocusedItemDetail({
+      item: focusedItemInfo.item,
+      index: focusedItemInfo.index,
+      expanded: effectiveExpanded,
+      setExpanded
+    });
+  }, [renderFocusedItemDetail, focusedItemInfo, effectiveExpanded, setExpanded]);
+  return /* @__PURE__ */ React2__default.default.createElement(React2__default.default.Fragment, null, backdropComponent && /* @__PURE__ */ React2__default.default.createElement(
+    Animated__default.default.View,
+    {
+      style: [
+        styles.backdrop,
+        {
+          width: screenWidth,
+          height: screenHeight
+        },
+        animatedBackdropStyle
+      ],
+      pointerEvents: effectiveExpanded ? "auto" : "none",
+      ...panResponder.panHandlers
+    },
+    backdropComponent
+  ), focusedItemDetailContent && /* @__PURE__ */ React2__default.default.createElement(
+    Animated__default.default.View,
+    {
+      style: [
+        styles.focusedItemDetail,
+        {
+          ...resolvedPosition === "right" ? { right: resolvedWidth + focusedItemDetailGap } : { left: resolvedWidth + focusedItemDetailGap },
+          top: topPosition,
+          height: resolvedHeight
+        },
+        animatedBackdropStyle
+      ],
+      pointerEvents: effectiveExpanded ? "auto" : "none"
+    },
+    focusedItemDetailContent
+  ), islandContent);
+}
+var styles = reactNative.StyleSheet.create({
+  backdrop: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    zIndex: 9998
+  },
+  container: {
+    position: "absolute",
+    zIndex: 9999
+  },
+  handle: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    backgroundColor: "transparent"
+  },
+  handleRight: {
+    right: 0
+  },
+  handleLeft: {
+    left: 0
+  },
+  focusedItemDetail: {
+    position: "absolute",
+    zIndex: 9999,
+    justifyContent: "center"
+  }
+});
+function useSideIsland() {
+  const ctx = React2.useContext(SideIslandContext);
+  if (!ctx) {
+    throw new Error("useSideIsland must be used within a SideIslandProvider");
+  }
+  const open = React2.useCallback(() => ctx.setExpanded(true), [ctx]);
+  const close = React2.useCallback(() => ctx.setExpanded(false), [ctx]);
+  const toggle = React2.useCallback(() => ctx.setExpanded(!ctx.expanded), [ctx]);
+  return React2.useMemo(
+    () => ({
+      expanded: ctx.expanded,
+      setExpanded: ctx.setExpanded,
+      open,
+      close,
+      toggle,
+      config: ctx.config
+    }),
+    [close, ctx.config, ctx.expanded, ctx.setExpanded, open, toggle]
+  );
+}
+
+exports.SideIsland = SideIsland;
+exports.SideIslandProvider = SideIslandProvider;
+exports.useSideIsland = useSideIsland;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map