@retor/react-native 0.3.1 → 0.3.4

package/README.md

@@ -6,14 +6,16 @@ Embed Retor 3D experiences in a React Native / Expo app — with composable bott
 
 ```bash
 # Expo
-npx expo install react-native-webview react-native-gesture-handler react-native-reanimated react-native-svg
+npx expo install react-native-webview react-native-gesture-handler react-native-reanimated react-native-svg expo-blur
 npm install @gorhom/bottom-sheet lucide-react-native @retor/react-native
 
 # bare React Native
-npm install react-native-webview react-native-gesture-handler react-native-reanimated react-native-svg @gorhom/bottom-sheet lucide-react-native @retor/react-native
+npm install react-native-webview react-native-gesture-handler react-native-reanimated react-native-svg @gorhom/bottom-sheet lucide-react-native expo-blur @retor/react-native
 cd ios && pod install
 ```
 
+> `expo-blur` is optional — it's used for the default blurred sheet background. Skip it if you don't want blur and pass a custom `backgroundComponent` to any sheet.
+
 You also need to wrap your app root in a `GestureHandlerRootView` (per `@gorhom/bottom-sheet` requirements):
 
 ```tsx

package/dist/index.d.mts

@@ -185,7 +185,7 @@ interface HudProps {
 declare function Hud({ children }: HudProps): React.JSX.Element;
 
 interface ProjectSheetProps {
-    /** Snap points. Defaults to ["35%", "85%"]. */
+    /** Snap points. Defaults to ["35%", "75%"]. */
     snapPoints?: (string | number)[];
     /** Override the default header (project name + description + arrow button). */
     renderHeader?: (project: {
@@ -207,7 +207,7 @@ interface LinesCarouselProps {
 declare function LinesCarousel({ children, gap, paddingHorizontal }: LinesCarouselProps): React.JSX.Element | null;
 
 interface LineDetailSheetProps {
-    /** Snap points. Defaults to ["35%", "85%"]. */
+    /** Snap points. Defaults to ["35%", "75%"]. */
     snapPoints?: (string | number)[];
     /** Override the header. */
     renderHeader?: (line: RetorLine) => React.ReactNode;
@@ -220,6 +220,12 @@ interface LineTagListProps {
     /** Optional header rendered above the list (used internally for the default header). */
     listHeader?: React.ReactNode;
 }
+/**
+ * Renders the tags of the active line as a vertical list inside a
+ * `BottomSheetScrollView`. Tracks each item's Y position via `onLayout`
+ * and scrolls the closest tag to the top of the visible area as the
+ * camera scrolls.
+ */
 declare function LineTagList({ children, listHeader }: LineTagListProps): React.JSX.Element | null;
 
 interface AddNoteSheetProps {

package/dist/index.d.ts

@@ -185,7 +185,7 @@ interface HudProps {
 declare function Hud({ children }: HudProps): React.JSX.Element;
 
 interface ProjectSheetProps {
-    /** Snap points. Defaults to ["35%", "85%"]. */
+    /** Snap points. Defaults to ["35%", "75%"]. */
     snapPoints?: (string | number)[];
     /** Override the default header (project name + description + arrow button). */
     renderHeader?: (project: {
@@ -207,7 +207,7 @@ interface LinesCarouselProps {
 declare function LinesCarousel({ children, gap, paddingHorizontal }: LinesCarouselProps): React.JSX.Element | null;
 
 interface LineDetailSheetProps {
-    /** Snap points. Defaults to ["35%", "85%"]. */
+    /** Snap points. Defaults to ["35%", "75%"]. */
     snapPoints?: (string | number)[];
     /** Override the header. */
     renderHeader?: (line: RetorLine) => React.ReactNode;
@@ -220,6 +220,12 @@ interface LineTagListProps {
     /** Optional header rendered above the list (used internally for the default header). */
     listHeader?: React.ReactNode;
 }
+/**
+ * Renders the tags of the active line as a vertical list inside a
+ * `BottomSheetScrollView`. Tracks each item's Y position via `onLayout`
+ * and scrolls the closest tag to the top of the visible area as the
+ * camera scrolls.
+ */
 declare function LineTagList({ children, listHeader }: LineTagListProps): React.JSX.Element | null;
 
 interface AddNoteSheetProps {

package/dist/index.js

@@ -217,14 +217,10 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
       openLine: (lineId) => send("open-line", { lineId }),
       exitLine: () => send("exit-line"),
       scrollToTag: (tagId) => send("scroll-to-tag", { tagId }),
-      toggleAutoplay: () => {
-        setIsPlaying((v) => !v);
-        send("toggle-autoplay");
-      },
-      setAutoplay: (playing) => {
-        setIsPlaying(playing);
-        send("set-autoplay", { playing });
-      }
+      // Bridge owns autoplay state — it'll emit `autoplay-state` back, which
+      // we use to update isPlaying. No optimistic local update.
+      toggleAutoplay: () => send("toggle-autoplay"),
+      setAutoplay: (playing) => send("set-autoplay", { playing })
     }),
     [send]
   );
@@ -236,30 +232,47 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
     if (!notes || !readyRef.current) return;
     send("set-notes", { notes });
   }, [notes, send]);
+  const closestTagIdRef = (0, import_react2.useRef)(closestTagId);
+  const addNoteTagIdRef = (0, import_react2.useRef)(addNoteTagId);
+  const activeLineIdRef = (0, import_react2.useRef)(activeLineId);
+  const linesRef = (0, import_react2.useRef)(lines);
+  const onNoteSubmitRef = (0, import_react2.useRef)(onNoteSubmit);
+  (0, import_react2.useEffect)(() => {
+    closestTagIdRef.current = closestTagId;
+  }, [closestTagId]);
+  (0, import_react2.useEffect)(() => {
+    addNoteTagIdRef.current = addNoteTagId;
+  }, [addNoteTagId]);
+  (0, import_react2.useEffect)(() => {
+    activeLineIdRef.current = activeLineId;
+  }, [activeLineId]);
+  (0, import_react2.useEffect)(() => {
+    linesRef.current = lines;
+  }, [lines]);
+  (0, import_react2.useEffect)(() => {
+    onNoteSubmitRef.current = onNoteSubmit;
+  }, [onNoteSubmit]);
   const openAddNote = (0, import_react2.useCallback)((tagId) => {
-    setAddNoteTagId(tagId ?? closestTagId ?? null);
+    setAddNoteTagId(tagId ?? closestTagIdRef.current ?? null);
     setIsAddNoteOpen(true);
-  }, [closestTagId]);
+  }, []);
   const closeAddNote = (0, import_react2.useCallback)(() => {
     setIsAddNoteOpen(false);
   }, []);
-  const submitNote = (0, import_react2.useCallback)(
-    (text, isPrivate = true) => {
-      const tagId = addNoteTagId;
-      const lineId = activeLineId;
-      const tag = lines.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
-      const payload = {
-        text,
-        isPrivate,
-        tagId,
-        lineId,
-        position: tag?.position ?? null
-      };
-      onNoteSubmit?.(payload);
-      setIsAddNoteOpen(false);
-    },
-    [addNoteTagId, activeLineId, lines, onNoteSubmit]
-  );
+  const submitNote = (0, import_react2.useCallback)((text, isPrivate = true) => {
+    const tagId = addNoteTagIdRef.current;
+    const lineId = activeLineIdRef.current;
+    const tag = linesRef.current.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
+    const payload = {
+      text,
+      isPrivate,
+      tagId,
+      lineId,
+      position: tag?.position ?? null
+    };
+    onNoteSubmitRef.current?.(payload);
+    setIsAddNoteOpen(false);
+  }, []);
   const handleMessage = (0, import_react2.useCallback)(
     (event) => {
       let data = null;
@@ -299,6 +312,11 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
           onLineProgress?.(payload);
           break;
         }
+        case "autoplay-state": {
+          const payload = data.payload;
+          setIsPlaying(!!payload.playing);
+          break;
+        }
         default:
           onMessage?.(data.type, data.payload);
       }
@@ -371,7 +389,7 @@ function BlurBackground({ style }) {
 }
 
 // src/ProjectSheet.tsx
-function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
+function ProjectSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
   const { project, activeLineId, isAddNoteOpen } = useRetorBridge();
   const sheetRef = (0, import_react5.useRef)(null);
   const snapPointsArr = (0, import_react5.useMemo)(() => snapPoints, [snapPoints]);
@@ -379,11 +397,15 @@ function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
   (0, import_react5.useEffect)(() => {
     if (activeLineId || isAddNoteOpen) {
       sheetRef.current?.dismiss();
-    } else {
+      return;
+    }
+    const t = setTimeout(() => {
       sheetRef.current?.present();
+      sheetRef.current?.snapToIndex(snapPointsArr.length - 1);
       setMinimized(false);
-    }
-  }, [activeLineId, isAddNoteOpen]);
+    }, 80);
+    return () => clearTimeout(t);
+  }, [activeLineId, isAddNoteOpen, snapPointsArr.length]);
   const handleSheetChange = (index) => {
     setMinimized(index === 0);
   };
@@ -401,6 +423,7 @@ function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      enableOverDrag: false,
       onChange: handleSheetChange,
       backdropComponent: (props) => /* @__PURE__ */ import_react5.default.createElement(
         import_bottom_sheet2.BottomSheetBackdrop,
@@ -492,19 +515,23 @@ var import_react_native5 = require("react-native");
 var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
 var import_react_native_svg = __toESM(require("react-native-svg"));
 var import_lucide_react_native2 = require("lucide-react-native");
-function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
+function LineDetailSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
   const { activeLine, isAddNoteOpen, controls } = useRetorBridge();
   const sheetRef = (0, import_react6.useRef)(null);
   const snapPointsArr = (0, import_react6.useMemo)(() => snapPoints, [snapPoints]);
   const [minimized, setMinimized] = (0, import_react6.useState)(false);
   (0, import_react6.useEffect)(() => {
-    if (activeLine && !isAddNoteOpen) {
-      sheetRef.current?.present();
-      setMinimized(false);
-    } else {
+    if (!activeLine || isAddNoteOpen) {
       sheetRef.current?.dismiss();
+      return;
     }
-  }, [activeLine, isAddNoteOpen]);
+    const t = setTimeout(() => {
+      sheetRef.current?.present();
+      sheetRef.current?.snapToIndex(snapPointsArr.length - 1);
+      setMinimized(false);
+    }, 80);
+    return () => clearTimeout(t);
+  }, [activeLine, isAddNoteOpen, snapPointsArr.length]);
   const handleSheetChange = (index) => {
     setMinimized(index === 0);
   };
@@ -527,6 +554,7 @@ function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      enableOverDrag: false,
       onChange: handleSheetChange,
       footerComponent: renderFooter,
       backdropComponent: (props) => /* @__PURE__ */ import_react6.default.createElement(
@@ -574,45 +602,37 @@ function AutoplayButton() {
 }
 function LineTagList({ children, listHeader }) {
   const { activeLine, closestTagId } = useRetorBridge();
-  const listRef = (0, import_react6.useRef)(null);
+  const scrollRef = (0, import_react6.useRef)(null);
+  const offsetsRef = (0, import_react6.useRef)(/* @__PURE__ */ new Map());
   const tags = (0, import_react6.useMemo)(
     () => (activeLine?.tags ?? []).filter((t) => t.name && t.name.trim().length > 0),
     [activeLine]
   );
+  (0, import_react6.useEffect)(() => {
+    offsetsRef.current = /* @__PURE__ */ new Map();
+  }, [activeLine?._id]);
   (0, import_react6.useEffect)(() => {
     if (!closestTagId) return;
-    const index = tags.findIndex((t2) => t2._id === closestTagId);
-    if (index < 0) return;
     const t = setTimeout(() => {
-      try {
-        listRef.current?.scrollToIndex({ index, animated: true, viewPosition: 0 });
-      } catch {
+      const y = offsetsRef.current.get(closestTagId);
+      if (y != null) {
+        scrollRef.current?.scrollTo({ y, animated: true });
       }
-    }, 50);
+    }, 60);
     return () => clearTimeout(t);
-  }, [closestTagId, tags]);
+  }, [closestTagId]);
   if (!activeLine) return null;
+  const handleItemLayout = (id, e) => {
+    offsetsRef.current.set(id, e.nativeEvent.layout.y);
+  };
   return /* @__PURE__ */ import_react6.default.createElement(
-    import_bottom_sheet3.BottomSheetFlatList,
+    import_bottom_sheet3.BottomSheetScrollView,
     {
-      ref: listRef,
-      data: tags,
-      keyExtractor: (t) => t._id,
-      ListHeaderComponent: listHeader ? () => /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, listHeader) : void 0,
-      renderItem: ({ item }) => /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, null, children(item, item._id === closestTagId)),
-      contentContainerStyle: styles3.list,
-      removeClippedSubviews: false,
-      onScrollToIndexFailed: (info) => {
-        const offset = info.averageItemLength * info.index;
-        listRef.current?.scrollToOffset({ offset, animated: false });
-        setTimeout(() => {
-          try {
-            listRef.current?.scrollToIndex({ index: info.index, animated: true, viewPosition: 0 });
-          } catch {
-          }
-        }, 100);
-      }
-    }
+      ref: scrollRef,
+      contentContainerStyle: styles3.list
+    },
+    listHeader,
+    tags.map((tag) => /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { key: tag._id, onLayout: (e) => handleItemLayout(tag._id, e) }, children(tag, tag._id === closestTagId)))
   );
 }
 function DefaultLineTagList({ listHeader }) {
@@ -664,10 +684,11 @@ var styles3 = import_react_native5.StyleSheet.create({
     justifyContent: "center",
     position: "relative"
   },
-  list: { paddingHorizontal: 16, paddingBottom: 96, gap: 4 },
+  list: { paddingBottom: 96, gap: 4 },
   tagItem: {
     flexDirection: "row",
     alignItems: "center",
+    marginHorizontal: 16,
     paddingHorizontal: 12,
     paddingVertical: 12,
     borderRadius: 12,
@@ -752,6 +773,7 @@ function AddNoteSheet({
       ref: sheetRef,
       snapPoints: snapPointsArr,
       enablePanDownToClose: true,
+      enableOverDrag: false,
       onDismiss: closeAddNote,
       backdropComponent: (props) => /* @__PURE__ */ import_react7.default.createElement(
         import_bottom_sheet4.BottomSheetBackdrop,

package/dist/index.mjs

@@ -173,14 +173,10 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
       openLine: (lineId) => send("open-line", { lineId }),
       exitLine: () => send("exit-line"),
       scrollToTag: (tagId) => send("scroll-to-tag", { tagId }),
-      toggleAutoplay: () => {
-        setIsPlaying((v) => !v);
-        send("toggle-autoplay");
-      },
-      setAutoplay: (playing) => {
-        setIsPlaying(playing);
-        send("set-autoplay", { playing });
-      }
+      // Bridge owns autoplay state — it'll emit `autoplay-state` back, which
+      // we use to update isPlaying. No optimistic local update.
+      toggleAutoplay: () => send("toggle-autoplay"),
+      setAutoplay: (playing) => send("set-autoplay", { playing })
     }),
     [send]
   );
@@ -192,30 +188,47 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
     if (!notes || !readyRef.current) return;
     send("set-notes", { notes });
   }, [notes, send]);
+  const closestTagIdRef = useRef(closestTagId);
+  const addNoteTagIdRef = useRef(addNoteTagId);
+  const activeLineIdRef = useRef(activeLineId);
+  const linesRef = useRef(lines);
+  const onNoteSubmitRef = useRef(onNoteSubmit);
+  useEffect(() => {
+    closestTagIdRef.current = closestTagId;
+  }, [closestTagId]);
+  useEffect(() => {
+    addNoteTagIdRef.current = addNoteTagId;
+  }, [addNoteTagId]);
+  useEffect(() => {
+    activeLineIdRef.current = activeLineId;
+  }, [activeLineId]);
+  useEffect(() => {
+    linesRef.current = lines;
+  }, [lines]);
+  useEffect(() => {
+    onNoteSubmitRef.current = onNoteSubmit;
+  }, [onNoteSubmit]);
   const openAddNote = useCallback((tagId) => {
-    setAddNoteTagId(tagId ?? closestTagId ?? null);
+    setAddNoteTagId(tagId ?? closestTagIdRef.current ?? null);
     setIsAddNoteOpen(true);
-  }, [closestTagId]);
+  }, []);
   const closeAddNote = useCallback(() => {
     setIsAddNoteOpen(false);
   }, []);
-  const submitNote = useCallback(
-    (text, isPrivate = true) => {
-      const tagId = addNoteTagId;
-      const lineId = activeLineId;
-      const tag = lines.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
-      const payload = {
-        text,
-        isPrivate,
-        tagId,
-        lineId,
-        position: tag?.position ?? null
-      };
-      onNoteSubmit?.(payload);
-      setIsAddNoteOpen(false);
-    },
-    [addNoteTagId, activeLineId, lines, onNoteSubmit]
-  );
+  const submitNote = useCallback((text, isPrivate = true) => {
+    const tagId = addNoteTagIdRef.current;
+    const lineId = activeLineIdRef.current;
+    const tag = linesRef.current.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
+    const payload = {
+      text,
+      isPrivate,
+      tagId,
+      lineId,
+      position: tag?.position ?? null
+    };
+    onNoteSubmitRef.current?.(payload);
+    setIsAddNoteOpen(false);
+  }, []);
   const handleMessage = useCallback(
     (event) => {
       let data = null;
@@ -255,6 +268,11 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
           onLineProgress?.(payload);
           break;
         }
+        case "autoplay-state": {
+          const payload = data.payload;
+          setIsPlaying(!!payload.playing);
+          break;
+        }
         default:
           onMessage?.(data.type, data.payload);
       }
@@ -327,7 +345,7 @@ function BlurBackground({ style }) {
 }
 
 // src/ProjectSheet.tsx
-function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
+function ProjectSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
   const { project, activeLineId, isAddNoteOpen } = useRetorBridge();
   const sheetRef = useRef2(null);
   const snapPointsArr = useMemo3(() => snapPoints, [snapPoints]);
@@ -335,11 +353,15 @@ function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
   useEffect2(() => {
     if (activeLineId || isAddNoteOpen) {
       sheetRef.current?.dismiss();
-    } else {
+      return;
+    }
+    const t = setTimeout(() => {
       sheetRef.current?.present();
+      sheetRef.current?.snapToIndex(snapPointsArr.length - 1);
       setMinimized(false);
-    }
-  }, [activeLineId, isAddNoteOpen]);
+    }, 80);
+    return () => clearTimeout(t);
+  }, [activeLineId, isAddNoteOpen, snapPointsArr.length]);
   const handleSheetChange = (index) => {
     setMinimized(index === 0);
   };
@@ -357,6 +379,7 @@ function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      enableOverDrag: false,
       onChange: handleSheetChange,
       backdropComponent: (props) => /* @__PURE__ */ React5.createElement(
         BottomSheetBackdrop,
@@ -447,25 +470,29 @@ import React6, { useCallback as useCallback2, useEffect as useEffect3, useMemo a
 import { Pressable as Pressable2, StyleSheet as StyleSheet5, Text as Text2, View as View5 } from "react-native";
 import {
   BottomSheetBackdrop as BottomSheetBackdrop2,
-  BottomSheetFlatList,
   BottomSheetFooter,
-  BottomSheetModal as BottomSheetModal2
+  BottomSheetModal as BottomSheetModal2,
+  BottomSheetScrollView
 } from "@gorhom/bottom-sheet";
 import Svg, { Circle } from "react-native-svg";
 import { ArrowDown as ArrowDown2, ArrowUp as ArrowUp2, Pause, Play, Plus } from "lucide-react-native";
-function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
+function LineDetailSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
   const { activeLine, isAddNoteOpen, controls } = useRetorBridge();
   const sheetRef = useRef3(null);
   const snapPointsArr = useMemo4(() => snapPoints, [snapPoints]);
   const [minimized, setMinimized] = useState3(false);
   useEffect3(() => {
-    if (activeLine && !isAddNoteOpen) {
-      sheetRef.current?.present();
-      setMinimized(false);
-    } else {
+    if (!activeLine || isAddNoteOpen) {
       sheetRef.current?.dismiss();
+      return;
     }
-  }, [activeLine, isAddNoteOpen]);
+    const t = setTimeout(() => {
+      sheetRef.current?.present();
+      sheetRef.current?.snapToIndex(snapPointsArr.length - 1);
+      setMinimized(false);
+    }, 80);
+    return () => clearTimeout(t);
+  }, [activeLine, isAddNoteOpen, snapPointsArr.length]);
   const handleSheetChange = (index) => {
     setMinimized(index === 0);
   };
@@ -488,6 +515,7 @@ function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      enableOverDrag: false,
       onChange: handleSheetChange,
       footerComponent: renderFooter,
       backdropComponent: (props) => /* @__PURE__ */ React6.createElement(
@@ -535,45 +563,37 @@ function AutoplayButton() {
 }
 function LineTagList({ children, listHeader }) {
   const { activeLine, closestTagId } = useRetorBridge();
-  const listRef = useRef3(null);
+  const scrollRef = useRef3(null);
+  const offsetsRef = useRef3(/* @__PURE__ */ new Map());
   const tags = useMemo4(
     () => (activeLine?.tags ?? []).filter((t) => t.name && t.name.trim().length > 0),
     [activeLine]
   );
+  useEffect3(() => {
+    offsetsRef.current = /* @__PURE__ */ new Map();
+  }, [activeLine?._id]);
   useEffect3(() => {
     if (!closestTagId) return;
-    const index = tags.findIndex((t2) => t2._id === closestTagId);
-    if (index < 0) return;
     const t = setTimeout(() => {
-      try {
-        listRef.current?.scrollToIndex({ index, animated: true, viewPosition: 0 });
-      } catch {
+      const y = offsetsRef.current.get(closestTagId);
+      if (y != null) {
+        scrollRef.current?.scrollTo({ y, animated: true });
       }
-    }, 50);
+    }, 60);
     return () => clearTimeout(t);
-  }, [closestTagId, tags]);
+  }, [closestTagId]);
   if (!activeLine) return null;
+  const handleItemLayout = (id, e) => {
+    offsetsRef.current.set(id, e.nativeEvent.layout.y);
+  };
   return /* @__PURE__ */ React6.createElement(
-    BottomSheetFlatList,
+    BottomSheetScrollView,
     {
-      ref: listRef,
-      data: tags,
-      keyExtractor: (t) => t._id,
-      ListHeaderComponent: listHeader ? () => /* @__PURE__ */ React6.createElement(React6.Fragment, null, listHeader) : void 0,
-      renderItem: ({ item }) => /* @__PURE__ */ React6.createElement(View5, null, children(item, item._id === closestTagId)),
-      contentContainerStyle: styles3.list,
-      removeClippedSubviews: false,
-      onScrollToIndexFailed: (info) => {
-        const offset = info.averageItemLength * info.index;
-        listRef.current?.scrollToOffset({ offset, animated: false });
-        setTimeout(() => {
-          try {
-            listRef.current?.scrollToIndex({ index: info.index, animated: true, viewPosition: 0 });
-          } catch {
-          }
-        }, 100);
-      }
-    }
+      ref: scrollRef,
+      contentContainerStyle: styles3.list
+    },
+    listHeader,
+    tags.map((tag) => /* @__PURE__ */ React6.createElement(View5, { key: tag._id, onLayout: (e) => handleItemLayout(tag._id, e) }, children(tag, tag._id === closestTagId)))
   );
 }
 function DefaultLineTagList({ listHeader }) {
@@ -625,10 +645,11 @@ var styles3 = StyleSheet5.create({
     justifyContent: "center",
     position: "relative"
   },
-  list: { paddingHorizontal: 16, paddingBottom: 96, gap: 4 },
+  list: { paddingBottom: 96, gap: 4 },
   tagItem: {
     flexDirection: "row",
     alignItems: "center",
+    marginHorizontal: 16,
     paddingHorizontal: 12,
     paddingVertical: 12,
     borderRadius: 12,
@@ -718,6 +739,7 @@ function AddNoteSheet({
       ref: sheetRef,
       snapPoints: snapPointsArr,
       enablePanDownToClose: true,
+      enableOverDrag: false,
       onDismiss: closeAddNote,
       backdropComponent: (props) => /* @__PURE__ */ React7.createElement(
         BottomSheetBackdrop3,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retor/react-native",
-  "version": "0.3.1",
+  "version": "0.3.4",
   "description": "React Native SDK for embedding Retor 3D experiences",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",