shakebug-react-native 2.4.9 → 2.4.11

package/src/APIs/StartSession.js

@@ -2,10 +2,10 @@ import { NativeModules } from "react-native";
 import DeviceInfo from "../../DeviceInfo";
 import { getLocales } from "../../GetLocals/src";
 
-const BASE_URL = global.ShakebugSDKEndPointURL;
-const API_KEY = global.ShakebugSDKEndPointURLheaderKey;
-
 async function SessionStartApi(latitude, longitude, application_id) {
+    const BASE_URL = global.ShakebugSDKEndPointURL || "https://www.shakebug.com/api/v1.6/webservice.php/";
+    const API_KEY = global.ShakebugSDKEndPointURLheaderKey || "MarchShake2022";
+
 
     let city = "";
     let state = ""
@@ -57,24 +57,35 @@ async function SessionStartApi(latitude, longitude, application_id) {
 
     let architecture = await DeviceInfo.supportedAbis()
 
+    const requestPayload = {
+        method: "startSession",
+        uuid: uuid || "",
+        applicationsid: application_id || "",
+        systemversion: system_version || "",
+        os: os || "",
+        language: (locals && locals[0]) ? locals[0].languageCode : "",
+        country: (locals && locals[0]) ? locals[0].countryCode : "",
+        phonename: (device_name || "").replace(/'/g, ""),
+        devicemodel: (architecture && architecture[0]) ? architecture[0] : "",
+        city: city || "",
+        state: state || "",
+        latitude: latitude === undefined || latitude === null ? "" : latitude,
+        longitude: longitude === undefined || longitude === null ? "" : longitude,
+        phonecarrier: phone_carrier || "",
+        appversion: app_version || "",
+        custom_user_id: Custom_User_Id || "",
+        sdk_version: global.sdk_version || "",
+        sdk_platform: global.sdk_platform || "",
+        sdk_platform_version: global.sdk_platform_version || ""
+    };
+
+    console.log("➡️ [Shakebug] SessionStartApi Request URL:", BASE_URL);
+    console.log("➡️ [Shakebug] SessionStartApi Payload:", requestPayload);
+
     const formData = new FormData();
-    formData.append("method", "startSession")
-    formData.append("uuid", uuid)
-    formData.append("applicationsid", application_id)
-    formData.append("systemversion", system_version)
-    formData.append("os", os)
-    formData.append("language", locals[0].languageCode)
-    formData.append("country", locals[0].countryCode)
-    formData.append("phonename", device_name)
-    formData.append("devicemodel", architecture[0])
-    formData.append("city", city)
-    formData.append("state", state)
-    formData.append("latitude", latitude)
-    formData.append("longitude", longitude)
-    formData.append("phonecarrier", phone_carrier)
-    formData.append("appversion", app_version)
-    formData.append("custom_user_id", Custom_User_Id || "")
-    formData.append("sdk_version", global.sdk_version)
+    Object.keys(requestPayload).forEach(key => {
+        formData.append(key, requestPayload[key]);
+    });
     
     try {
         const response = await fetch(BASE_URL, {
@@ -85,7 +96,17 @@ async function SessionStartApi(latitude, longitude, application_id) {
             body: formData,
         });
 
-        const data = await response.json();
+        const responseText = await response.text();
+        console.log("⬅️ [Shakebug] SessionStartApi Raw Response:", responseText);
+
+        let data;
+        try {
+            data = JSON.parse(responseText);
+        } catch (parseError) {
+            console.error("❌ [Shakebug] Server returned invalid JSON. Could not parse:", responseText);
+            return { success: false, message: "Invalid server response" };
+        }
+
         if (data.code === 200 && data.success === true) {
             const session_id = data.response_data.session_id;
             return { success: true, session_id, message: data.msg };
@@ -93,8 +114,8 @@ async function SessionStartApi(latitude, longitude, application_id) {
             return { success: false, message: data.msg };
         }
     } catch (error) {
-        // console.error('Error fetching data:', error);
-        // throw error;
+        console.error('❌ [Shakebug] Error fetching data:', error);
+        return { success: false, message: "Network error" };
     }
 }
 

package/src/Componanats/LoadingModal.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, ActivityIndicator, StyleSheet, Text } from 'react-native';
+
+const LoadingModal = ({ visible, color = '#1dd3e3', text = '' }) => {
+  if (!visible) return null;
+
+  return (
+    <View style={styles.overlay} pointerEvents="auto">
+      <View style={styles.backdrop} />
+      <View style={styles.indicatorContainer}>
+        <ActivityIndicator size="large" color={color} />
+        {text ? <Text style={styles.text}>{text}</Text> : null}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 99999,
+    elevation: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.65)',
+  },
+  indicatorContainer: {
+    padding: 24,
+    backgroundColor: '#ffffff',
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.35,
+    shadowRadius: 8,
+    elevation: 10,
+    zIndex: 100000,
+  },
+  text: {
+    marginTop: 12,
+    fontSize: 14,
+    color: '#333333',
+    fontWeight: '500',
+  },
+});
+
+export default LoadingModal;

package/src/Componanats/ShakeFunction.js

@@ -13,9 +13,11 @@ console.ignoredYellowBox = ["Warning: Each", "Warning: Failed", "Possible", "WAR
 import { logger, consoleTransport } from "react-native-logs";
 import { ActivityIndicator } from 'react-native';
 import { useGlobalState } from './GlobalStateContext';
+import LoadingModal from './LoadingModal';
 
 LogBox.ignoreAllLogs()
 
+let intervalId = null;
 const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitle, allowToReportBugByShaking, allowToReportBugByScreenCapture, allowCrashReport }) => {
 
   const { ShakebugSDKScreenShotDetector, ShakebugSDKSharedPreferencesModule, ShakebugSDKCustomScreenCapture} = NativeModules;
@@ -104,6 +106,20 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
     return global.allowBugReport !== false && allowToReportBugByShaking !== false;
   };
 
+  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);
+      }
+    });
+    return () => triggerSubscription.remove();
+  }, []);
+
   setUpdateIntervalForType(SensorTypes.accelerometer, 200);
 
   let iscrashSaveed = ""
@@ -241,6 +257,9 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
   }, []);
 
   const startTimer = () => {
+    if (intervalId) {
+      clearInterval(intervalId);
+    }
     startTimeRef.current = Date.now();
     intervalId = setInterval(() => {
       if (global.isRecording) {
@@ -253,15 +272,16 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
   const updateTimer = (elapsed) => {
     const min = Math.floor(elapsed / 60);
     const sec = parseInt(elapsed % 60);
+    const durationLimit = parseInt(global.videoDuration) || 20;
 
-    if (elapsed == global.videoDuration) {
+    if (elapsed == durationLimit) {
       clearInterval(intervalId);
       setTimeout(() => {
         Stop()
       }, 1000)
     }
 
-    if (elapsed > global.videoDuration) {
+    if (elapsed > durationLimit) {
       RecordScreen.stopRecording()
         .then(() => {
           global.isMic = false;
@@ -386,8 +406,9 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
 
   }, [isFocused])
 
-  const OpenShakebug = async () => {
-    if (!isBugReportingEnabled()) {
+  const OpenShakebug = async (bypassShakeCheck = false) => {
+    if (!bypassShakeCheck && !isBugReportingEnabled()) {
+      log.warn("OpenShakebug aborted: Bug reporting is disabled.");
       return;
     }
     setIsScreenShot(true)
@@ -405,8 +426,14 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
           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).");
       }
+    } else {
+      log.warn("OpenShakebug aborted: Missing application_id or session_id. App_Id:", global.application_id, "Session_Id:", global.session_id);
     }
   }
 
@@ -523,16 +550,7 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
 
       </ShakebugCapture>
 
-      {isLoading &&
-        <View
-          style={{
-            ...StyleSheet.absoluteFillObject,
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-          }}
-        />
-      }
-
-      {isLoading && <ActivityIndicator size={'large'} color={themeColor} collapsable={true} style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, elevation: 2 }} />}
+      <LoadingModal visible={isLoading} color={themeColor} />
       {isShow ? (
         <Animated.View
           {...panResponder.panHandlers}

package/src/Screens/AddDetailsScreen.js

@@ -12,6 +12,7 @@ import { ScrollView } from 'react-native';
 import KeyboardAvoidingWrapper from '../Componanats/KeyboardAvoidingWrapper';
 import { useGlobalState } from '../Componanats/GlobalStateContext';
 import CustomeAlert from '../Componanats/CustomAlert';
+import LoadingModal from '../Componanats/LoadingModal';
 import NetInfo from '../../NetInfo/src';
 import DeviceInfo from '../../DeviceInfo';
 
@@ -92,10 +93,11 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
             try {
 
                 const { create: createThumbnail } = CreateThumbnail;
+                const cleanVideoPath = path ? path.replace('file://', '') : '';
 
                 const thumbnail = await createThumbnail({
-                    url: `file://${path}`,
-                    timeStamp: 10000,
+                    url: `file://${cleanVideoPath}`,
+                    timeStamp: 1000,
                 })
 
                 if (thumbnail) {
@@ -145,6 +147,7 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
     // For open Video picker
     const openVideoPicker = () => {
         global.IsBackground = "false"
+        setIsLoading(true)
 
         const options = {
             mediaType: 'video',
@@ -153,26 +156,26 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
         };
 
         launchImageLibrary(options, async (response) => {
-            setIsLoading(true)
             if (response.didCancel) {
                 setIsLoading(false)
-                global.IsBackground = "fa"
+                global.IsBackground = "false"
                 // console.log('User cancelled image picker');
-            } else if (response.error) {
+            } else if (response.error || response.errorCode) {
                 setIsLoading(false)
                 global.IsBackground = "true"
                 // console.log('Image picker error: ', response.error);
             } else {
-                setIsLoading(false)
                 global.IsBackground = "true"
                 let videoUri = await response.uri || response.assets?.[0]?.uri;
-                if (response.assets?.[0]?.type.slice(0, 5).trim() == "video") {
+                if (response.assets?.[0]?.type?.slice(0, 5).trim() == "video") {
                     if (mediaType == "img")
                         navigate("TrimVideoScreen", { video: `${videoUri}`, Type: "imgReplacedWithVideo", themeColor: ThemeColor, SDKScreenTitle: SDKScreenTitle, UpdateStatusBar: UpdateStatusBar, updateParent: updateParent })
                     else
                         navigate("TrimVideoScreen", { video: `${videoUri}`, Type: "videoReplacedWithVideo", themeColor: ThemeColor, SDKScreenTitle: SDKScreenTitle, UpdateStatusBar: UpdateStatusBar, updateParent: updateParent })
+                    setIsLoading(false)
                 }
                 else {
+                    setIsLoading(false)
                     setAPIMessage("Invalid selection, Please choose a valid video file")
                     setErrorInAPI(true)
                 }
@@ -184,25 +187,24 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
     // For open image picker
     const openImagePicker = () => {
         global.IsBackground = "false"
+        setIsLoading(true)
         const options = {
             mediaType: 'photo',
             includeBase64: false,
             selectionLimit: 1
         };
         launchImageLibrary(options, async (response) => {
-            setIsLoading(true)
             if (response.didCancel) {
                 setIsLoading(false)
                 global.IsBackground = "true"
                 // console.log('User cancelled image picker');
-            } else if (response.error) {
+            } else if (response.error || response.errorCode) {
                 setIsLoading(false)
                 global.IsBackground = "true"
                 // console.log('Image picker error: ', response.error);
             } else {
-
                 global.IsBackground = "true"
-                if (response.assets?.[0]?.type.slice(0, 5).trim() == "image") {
+                if (response.assets?.[0]?.type?.slice(0, 5).trim() == "image") {
                     let imageuri = await response.uri || response.assets?.[0]?.uri;
                     setIsLoading(false)
                     if (imageuri != "" || imageuri != undefined) {
@@ -217,6 +219,7 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
                     }
                 }
                 else {
+                    setIsLoading(false)
                     setAPIMessage("Invalid selection, Please choose a valid image file")
                     setErrorInAPI(true)
                 }
@@ -285,13 +288,18 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
     }
 
     return (
-        <SafeAreaView style={{ flex: 1, backgroundColor: ThemeColor, paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 }}>
+        <View style={{ flex: 1, backgroundColor: '#fff' }}>
             <StatusBar backgroundColor={ThemeColor} hidden={false} barStyle="dark-content" />
-            <View style={{
-                flex: 1,
-                backgroundColor: "#fff",
-                paddingBottom: Platform.OS === 'android' ? 48 : 0 // Standard bottom navigation bar height
-            }}>
+            <SafeAreaView style={{ flex: 0, backgroundColor: ThemeColor }} />
+            {Platform.OS === 'android' && StatusBar.currentHeight ? (
+                <View style={{ height: StatusBar.currentHeight, backgroundColor: ThemeColor }} />
+            ) : null}
+            <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
+                <View style={{
+                    flex: 1,
+                    backgroundColor: "#fff",
+                    paddingBottom: Platform.OS === 'android' ? 48 : 0 // Standard bottom navigation bar height
+                }}>
                 <KeyboardAvoidingWrapper>
                     <>
                         <View style={{ height: '6%', padding: 5, paddingHorizontal: 15, backgroundColor: ThemeColor, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
@@ -436,7 +444,7 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
                         <CustomeAlert
                             isVisible={isErrorInAPI || isBugReported}
                             text={apiMessage}
-                            color={themeColor}
+                            color={ThemeColor}
                             OnPrees={() => {
                                 if (isBugReported) {
                                     global.isScreenShotDetected = false;
@@ -449,24 +457,13 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
                                 setIsLoading(false)
                             }}
                         />
-
-
-                        {isLoading &&
-                            <View
-                                style={{
-                                    ...StyleSheet.absoluteFillObject,
-                                    backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                                }}
-                            />
-                        }
-
-                        {isLoading &&
-                            <ActivityIndicator size={'large'} color={themeColor} collapsable={true} style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, elevation: 2 }} />}
                     </>
                 </KeyboardAvoidingWrapper>
             </View>
 
         </SafeAreaView>
+        <LoadingModal visible={isLoading} color={ThemeColor} />
+        </View>
     )
 }
 

package/src/Screens/FirstScreen.js

@@ -11,6 +11,7 @@ import { ActivityIndicator } from 'react-native';
 import DeviceInfo from '../../DeviceInfo';
 import { useGlobalState } from '../Componanats/GlobalStateContext.js';
 import CustomeAlert from '../Componanats/CustomAlert.js';
+import LoadingModal from '../Componanats/LoadingModal.js';
 
 console.disableYellowBox = true;
 console.ignoredYellowBox = ["Warning: Each", "Warning: Failed", "Possible"];
@@ -108,6 +109,7 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
 
   // open Video picker to choose video
   const openVideoPicker = () => {
+    setIsLoading(true)
     const options = {
       mediaType: 'video',
       includeBase64: false,
@@ -115,19 +117,19 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
     };
 
     launchImageLibrary(options, async (response) => {
-      setIsLoading(true)
       if (response.didCancel) {
         setIsLoading(false)
-      } else if (response.error) {
+      } else if (response.error || response.errorCode) {
         setIsLoading(false)
         // console.log('Image picker error: ', response.error);
       } else {
         let vedioUri = await response.uri || response.assets?.[0]?.uri;
-        if (response.assets?.[0]?.type.slice(0, 5).trim() == "video") {
+        if (response.assets?.[0]?.type?.slice(0, 5).trim() == "video") {
           setIsLoading(false)
           navigate("TrimVideoScreen", { video: `${vedioUri}`, Type: "video", themeColor: `${ThemeColor}`, SDKScreenTitle: `${SDKScreenTitle}`, UpdateStatusBar: UpdateStatusBar, updateParent: updateImage })
         }
         else {
+          setIsLoading(false)
           setIsAlertText("Invalid selection, Please choose a valid video file")
           setIsAlert(true)
         }
@@ -310,9 +312,13 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
   // backgroundColor: "#181818"
 
   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: ThemeColor, paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 }}>
-        <StatusBar backgroundColor={ThemeColor} barStyle="dark-content" />
-        
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <StatusBar backgroundColor={ThemeColor} barStyle="dark-content" />
+      <SafeAreaView style={{ flex: 0, backgroundColor: ThemeColor }} />
+      {Platform.OS === 'android' && StatusBar.currentHeight ? (
+        <View style={{ height: StatusBar.currentHeight, backgroundColor: ThemeColor }} />
+      ) : null}
+      <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
         <View style={{
           flex: 1,
           backgroundColor: "#e4fdfd",
@@ -547,28 +553,19 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
           </KeyboardAvoidingView>
         </View>) : null}
 
-        {isLoading &&
-          <View
-            style={{
-              ...StyleSheet.absoluteFillObject,
-              backgroundColor: 'rgba(0, 0, 0, 0.4)',
-            }}
-          />
-        }
-
         <CustomeAlert
           isVisible={isAlert}
           text={isAlertText}
-          color={themeColor}
+          color={ThemeColor}
           OnPrees={() => {
             setIsAlert(false)
             setIsAlertText("")
           }}
         />
 
-        {isLoading && <ActivityIndicator size={'large'} color={themeColor} collapsable={true} style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, elevation: 2 }} />}
-
       </SafeAreaView>
+      <LoadingModal visible={isLoading} color={ThemeColor} />
+    </View>
   )
 }
 

package/src/Screens/Shakebug.js

@@ -49,7 +49,7 @@ global.isRecording = false
 global.isScreenShotDetected = false
 global.ShakebugLanguage = "ENGLISH"
 global.makeLogEnabled = false
-global.ShakebugSDKEndPointURL = "https://www.shakebug.com/api/v1.5/webservice.php/";
+global.ShakebugSDKEndPointURL = "https://www.shakebug.com/api/v1.6/webservice.php/";
 global.ShakebugSDKEndPointURLheaderKey = 'MarchShake2022';
 global.AllowVideo = false;
 global.total_video = 0;
@@ -63,7 +63,7 @@ global.isScreeenShotTaken = false;
 global.restrictedViews = [];
 global.currentScreen = ""
 global.isShakebugSDKOpen = false;
-global.sdk_version = "2.4.9";
+global.sdk_version = "2.4.11";
 global.app_lunch_count = 0;
 global.POPUP_LAUNCH_THRESHOLD = 3;
 global.POPUP_COOLDOWN_DAYS = 2;
@@ -75,7 +75,12 @@ global.allowEvent = true;
 global.allowReview = true;
 global.allowSession = true;
 global.shakebug_type = "1"; // default allow all
-
+global.sdk_platform = "react-native";
+try {
+  global.sdk_platform_version = require("react-native/package.json").version;
+} catch (error) {
+  global.sdk_platform_version = "";
+}
 
 const ShakebugContext = React.createContext();
 
@@ -204,7 +209,7 @@ function Shakebug({ children, Android_appkey, iOS_appkey, showTutorialScreenFirs
   const [focusedScreen, setFocusedScreen] = useState('');
   global.ShakebugLanguage = ShakebugLanguage;
   global.makeLogEnabled = makeLogEnabled;
-  global.ShakebugSDKEndPointURL = setShakebugSDKEndPointURL[0].length > 0 ? setShakebugSDKEndPointURL[0] : "https://www.shakebug.com/api/v1.5/webservice.php/";
+  global.ShakebugSDKEndPointURL = setShakebugSDKEndPointURL[0].length > 0 ? setShakebugSDKEndPointURL[0] : "https://www.shakebug.com/api/v1.6/webservice.php/";
   global.ShakebugSDKEndPointURLheaderKey = setShakebugSDKEndPointURL[1].length > 0 ? setShakebugSDKEndPointURL[1] : "MarchShake2022";
 
 
@@ -291,12 +296,12 @@ function Shakebug({ children, Android_appkey, iOS_appkey, showTutorialScreenFirs
           const afterDaysTimestamp = now + sevenDaysInMs;
 
           if (LAST_POPUP_TIME > afterDaysTimestamp) {
-            setShowModal(true)
+            setTimeout(() => { setShowModal(true) }, 15000);
           }
 
         }
         else if (IS_REVIEW_SUBMITTED != "true") {
-          setShowModal(true)
+          setTimeout(() => { setShowModal(true) }, 15000);
         }
       }
 

package/src/Screens/TrimVideoScreen.js

@@ -1,26 +1,27 @@
-import { NativeEventEmitter, NativeModules, Platform, SafeAreaView, StatusBar } from 'react-native'
+import { DeviceEventEmitter, NativeEventEmitter, NativeModules, Platform, SafeAreaView, StatusBar, View } from 'react-native'
 import React, { useEffect, useState } from 'react'
-import { showEditor } from 'react-native-video-trim';
+import { showEditor } from '../../trimVideo/src/index';
 import { useNavigation } from '../Componanats/NavigationContext';
 import { Localization } from '../Componanats/localization';
+import LoadingModal from '../Componanats/LoadingModal';
 
 console.ignoredYellowBox = ["Warning: Each", "Warning: Failed"];
 
-
-
 const TrimVideoScreen = ({ video, themeColor, SDKScreenTitle, Type, UpdateStatusBar, updateParent }) => {
 
   const { goToScreenAtIndex, navigate, goBack } = useNavigation();
+  const [loading, setLoading] = useState(true);
 
+  const ThemeColor = themeColor ? themeColor : "#1dd3e3";
 
   // For display video trimmer
   useEffect(() => {
     StatusBar.setHidden(true)
 
     const uri = video; // your path
-    const trimmedUri = uri.replace('file://', '');
+    const cleanUri = uri.replace('file://', '');
 
-    showEditor(Platform.OS == 'android' ? trimmedUri : video, {
+    showEditor(cleanUri, {
       saveButtonText: Localization[global.ShakebugLanguage].Choose,
       cancelButtonText: Localization[global.ShakebugLanguage].Cancel,
       trimmingText: Localization[global.ShakebugLanguage].TrimmingText,
@@ -38,50 +39,64 @@ const TrimVideoScreen = ({ video, themeColor, SDKScreenTitle, Type, UpdateStatus
       saveDialogConfirmText: Localization[global.ShakebugLanguage].Yes
     });
 
-    const eventEmitter = new NativeEventEmitter(NativeModules.VideoTrim);
-    const subscription = eventEmitter.addListener('VideoTrim', (event) => {
+    const handleVideoTrimEvent = (event) => {
       switch (event.name) {
         case 'onShow': {
+          setLoading(false);
           break;
         }
         case 'onHide': {
           break;
         }
         case 'onStartTrimming': {
+          // The native side displays "Trimming video..." dialog, so we don't need a React Native loader here
           break;
         }
         case 'onFinishTrimming': {
-          global.IsBackground = 'true'
-          UpdateStatusBar()
+          global.IsBackground = 'true';
+          UpdateStatusBar();
           navigate("AddDetailsScreen", { media: `${event.outputPath}`, mediaType: 'video', themeColor: themeColor, SDKScreenTitle: SDKScreenTitle, updateParent: updateParent });
           return;
         }
         case 'onCancel': {
-          UpdateStatusBar()
+          UpdateStatusBar();
           if (Type == "video") {
-            goToScreenAtIndex(1)
-          }
-          else if (Type == "imgReplacedWithVideo") {
-            goBack()
-          }
-          else if (Type == "videoReplacedWithVideo") {
-            goToScreenAtIndex(3)
+            goToScreenAtIndex(1);
+          } else if (Type == "imgReplacedWithVideo") {
+            goBack();
+          } else if (Type == "videoReplacedWithVideo") {
+            goToScreenAtIndex(3);
           }
           return;
-          break;
         }
         case 'onError': {
+          setLoading(false);
           break;
         }
       }
-    });
+    };
+
+    let subscription;
+    if (Platform.OS === 'android') {
+      subscription = DeviceEventEmitter.addListener('VideoTrim', handleVideoTrimEvent);
+    } else {
+      const videoTrimModule = NativeModules.ShakebugSDKVideoTrim || NativeModules.VideoTrim;
+      const eventEmitter = new NativeEventEmitter(videoTrimModule);
+      subscription = eventEmitter.addListener('VideoTrim', handleVideoTrimEvent);
+    }
 
     return () => {
-      subscription.remove();
+      if (subscription && subscription.remove) {
+        subscription.remove();
+      }
     };
   }, [])
 
-  return;
+  return (
+    <View style={{ flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }}>
+      <LoadingModal visible={loading} color={ThemeColor} />
+    </View>
+  );
 }
 
 export default TrimVideoScreen;