@retor/react-native 0.3.1 → 0.3.2

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

@@ -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

@@ -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]
   );
@@ -299,6 +295,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);
       }
@@ -379,11 +380,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);
   };
@@ -498,13 +503,17 @@ function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }
   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);
   };
@@ -574,45 +583,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 }) {

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]
   );
@@ -255,6 +251,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);
       }
@@ -335,11 +336,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);
   };
@@ -447,9 +452,9 @@ 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";
@@ -459,13 +464,17 @@ function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }
   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);
   };
@@ -535,45 +544,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 }) {

package/package.json

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