@bugsession/react-native 0.1.0-beta.2 → 0.1.0-beta.3

package/README.md

@@ -4,7 +4,7 @@ Opt-in screen recording, microphone narration and bounded runtime telemetry for
 
 ## Compatibility
 
-The SDK supports React 18.3.1–19.x and React Native 0.76–0.88. Expo SDK 54–58 are supported; SDK 52–53 are best effort. CI builds Android against SDK 52, 53, 54, 57 and 58. Each Expo SDK selects its matching React and React Native versions; do not mix versions manually. iOS and Android require a native build and `@bugsession/capture-native`; Expo Go cannot capture screen video. Android uses MediaProjection and asks for screen-capture consent every session. The hosted recorder admits one session at a time.
+The SDK supports React 18.3.1–19.x and React Native 0.76–0.88. Expo SDK 54–58 are supported; SDK 52–53 are best effort. CI builds Android against SDK 52–58 and iOS simulators against SDK 52 and 54–58. Each Expo SDK selects its matching React and React Native versions; do not mix versions manually. iOS and Android require a native build and `@bugsession/capture-native`; Expo Go cannot capture screen video. Android uses MediaProjection and asks for screen-capture consent every session. The hosted recorder admits one session at a time.
 
 ## Install
 
@@ -56,7 +56,7 @@ Configure once while idle. Wire an automatic stop timer into your recording UI,
 
 React Navigation integration: call the function returned by `BugSession.navigationListener(navigationRef)` from both `NavigationContainer.onReady` and `onStateChange`. Expo Router apps can call `trackNavigation` when the committed pathname changes. Use `BugSession.Touchable` to instrument a Pressable, or `trackAction` directly. Send caught errors through `BugSession.captureError(error)`.
 
-`<BugSession.Trigger />` renders a floating logo button that starts and stops sessions. Its default position is `bottom-right`; configure `position` as `bottom-left`, `top-right`, or `top-left`, and adjust `offset` in points. Render it as an overlay above the app navigator. Pass `onError` to surface permission, recorder, and upload failures. Supply `children` to replace the default mark.
+`<BugSession.Trigger />` renders a floating logo button that starts and stops sessions. It is draggable by default, stays within screen bounds, and remembers its moved position across screen changes and trigger remounts while the app remains open. Render it once above the app navigator so it stays visible during navigation. Configure its initial corner with `position` (`bottom-right` by default; also `bottom-left`, `top-right`, or `top-left`) and adjust `offset` in points. Set `draggable={false}` to lock it. Pass `onError` to surface permission, recorder, and upload failures. Supply `children` to replace the default mark.
 
 Android uses `AndroidCapture` from `@bugsession/capture-native` plus an `audio` adapter implementing `prepare`, `start`, `stop` (returns a local URI), and `upload`. `prepare` must request microphone permission. `expo-audio` can provide this adapter. Android shows a system screen-capture prompt each session and a persistent capture notification; keep the app foregrounded through upload.
 

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export type BugSessionOptions = {
 export type BugSessionTriggerProps = {
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
     offset?: number;
+    draggable?: boolean;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     children?: React.ReactNode;
@@ -47,5 +48,5 @@ export declare const BugSession: {
         name: string;
         screen?: string;
     }): React.JSX.Element;
-    Trigger({ position, offset, style, accessibilityLabel, children, onError }: BugSessionTriggerProps): React.JSX.Element;
+    Trigger({ position, offset, draggable, style, accessibilityLabel, children, onError }: BugSessionTriggerProps): React.JSX.Element;
 };

package/dist/index.js

@@ -22,6 +22,14 @@ let state = 'idle';
 let restore = null;
 let currentScreen = 'Home';
 let rawFetch;
+let triggerPosition = null;
+const triggerSize = 58;
+function clampTriggerPosition(point, width, height) {
+    return {
+        left: Math.max(0, Math.min(point.left, Math.max(0, width - triggerSize))),
+        top: Math.max(0, Math.min(point.top, Math.max(0, height - triggerSize))),
+    };
+}
 function authHeaders() {
     return options.recorderToken ? { Authorization: `Bearer ${options.recorderToken}` } : {};
 }
@@ -219,11 +227,53 @@ exports.BugSession = {
     Touchable({ name, screen, onPress, ...props }) {
         return (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...props, onPress: e => { exports.BugSession.trackAction({ name, screen }); onPress?.(e); } });
     },
-    Trigger({ position = 'bottom-right', offset = 24, style, accessibilityLabel, children, onError }) {
+    Trigger({ position = 'bottom-right', offset = 24, draggable = true, style, accessibilityLabel, children, onError }) {
+        const { width, height } = (0, react_native_1.useWindowDimensions)();
+        const [point, setPoint] = react_1.default.useState(() => triggerPosition
+            ? clampTriggerPosition(triggerPosition, width, height)
+            : clampTriggerPosition({
+                left: position.includes('right') ? width - triggerSize - offset : offset,
+                top: position.includes('bottom') ? height - triggerSize - offset : offset,
+            }, width, height));
+        const pointRef = react_1.default.useRef(point);
+        pointRef.current = point;
+        const drag = react_1.default.useRef(null);
+        if (!drag.current)
+            drag.current = new react_native_1.Animated.ValueXY();
+        const dragStart = react_1.default.useRef(point);
+        react_1.default.useEffect(() => {
+            const next = clampTriggerPosition(pointRef.current, width, height);
+            pointRef.current = next;
+            setPoint(next);
+            if (triggerPosition)
+                triggerPosition = next;
+            drag.current?.setValue({ x: 0, y: 0 });
+        }, [width, height]);
+        const responder = react_1.default.useMemo(() => react_native_1.PanResponder.create({
+            onStartShouldSetPanResponder: () => false,
+            onMoveShouldSetPanResponder: (_, gesture) => draggable && Math.hypot(gesture.dx, gesture.dy) > 7,
+            onPanResponderGrant: () => { dragStart.current = pointRef.current; },
+            onPanResponderMove: (_, gesture) => {
+                const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
+                drag.current?.setValue({ x: next.left - dragStart.current.left, y: next.top - dragStart.current.top });
+            },
+            onPanResponderRelease: (_, gesture) => {
+                const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
+                triggerPosition = next;
+                pointRef.current = next;
+                setPoint(next);
+                drag.current?.setValue({ x: 0, y: 0 });
+            },
+            onPanResponderTerminate: (_, gesture) => {
+                const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
+                triggerPosition = next;
+                pointRef.current = next;
+                setPoint(next);
+                drag.current?.setValue({ x: 0, y: 0 });
+            },
+        }), [draggable, width, height]);
         const [busy, setBusy] = react_1.default.useState(false);
         const recording = state === 'recording';
-        const edge = position.includes('right') ? { right: offset } : { left: offset };
-        const vertical = position.includes('bottom') ? { bottom: offset } : { top: offset };
         const toggle = async () => {
             if (busy)
                 return;
@@ -241,11 +291,12 @@ exports.BugSession = {
                 setBusy(false);
             }
         };
-        return (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: [styles.triggerLayer, edge, vertical], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel ?? (recording ? 'Stop BugSession recording' : 'Start BugSession recording'), accessibilityState: { busy, selected: recording }, disabled: busy, onPress: () => { void toggle(); }, style: [styles.trigger, recording && styles.triggerRecording, style], children: children ?? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.triggerMark, children: "b" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.triggerDot, recording && styles.triggerDotRecording] })] }) }) });
+        return (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: styles.triggerLayer, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { ...(draggable ? responder.panHandlers : {}), style: [styles.triggerPosition, { left: point.left, top: point.top, transform: drag.current?.getTranslateTransform() }], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel ?? (recording ? 'Stop BugSession recording' : 'Start BugSession recording'), accessibilityHint: draggable ? 'Drag to move the BugSession button' : undefined, accessibilityState: { busy, selected: recording }, disabled: busy, onPress: () => { void toggle(); }, style: [styles.trigger, recording && styles.triggerRecording, style], children: children ?? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.triggerMark, children: "b" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.triggerDot, recording && styles.triggerDotRecording] })] }) }) }) });
     },
 };
 const styles = react_native_1.StyleSheet.create({
-    triggerLayer: { position: 'absolute', zIndex: 9999 },
+    triggerLayer: { ...react_native_1.StyleSheet.absoluteFill, zIndex: 9999 },
+    triggerPosition: { position: 'absolute' },
     trigger: { width: 58, height: 58, borderRadius: 29, backgroundColor: '#173B34', alignItems: 'center', justifyContent: 'center', elevation: 8, shadowColor: '#000', shadowOpacity: 0.24, shadowRadius: 8, shadowOffset: { width: 0, height: 4 } },
     triggerRecording: { backgroundColor: '#B9382F' },
     triggerMark: { color: '#F4F4EC', fontSize: 31, fontWeight: '800', lineHeight: 38 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bugsession/react-native",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.3",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Pressable, StyleSheet, Text, View, type PressableProps, type StyleProp, type ViewStyle, Platform } from 'react-native';
+import { Animated, PanResponder, Pressable, StyleSheet, Text, View, useWindowDimensions, type PressableProps, type StyleProp, type ViewStyle, Platform } from 'react-native';
 import { Collector, instrumentFetch, safeText, safeUrl, SessionClock } from './core';
 import { alignNativeRecording, type NativeCaptureAdapter } from './capture';
 export type { NativeCaptureAdapter } from './capture';
@@ -15,6 +15,7 @@ export type BugSessionOptions = { recorderUrl: string; recorderToken?: string; a
 export type BugSessionTriggerProps = {
   position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
   offset?: number;
+  draggable?: boolean;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   children?: React.ReactNode;
@@ -29,6 +30,14 @@ let state: 'idle' | 'starting' | 'recording' | 'stopping' = 'idle';
 let restore: (() => void) | null = null;
 let currentScreen = 'Home';
 let rawFetch: typeof fetch;
+let triggerPosition: { left: number; top: number } | null = null;
+const triggerSize = 58;
+function clampTriggerPosition(point: { left: number; top: number }, width: number, height: number) {
+  return {
+    left: Math.max(0, Math.min(point.left, Math.max(0, width - triggerSize))),
+    top: Math.max(0, Math.min(point.top, Math.max(0, height - triggerSize))),
+  };
+}
 function authHeaders(): Record<string, string> {
   return options.recorderToken ? { Authorization: `Bearer ${options.recorderToken}` } : {};
 }
@@ -186,11 +195,51 @@ export const BugSession = {
   Touchable({ name, screen, onPress, ...props }: PressableProps & { name: string; screen?: string }) {
     return <Pressable {...props} onPress={e => { BugSession.trackAction({ name, screen }); onPress?.(e); }} />;
   },
-  Trigger({ position = 'bottom-right', offset = 24, style, accessibilityLabel, children, onError }: BugSessionTriggerProps) {
+  Trigger({ position = 'bottom-right', offset = 24, draggable = true, style, accessibilityLabel, children, onError }: BugSessionTriggerProps) {
+    const { width, height } = useWindowDimensions();
+    const [point, setPoint] = React.useState(() => triggerPosition
+      ? clampTriggerPosition(triggerPosition, width, height)
+      : clampTriggerPosition({
+        left: position.includes('right') ? width - triggerSize - offset : offset,
+        top: position.includes('bottom') ? height - triggerSize - offset : offset,
+      }, width, height));
+    const pointRef = React.useRef(point);
+    pointRef.current = point;
+    const drag = React.useRef<Animated.ValueXY | null>(null);
+    if (!drag.current) drag.current = new Animated.ValueXY();
+    const dragStart = React.useRef(point);
+    React.useEffect(() => {
+      const next = clampTriggerPosition(pointRef.current, width, height);
+      pointRef.current = next;
+      setPoint(next);
+      if (triggerPosition) triggerPosition = next;
+      drag.current?.setValue({ x: 0, y: 0 });
+    }, [width, height]);
+    const responder = React.useMemo(() => PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (_, gesture) => draggable && Math.hypot(gesture.dx, gesture.dy) > 7,
+      onPanResponderGrant: () => { dragStart.current = pointRef.current; },
+      onPanResponderMove: (_, gesture) => {
+        const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
+        drag.current?.setValue({ x: next.left - dragStart.current.left, y: next.top - dragStart.current.top });
+      },
+      onPanResponderRelease: (_, gesture) => {
+        const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
+        triggerPosition = next;
+        pointRef.current = next;
+        setPoint(next);
+        drag.current?.setValue({ x: 0, y: 0 });
+      },
+      onPanResponderTerminate: (_, gesture) => {
+        const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
+        triggerPosition = next;
+        pointRef.current = next;
+        setPoint(next);
+        drag.current?.setValue({ x: 0, y: 0 });
+      },
+    }), [draggable, width, height]);
     const [busy, setBusy] = React.useState(false);
     const recording = state === 'recording';
-    const edge = position.includes('right') ? { right: offset } : { left: offset };
-    const vertical = position.includes('bottom') ? { bottom: offset } : { top: offset };
     const toggle = async () => {
       if (busy) return;
       setBusy(true);
@@ -200,23 +249,27 @@ export const BugSession = {
       } catch (error) { onError?.(error); }
       finally { setBusy(false); }
     };
-    return <View pointerEvents="box-none" style={[styles.triggerLayer, edge, vertical]}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel ?? (recording ? 'Stop BugSession recording' : 'Start BugSession recording')}
-        accessibilityState={{ busy, selected: recording }}
-        disabled={busy}
-        onPress={() => { void toggle(); }}
-        style={[styles.trigger, recording && styles.triggerRecording, style]}
-      >
-        {children ?? <><Text style={styles.triggerMark}>b</Text><View style={[styles.triggerDot, recording && styles.triggerDotRecording]} /></>}
-      </Pressable>
+    return <View pointerEvents="box-none" style={styles.triggerLayer}>
+      <Animated.View {...(draggable ? responder.panHandlers : {})} style={[styles.triggerPosition, { left: point.left, top: point.top, transform: drag.current?.getTranslateTransform() }]}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel ?? (recording ? 'Stop BugSession recording' : 'Start BugSession recording')}
+          accessibilityHint={draggable ? 'Drag to move the BugSession button' : undefined}
+          accessibilityState={{ busy, selected: recording }}
+          disabled={busy}
+          onPress={() => { void toggle(); }}
+          style={[styles.trigger, recording && styles.triggerRecording, style]}
+        >
+          {children ?? <><Text style={styles.triggerMark}>b</Text><View style={[styles.triggerDot, recording && styles.triggerDotRecording]} /></>}
+        </Pressable>
+      </Animated.View>
     </View>;
   },
 };
 
 const styles = StyleSheet.create({
-  triggerLayer: { position: 'absolute', zIndex: 9999 },
+  triggerLayer: { ...StyleSheet.absoluteFill, zIndex: 9999 },
+  triggerPosition: { position: 'absolute' },
   trigger: { width: 58, height: 58, borderRadius: 29, backgroundColor: '#173B34', alignItems: 'center', justifyContent: 'center', elevation: 8, shadowColor: '#000', shadowOpacity: 0.24, shadowRadius: 8, shadowOffset: { width: 0, height: 4 } },
   triggerRecording: { backgroundColor: '#B9382F' },
   triggerMark: { color: '#F4F4EC', fontSize: 31, fontWeight: '800', lineHeight: 38 },