react-native-iinstall 0.1.0 → 0.2.0

package/README.md

@@ -54,10 +54,20 @@ export default App;
 Add to `AndroidManifest.xml`:
 ```xml
 <uses-permission android:name="android.permission.INTERNET" />
+<!-- Required for Audio Feedback -->
+<uses-permission android:name="android.permission.RECORD_AUDIO" />
+<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 ```
 
 ### iOS
-Add to `Info.plist` (if required by your specific usage, usually standard permissions suffice for screenshots/network).
+Add to `Info.plist`:
+```xml
+<key>NSMicrophoneUsageDescription</key>
+<string>Allow access to microphone for audio feedback.</string>
+<key>NSPhotoLibraryUsageDescription</key>
+<string>Allow access to save screen recordings.</string>
+```
 
 ## Troubleshooting
 

package/lib/FeedbackModal.d.ts

@@ -3,6 +3,8 @@ interface FeedbackModalProps {
     visible: boolean;
     onClose: () => void;
     screenshotUri: string | null;
+    videoUri?: string | null;
+    onStartRecording?: () => void;
     apiKey: string;
     apiEndpoint: string;
 }

package/lib/FeedbackModal.js

@@ -40,12 +40,70 @@ 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 react_native_audio_recorder_player_1 = __importDefault(require("react-native-audio-recorder-player"));
+const FeedbackModal = ({ visible, onClose, screenshotUri, videoUri, onStartRecording, apiKey, apiEndpoint }) => {
     const [description, setDescription] = (0, react_1.useState)('');
     const [isSending, setIsSending] = (0, react_1.useState)(false);
+    // Audio State
+    const [isRecordingAudio, setIsRecordingAudio] = (0, react_1.useState)(false);
+    const [audioUri, setAudioUri] = (0, react_1.useState)(null);
+    const [audioDuration, setAudioDuration] = (0, react_1.useState)('00:00');
+    const audioRecorderPlayer = (0, react_1.useRef)(new react_native_audio_recorder_player_1.default()).current;
+    (0, react_1.useEffect)(() => {
+        return () => {
+            // Cleanup
+            if (isRecordingAudio) {
+                audioRecorderPlayer.stopRecorder();
+            }
+        };
+    }, [isRecordingAudio]);
+    const onStartAudioRecord = async () => {
+        if (react_native_1.Platform.OS === 'android') {
+            try {
+                const grants = await react_native_1.PermissionsAndroid.requestMultiple([
+                    react_native_1.PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
+                    react_native_1.PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
+                    react_native_1.PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
+                ]);
+                // Note: Android 13+ might need different permissions for media, but keeping it simple
+                if (grants['android.permission.RECORD_AUDIO'] !== react_native_1.PermissionsAndroid.RESULTS.GRANTED) {
+                    react_native_1.Alert.alert('Permission needed', 'Audio recording permission is required.');
+                    return;
+                }
+            }
+            catch (err) {
+                console.warn(err);
+                return;
+            }
+        }
+        try {
+            const result = await audioRecorderPlayer.startRecorder();
+            audioRecorderPlayer.addRecordBackListener((e) => {
+                setAudioDuration(audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)));
+                return;
+            });
+            setIsRecordingAudio(true);
+            setAudioUri(null);
+        }
+        catch (error) {
+            console.error('Failed to start recording', error);
+            react_native_1.Alert.alert('Error', 'Could not start audio recording');
+        }
+    };
+    const onStopAudioRecord = async () => {
+        try {
+            const result = await audioRecorderPlayer.stopRecorder();
+            audioRecorderPlayer.removeRecordBackListener();
+            setIsRecordingAudio(false);
+            setAudioUri(result);
+        }
+        catch (error) {
+            console.error('Failed to stop recording', error);
+        }
+    };
     const sendFeedback = async () => {
-        if (!description.trim()) {
-            react_native_1.Alert.alert('Please describe the issue');
+        if (!description.trim() && !audioUri && !videoUri) {
+            react_native_1.Alert.alert('Please provide a description, audio, or video.');
             return;
         }
         setIsSending(true);
@@ -55,14 +113,30 @@ const FeedbackModal = ({ visible, onClose, screenshotUri, apiKey, apiEndpoint })
             if (screenshotUri) {
                 const filename = screenshotUri.split('/').pop();
                 const match = /\.(\w+)$/.exec(filename || '');
-                const type = match ? `image/${match[1]}` : `image`;
+                const type = match ? `image/${match[1]}` : `image/png`;
                 formData.append('screenshot', {
                     uri: react_native_1.Platform.OS === 'ios' ? screenshotUri.replace('file://', '') : screenshotUri,
                     name: filename || 'screenshot.png',
                     type,
                 });
             }
-            // 2. Metadata
+            // 2. Audio
+            if (audioUri) {
+                formData.append('audio', {
+                    uri: react_native_1.Platform.OS === 'ios' ? audioUri.replace('file://', '') : audioUri,
+                    name: 'feedback.m4a',
+                    type: 'audio/m4a',
+                });
+            }
+            // 3. Video
+            if (videoUri) {
+                formData.append('video', {
+                    uri: react_native_1.Platform.OS === 'ios' ? videoUri.replace('file://', '') : videoUri,
+                    name: 'screen_record.mp4',
+                    type: 'video/mp4',
+                });
+            }
+            // 4. Metadata
             const metadata = {
                 device: react_native_device_info_1.default.getModel(),
                 systemName: react_native_device_info_1.default.getSystemName(),
@@ -73,11 +147,11 @@ const FeedbackModal = ({ visible, onClose, screenshotUri, apiKey, apiEndpoint })
                 isEmulator: await react_native_device_info_1.default.isEmulator(),
             };
             formData.append('metadata', JSON.stringify(metadata));
-            // 3. Other fields
+            // 5. 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
+            formData.append('udid', await react_native_device_info_1.default.getUniqueId());
+            // 6. Send
             const response = await fetch(`${apiEndpoint}/api/feedback`, {
                 method: 'POST',
                 headers: {
@@ -89,6 +163,8 @@ const FeedbackModal = ({ visible, onClose, screenshotUri, apiKey, apiEndpoint })
             if (response.ok) {
                 react_native_1.Alert.alert('Success', 'Feedback sent successfully!');
                 setDescription('');
+                setAudioUri(null);
+                setAudioDuration('00:00');
                 onClose();
             }
             else {
@@ -115,12 +191,39 @@ const FeedbackModal = ({ visible, onClose, screenshotUri, apiKey, apiEndpoint })
             </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>)}
+          {/* Media Previews */}
+          <react_native_1.View style={styles.mediaRow}>
+             {/* Screenshot Preview */}
+             {screenshotUri && !videoUri && (<react_native_1.View style={styles.mediaItem}>
+                    <react_native_1.Image source={{ uri: screenshotUri }} style={styles.mediaPreview} resizeMode="cover"/>
+                    <react_native_1.View style={styles.mediaBadge}><react_native_1.Text style={styles.mediaBadgeText}>Screenshot</react_native_1.Text></react_native_1.View>
+                </react_native_1.View>)}
+             
+             {/* Video Preview (Placeholder) */}
+             {videoUri && (<react_native_1.View style={styles.mediaItem}>
+                     <react_native_1.View style={[styles.mediaPreview, { backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }]}>
+                         <react_native_1.Text style={{ color: '#FFF' }}>▶ Video</react_native_1.Text>
+                     </react_native_1.View>
+                     <react_native_1.View style={styles.mediaBadge}><react_native_1.Text style={styles.mediaBadgeText}>Screen Rec</react_native_1.Text></react_native_1.View>
+                 </react_native_1.View>)}
+          </react_native_1.View>
+
+          <react_native_1.TextInput style={styles.input} placeholder="What happened? Describe the bug..." placeholderTextColor="#999" multiline value={description} onChangeText={setDescription}/>
+
+          {/* Media Actions Row */}
+          <react_native_1.View style={styles.actionsRow}>
+              {/* Audio Recorder */}
+              <react_native_1.TouchableOpacity style={[styles.actionBtn, isRecordingAudio ? styles.recordingBtn : undefined, audioUri ? styles.hasAudioBtn : undefined]} onPress={isRecordingAudio ? onStopAudioRecord : onStartAudioRecord}>
+                  <react_native_1.Text style={[styles.actionBtnText, (isRecordingAudio || audioUri) ? { color: '#FFF' } : undefined]}>
+                      {isRecordingAudio ? `Stop (${audioDuration})` : audioUri ? 'Re-record Audio' : '🎙 Record Audio'}
+                  </react_native_1.Text>
+              </react_native_1.TouchableOpacity>
 
-          <react_native_1.TextInput style={styles.input} placeholder="What happened? Describe the bug..." placeholderTextColor="#999" multiline value={description} onChangeText={setDescription} autoFocus/>
+              {/* Screen Recorder */}
+              {onStartRecording && !videoUri && (<react_native_1.TouchableOpacity style={styles.actionBtn} onPress={onStartRecording}>
+                      <react_native_1.Text style={styles.actionBtnText}>🎥 Record Screen</react_native_1.Text>
+                  </react_native_1.TouchableOpacity>)}
+          </react_native_1.View>
 
           <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>)}
@@ -141,7 +244,8 @@ const styles = react_native_1.StyleSheet.create({
         borderTopLeftRadius: 20,
         borderTopRightRadius: 20,
         padding: 20,
-        minHeight: 400,
+        paddingBottom: 40,
+        maxHeight: '90%',
     },
     header: {
         flexDirection: 'row',
@@ -159,47 +263,79 @@ const styles = react_native_1.StyleSheet.create({
         color: '#999',
         padding: 5,
     },
-    previewContainer: {
-        height: 150,
-        backgroundColor: '#f0f0f0',
-        borderRadius: 10,
+    mediaRow: {
+        flexDirection: 'row',
         marginBottom: 15,
-        justifyContent: 'center',
-        alignItems: 'center',
+    },
+    mediaItem: {
+        width: 100,
+        height: 100,
+        borderRadius: 10,
         overflow: 'hidden',
+        marginRight: 10,
+        position: 'relative',
     },
-    preview: {
+    mediaPreview: {
         width: '100%',
         height: '100%',
     },
-    previewLabel: {
+    mediaBadge: {
         position: 'absolute',
-        bottom: 5,
-        right: 5,
+        bottom: 0,
+        left: 0,
+        right: 0,
         backgroundColor: 'rgba(0,0,0,0.6)',
+        padding: 4,
+        alignItems: 'center',
+    },
+    mediaBadgeText: {
         color: '#FFF',
         fontSize: 10,
-        padding: 4,
-        borderRadius: 4,
+        fontWeight: 'bold',
     },
     input: {
         backgroundColor: '#f9f9f9',
         borderRadius: 10,
         padding: 15,
-        height: 120,
+        height: 100,
         textAlignVertical: 'top',
         fontSize: 16,
         color: '#000',
+        marginBottom: 15,
+    },
+    actionsRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
         marginBottom: 20,
     },
+    actionBtn: {
+        flex: 1,
+        backgroundColor: '#f0f0f0',
+        padding: 12,
+        borderRadius: 8,
+        alignItems: 'center',
+        marginHorizontal: 5,
+    },
+    recordingBtn: {
+        backgroundColor: '#ff4444',
+    },
+    hasAudioBtn: {
+        backgroundColor: '#4CAF50',
+    },
+    actionBtnText: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#333',
+    },
     submitBtn: {
-        backgroundColor: '#007AFF',
-        padding: 15,
+        backgroundColor: '#000',
         borderRadius: 12,
+        padding: 16,
         alignItems: 'center',
+        marginTop: 10,
     },
     disabledBtn: {
-        backgroundColor: '#ccc',
+        opacity: 0.7,
     },
     submitText: {
         color: '#FFF',

package/lib/index.js

@@ -32,6 +32,9 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IInstall = void 0;
 const react_1 = __importStar(require("react"));
@@ -39,22 +42,23 @@ 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 [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 shakeDetectorRef = (0, react_1.useRef)(null);
+    // Refs for stable access in shake callback
+    const isRecordingRef = (0, react_1.useRef)(isRecording);
+    const modalVisibleRef = (0, react_1.useRef)(modalVisible);
     (0, react_1.useEffect)(() => {
-        if (!enabled)
-            return;
-        shakeDetectorRef.current = new ShakeDetector_1.ShakeDetector(handleShake);
-        shakeDetectorRef.current.start();
-        return () => {
-            shakeDetectorRef.current?.stop();
-        };
-    }, [enabled]);
+        isRecordingRef.current = isRecording;
+        modalVisibleRef.current = modalVisible;
+    }, [isRecording, modalVisible]);
     const handleShake = async () => {
-        if (modalVisible)
-            return; // Already open
+        if (modalVisibleRef.current || isRecordingRef.current)
+            return;
         try {
             // Capture screenshot
             const uri = await (0, react_native_view_shot_1.captureScreen)({
@@ -66,15 +70,112 @@ const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enab
         }
         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}/>
+    // Keep handleShake stable for the detector
+    const handleShakeCallback = (0, react_1.useRef)(handleShake);
+    (0, react_1.useEffect)(() => {
+        handleShakeCallback.current = handleShake;
+    });
+    (0, react_1.useEffect)(() => {
+        if (!enabled)
+            return;
+        // Use a wrapper to call the current handleShake
+        shakeDetectorRef.current = new ShakeDetector_1.ShakeDetector(() => handleShakeCallback.current());
+        shakeDetectorRef.current.start();
+        return () => {
+            shakeDetectorRef.current?.stop();
+        };
+    }, [enabled]);
+    const handleStartRecording = async () => {
+        setModalVisible(false);
+        setIsRecording(true);
+        try {
+            await react_native_record_screen_1.default.startRecording({ mic: true }).catch((error) => console.error(error));
+        }
+        catch (e) {
+            console.error('Failed to start recording', e);
+            setIsRecording(false);
+            setModalVisible(true); // Re-open if failed
+        }
+    };
+    const handleStopRecording = async () => {
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const res = await react_native_record_screen_1.default.stopRecording().catch((error) => console.error(error));
+            setIsRecording(false);
+            if (res) {
+                setVideoUri(res.result.outputURL);
+                setModalVisible(true);
+            }
+        }
+        catch (e) {
+            console.error('Failed to stop recording', e);
+            setIsRecording(false);
+        }
+    };
+    return (<react_native_1.View style={react_native_1.StyleSheet.absoluteFill} pointerEvents="box-none">
+      <react_native_1.View style={react_native_1.StyleSheet.absoluteFill}>
+        {children}
+      </react_native_1.View>
+      
+      {isRecording && (<react_native_1.SafeAreaView style={styles.recordingOverlay} pointerEvents="box-none">
+              <react_native_1.View style={styles.recordingContainer}>
+                  <react_native_1.View style={styles.recordingDot}/>
+                  <react_native_1.Text style={styles.recordingText}>Recording Screen...</react_native_1.Text>
+                  <react_native_1.TouchableOpacity onPress={handleStopRecording} style={styles.stopButton}>
+                      <react_native_1.Text style={styles.stopButtonText}>Stop</react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+              </react_native_1.View>
+          </react_native_1.SafeAreaView>)}
+
+      <FeedbackModal_1.FeedbackModal visible={modalVisible} onClose={() => {
+            setModalVisible(false);
+            setVideoUri(null); // Clear video on close
+            setScreenshotUri(null);
+        }} screenshotUri={screenshotUri} videoUri={videoUri} onStartRecording={handleStartRecording} apiKey={apiKey} apiEndpoint={apiEndpoint}/>
     </react_native_1.View>);
 };
 exports.IInstall = IInstall;
+const styles = react_native_1.StyleSheet.create({
+    recordingOverlay: {
+        position: 'absolute',
+        top: 50,
+        alignSelf: 'center',
+        zIndex: 9999,
+    },
+    recordingContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0,0,0,0.8)',
+        padding: 10,
+        borderRadius: 30,
+        paddingHorizontal: 20,
+    },
+    recordingDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: '#ff4444',
+        marginRight: 10,
+    },
+    recordingText: {
+        color: '#FFF',
+        fontWeight: '600',
+        marginRight: 15,
+    },
+    stopButton: {
+        backgroundColor: '#FFF',
+        paddingVertical: 5,
+        paddingHorizontal: 15,
+        borderRadius: 15,
+    },
+    stopButtonText: {
+        color: '#000',
+        fontWeight: 'bold',
+        fontSize: 12,
+    }
+});
 exports.default = exports.IInstall;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-iinstall",
-  "version": "0.1.0",
-  "description": "IInstall SDK for React Native - Shake to Report",
+  "version": "0.2.0",
+  "description": "IInstall SDK for React Native - Shake to Report with Audio & Video",
   "author": "TesterFlow Team",
   "license": "MIT",
   "repository": {
@@ -33,6 +33,8 @@
     "react-native-sensors": "^7.3.0",
     "react-native-view-shot": "^3.1.2",
     "react-native-device-info": "^10.0.0",
+    "react-native-audio-recorder-player": "^3.6.4",
+    "react-native-record-screen": "*",
     "rxjs": "^7.0.0"
   },
   "devDependencies": {

package/src/FeedbackModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Modal,
   View,
@@ -10,14 +10,18 @@ import {
   Image,
   Alert,
   Platform,
-  KeyboardAvoidingView
+  KeyboardAvoidingView,
+  PermissionsAndroid
 } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
+import AudioRecorderPlayer from 'react-native-audio-recorder-player';
 
 interface FeedbackModalProps {
   visible: boolean;
   onClose: () => void;
   screenshotUri: string | null;
+  videoUri?: string | null;
+  onStartRecording?: () => void;
   apiKey: string;
   apiEndpoint: string;
 }
@@ -26,15 +30,79 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
   visible,
   onClose,
   screenshotUri,
+  videoUri,
+  onStartRecording,
   apiKey,
   apiEndpoint
 }) => {
   const [description, setDescription] = useState('');
   const [isSending, setIsSending] = useState(false);
+  
+  // Audio State
+  const [isRecordingAudio, setIsRecordingAudio] = useState(false);
+  const [audioUri, setAudioUri] = useState<string | null>(null);
+  const [audioDuration, setAudioDuration] = useState('00:00');
+  
+  const audioRecorderPlayer = useRef(new AudioRecorderPlayer()).current;
+
+  useEffect(() => {
+    return () => {
+      // Cleanup
+      if (isRecordingAudio) {
+        audioRecorderPlayer.stopRecorder();
+      }
+    };
+  }, [isRecordingAudio]);
+
+  const onStartAudioRecord = async () => {
+    if (Platform.OS === 'android') {
+      try {
+        const grants = await PermissionsAndroid.requestMultiple([
+          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
+          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
+          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
+        ]);
+        // Note: Android 13+ might need different permissions for media, but keeping it simple
+        if (
+          grants['android.permission.RECORD_AUDIO'] !== PermissionsAndroid.RESULTS.GRANTED
+        ) {
+          Alert.alert('Permission needed', 'Audio recording permission is required.');
+          return;
+        }
+      } catch (err) {
+        console.warn(err);
+        return;
+      }
+    }
+
+    try {
+      const result = await audioRecorderPlayer.startRecorder();
+      audioRecorderPlayer.addRecordBackListener((e) => {
+        setAudioDuration(audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)));
+        return;
+      });
+      setIsRecordingAudio(true);
+      setAudioUri(null);
+    } catch (error) {
+      console.error('Failed to start recording', error);
+      Alert.alert('Error', 'Could not start audio recording');
+    }
+  };
+
+  const onStopAudioRecord = async () => {
+    try {
+      const result = await audioRecorderPlayer.stopRecorder();
+      audioRecorderPlayer.removeRecordBackListener();
+      setIsRecordingAudio(false);
+      setAudioUri(result);
+    } catch (error) {
+      console.error('Failed to stop recording', error);
+    }
+  };
 
   const sendFeedback = async () => {
-    if (!description.trim()) {
-      Alert.alert('Please describe the issue');
+    if (!description.trim() && !audioUri && !videoUri) {
+      Alert.alert('Please provide a description, audio, or video.');
       return;
     }
 
@@ -47,7 +115,7 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
       if (screenshotUri) {
         const filename = screenshotUri.split('/').pop();
         const match = /\.(\w+)$/.exec(filename || '');
-        const type = match ? `image/${match[1]}` : `image`;
+        const type = match ? `image/${match[1]}` : `image/png`;
         
         formData.append('screenshot', {
           uri: Platform.OS === 'ios' ? screenshotUri.replace('file://', '') : screenshotUri,
@@ -56,7 +124,25 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
         } as any);
       }
 
-      // 2. Metadata
+      // 2. Audio
+      if (audioUri) {
+        formData.append('audio', {
+          uri: Platform.OS === 'ios' ? audioUri.replace('file://', '') : audioUri,
+          name: 'feedback.m4a',
+          type: 'audio/m4a',
+        } as any);
+      }
+
+      // 3. Video
+      if (videoUri) {
+        formData.append('video', {
+            uri: Platform.OS === 'ios' ? videoUri.replace('file://', '') : videoUri,
+            name: 'screen_record.mp4',
+            type: 'video/mp4',
+        } as any);
+      }
+
+      // 4. Metadata
       const metadata = {
         device: DeviceInfo.getModel(),
         systemName: DeviceInfo.getSystemName(),
@@ -68,12 +154,12 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
       };
       formData.append('metadata', JSON.stringify(metadata));
 
-      // 3. Other fields
+      // 5. Other fields
       formData.append('description', description);
       formData.append('apiKey', apiKey);
-      formData.append('udid', await DeviceInfo.getUniqueId()); // Best effort UDID/ID
+      formData.append('udid', await DeviceInfo.getUniqueId());
       
-      // 4. Send
+      // 6. Send
       const response = await fetch(`${apiEndpoint}/api/feedback`, {
         method: 'POST',
         headers: {
@@ -87,6 +173,8 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
       if (response.ok) {
         Alert.alert('Success', 'Feedback sent successfully!');
         setDescription('');
+        setAudioUri(null);
+        setAudioDuration('00:00');
         onClose();
       } else {
         throw new Error(result.error || 'Failed to send');
@@ -116,12 +204,26 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
             </TouchableOpacity>
           </View>
 
-          {screenshotUri && (
-            <View style={styles.previewContainer}>
-              <Image source={{ uri: screenshotUri }} style={styles.preview} resizeMode="contain" />
-              <Text style={styles.previewLabel}>Screenshot Attached</Text>
-            </View>
-          )}
+          {/* Media Previews */}
+          <View style={styles.mediaRow}>
+             {/* Screenshot Preview */}
+             {screenshotUri && !videoUri && (
+                <View style={styles.mediaItem}>
+                    <Image source={{ uri: screenshotUri }} style={styles.mediaPreview} resizeMode="cover" />
+                    <View style={styles.mediaBadge}><Text style={styles.mediaBadgeText}>Screenshot</Text></View>
+                </View>
+             )}
+             
+             {/* Video Preview (Placeholder) */}
+             {videoUri && (
+                 <View style={styles.mediaItem}>
+                     <View style={[styles.mediaPreview, { backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }]}>
+                         <Text style={{color: '#FFF'}}>▶ Video</Text>
+                     </View>
+                     <View style={styles.mediaBadge}><Text style={styles.mediaBadgeText}>Screen Rec</Text></View>
+                 </View>
+             )}
+          </View>
 
           <TextInput
             style={styles.input}
@@ -130,9 +232,31 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
             multiline
             value={description}
             onChangeText={setDescription}
-            autoFocus
           />
 
+          {/* Media Actions Row */}
+          <View style={styles.actionsRow}>
+              {/* Audio Recorder */}
+              <TouchableOpacity 
+                style={[styles.actionBtn, isRecordingAudio ? styles.recordingBtn : undefined, audioUri ? styles.hasAudioBtn : undefined]}
+                onPress={isRecordingAudio ? onStopAudioRecord : onStartAudioRecord}
+              >
+                  <Text style={[styles.actionBtnText, (isRecordingAudio || audioUri) ? { color: '#FFF' } : undefined]}>
+                      {isRecordingAudio ? `Stop (${audioDuration})` : audioUri ? 'Re-record Audio' : '🎙 Record Audio'}
+                  </Text>
+              </TouchableOpacity>
+
+              {/* Screen Recorder */}
+              {onStartRecording && !videoUri && (
+                  <TouchableOpacity 
+                    style={styles.actionBtn}
+                    onPress={onStartRecording}
+                  >
+                      <Text style={styles.actionBtnText}>🎥 Record Screen</Text>
+                  </TouchableOpacity>
+              )}
+          </View>
+
           <TouchableOpacity 
             style={[styles.submitBtn, isSending && styles.disabledBtn]} 
             onPress={sendFeedback}
@@ -161,7 +285,8 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     padding: 20,
-    minHeight: 400,
+    paddingBottom: 40,
+    maxHeight: '90%',
   },
   header: {
     flexDirection: 'row',
@@ -179,47 +304,79 @@ const styles = StyleSheet.create({
     color: '#999',
     padding: 5,
   },
-  previewContainer: {
-    height: 150,
-    backgroundColor: '#f0f0f0',
-    borderRadius: 10,
-    marginBottom: 15,
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
+  mediaRow: {
+      flexDirection: 'row',
+      marginBottom: 15,
   },
-  preview: {
-    width: '100%',
-    height: '100%',
+  mediaItem: {
+      width: 100,
+      height: 100,
+      borderRadius: 10,
+      overflow: 'hidden',
+      marginRight: 10,
+      position: 'relative',
   },
-  previewLabel: {
-    position: 'absolute',
-    bottom: 5,
-    right: 5,
-    backgroundColor: 'rgba(0,0,0,0.6)',
-    color: '#FFF',
-    fontSize: 10,
-    padding: 4,
-    borderRadius: 4,
+  mediaPreview: {
+      width: '100%',
+      height: '100%',
+  },
+  mediaBadge: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: 'rgba(0,0,0,0.6)',
+      padding: 4,
+      alignItems: 'center',
+  },
+  mediaBadgeText: {
+      color: '#FFF',
+      fontSize: 10,
+      fontWeight: 'bold',
   },
   input: {
     backgroundColor: '#f9f9f9',
     borderRadius: 10,
     padding: 15,
-    height: 120,
+    height: 100,
     textAlignVertical: 'top',
     fontSize: 16,
     color: '#000',
-    marginBottom: 20,
+    marginBottom: 15,
+  },
+  actionsRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: 20,
+  },
+  actionBtn: {
+      flex: 1,
+      backgroundColor: '#f0f0f0',
+      padding: 12,
+      borderRadius: 8,
+      alignItems: 'center',
+      marginHorizontal: 5,
+  },
+  recordingBtn: {
+      backgroundColor: '#ff4444',
+  },
+  hasAudioBtn: {
+      backgroundColor: '#4CAF50',
+  },
+  actionBtnText: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: '#333',
   },
   submitBtn: {
-    backgroundColor: '#007AFF',
-    padding: 15,
+    backgroundColor: '#000',
     borderRadius: 12,
+    padding: 16,
     alignItems: 'center',
+    marginTop: 10,
   },
   disabledBtn: {
-    backgroundColor: '#ccc',
+    opacity: 0.7,
   },
   submitText: {
     color: '#FFF',

package/src/index.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Text, SafeAreaView, Platform } from 'react-native';
 import { captureScreen } from 'react-native-view-shot';
 import { ShakeDetector } from './ShakeDetector';
 import { FeedbackModal } from './FeedbackModal';
+import RecordScreen from 'react-native-record-screen';
 
 interface IInstallProps {
   apiKey: string;
@@ -19,21 +20,22 @@ export const IInstall: React.FC<IInstallProps> = ({
 }) => {
   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 shakeDetectorRef = useRef<ShakeDetector | null>(null);
+  
+  // Refs for stable access in shake callback
+  const isRecordingRef = useRef(isRecording);
+  const modalVisibleRef = useRef(modalVisible);
 
   useEffect(() => {
-    if (!enabled) return;
-
-    shakeDetectorRef.current = new ShakeDetector(handleShake);
-    shakeDetectorRef.current.start();
-
-    return () => {
-      shakeDetectorRef.current?.stop();
-    };
-  }, [enabled]);
+    isRecordingRef.current = isRecording;
+    modalVisibleRef.current = modalVisible;
+  }, [isRecording, modalVisible]);
 
   const handleShake = async () => {
-    if (modalVisible) return; // Already open
+    if (modalVisibleRef.current || isRecordingRef.current) return;
 
     try {
       // Capture screenshot
@@ -45,19 +47,84 @@ export const IInstall: React.FC<IInstallProps> = ({
       setModalVisible(true);
     } catch (error) {
       console.error('IInstall: Failed to capture screenshot', error);
-      // Still show modal without screenshot
       setScreenshotUri(null);
       setModalVisible(true);
     }
   };
+  
+  // Keep handleShake stable for the detector
+  const handleShakeCallback = useRef(handleShake);
+  useEffect(() => {
+      handleShakeCallback.current = handleShake;
+  });
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    // Use a wrapper to call the current handleShake
+    shakeDetectorRef.current = new ShakeDetector(() => handleShakeCallback.current());
+    shakeDetectorRef.current.start();
+
+    return () => {
+      shakeDetectorRef.current?.stop();
+    };
+  }, [enabled]);
+
+  const handleStartRecording = async () => {
+    setModalVisible(false);
+    setIsRecording(true);
+    try {
+        await RecordScreen.startRecording({ mic: true }).catch((error: any) => console.error(error));
+    } catch (e) {
+        console.error('Failed to start recording', e);
+        setIsRecording(false);
+        setModalVisible(true); // Re-open if failed
+    }
+  };
+
+  const handleStopRecording = async () => {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const res: any = await RecordScreen.stopRecording().catch((error: any) => console.error(error));
+        setIsRecording(false);
+        if (res) {
+            setVideoUri(res.result.outputURL);
+            setModalVisible(true);
+        }
+    } catch (e) {
+        console.error('Failed to stop recording', e);
+        setIsRecording(false);
+    }
+  };
 
   return (
-    <View style={StyleSheet.absoluteFill}>
-      {children}
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      <View style={StyleSheet.absoluteFill}>
+        {children}
+      </View>
+      
+      {isRecording && (
+          <SafeAreaView style={styles.recordingOverlay} pointerEvents="box-none">
+              <View style={styles.recordingContainer}>
+                  <View style={styles.recordingDot} />
+                  <Text style={styles.recordingText}>Recording Screen...</Text>
+                  <TouchableOpacity onPress={handleStopRecording} style={styles.stopButton}>
+                      <Text style={styles.stopButtonText}>Stop</Text>
+                  </TouchableOpacity>
+              </View>
+          </SafeAreaView>
+      )}
+
       <FeedbackModal
         visible={modalVisible}
-        onClose={() => setModalVisible(false)}
+        onClose={() => {
+            setModalVisible(false);
+            setVideoUri(null); // Clear video on close
+            setScreenshotUri(null);
+        }}
         screenshotUri={screenshotUri}
+        videoUri={videoUri}
+        onStartRecording={handleStartRecording}
         apiKey={apiKey}
         apiEndpoint={apiEndpoint}
       />
@@ -65,4 +132,44 @@ export const IInstall: React.FC<IInstallProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+    recordingOverlay: {
+        position: 'absolute',
+        top: 50,
+        alignSelf: 'center',
+        zIndex: 9999,
+    },
+    recordingContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0,0,0,0.8)',
+        padding: 10,
+        borderRadius: 30,
+        paddingHorizontal: 20,
+    },
+    recordingDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: '#ff4444',
+        marginRight: 10,
+    },
+    recordingText: {
+        color: '#FFF',
+        fontWeight: '600',
+        marginRight: 15,
+    },
+    stopButton: {
+        backgroundColor: '#FFF',
+        paddingVertical: 5,
+        paddingHorizontal: 15,
+        borderRadius: 15,
+    },
+    stopButtonText: {
+        color: '#000',
+        fontWeight: 'bold',
+        fontSize: 12,
+    }
+});
+
 export default IInstall;