react-native-iinstall 0.2.10 → 0.2.12

package/lib/IInstallWrapper.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface IInstallWrapperProps {
+    apiKey: string;
+    apiEndpoint?: string;
+    children?: React.ReactNode;
+    enabled?: boolean;
+    showDebugButton?: boolean;
+    showFloatingButtonOnEmulator?: boolean;
+    floatingButtonLabel?: string;
+}
+export declare const IInstallWrapper: React.FC<IInstallWrapperProps>;
+export default IInstallWrapper;

package/lib/IInstallWrapper.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IInstallWrapper = void 0;
+const react_1 = __importDefault(require("react"));
+const index_1 = require("./index");
+// Backward-compatible wrapper. The core IInstall component now handles:
+// - shake gesture on real devices
+// - floating manual trigger button on simulator/emulator
+const IInstallWrapper = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enabled = true, showDebugButton: _showDebugButton = false, showFloatingButtonOnEmulator = true, floatingButtonLabel = 'Report Issue', }) => {
+    return (<index_1.IInstall apiKey={apiKey} apiEndpoint={apiEndpoint} enabled={enabled} showFloatingButtonOnEmulator={showFloatingButtonOnEmulator} floatingButtonLabel={floatingButtonLabel}>
+      {children}
+    </index_1.IInstall>);
+};
+exports.IInstallWrapper = IInstallWrapper;
+exports.default = exports.IInstallWrapper;

package/lib/index.d.ts

@@ -4,6 +4,9 @@ interface IInstallProps {
     apiEndpoint?: string;
     children?: React.ReactNode;
     enabled?: boolean;
+    showFloatingButtonOnEmulator?: boolean;
+    floatingButtonLabel?: string;
 }
 export declare const IInstall: React.FC<IInstallProps>;
 export default IInstall;
+export { IInstallWrapper } from './IInstallWrapper';

package/lib/index.js

@@ -36,18 +36,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IInstall = void 0;
+exports.IInstallWrapper = exports.IInstall = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_view_shot_1 = require("react-native-view-shot");
 const ShakeDetector_1 = require("./ShakeDetector");
 const FeedbackModal_1 = require("./FeedbackModal");
 const react_native_record_screen_1 = __importDefault(require("react-native-record-screen"));
-const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enabled = true }) => {
+const react_native_device_info_1 = __importDefault(require("react-native-device-info"));
+const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enabled = true, showFloatingButtonOnEmulator = true, floatingButtonLabel = 'Report Issue', }) => {
     const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
     const [screenshotUri, setScreenshotUri] = (0, react_1.useState)(null);
     const [videoUri, setVideoUri] = (0, react_1.useState)(null);
     const [isRecording, setIsRecording] = (0, react_1.useState)(false);
+    const [isEmulator, setIsEmulator] = (0, react_1.useState)(false);
     const shakeDetectorRef = (0, react_1.useRef)(null);
     // Refs for stable access in shake callback
     const isRecordingRef = (0, react_1.useRef)(isRecording);
@@ -56,6 +58,23 @@ const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enab
         isRecordingRef.current = isRecording;
         modalVisibleRef.current = modalVisible;
     }, [isRecording, modalVisible]);
+    (0, react_1.useEffect)(() => {
+        let mounted = true;
+        react_native_device_info_1.default.isEmulator()
+            .then((value) => {
+            if (mounted) {
+                setIsEmulator(value);
+            }
+        })
+            .catch(() => {
+            if (mounted) {
+                setIsEmulator(false);
+            }
+        });
+        return () => {
+            mounted = false;
+        };
+    }, []);
     const handleShake = async () => {
         if (modalVisibleRef.current || isRecordingRef.current)
             return;
@@ -80,7 +99,7 @@ const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enab
         handleShakeCallback.current = handleShake;
     });
     (0, react_1.useEffect)(() => {
-        if (!enabled)
+        if (!enabled || isEmulator)
             return;
         // Use a wrapper to call the current handleShake
         shakeDetectorRef.current = new ShakeDetector_1.ShakeDetector(() => handleShakeCallback.current());
@@ -88,7 +107,15 @@ const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enab
         return () => {
             shakeDetectorRef.current?.stop();
         };
-    }, [enabled]);
+    }, [enabled, isEmulator]);
+    const handleFloatingButtonPress = async () => {
+        await handleShakeCallback.current();
+    };
+    const shouldShowFloatingButton = enabled &&
+        isEmulator &&
+        showFloatingButtonOnEmulator &&
+        !modalVisible &&
+        !isRecording;
     const normalizeVideoUri = (value) => {
         if (react_native_1.Platform.OS === 'ios' && value.startsWith('/')) {
             return `file://${value}`;
@@ -173,6 +200,12 @@ const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enab
       <react_native_1.View style={react_native_1.StyleSheet.absoluteFill}>
         {children}
       </react_native_1.View>
+
+      {shouldShowFloatingButton && (<react_native_1.View style={styles.floatingButtonContainer} pointerEvents="box-none">
+          <react_native_1.TouchableOpacity accessibilityRole="button" accessibilityLabel="Open feedback menu" onPress={handleFloatingButtonPress} style={styles.floatingButton}>
+            <react_native_1.Text style={styles.floatingButtonText}>{floatingButtonLabel}</react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>)}
       
       {isRecording && (<react_native_1.SafeAreaView style={styles.recordingOverlay} pointerEvents="box-none">
               <react_native_1.View style={styles.recordingContainer}>
@@ -193,6 +226,30 @@ const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enab
 };
 exports.IInstall = IInstall;
 const styles = react_native_1.StyleSheet.create({
+    floatingButtonContainer: {
+        position: 'absolute',
+        right: 16,
+        bottom: 28,
+        zIndex: 9998,
+        elevation: 20,
+    },
+    floatingButton: {
+        backgroundColor: '#0f172a',
+        borderColor: '#2563eb',
+        borderWidth: 1,
+        borderRadius: 24,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.35,
+        shadowRadius: 4,
+    },
+    floatingButtonText: {
+        color: '#FFF',
+        fontWeight: '700',
+        fontSize: 13,
+    },
     recordingOverlay: {
         position: 'absolute',
         top: 50,
@@ -232,3 +289,6 @@ const styles = react_native_1.StyleSheet.create({
     }
 });
 exports.default = exports.IInstall;
+// Export the wrapper component for simulator/emulator support
+var IInstallWrapper_1 = require("./IInstallWrapper");
+Object.defineProperty(exports, "IInstallWrapper", { enumerable: true, get: function () { return IInstallWrapper_1.IInstallWrapper; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-iinstall",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "🎯 IInstall React Native SDK - The ultimate beta testing & QA feedback tool. Shake-to-report with voice recordings, screen recordings, and screenshots. Zero-config setup with TypeScript support. Perfect for beta testing, QA teams, and user feedback collection.",
   "author": "TesterFlow Team",
   "license": "MIT",

package/src/IInstallWrapper.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { IInstall } from './index';
+
+interface IInstallWrapperProps {
+  apiKey: string;
+  apiEndpoint?: string;
+  children?: React.ReactNode;
+  enabled?: boolean;
+  // Backward compatibility only. No longer used.
+  showDebugButton?: boolean;
+  showFloatingButtonOnEmulator?: boolean;
+  floatingButtonLabel?: string;
+}
+
+// Backward-compatible wrapper. The core IInstall component now handles:
+// - shake gesture on real devices
+// - floating manual trigger button on simulator/emulator
+export const IInstallWrapper: React.FC<IInstallWrapperProps> = ({
+  apiKey,
+  apiEndpoint = 'https://iinstall.app',
+  children,
+  enabled = true,
+  showDebugButton: _showDebugButton = false,
+  showFloatingButtonOnEmulator = true,
+  floatingButtonLabel = 'Report Issue',
+}) => {
+  return (
+    <IInstall
+      apiKey={apiKey}
+      apiEndpoint={apiEndpoint}
+      enabled={enabled}
+      showFloatingButtonOnEmulator={showFloatingButtonOnEmulator}
+      floatingButtonLabel={floatingButtonLabel}
+    >
+      {children}
+    </IInstall>
+  );
+};
+
+export default IInstallWrapper;

package/src/index.tsx

@@ -4,24 +4,30 @@ import { captureScreen } from 'react-native-view-shot';
 import { ShakeDetector } from './ShakeDetector';
 import { FeedbackModal } from './FeedbackModal';
 import RecordScreen from 'react-native-record-screen';
+import DeviceInfo from 'react-native-device-info';
 
 interface IInstallProps {
   apiKey: string;
   apiEndpoint?: string; // e.g. https://iinstall.app
   children?: React.ReactNode;
   enabled?: boolean;
+  showFloatingButtonOnEmulator?: boolean;
+  floatingButtonLabel?: string;
 }
 
 export const IInstall: React.FC<IInstallProps> = ({ 
   apiKey, 
   apiEndpoint = 'https://iinstall.app', 
   children,
-  enabled = true 
+  enabled = true,
+  showFloatingButtonOnEmulator = true,
+  floatingButtonLabel = 'Report Issue',
 }) => {
   const [modalVisible, setModalVisible] = useState(false);
   const [screenshotUri, setScreenshotUri] = useState<string | null>(null);
   const [videoUri, setVideoUri] = useState<string | null>(null);
   const [isRecording, setIsRecording] = useState(false);
+  const [isEmulator, setIsEmulator] = useState(false);
   
   const shakeDetectorRef = useRef<ShakeDetector | null>(null);
   
@@ -34,6 +40,26 @@ export const IInstall: React.FC<IInstallProps> = ({
     modalVisibleRef.current = modalVisible;
   }, [isRecording, modalVisible]);
 
+  useEffect(() => {
+    let mounted = true;
+
+    DeviceInfo.isEmulator()
+      .then((value) => {
+        if (mounted) {
+          setIsEmulator(value);
+        }
+      })
+      .catch(() => {
+        if (mounted) {
+          setIsEmulator(false);
+        }
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
   const handleShake = async () => {
     if (modalVisibleRef.current || isRecordingRef.current) return;
 
@@ -59,7 +85,7 @@ export const IInstall: React.FC<IInstallProps> = ({
   });
 
   useEffect(() => {
-    if (!enabled) return;
+    if (!enabled || isEmulator) return;
 
     // Use a wrapper to call the current handleShake
     shakeDetectorRef.current = new ShakeDetector(() => handleShakeCallback.current());
@@ -68,7 +94,18 @@ export const IInstall: React.FC<IInstallProps> = ({
     return () => {
       shakeDetectorRef.current?.stop();
     };
-  }, [enabled]);
+  }, [enabled, isEmulator]);
+
+  const handleFloatingButtonPress = async () => {
+    await handleShakeCallback.current();
+  };
+
+  const shouldShowFloatingButton =
+    enabled &&
+    isEmulator &&
+    showFloatingButtonOnEmulator &&
+    !modalVisible &&
+    !isRecording;
 
   const normalizeVideoUri = (value: string) => {
     if (Platform.OS === 'ios' && value.startsWith('/')) {
@@ -181,6 +218,19 @@ export const IInstall: React.FC<IInstallProps> = ({
       <View style={StyleSheet.absoluteFill}>
         {children}
       </View>
+
+      {shouldShowFloatingButton && (
+        <View style={styles.floatingButtonContainer} pointerEvents="box-none">
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityLabel="Open feedback menu"
+            onPress={handleFloatingButtonPress}
+            style={styles.floatingButton}
+          >
+            <Text style={styles.floatingButtonText}>{floatingButtonLabel}</Text>
+          </TouchableOpacity>
+        </View>
+      )}
       
       {isRecording && (
           <SafeAreaView style={styles.recordingOverlay} pointerEvents="box-none">
@@ -212,6 +262,30 @@ export const IInstall: React.FC<IInstallProps> = ({
 };
 
 const styles = StyleSheet.create({
+    floatingButtonContainer: {
+        position: 'absolute',
+        right: 16,
+        bottom: 28,
+        zIndex: 9998,
+        elevation: 20,
+    },
+    floatingButton: {
+        backgroundColor: '#0f172a',
+        borderColor: '#2563eb',
+        borderWidth: 1,
+        borderRadius: 24,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.35,
+        shadowRadius: 4,
+    },
+    floatingButtonText: {
+        color: '#FFF',
+        fontWeight: '700',
+        fontSize: 13,
+    },
     recordingOverlay: {
         position: 'absolute',
         top: 50,
@@ -252,3 +326,6 @@ const styles = StyleSheet.create({
 });
 
 export default IInstall;
+
+// Export the wrapper component for simulator/emulator support
+export { IInstallWrapper } from './IInstallWrapper';