shakebug-react-native 2.4.14 → 2.4.16

package/src/Componanats/ShakeFunction.js

@@ -1,257 +1,325 @@
-import { View, Text, Platform, Image, ImageBackground, NativeModules, DeviceEventEmitter, NativeEventEmitter, StatusBar, PanResponder, Animated, AppState, Dimensions, BackHandler, LogBox, StyleSheet, SafeAreaView } from 'react-native'
-import React, { useRef, useEffect, useState } from 'react'
+import {
+  View,
+  Text,
+  Platform,
+  Image,
+  NativeModules,
+  DeviceEventEmitter,
+  NativeEventEmitter,
+  StatusBar,
+  PanResponder,
+  Animated,
+  AppState,
+  Dimensions,
+  LogBox,
+  StyleSheet,
+  Alert,
+  PermissionsAndroid,
+  Linking,
+} from 'react-native';
+import React, { useRef, useEffect, useState } from 'react';
 import { SensorTypes, setUpdateIntervalForType, accelerometer } from '../../Sensor/src/index';
 import { ShakebugCapture, captureScreen } from '../index';
 import { TouchableOpacity } from 'react-native';
 import RecordScreen from '../../RecordScreen/src/index';
 import { ClearCanvas, RNDrawingView } from '../Screens/StrockView';
-import DeviceInfo, { getBaseOs } from '../../DeviceInfo';
+import DeviceInfo from '../../DeviceInfo';
 import { useNavigation } from './NavigationContext';
-
-console.ignoredYellowBox = ["Warning: Each", "Warning: Failed", "Possible", "WARN"];
-
-import { logger, consoleTransport } from "react-native-logs";
-import { ActivityIndicator } from 'react-native';
+import { logger, consoleTransport } from 'react-native-logs';
 import { useGlobalState } from './GlobalStateContext';
 import LoadingModal from './LoadingModal';
+import CustomeAlert from './CustomAlert';
+import ShakebugBottomSheet from './ShakebugBottomSheet';
+import { getLocalizedString, Localization } from './localization';
+import { launchImageLibrary } from '../../ImageOrVedioPicker/src/index';
 
-LogBox.ignoreAllLogs()
+console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed', 'Possible', 'WARN'];
+LogBox.ignoreAllLogs();
 
 let intervalId = null;
-const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitle, allowToReportBugByShaking, allowToReportBugByScreenCapture, allowCrashReport }) => {
 
-  const { ShakebugSDKScreenShotDetector, ShakebugSDKSharedPreferencesModule, ShakebugSDKCustomScreenCapture} = NativeModules;
+const ShakeFunction = ({
+  children,
+  themeColor = '#272B32',
+  showTutorialScreen,
+  SDKScreenTitle,
+  allowToReportBugByShaking,
+  allowToReportBugByScreenCapture,
+  allowCrashReport,
+}) => {
+  const {
+    ShakebugSDKScreenShotDetector,
+    ShakebugSDKSharedPreferencesModule,
+    ShakebugSDKCustomScreenCapture,
+    RNCameraPermission,
+  } = NativeModules;
 
   const { navigate, focusedScreen, goToScreenAtIndex } = useNavigation();
 
-  let isFocused = focusedScreen == "ShakebugHome";
-  const [isLoading, setIsLoading] = useState(false)
-  // const [isScrenShot, setIsScreenShot] = useState(false)
-
-  const { setIsRecordingStart, setIsScreenShot, isScrenShot, isShakebugOpen } = useGlobalState()
-
-  if (Platform.OS == 'android') {
-    ShakebugSDKScreenShotDetector.startObserving();
-
-    useEffect(() => {
-      const subscription = DeviceEventEmitter.addListener('ScreenshotTaken', async () => {
-        if (allowToReportBugByScreenCapture == true) {
-          if (!global.isScreenShotDetected && global.application_id != "" && global.application_id != undefined) {
-            OpenShakebug()
-          }
-        }
-      })
+  let isFocused = focusedScreen === 'ShakebugHome';
+  const [isLoading, setIsLoading] = useState(false);
+  const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
+  const [capturedScreenshot, setCapturedScreenshot] = useState(null);
+  const [isAlert, setIsAlert] = useState(false);
+  const [isAlertText, setIsAlertText] = useState('');
 
-      return () => subscription.remove()
-    }, []);
-  }
-  else {
-    const screenShotEmitter = new NativeEventEmitter(ShakebugSDKScreenShotDetector);
-    useEffect(() => {
-      const subscription = screenShotEmitter.addListener(
-        'ScreenshotTaken',
-        (event) => {
-          if (allowToReportBugByScreenCapture == true) {
-            // setIsScreenShot(true)
-            if (!global.isScreenShotDetected && global.application_id != "" && global.application_id != undefined) {
-              OpenShakebug()
-            }
-          }
-        }
-      );
+  const KEY_SHAKE_DISABLED_UNTIL = 'SHAKE_DISABLED_UNTIL';
+  const SEVEN_DAYS_MS = 7 * 24 * 60 * 60 * 1000;
+  const [isShakeDisabled, setIsShakeDisabled] = useState(false);
+  const shakeDisabledUntilRef = useRef(0);
 
-      return () => subscription.remove();
-    }, []);
-  }
+  const { setIsRecordingStart, setIsScreenShot, isScrenShot } = useGlobalState();
 
   const ref = useRef();
-  let canvasRef = useRef()
-  const [isShow, setIsShow] = useState()
-  const [time, setTime] = useState("00:00")
-  const [img, setImg] = useState("")
-  const [isDraw, setIsDraw] = useState(false)
+  let canvasRef = useRef();
+  const [isShow, setIsShow] = useState(false);
+  const [time, setTime] = useState('00:00');
+  const [isDraw, setIsDraw] = useState(false);
   const startTimeRef = useRef(null);
   const appState = useRef(AppState.currentState);
-  const [triggered, setTriggred] = useState(global.isTrigger);
-  const [restrictedView, setRestrictedView] = useState([])
 
   const defaultConfig = {
-    levels: {
-      debug: 0,
-      info: 1,
-      warn: 2,
-      error: 3,
-    },
-    severity: "debug",
+    levels: { debug: 0, info: 1, warn: 2, error: 3 },
+    severity: 'debug',
     transport: consoleTransport,
     transportOptions: {
-      colors: {
-        info: "blueBright",
-        warn: "yellowBright",
-        error: "redBright",
-      },
+      colors: { info: 'blueBright', warn: 'yellowBright', error: 'redBright' },
     },
     async: true,
-    dateFormat: "time",
+    dateFormat: 'time',
     printLevel: false,
     printDate: false,
     fixedExtLvlLength: false,
-    enabled: global.makeLogEnabled == true ? true : false,
+    enabled: global.makeLogEnabled === true,
   };
 
-
-  var log = logger.createLogger(defaultConfig);
+  const log = logger.createLogger(defaultConfig);
 
   const isBugReportingEnabled = () => {
     return global.allowBugReport !== false && allowToReportBugByShaking !== false;
   };
 
+  const checkShakeDisabledStatus = async () => {
+    try {
+      if (ShakebugSDKSharedPreferencesModule && ShakebugSDKSharedPreferencesModule.getString) {
+        const stored = await ShakebugSDKSharedPreferencesModule.getString(KEY_SHAKE_DISABLED_UNTIL);
+        if (stored) {
+          const timestamp = parseInt(stored, 10);
+          if (!isNaN(timestamp) && timestamp > 0) {
+            if (Date.now() < timestamp) {
+              shakeDisabledUntilRef.current = timestamp;
+              setIsShakeDisabled(true);
+              return;
+            } else {
+              // 7 days elapsed, re-enable
+              await ShakebugSDKSharedPreferencesModule.setString(KEY_SHAKE_DISABLED_UNTIL, '');
+            }
+          }
+        }
+      }
+    } catch (e) {
+      log.warn('Failed to check shake disabled status', e);
+    }
+    shakeDisabledUntilRef.current = 0;
+    setIsShakeDisabled(false);
+  };
+
+  useEffect(() => {
+    checkShakeDisabledStatus();
+  }, []);
+
+  // Hardware screenshot detection
+  const allowScreenCaptureRef = useRef(allowToReportBugByScreenCapture);
+  const lastScreenshotTimeRef = useRef(0);
+
+  useEffect(() => {
+    allowScreenCaptureRef.current = allowToReportBugByScreenCapture;
+  }, [allowToReportBugByScreenCapture]);
+
+  useEffect(() => {
+    try {
+      if (ShakebugSDKScreenShotDetector && typeof ShakebugSDKScreenShotDetector.startObserving === 'function') {
+        ShakebugSDKScreenShotDetector.startObserving();
+      }
+    } catch (e) {
+      log.warn('Failed to start screenshot observer', e);
+    }
+
+    const onScreenshot = () => {
+      const now = Date.now();
+      if (now - lastScreenshotTimeRef.current < 1200) {
+        return;
+      }
+      lastScreenshotTimeRef.current = now;
+
+      log.info('ScreenshotTaken event detected', {
+        allowScreenCapture: allowScreenCaptureRef.current,
+        isScreenShotDetected: global.isScreenShotDetected,
+        isBottomSheetOpen,
+        isRecording: global.isRecording,
+      });
+
+      if (allowScreenCaptureRef.current === true) {
+        if (!global.isScreenShotDetected && !isBottomSheetOpen && !global.isRecording && !global.isShakebugSDKOpen) {
+          OpenShakebug(true);
+        }
+      }
+    };
+
+    let subscription = null;
+    if (Platform.OS === 'android') {
+      subscription = DeviceEventEmitter.addListener('ScreenshotTaken', onScreenshot);
+    } else if (ShakebugSDKScreenShotDetector) {
+      const screenShotEmitter = new NativeEventEmitter(ShakebugSDKScreenShotDetector);
+      subscription = screenShotEmitter.addListener('ScreenshotTaken', onScreenshot);
+    }
+
+    return () => {
+      if (subscription && typeof subscription.remove === 'function') {
+        subscription.remove();
+      }
+      try {
+        if (ShakebugSDKScreenShotDetector && typeof ShakebugSDKScreenShotDetector.stopObserving === 'function') {
+          ShakebugSDKScreenShotDetector.stopObserving();
+        }
+      } catch (e) {}
+    };
+  }, [isBottomSheetOpen, allowToReportBugByScreenCapture]);
+
+  // Manual trigger listener
   useEffect(() => {
     const triggerSubscription = DeviceEventEmitter.addListener('TriggerBugReportingEvent', () => {
-      log.info("TriggerBugReportingEvent received. global.isShakebugOpen:", global.isShakebugOpen);
-      if (!global.isShakebugOpen) {
-        setTriggred(true);
-        global.isShakebugOpen = true;
-        setTimeout(() => {
-          OpenShakebug(true); // Pass true to bypass shake checks
-        }, 200);
+      log.info('TriggerBugReportingEvent received');
+      global.isShakebugOpen = false;
+      if (!isBottomSheetOpen && !global.isRecording) {
+        OpenShakebug(true);
       }
     });
     return () => triggerSubscription.remove();
-  }, []);
+  }, [isBottomSheetOpen]);
 
   setUpdateIntervalForType(SensorTypes.accelerometer, 200);
 
-  let iscrashSaveed = ""
   const BASE_URL = global.ShakebugSDKEndPointURL;
   const API_KEY = global.ShakebugSDKEndPointURLheaderKey;
 
-
+  // Check tutorial screen
   useEffect(() => {
     async function fetchIsFirstTime() {
       let showTutorialScreenFirstTime = showTutorialScreen;
       const isVisited = await ShakebugSDKSharedPreferencesModule.getString('isVisited');
-      if (isVisited == "" || isVisited == undefined) {
-        ShakebugSDKSharedPreferencesModule.setString("isVisited", "true")
+      if (isVisited === '' || isVisited === undefined) {
+        ShakebugSDKSharedPreferencesModule.setString('isVisited', 'true');
       }
 
-      if (showTutorialScreenFirstTime == true || showTutorialScreenFirstTime == undefined) {
+      if (showTutorialScreenFirstTime === true || showTutorialScreenFirstTime === undefined) {
         setTimeout(() => {
-          if ((isVisited != "true" || isVisited == "" || isVisited == undefined)) {
-            navigate("TutorialScreen")
+          if (isVisited !== 'true' || isVisited === '' || isVisited === undefined) {
+            navigate('TutorialScreen');
           }
-        }, 200)
+        }, 200);
       }
     }
     fetchIsFirstTime();
   }, []);
 
-
+  // Check saved crash report
   useEffect(() => {
-    async function fetchIsFirstTime() {
-      iscrashSaveed = await ShakebugSDKSharedPreferencesModule.getString('iscrashSaveed')
-      const Custom_User_Id = await ShakebugSDKSharedPreferencesModule.getString('custom_user_id')
-
-      if (iscrashSaveed.length > 10 && allowCrashReport) {
-
-        let data = JSON.parse(iscrashSaveed)
-
-        const formData = new FormData();
-        formData.append("method", "addIssue");
-        formData.append("description", data["desc"]);
-        formData.append("applicationsid", data["application_id"]);
-        formData.append("session_id", data["session_id"]);
-        formData.append("batteryLevel", data["batteryLevel"]);
-        formData.append("image", "");
-        formData.append("memory", data["memory"]);
-        formData.append("email", "");
-        formData.append("bugtypes", "crashed");
-        formData.append("devicemodel", `${data["architecture"]} -- ${data["model"]}`);
-        formData.append("osversion", data["osversion"]);
-        formData.append("internettype", data["internetType"]);
-        formData.append("created", data["created"]);
-        formData.append("isVideo", 0);
-        formData.append("appversion", data["appversion"]);
-        formData.append("custom_user_id", Custom_User_Id || "")
-        formData.append("sdk_version", global.sdk_version)
-
+    async function fetchCrashData() {
+      const iscrashSaveed = await ShakebugSDKSharedPreferencesModule.getString('iscrashSaveed');
+      const Custom_User_Id = await ShakebugSDKSharedPreferencesModule.getString('custom_user_id');
 
+      if (iscrashSaveed && iscrashSaveed.length > 10 && allowCrashReport) {
         try {
+          let data = JSON.parse(iscrashSaveed);
+          const formData = new FormData();
+          formData.append('method', 'addIssue');
+          formData.append('description', data['desc']);
+          formData.append('applicationsid', data['application_id']);
+          formData.append('session_id', data['session_id']);
+          formData.append('batteryLevel', data['batteryLevel']);
+          formData.append('image', '');
+          formData.append('memory', data['memory']);
+          formData.append('email', '');
+          formData.append('bugtypes', 'crashed');
+          formData.append('devicemodel', `${data['architecture']} -- ${data['model']}`);
+          formData.append('osversion', data['osversion']);
+          formData.append('internettype', data['internetType']);
+          formData.append('created', data['created']);
+          formData.append('isVideo', 0);
+          formData.append('appversion', data['appversion']);
+          formData.append('custom_user_id', Custom_User_Id || '');
+          formData.append('sdk_version', global.sdk_version);
+
           const response = await fetch(BASE_URL, {
             method: 'POST',
-            headers: {
-              'API-KEY': API_KEY
-            },
+            headers: { 'API-KEY': API_KEY },
             body: formData,
           });
 
-          const data = await response.json();
-
-          if (data.code === 200 && data.success === true) {
-            log.info(data.msg)
-            ShakebugSDKSharedPreferencesModule.setString("iscrashSaveed", JSON.stringify({}))
-          } else {
-
+          const resData = await response.json();
+          if (resData.code === 200 && resData.success === true) {
+            log.info(resData.msg);
+            ShakebugSDKSharedPreferencesModule.setString('iscrashSaveed', JSON.stringify({}));
           }
-        }
-        catch (e) {
-          log.error("e", e)
+        } catch (e) {
+          log.error('Crash report send error', e);
         }
       }
-
     }
-    fetchIsFirstTime();
+    fetchCrashData();
   }, []);
 
-
+  // Stop screen recording
   const Stop = () => {
-    RecordScreen.stopRecording().then(res => {
-      // setIsScreenShot(true)
-      global.isMic = false;
-      global.isRecordingStart = false;
-      global.IsBackground = "true"
-      setIsShow(false)
-      setIsDraw(false)
-      global.isDraw = false;
-      global.isShow = false;
-      startTimeRef.current = null
-      clearInterval(intervalId);
-      setIsLoading(false)
-      global.isRecording = false;
-      navigate("AddDetailsScreen", { media: res.result.outputURL, mediaType: 'Recordvideo', themeColor: themeColor, SDKScreenTitle: `${SDKScreenTitle}` })
-    })
-      .catch(e => {
-        log.warn("e", e)
+    RecordScreen.stopRecording()
+      .then((res) => {
+        global.isMic = false;
+        global.isRecordingStart = false;
+        global.IsBackground = 'true';
+        setIsShow(false);
+        setIsDraw(false);
+        global.isDraw = false;
+        global.isShow = false;
+        startTimeRef.current = null;
+        clearInterval(intervalId);
+        setIsLoading(false);
+        global.isRecording = false;
+        navigate('AddDetailsScreen', {
+          media: res.result.outputURL,
+          mediaType: 'Recordvideo',
+          themeColor: themeColor,
+          SDKScreenTitle: `${SDKScreenTitle}`,
+        });
       })
-  }
+      .catch((e) => {
+        log.warn('Stop recording error', e);
+      });
+  };
 
   useEffect(() => {
     const handleAppStateChange = (nextAppState) => {
-      // if (nextAppState == 'background') {
-      //   if (Platform.OS == 'ios' && global.isRecording) {
-      //     Stop()
-      //   }
-      // }
+      if (nextAppState === 'background' || nextAppState === 'inactive') {
+        if (global.isRecording) {
+          Stop();
+        }
+      }
 
       if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
-        // Calculate the elapsed time when the app comes back to the foreground
+        checkShakeDisabledStatus();
         if (startTimeRef.current && global.isRecording) {
           const elapsed = Math.floor((Date.now() - startTimeRef.current) / 1000);
           updateTimer(elapsed);
         }
-
       }
       appState.current = nextAppState;
     };
 
     const AppStateListener = AppState.addEventListener('change', handleAppStateChange);
-
-    // Start the interval initially
     startTimer();
 
     return () => {
-      // AppState.removeEventListener('change', handleAppStateChange);
-      AppStateListener.remove()
+      AppStateListener.remove();
       clearInterval(intervalId);
     };
   }, []);
@@ -274,27 +342,26 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
     const sec = parseInt(elapsed % 60);
     const durationLimit = parseInt(global.videoDuration) || 20;
 
-    if (elapsed == durationLimit) {
+    if (elapsed === durationLimit) {
       clearInterval(intervalId);
       setTimeout(() => {
-        Stop()
-      }, 1000)
+        Stop();
+      }, 1000);
     }
 
     if (elapsed > durationLimit) {
-      RecordScreen.stopRecording()
-        .then(() => {
-          global.isMic = false;
-          global.isRecordingStart = false;
-          global.IsBackground = "true"
-          global.isRecording = false;
-          setIsShow(false)
-          setIsDraw(false)
-          global.isDraw = false;
-          global.isShow = false;
-          startTimeRef.current = null
-          clearInterval(intervalId);
-        })
+      RecordScreen.stopRecording().then(() => {
+        global.isMic = false;
+        global.isRecordingStart = false;
+        global.IsBackground = 'true';
+        global.isRecording = false;
+        setIsShow(false);
+        setIsDraw(false);
+        global.isDraw = false;
+        global.isShow = false;
+        startTimeRef.current = null;
+        clearInterval(intervalId);
+      });
     }
 
     const minStr = min < 10 ? `0${min}` : min;
@@ -302,206 +369,404 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
     setTime(`${minStr}:${secStr}`);
   };
 
+  // Accelerometer subscription for shake detection
   useEffect(() => {
-    let xdata = 0;
-    let ydata = 0;
-    let zdata = 0;
-
-    DeviceInfo.isEmulator().then(res => {
-      if (!res && isRecording == false && isBugReportingEnabled()) {
-        const subscription = accelerometer.subscribe(async ({ x, y, z, timestamp }) => {
+    DeviceInfo.isEmulator().then((res) => {
+      if (!res && isRecordingStart === false && isBugReportingEnabled()) {
+        const subscription = accelerometer.subscribe(async ({ x, y, z }) => {
+          // Check if shake is temporarily disabled for 7 days
+          if (shakeDisabledUntilRef.current > 0) {
+            if (Date.now() < shakeDisabledUntilRef.current) {
+              return;
+            } else {
+              shakeDisabledUntilRef.current = 0;
+              setIsShakeDisabled(false);
+              if (ShakebugSDKSharedPreferencesModule && ShakebugSDKSharedPreferencesModule.setString) {
+                ShakebugSDKSharedPreferencesModule.setString(KEY_SHAKE_DISABLED_UNTIL, '');
+              }
+            }
+          }
 
           let calculate = Math.sqrt(x * x + y * y + z * z);
 
-          if (global.isTrigger == true && global.isShakebugOpen == false && isBugReportingEnabled()) {
-            setTriggred(true)
-            global.isShakebugOpen = true;
-            setTimeout(() => {
-              OpenShakebug()
-            }, 200)
+          if (global.isTrigger === true && global.isShakebugOpen === false) {
+            global.isTrigger = false;
+            OpenShakebug(true);
           }
 
-          if (Platform.OS == 'android' && global.isRecording == false && global.isTrigger == false && isBugReportingEnabled()) {
+          if (
+            Platform.OS === 'android' &&
+            global.isRecording === false &&
+            global.isTrigger === false &&
+            isBugReportingEnabled()
+          ) {
             if (calculate.toFixed(2) >= 18) {
-              if (global.isAndroidValid == true && global.application_id != "" && global.application_id != undefined && global.isTrigger == false) {
-                setIsScreenShot(true)
-                let ImgUrl = null;
-                try {
-                  ImgUrl = ref.current ? await ref.current.capture() : null;
-                } catch (e) {
-                  log.error("Failed to capture screenshot on shake", e);
-                }
-                if (!isShow) {
-                  if (ImgUrl != undefined || ImgUrl != null) {
-                    subscription.unsubscribe();
-                    global.IsBackground = false
-                    global.isShakebugSDKOpen = true
-                    // navigate('TestScreen');
-                    navigate("FirstScreen", { img: `${ImgUrl}`, themeColor: `${themeColor}`, SDKScreenTitle: `${SDKScreenTitle}` })
-                  }
-                  else {
-                    setIsScreenShot(false)
-                  }
-                }
-                xdata = 0;
-                ydata = 0;
-                zdata = 0;
+              if (
+                global.isAndroidValid === true &&
+                global.application_id &&
+                !isBottomSheetOpen
+              ) {
+                captureAndOpenBottomSheet();
               }
             }
-          }
-          else if (Platform.OS == 'ios' && global.isRecording == false && global.isTrigger == false && isBugReportingEnabled()) {
-            if (calculate.toFixed(2) >= 2.00) {
-              if (global.isIOSValid == true && global.application_id != "" && global.application_id != undefined) {
-                setIsScreenShot(true)
-                
-                let ImgUrl = null;
-                try {
-                  ImgUrl = ref.current ? await ref.current.capture() : null;
-                } catch (e) {
-                  log.error("Failed to capture screenshot on iOS shake", e);
-                }
-                try {
-                  const filePath = await ShakebugSDKCustomScreenCapture.captureScreen();
-                  ImgUrl = filePath
-                }
-                catch (e) {
-       
-                }
-                if (ImgUrl != undefined || ImgUrl != null) {
-                  subscription.unsubscribe();
-                  global.isShakebugSDKOpen = true
-                  navigate("FirstScreen", { img: `${ImgUrl}`, themeColor: `${themeColor}`, SDKScreenTitle: `${SDKScreenTitle}` })
-                }
-                else {
-                  setIsScreenShot(false)
-                }
-
-                xdata = 0;
-                ydata = 0;
-                zdata = 0;
+          } else if (
+            Platform.OS === 'ios' &&
+            global.isRecording === false &&
+            global.isTrigger === false &&
+            isBugReportingEnabled()
+          ) {
+            if (calculate.toFixed(2) >= 2.0) {
+              if (
+                global.isIOSValid === true &&
+                global.application_id &&
+                !isBottomSheetOpen
+              ) {
+                captureAndOpenBottomSheet();
               }
             }
           }
-        })
+        });
 
-        if (isFocused == false) {
-          subscription.unsubscribe()
-          xdata = 0;
-          ydata = 0;
-          zdata = 0;
-          setTime("00:00")
+        if (isFocused === false) {
+          subscription.unsubscribe();
+          setTime('00:00');
           pan.setValue({ x: SCREEN_WIDTH * 0.55, y: SCREEN_HEIGHT * 0.85 });
         }
       }
-      else {
-        setInterval(() => {
-          if (global.isTrigger == true && global.isShakebugOpen == false && isBugReportingEnabled()) {
-            global.isShakebugOpen = true;
-            global.isTrigger = true;
-            OpenShakebug()
-          }
-        }, 1000)
-      }
-    })
-
-  }, [isFocused])
+    });
+  }, [isFocused, isBottomSheetOpen]);
 
-  const OpenShakebug = async (bypassShakeCheck = false) => {
-    if (!bypassShakeCheck && !isBugReportingEnabled()) {
-      log.warn("OpenShakebug aborted: Bug reporting is disabled.");
+  // Capture screenshot and present Bottom Sheet
+  const captureAndOpenBottomSheet = async () => {
+    if (isBottomSheetOpen || global.isRecording) {
+      global.isShakebugOpen = false;
       return;
     }
-    setIsScreenShot(true)
-    if (global.application_id != "" && global.application_id != undefined && global.session_id != "" && global.session_id != undefined) {
-      let ImgUrl = null;
+
+    setIsScreenShot(true);
+    let ImgUrl = null;
+    try {
+      if (ref.current && typeof ref.current.capture === 'function') {
+        ImgUrl = await ref.current.capture();
+      }
+    } catch (e) {
+      log.error('Failed to capture screenshot with ref', e);
+    }
+
+    if (!ImgUrl && Platform.OS === 'ios') {
+      try {
+        const filePath = await ShakebugSDKCustomScreenCapture.captureScreen();
+        if (filePath) ImgUrl = filePath;
+      } catch (e) {}
+    }
+
+    if (!ImgUrl) {
       try {
-        ImgUrl = ref.current ? await ref.current.capture() : null;
-      } catch (e) {
-        log.error("Failed to capture screenshot in OpenShakebug", e);
+        const screenUri = await captureScreen({ format: 'jpg', quality: 1 });
+        if (screenUri) ImgUrl = screenUri;
+      } catch (e) {}
+    }
+
+    setIsScreenShot(false);
+
+    if (!isShow) {
+      setCapturedScreenshot(ImgUrl || null);
+      setIsBottomSheetOpen(true);
+      global.isShakebugSDKOpen = true;
+    } else {
+      global.isShakebugOpen = false;
+    }
+  };
+
+  const OpenShakebug = async (bypassShakeCheck = false) => {
+    if (!bypassShakeCheck) {
+      if (global.allowBugReport === false || allowToReportBugByShaking === false) {
+        log.warn('OpenShakebug aborted: Shaking bug reporting is disabled.');
+        global.isShakebugOpen = false;
+        return;
       }
-      if (!isShow) {
-        if (ImgUrl != undefined || ImgUrl != null) {
-          global.IsBackground = false
-          global.isScreenShotDetected = true;
-          setTriggred(false)
-          global.isShakebugSDKOpen = true
-          navigate("FirstScreen", { img: `${ImgUrl}`, themeColor: `${themeColor}`, SDKScreenTitle: `${SDKScreenTitle}` })
-        } else {
-          log.warn("OpenShakebug aborted: Screenshot capture returned null.");
-        }
-      } else {
-        log.warn("OpenShakebug aborted: isShow is true (currently recording).");
+      if (shakeDisabledUntilRef.current > 0 && Date.now() < shakeDisabledUntilRef.current) {
+        log.warn('OpenShakebug aborted: Shake temporarily disabled by user.');
+        global.isShakebugOpen = false;
+        return;
       }
     } else {
-      log.warn("OpenShakebug aborted: Missing application_id or session_id. App_Id:", global.application_id, "Session_Id:", global.session_id);
+      if (global.allowBugReport === false) {
+        log.warn('OpenShakebug aborted: Bug reporting is globally disabled.');
+        global.isShakebugOpen = false;
+        return;
+      }
     }
-  }
 
-  useEffect(() => {
-    if (isScrenShot) {
-      setIsScreenShot(false)
+    if (isShow || isBottomSheetOpen || global.isRecording) {
+      global.isShakebugOpen = false;
+      return;
     }
-    setTimeout(() => {
-      if (global.isRecordingStart == true && global.isRecording != true) {
-        setIsLoading(true)
-        try {
-          RecordScreen.startRecording({
-            mic: global.isMic,
-            fps: 30,
-            bitrate: 1024000,
-          }).then(res => {
-            setIsLoading(false)
-            if (res == 'started') {
-              setIsRecordingStart(true)
-              if (focusedScreen != "ShakebugHome") {
-                goToScreenAtIndex(0)
-              }
-              global.isRecording = true;
-              StatusBar.setHidden(false)
-              setIsShow(global.isRecording)
-              global.minutes = 0;
-              global.Seconds = 0;
-              startTimeRef.current = null
-              startTimer()
-            }
-            else {
-              global.isMic = false;
-              global.isRecordingStart = false;
-              OpenShakebug()
+
+    global.isShakebugOpen = true;
+    await captureAndOpenBottomSheet();
+  };
+
+  // Bottom Sheet Handlers
+  const handleReportIssue = () => {
+    setIsBottomSheetOpen(false);
+    global.IsBackground = 'false';
+    global.isScreenShotDetected = true;
+    global.isShakebugSDKOpen = true;
+    if (capturedScreenshot) {
+      navigate('FirstScreen', {
+        img: `${capturedScreenshot}`,
+        themeColor: `${themeColor}`,
+        SDKScreenTitle: `${SDKScreenTitle}`,
+      });
+    } else {
+      navigate('AddDetailsScreen', {
+        media: '',
+        mediaType: 'img',
+        themeColor: `${themeColor}`,
+        SDKScreenTitle: `${SDKScreenTitle}`,
+      });
+    }
+  };
+
+  const startRecordingProcess = (withMic = false) => {
+    setIsBottomSheetOpen(false);
+    setIsLoading(true);
+    global.isMic = withMic;
+    global.isRecordingStart = true;
+    try {
+      RecordScreen.startRecording({
+        mic: withMic,
+        fps: 30,
+        bitrate: 1024000,
+      })
+        .then((res) => {
+          setIsLoading(false);
+          if (res === 'started') {
+            setIsRecordingStart(true);
+            if (focusedScreen !== 'ShakebugHome') {
+              goToScreenAtIndex(0);
             }
-          })
-            .catch(e => {
-              log.error("e", e)
-              setIsLoading(false)
-            })
-        }
-        catch (e) {
-          log.error("error", e)
-          setIsLoading(false)
+            global.isRecording = true;
+            StatusBar.setHidden(false);
+            setIsShow(true);
+            global.minutes = 0;
+            global.Seconds = 0;
+            startTimeRef.current = null;
+            startTimer();
+          } else {
+            global.isMic = false;
+            global.isRecordingStart = false;
+            setIsAlertText('Unable to start screen recording. Please try again.');
+            setIsAlert(true);
+          }
+        })
+        .catch((e) => {
+          log.error('RecordScreen error', e);
+          setIsLoading(false);
+        });
+    } catch (e) {
+      log.error('RecordScreen start error', e);
+      setIsLoading(false);
+    }
+  };
+
+  const handleRecordIssue = () => {
+    if (global.AllowVideo === false) {
+      setIsAlertText(
+        `You have reached your max video limitation. \n\n Used Videos: ${global.used_video} \nAllowed Videos: ${global.total_video}\n\nPlease visit https://www.shakebug.com website and upgrade your plan.`
+      );
+      setIsAlert(true);
+      return;
+    }
+
+    DeviceInfo.isEmulator().then((res) => {
+      if (res === true && Platform.OS === 'ios') {
+        setIsAlertText('Only real device is supported for recording video');
+        setIsAlert(true);
+        return;
+      }
+
+      Alert.alert(
+        Localization[global.ShakebugLanguage]?.RecordAudio || 'Do you want to record Audio?',
+        '',
+        [
+          {
+            text: Localization[global.ShakebugLanguage]?.No || 'No',
+            style: 'cancel',
+            onPress: () => {
+              startRecordingProcess(false);
+            },
+          },
+          {
+            text: Localization[global.ShakebugLanguage]?.Yes || 'YES',
+            onPress: () => {
+              if (Platform.OS === 'android') {
+                PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO).then(
+                  (permRes) => {
+                    if (permRes === PermissionsAndroid.RESULTS.GRANTED) {
+                      startRecordingProcess(true);
+                    } else {
+                      startRecordingProcess(false);
+                    }
+                  }
+                );
+              } else {
+                if (RNCameraPermission && RNCameraPermission.checkCameraPermissionStatus) {
+                  RNCameraPermission.checkCameraPermissionStatus().then((permRes) => {
+                    if (permRes === 'granted') {
+                      startRecordingProcess(true);
+                    } else if (permRes === 'denied') {
+                      Alert.alert(
+                        '',
+                        Localization[global.ShakebugLanguage]?.AudioPermission ||
+                          'Audio permission required',
+                        [
+                          {
+                            text: Localization[global.ShakebugLanguage]?.No || 'No',
+                            style: 'cancel',
+                            onPress: () => startRecordingProcess(false),
+                          },
+                          {
+                            text: Localization[global.ShakebugLanguage]?.Yes || 'YES',
+                            onPress: () => {
+                              Linking.openSettings();
+                              startRecordingProcess(false);
+                            },
+                          },
+                        ]
+                      );
+                    } else {
+                      startRecordingProcess(false);
+                    }
+                  });
+                } else {
+                  startRecordingProcess(true);
+                }
+              }
+            },
+          },
+        ]
+      );
+    });
+  };
+
+  const handleChooseMedia = () => {
+    setIsBottomSheetOpen(false);
+    setIsLoading(true);
+
+    const options = {
+      mediaType: 'mixed',
+      includeBase64: false,
+      selectionLimit: 1,
+    };
+
+    launchImageLibrary(options, async (response) => {
+      setIsLoading(false);
+      if (response.didCancel) {
+        handleDismissBottomSheet();
+        return;
+      }
+      if (response.error || response.errorCode) {
+        handleDismissBottomSheet();
+        return;
+      }
+      const asset = response.assets?.[0];
+      const mediaUri = (await response.uri) || asset?.uri;
+      if (!mediaUri) {
+        handleDismissBottomSheet();
+        return;
+      }
+      const mediaType = asset?.type || '';
+      const isVideo =
+        mediaType.startsWith('video') ||
+        mediaUri.toLowerCase().endsWith('.mp4') ||
+        mediaUri.toLowerCase().endsWith('.mov') ||
+        mediaUri.toLowerCase().endsWith('.m4v');
+
+      if (isVideo) {
+        if (global.AllowVideo === false) {
+          setIsAlertText(
+            `You have reached your max video limitation. \n\n Used Videos: ${global.used_video} \nAllowed Videos: ${global.total_video}\n\nPlease visit https://www.shakebug.com website and upgrade your plan.`
+          );
+          setIsAlert(true);
+          return;
         }
+        global.IsBackground = 'false';
+        global.isShakebugSDKOpen = true;
+        navigate('TrimVideoScreen', {
+          video: `${mediaUri}`,
+          Type: 'video',
+          themeColor: themeColor,
+          SDKScreenTitle: `${SDKScreenTitle}`,
+          UpdateStatusBar: () => StatusBar.setHidden(false),
+          updateParent: () => {},
+        });
+      } else {
+        global.IsBackground = 'false';
+        global.isShakebugSDKOpen = true;
+        navigate('FirstScreen', {
+          img: `${mediaUri}`,
+          themeColor: themeColor,
+          SDKScreenTitle: `${SDKScreenTitle}`,
+        });
       }
-    }, 1000)
+    });
+  };
 
-  }, [isFocused])
+  const handleDismissBottomSheet = () => {
+    setIsBottomSheetOpen(false);
+    setCapturedScreenshot(null);
+    global.isTrigger = false;
+    global.isShakebugOpen = false;
+    global.isScreenShotDetected = false;
+    global.isScreeenShotTaken = false;
+    global.isShakebugSDKOpen = false;
+    setIsScreenShot(false);
+    setIsRecordingStart(false);
+  };
 
+  const handleDisableShake = async () => {
+    const disabledUntil = Date.now() + SEVEN_DAYS_MS;
+    shakeDisabledUntilRef.current = disabledUntil;
+    setIsShakeDisabled(true);
+    try {
+      if (ShakebugSDKSharedPreferencesModule && ShakebugSDKSharedPreferencesModule.setString) {
+        await ShakebugSDKSharedPreferencesModule.setString(
+          KEY_SHAKE_DISABLED_UNTIL,
+          disabledUntil.toString()
+        );
+      }
+    } catch (e) {
+      log.warn('Failed to save SHAKE_DISABLED_UNTIL', e);
+    }
+  };
 
-  const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+  const handleEnableShake = async () => {
+    shakeDisabledUntilRef.current = 0;
+    setIsShakeDisabled(false);
+    try {
+      if (ShakebugSDKSharedPreferencesModule && ShakebugSDKSharedPreferencesModule.setString) {
+        await ShakebugSDKSharedPreferencesModule.setString(KEY_SHAKE_DISABLED_UNTIL, '');
+      }
+    } catch (e) {
+      log.warn('Failed to clear SHAKE_DISABLED_UNTIL', e);
+    }
+  };
 
+  const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
   const pan = useRef(new Animated.ValueXY()).current;
-
   const BOUNDARY_X_MIN = 0;
-  const BOUNDARY_X_MAX = Dimensions.get('window').width * 0.6; // Set your max boundary for x
+  const BOUNDARY_X_MAX = Dimensions.get('window').width * 0.6;
   const BOUNDARY_Y_MIN = 0;
-  const BOUNDARY_Y_MAX = Dimensions.get('window').height * 0.98; // Set your max boundary for y
+  const BOUNDARY_Y_MAX = Dimensions.get('window').height * 0.98;
 
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onPanResponderMove: (event, gestureState) => {
-        // Calculate the new x and y values within the boundaries
         let newX = Math.max(BOUNDARY_X_MIN, Math.min(BOUNDARY_X_MAX, gestureState.dx + pan.x._offset));
         let newY = Math.max(BOUNDARY_Y_MIN, Math.min(BOUNDARY_Y_MAX, gestureState.dy + pan.y._offset));
-
         pan.setValue({ x: newX - pan.x._offset, y: newY - pan.y._offset });
       },
       onPanResponderRelease: () => {
@@ -510,25 +775,17 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
       onPanResponderGrant: () => {
         pan.setOffset({
           x: pan.x._value,
-          y: pan.y._value
+          y: pan.y._value,
         });
         pan.setValue({ x: SCREEN_WIDTH * 0.55, y: SCREEN_HEIGHT * 0.8 });
-      }
+      },
     })
   ).current;
 
   return (
-    <View
-      style={{
-        width: '100%',
-        height: '100%'
-      }}
-    >
-
-      <ShakebugCapture ref={ref} options={{ format: "jpg", quality: 1, }} style={{ flex: 1 }}>
-        <View style={{ flex: 1 }}>
-          {children}
-        </View>
+    <View style={{ width: '100%', height: '100%' }}>
+      <ShakebugCapture ref={ref} options={{ format: 'jpg', quality: 1 }} style={{ flex: 1 }}>
+        <View style={{ flex: 1 }}>{children}</View>
         {isDraw && (
           <RNDrawingView
             ref={canvasRef}
@@ -540,17 +797,15 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
               bottom: 0,
               width: '100%',
               height: '100%',
-              zIndex: 999
+              zIndex: 999,
             }}
             color={'red'}
-            strokeWidth={Platform.OS == 'android' ? 5 : 3}
+            strokeWidth={Platform.OS === 'android' ? 5 : 3}
           />
         )}
-
-
       </ShakebugCapture>
 
-      <LoadingModal visible={isLoading} color={themeColor} />
+      {/* Floating Screen Recording Widget */}
       {isShow ? (
         <Animated.View
           {...panResponder.panHandlers}
@@ -567,45 +822,81 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
             position: 'absolute',
             backgroundColor: themeColor,
             flexDirection: 'row',
-            zIndex: 1
+            zIndex: 100,
           }}
         >
           <TouchableOpacity
             onPress={() => Stop()}
             hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
           >
-            <Image source={require("../Assets/images/stopButton.png")} style={{ height: 30, width: 30 }} />
+            <Image
+              source={require('../Assets/images/stopButton.png')}
+              style={{ height: 30, width: 30 }}
+            />
           </TouchableOpacity>
 
-          <Text style={{ color: "white", fontSize: 18, marginRight: 5, marginLeft: 5, fontWeight: '700' }}>{time}</Text>
+          <Text style={{ color: 'white', fontSize: 18, marginRight: 5, marginLeft: 5, fontWeight: '700' }}>
+            {time}
+          </Text>
 
-          {isDraw == false ? (
+          {isDraw === false ? (
             <TouchableOpacity
               onPress={() => {
-                setIsDraw(true)
-                global.isDraw = true
+                setIsDraw(true);
+                global.isDraw = true;
               }}
               hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
             >
-              <Image source={require("../Assets/images/OpenSketch.png")} style={{ height: 25, width: 25 }} />
+              <Image
+                source={require('../Assets/images/OpenSketch.png')}
+                style={{ height: 25, width: 25 }}
+              />
             </TouchableOpacity>
           ) : (
             <TouchableOpacity
               onPress={() => {
-                setIsDraw(false)
-                global.isDraw = false
-                ClearCanvas(canvasRef)
+                setIsDraw(false);
+                global.isDraw = false;
+                ClearCanvas(canvasRef);
               }}
               hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
             >
-              <Image source={require("../Assets/images/close.png")} style={{ height: 30, width: 30 }} />
+              <Image
+                source={require('../Assets/images/close.png')}
+                style={{ height: 30, width: 30 }}
+              />
             </TouchableOpacity>
           )}
         </Animated.View>
       ) : null}
+
+      {/* Bottom Sheet on Shake / Trigger */}
+      <ShakebugBottomSheet
+        visible={isBottomSheetOpen}
+        onClose={handleDismissBottomSheet}
+        onReportIssue={handleReportIssue}
+        onRecordIssue={handleRecordIssue}
+        onChooseMedia={handleChooseMedia}
+        themeColor={themeColor}
+        isShakeDisabled={isShakeDisabled}
+        onDisableShake={handleDisableShake}
+        onEnableShake={handleEnableShake}
+        screenshot={capturedScreenshot}
+      />
+
+      <CustomeAlert
+        isVisible={isAlert}
+        text={isAlertText}
+        color={themeColor}
+        OnPrees={() => {
+          setIsAlert(false);
+          setIsAlertText('');
+        }}
+      />
+
+      <LoadingModal visible={isLoading} color={themeColor} />
     </View>
   );
-
-}
+};
 
 export default ShakeFunction;