react-native-iinstall 0.1.0

package/README.md

@@ -0,0 +1,65 @@
+# IInstall SDK for React Native
+
+The official React Native SDK for [IInstall](https://iinstall.app). Enable "Shake to Report" in your app to gather instant feedback from testers.
+
+## Installation
+
+1. Install the SDK:
+   ```bash
+   npm install react-native-iinstall
+   ```
+
+   **Note**: This package automatically installs required dependencies (`react-native-sensors`, `react-native-view-shot`, etc.).
+
+2. Link native modules (iOS only, non-Expo):
+   ```bash
+   cd ios && pod install
+   ```
+
+## Usage
+
+Wrap your main app component with the `<IInstall>` provider.
+
+```tsx
+import React from 'react';
+import { IInstall } from 'react-native-iinstall';
+import AppNavigation from './src/AppNavigation';
+
+const App = () => {
+  return (
+    // Get your API Key from the IInstall Dashboard (Project Settings)
+    <IInstall 
+      apiKey="YOUR_PROJECT_API_KEY" 
+      apiEndpoint="https://iinstall.app" // Optional, defaults to production
+      enabled={__DEV__} // Optional: Only enable in dev/test builds
+    >
+      <AppNavigation />
+    </IInstall>
+  );
+};
+
+export default App;
+```
+
+## Features
+
+- **Shake Detection**: Automatically detects when a user shakes the device.
+- **Screenshot Capture**: Captures the current screen state instantly.
+- **Metadata Collection**: Automatically gathers device model, OS version, and app build number.
+- **Feedback Submission**: Uploads reports directly to your TesterFlow dashboard.
+
+## Permissions
+
+### Android
+Add to `AndroidManifest.xml`:
+```xml
+<uses-permission android:name="android.permission.INTERNET" />
+```
+
+### iOS
+Add to `Info.plist` (if required by your specific usage, usually standard permissions suffice for screenshots/network).
+
+## Troubleshooting
+
+- **Shake not working?** Ensure you are testing on a real device or enabling "Shake" in the simulator menu.
+- **Network errors?** Check if `apiEndpoint` is reachable and `apiKey` is correct.

package/lib/FeedbackModal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface FeedbackModalProps {
+    visible: boolean;
+    onClose: () => void;
+    screenshotUri: string | null;
+    apiKey: string;
+    apiEndpoint: string;
+}
+export declare const FeedbackModal: React.FC<FeedbackModalProps>;
+export {};

package/lib/FeedbackModal.js

@@ -0,0 +1,209 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedbackModal = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_device_info_1 = __importDefault(require("react-native-device-info"));
+const FeedbackModal = ({ visible, onClose, screenshotUri, apiKey, apiEndpoint }) => {
+    const [description, setDescription] = (0, react_1.useState)('');
+    const [isSending, setIsSending] = (0, react_1.useState)(false);
+    const sendFeedback = async () => {
+        if (!description.trim()) {
+            react_native_1.Alert.alert('Please describe the issue');
+            return;
+        }
+        setIsSending(true);
+        try {
+            const formData = new FormData();
+            // 1. Screenshot
+            if (screenshotUri) {
+                const filename = screenshotUri.split('/').pop();
+                const match = /\.(\w+)$/.exec(filename || '');
+                const type = match ? `image/${match[1]}` : `image`;
+                formData.append('screenshot', {
+                    uri: react_native_1.Platform.OS === 'ios' ? screenshotUri.replace('file://', '') : screenshotUri,
+                    name: filename || 'screenshot.png',
+                    type,
+                });
+            }
+            // 2. Metadata
+            const metadata = {
+                device: react_native_device_info_1.default.getModel(),
+                systemName: react_native_device_info_1.default.getSystemName(),
+                systemVersion: react_native_device_info_1.default.getSystemVersion(),
+                appVersion: react_native_device_info_1.default.getVersion(),
+                buildNumber: react_native_device_info_1.default.getBuildNumber(),
+                brand: react_native_device_info_1.default.getBrand(),
+                isEmulator: await react_native_device_info_1.default.isEmulator(),
+            };
+            formData.append('metadata', JSON.stringify(metadata));
+            // 3. Other fields
+            formData.append('description', description);
+            formData.append('apiKey', apiKey);
+            formData.append('udid', await react_native_device_info_1.default.getUniqueId()); // Best effort UDID/ID
+            // 4. Send
+            const response = await fetch(`${apiEndpoint}/api/feedback`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+                body: formData,
+            });
+            const result = await response.json();
+            if (response.ok) {
+                react_native_1.Alert.alert('Success', 'Feedback sent successfully!');
+                setDescription('');
+                onClose();
+            }
+            else {
+                throw new Error(result.error || 'Failed to send');
+            }
+        }
+        catch (error) {
+            console.error('TesterFlow Error:', error);
+            react_native_1.Alert.alert('Error', 'Failed to send feedback. Please try again.');
+        }
+        finally {
+            setIsSending(false);
+        }
+    };
+    if (!visible)
+        return null;
+    return (<react_native_1.Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <react_native_1.KeyboardAvoidingView behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.container}>
+        <react_native_1.View style={styles.card}>
+          <react_native_1.View style={styles.header}>
+            <react_native_1.Text style={styles.title}>Report an Issue</react_native_1.Text>
+            <react_native_1.TouchableOpacity onPress={onClose}>
+              <react_native_1.Text style={styles.closeBtn}>✕</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+
+          {screenshotUri && (<react_native_1.View style={styles.previewContainer}>
+              <react_native_1.Image source={{ uri: screenshotUri }} style={styles.preview} resizeMode="contain"/>
+              <react_native_1.Text style={styles.previewLabel}>Screenshot Attached</react_native_1.Text>
+            </react_native_1.View>)}
+
+          <react_native_1.TextInput style={styles.input} placeholder="What happened? Describe the bug..." placeholderTextColor="#999" multiline value={description} onChangeText={setDescription} autoFocus/>
+
+          <react_native_1.TouchableOpacity style={[styles.submitBtn, isSending && styles.disabledBtn]} onPress={sendFeedback} disabled={isSending}>
+            {isSending ? (<react_native_1.ActivityIndicator color="#FFF"/>) : (<react_native_1.Text style={styles.submitText}>Send Feedback</react_native_1.Text>)}
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+      </react_native_1.KeyboardAvoidingView>
+    </react_native_1.Modal>);
+};
+exports.FeedbackModal = FeedbackModal;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        justifyContent: 'flex-end',
+    },
+    card: {
+        backgroundColor: '#FFF',
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        padding: 20,
+        minHeight: 400,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        color: '#000',
+    },
+    closeBtn: {
+        fontSize: 24,
+        color: '#999',
+        padding: 5,
+    },
+    previewContainer: {
+        height: 150,
+        backgroundColor: '#f0f0f0',
+        borderRadius: 10,
+        marginBottom: 15,
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+    },
+    preview: {
+        width: '100%',
+        height: '100%',
+    },
+    previewLabel: {
+        position: 'absolute',
+        bottom: 5,
+        right: 5,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        color: '#FFF',
+        fontSize: 10,
+        padding: 4,
+        borderRadius: 4,
+    },
+    input: {
+        backgroundColor: '#f9f9f9',
+        borderRadius: 10,
+        padding: 15,
+        height: 120,
+        textAlignVertical: 'top',
+        fontSize: 16,
+        color: '#000',
+        marginBottom: 20,
+    },
+    submitBtn: {
+        backgroundColor: '#007AFF',
+        padding: 15,
+        borderRadius: 12,
+        alignItems: 'center',
+    },
+    disabledBtn: {
+        backgroundColor: '#ccc',
+    },
+    submitText: {
+        color: '#FFF',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+});

package/lib/ShakeDetector.d.ts

@@ -0,0 +1,8 @@
+export declare class ShakeDetector {
+    private subscription;
+    private lastShakeTime;
+    private onShake;
+    constructor(onShake: () => void);
+    start(): void;
+    stop(): void;
+}

package/lib/ShakeDetector.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShakeDetector = void 0;
+const react_native_sensors_1 = require("react-native-sensors");
+const operators_1 = require("rxjs/operators");
+const SHAKE_THRESHOLD = 2.5; // g-force
+const MIN_TIME_BETWEEN_SHAKES = 1000; // ms
+class ShakeDetector {
+    subscription = null;
+    lastShakeTime = 0;
+    onShake;
+    constructor(onShake) {
+        this.onShake = onShake;
+        (0, react_native_sensors_1.setUpdateIntervalForType)(react_native_sensors_1.SensorTypes.accelerometer, 100); // 100ms interval
+    }
+    start() {
+        if (this.subscription)
+            return;
+        this.subscription = react_native_sensors_1.accelerometer
+            .pipe((0, operators_1.map)(({ x, y, z }) => Math.sqrt(x * x + y * y + z * z)), (0, operators_1.filter)(g => g > SHAKE_THRESHOLD))
+            .subscribe(() => {
+            const now = Date.now();
+            if (now - this.lastShakeTime > MIN_TIME_BETWEEN_SHAKES) {
+                this.lastShakeTime = now;
+                console.log('TesterFlow: Shake detected!');
+                this.onShake();
+            }
+        });
+    }
+    stop() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = null;
+        }
+    }
+}
+exports.ShakeDetector = ShakeDetector;

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface IInstallProps {
+    apiKey: string;
+    apiEndpoint?: string;
+    children?: React.ReactNode;
+    enabled?: boolean;
+}
+export declare const IInstall: React.FC<IInstallProps>;
+export default IInstall;

package/lib/index.js

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+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 IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enabled = true }) => {
+    const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
+    const [screenshotUri, setScreenshotUri] = (0, react_1.useState)(null);
+    const shakeDetectorRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!enabled)
+            return;
+        shakeDetectorRef.current = new ShakeDetector_1.ShakeDetector(handleShake);
+        shakeDetectorRef.current.start();
+        return () => {
+            shakeDetectorRef.current?.stop();
+        };
+    }, [enabled]);
+    const handleShake = async () => {
+        if (modalVisible)
+            return; // Already open
+        try {
+            // Capture screenshot
+            const uri = await (0, react_native_view_shot_1.captureScreen)({
+                format: 'png',
+                quality: 0.8,
+            });
+            setScreenshotUri(uri);
+            setModalVisible(true);
+        }
+        catch (error) {
+            console.error('IInstall: Failed to capture screenshot', error);
+            // Still show modal without screenshot
+            setScreenshotUri(null);
+            setModalVisible(true);
+        }
+    };
+    return (<react_native_1.View style={react_native_1.StyleSheet.absoluteFill}>
+      {children}
+      <FeedbackModal_1.FeedbackModal visible={modalVisible} onClose={() => setModalVisible(false)} screenshotUri={screenshotUri} apiKey={apiKey} apiEndpoint={apiEndpoint}/>
+    </react_native_1.View>);
+};
+exports.IInstall = IInstall;
+exports.default = exports.IInstall;

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "react-native-iinstall",
+  "version": "0.1.0",
+  "description": "IInstall SDK for React Native - Shake to Report",
+  "author": "TesterFlow Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/iinstall-sdk.git"
+  },
+  "keywords": [
+    "react-native",
+    "feedback",
+    "bug-report",
+    "iinstall",
+    "shake"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  },
+  "dependencies": {
+    "react-native-sensors": "^7.3.0",
+    "react-native-view-shot": "^3.1.2",
+    "react-native-device-info": "^10.0.0",
+    "rxjs": "^7.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.70.0",
+    "react": "18.2.0",
+    "react-native": "0.72.6",
+    "typescript": "^5.0.0"
+  }
+}

package/src/FeedbackModal.tsx

@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  Image,
+  Alert,
+  Platform,
+  KeyboardAvoidingView
+} from 'react-native';
+import DeviceInfo from 'react-native-device-info';
+
+interface FeedbackModalProps {
+  visible: boolean;
+  onClose: () => void;
+  screenshotUri: string | null;
+  apiKey: string;
+  apiEndpoint: string;
+}
+
+export const FeedbackModal: React.FC<FeedbackModalProps> = ({
+  visible,
+  onClose,
+  screenshotUri,
+  apiKey,
+  apiEndpoint
+}) => {
+  const [description, setDescription] = useState('');
+  const [isSending, setIsSending] = useState(false);
+
+  const sendFeedback = async () => {
+    if (!description.trim()) {
+      Alert.alert('Please describe the issue');
+      return;
+    }
+
+    setIsSending(true);
+
+    try {
+      const formData = new FormData();
+      
+      // 1. Screenshot
+      if (screenshotUri) {
+        const filename = screenshotUri.split('/').pop();
+        const match = /\.(\w+)$/.exec(filename || '');
+        const type = match ? `image/${match[1]}` : `image`;
+        
+        formData.append('screenshot', {
+          uri: Platform.OS === 'ios' ? screenshotUri.replace('file://', '') : screenshotUri,
+          name: filename || 'screenshot.png',
+          type,
+        } as any);
+      }
+
+      // 2. Metadata
+      const metadata = {
+        device: DeviceInfo.getModel(),
+        systemName: DeviceInfo.getSystemName(),
+        systemVersion: DeviceInfo.getSystemVersion(),
+        appVersion: DeviceInfo.getVersion(),
+        buildNumber: DeviceInfo.getBuildNumber(),
+        brand: DeviceInfo.getBrand(),
+        isEmulator: await DeviceInfo.isEmulator(),
+      };
+      formData.append('metadata', JSON.stringify(metadata));
+
+      // 3. Other fields
+      formData.append('description', description);
+      formData.append('apiKey', apiKey);
+      formData.append('udid', await DeviceInfo.getUniqueId()); // Best effort UDID/ID
+      
+      // 4. Send
+      const response = await fetch(`${apiEndpoint}/api/feedback`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        body: formData,
+      });
+
+      const result = await response.json();
+
+      if (response.ok) {
+        Alert.alert('Success', 'Feedback sent successfully!');
+        setDescription('');
+        onClose();
+      } else {
+        throw new Error(result.error || 'Failed to send');
+      }
+
+    } catch (error) {
+      console.error('TesterFlow Error:', error);
+      Alert.alert('Error', 'Failed to send feedback. Please try again.');
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  if (!visible) return null;
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <KeyboardAvoidingView 
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.container}
+      >
+        <View style={styles.card}>
+          <View style={styles.header}>
+            <Text style={styles.title}>Report an Issue</Text>
+            <TouchableOpacity onPress={onClose}>
+              <Text style={styles.closeBtn}>✕</Text>
+            </TouchableOpacity>
+          </View>
+
+          {screenshotUri && (
+            <View style={styles.previewContainer}>
+              <Image source={{ uri: screenshotUri }} style={styles.preview} resizeMode="contain" />
+              <Text style={styles.previewLabel}>Screenshot Attached</Text>
+            </View>
+          )}
+
+          <TextInput
+            style={styles.input}
+            placeholder="What happened? Describe the bug..."
+            placeholderTextColor="#999"
+            multiline
+            value={description}
+            onChangeText={setDescription}
+            autoFocus
+          />
+
+          <TouchableOpacity 
+            style={[styles.submitBtn, isSending && styles.disabledBtn]} 
+            onPress={sendFeedback}
+            disabled={isSending}
+          >
+            {isSending ? (
+              <ActivityIndicator color="#FFF" />
+            ) : (
+              <Text style={styles.submitText}>Send Feedback</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'flex-end',
+  },
+  card: {
+    backgroundColor: '#FFF',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    padding: 20,
+    minHeight: 400,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#000',
+  },
+  closeBtn: {
+    fontSize: 24,
+    color: '#999',
+    padding: 5,
+  },
+  previewContainer: {
+    height: 150,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 10,
+    marginBottom: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  preview: {
+    width: '100%',
+    height: '100%',
+  },
+  previewLabel: {
+    position: 'absolute',
+    bottom: 5,
+    right: 5,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    color: '#FFF',
+    fontSize: 10,
+    padding: 4,
+    borderRadius: 4,
+  },
+  input: {
+    backgroundColor: '#f9f9f9',
+    borderRadius: 10,
+    padding: 15,
+    height: 120,
+    textAlignVertical: 'top',
+    fontSize: 16,
+    color: '#000',
+    marginBottom: 20,
+  },
+  submitBtn: {
+    backgroundColor: '#007AFF',
+    padding: 15,
+    borderRadius: 12,
+    alignItems: 'center',
+  },
+  disabledBtn: {
+    backgroundColor: '#ccc',
+  },
+  submitText: {
+    color: '#FFF',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});

package/src/ShakeDetector.ts

@@ -0,0 +1,41 @@
+import { accelerometer, setUpdateIntervalForType, SensorTypes } from 'react-native-sensors';
+import { map, filter } from 'rxjs/operators';
+
+const SHAKE_THRESHOLD = 2.5; // g-force
+const MIN_TIME_BETWEEN_SHAKES = 1000; // ms
+
+export class ShakeDetector {
+  private subscription: any = null;
+  private lastShakeTime = 0;
+  private onShake: () => void;
+
+  constructor(onShake: () => void) {
+    this.onShake = onShake;
+    setUpdateIntervalForType(SensorTypes.accelerometer, 100); // 100ms interval
+  }
+
+  start() {
+    if (this.subscription) return;
+
+    this.subscription = accelerometer
+      .pipe(
+        map(({ x, y, z }) => Math.sqrt(x * x + y * y + z * z)),
+        filter(g => g > SHAKE_THRESHOLD)
+      )
+      .subscribe(() => {
+        const now = Date.now();
+        if (now - this.lastShakeTime > MIN_TIME_BETWEEN_SHAKES) {
+          this.lastShakeTime = now;
+          console.log('TesterFlow: Shake detected!');
+          this.onShake();
+        }
+      });
+  }
+
+  stop() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+      this.subscription = null;
+    }
+  }
+}

package/src/index.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { captureScreen } from 'react-native-view-shot';
+import { ShakeDetector } from './ShakeDetector';
+import { FeedbackModal } from './FeedbackModal';
+
+interface IInstallProps {
+  apiKey: string;
+  apiEndpoint?: string; // e.g. https://iinstall.app
+  children?: React.ReactNode;
+  enabled?: boolean;
+}
+
+export const IInstall: React.FC<IInstallProps> = ({ 
+  apiKey, 
+  apiEndpoint = 'https://iinstall.app', 
+  children,
+  enabled = true 
+}) => {
+  const [modalVisible, setModalVisible] = useState(false);
+  const [screenshotUri, setScreenshotUri] = useState<string | null>(null);
+  const shakeDetectorRef = useRef<ShakeDetector | null>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    shakeDetectorRef.current = new ShakeDetector(handleShake);
+    shakeDetectorRef.current.start();
+
+    return () => {
+      shakeDetectorRef.current?.stop();
+    };
+  }, [enabled]);
+
+  const handleShake = async () => {
+    if (modalVisible) return; // Already open
+
+    try {
+      // Capture screenshot
+      const uri = await captureScreen({
+        format: 'png',
+        quality: 0.8,
+      });
+      setScreenshotUri(uri);
+      setModalVisible(true);
+    } catch (error) {
+      console.error('IInstall: Failed to capture screenshot', error);
+      // Still show modal without screenshot
+      setScreenshotUri(null);
+      setModalVisible(true);
+    }
+  };
+
+  return (
+    <View style={StyleSheet.absoluteFill}>
+      {children}
+      <FeedbackModal
+        visible={modalVisible}
+        onClose={() => setModalVisible(false)}
+        screenshotUri={screenshotUri}
+        apiKey={apiKey}
+        apiEndpoint={apiEndpoint}
+      />
+    </View>
+  );
+};
+
+export default IInstall;